Make Piwik look nice on Apple Retina displays - better icons?

[tsteur]

Goal of this issue is to replace most icons with font-icons or alternatively sharper icons in higher resolution. For example there are media selectors to target these devices etc see eg http://ivomynttinen.com/blog/a-guide-for-creating-a-better-retina-web/

We've identified a few blurry icons in #8869 . Part of this issue will be to identify all the blurry icons / images. Ideally we would even provide sharp custom favicon/logo when user uploads it in higher resolution (maybe it is already the case).

From @quba in https://github.com/piwik/piwik/issues/8869#issuecomment-144126140

I confirm. All icons in dashboard also need to be updated (folders, browsers, OS, etc.).

From @tsteur in https://github.com/piwik/piwik/issues/886

Footer icons in data tables are very unsharp as well

Same for Piwik update screen. The logo on top is not SVG and therefore blurry.

MacBooks with Retina display are used quite often nowadays I'd say. Especially under developers and decision makers from my personal experience. Therefore it can be quite good value to improve this as it currently does not look good / professional.

[tsteur]

Exporting a graph as image looks like this:

[mattab]

@tsteur that's weird, it was supposed to be fixed in https://github.com/piwik/piwik/issues/4594

maybe we regressed after updating jqplot and we lost some fix?

[tsteur]

That's possible although I thought we did apply patches to it again

[tsteur]

It would be really nice to update all the icons used in data tables and especially the ones in the report as this would make quite a bit of a difference. If anyone has an idea for icons for browsers, operating systems, flags/countries, plugins, device types, device brands, ... this would be of great help. Ideally the icons have a good quality / high resolution and are transparent.

[tsteur]

I checked most icons and turns out we have already most of them available as font icons. Here are some icons that we might still need:

Not sure if we can actually use these via fonts but would be good to have: https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/forms-sprite.png

http://demo.piwik.org/plugins/Live/images/visitorProfileLaunch.png (with colors if possible, looks nice that way instead of just being able to define one color) https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/event.png

http://demo.piwik.org/plugins/MobileMessaging/images/phone.png https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/html_icon.png

http://demo.piwik.org/plugins/Morpheus/images/link.gif

There is an icon-plus and icon-minus in the font icon but this one is bit different: https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/minus.png https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/plus.png

https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/row_evolution.png (there is an icon for chart but it is for https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/chart_line_edit.png). Needed for row actions eg in Pages report

The Piwik logo: https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/logo-header.png

Can we get the loading icon in high res? https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/loading-blue.gif see also https://github.com/piwik/piwik/issues/8987 maybe we could at some point just do one via JavaScript and/or another library

Can we get the paypal subscribe icons and the smileys in high res? https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/paypal_subscribe.gif https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/smileyprog_0.png https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/smileyprog_1.png https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/smileyprog_2.png https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/smileyprog_3.png https://github.com/piwik/piwik/blob/master/plugins/Morpheus/images/smileyprog_4.png

[mattab]

Adding Major tag. We'll need to find a good solution regarding keeping our icons set high quality, how to get new icons designed, could we use both our custom set and other icon sets, etc.

[JamesAndersonJr]

Here's an interesting find: https://icomoon.io/ or Google: "icomoon".

Remember to be flexible and maybe integrate different font icon sets into Piwik to get the overall best presentation.

I.e. Font Awesome, GlyphIcons, and IcoMoon can all be used in the same project simultaneously.

[mattab]

Hi @JamesAndersonJr both Glyphicons are icoMoon are not released under an open source license so we cannot use them

[mattab]

Hi @lemu - we need your help for closing this issue and making Piwik icons look awesome!

[lipis]

Yes please!

[mattab]

Hi @zawadzinski @lemu I've asked by email privately but didn't hear back. so now trying to ask publicly in the issue tracker. As we are making good progress on Piwik 3, we need an answer soon regarding whether @PiwikPro will contribute the new remaining needed icons under open source GPL-compatible license. Could you advise please? even saying "no" is useful here. Thanks

[mattab]

@tsteur are there still some icons that don't look good on Retina display or did we fix all these issues?

[tsteur]

Yes eg row actions and segment edit icon. There might be more but would need to click through all of Piwik's features :)

[tsteur]

The folders in the real time widget, the visitor log / real time icons are blurry as well.

[JamesAndersonJr]

Font icons definitely need to be used for the 'devices' in Piwik, because as of now, they are still blurry in both Firefox, and Chrome, on a Windows Desktop, with a 1920x1080 screen-res.

[Findus23]

@JamesAndersonJr, that's odd. The images are 3 times the resolution they are displayed (16px vs 48px) so they shouldn't be blurry. Can you maybe test if adding any image-rendering: CSS value to the img improves rendering? (more info

[JamesAndersonJr]

This seemed to make things look a little better:

img, input[type=image]
    {
        image-rendering: -o-crisp-edges;    /* Opera                          */
        image-rendering: -webkit-crisp-edges;   /* Chrome (and eventually Safari) */
    }

[mattab]

would be great to finally be able to close this ticket

@Findus23 maybe you could help us with this?

[Findus23]

@JamesAndersonJr I think I need your help to fix this.

I tested this url, as it has some quite different icons: https://demo.piwik.org/index.php?module=CoreHome&action=index&idSite=3&period=day&date=yesterday#?idSite=3&period=month&date=2017-06-16&category=General_Visitors&subcategory=DevicesDetection_Devices

I am mostly using Linux (with 1920x1080) and for me the icons display the same in Firefox and Chromium for every image-rendering value (except for pixelated, but that's obviously a change in the wrong direction)

I tested my desktop PC with Windows 10 and Chrome and the icons look the the same as with Linux (not really blurry, but one can't read Samsung or Huawai). Again the css options don't change anything.

As a comparison I tested the same site on an iPad Air 2 (2048x1536) and there is a huge difference. All icons look pretty sharp and on can read Huawei inside the logo.

Is it possible that the "blurriness" is just because on a HD screen the icons are displayed 16px wide and it's hard to print 5 letters with only 3px each?

Until someone volunteers to redraw about 300 icons as svg (and even then it is still up to the browser/os how to raster the vector graphic into the 16x16px space on the screen) I don't know if we can improve the icon display on HD monitors..

To get back to the original topic of this issue: Does anyone have a device with a HiDPI display running something different than MacOS and can test if the icons look well in other browsers?

[JamesAndersonJr]

As far as I know, I think it was a bug in Chromium-based browsers (it used to look horribly blurry, now it's just a little blurry -even furry, lol!), as Firefox was still not sharp either, but slightly better than Chromium-based browsers, such as Google Chrome, & Opera: Now:

img, input[type=image]
    {
        image-rendering: auto;
    }

...is the best many different browsers can offer.

Bottom-Line: Font-based graphics, such as Font-Awesome, and IcoMoon* are the best way to go for monochromatic glyphs, but if you want more polish, and colorful icons, as Lukas illuded to, SVG is the best option, just keep THIS in mind too, and you'll be good to go.

* NOTE: To avoid licensing issues, IcoMoon allows use of "self-created" icons, where you don't have to even use their home-brewed, in-house icons, but just use their online app service, to compile your own icons into fonts, and the rights still belong to the original creator; not IcoMoon - Just food for thought. So, this may still be an option.

[JamesAndersonJr]

BTW, I'm still using THIS ASUS 1080p monitor, running off of a EVGA NVIDIA GeFore GTX 750 Ti 2 GB and even the monochromatic icons, on THIS page, look pretty bad (cross-browser), as of 07-02-2017 3:00 PM (EST).

To see the benefit of using font-based icons, visit THIS page. Do you see the fidelity of the Amazon logo, and video icon on the buttons? That was created, using unique icons, with IcoMoon's services.

[Findus23]

@JamesAndersonJr

I am not sure we are talking about the same thing. In piwik there are multiple type of icons. On one hand there are application icons like that are currently replaced by @tsteur with an icon font. (#10946) But the icons I am talking about are the "mass" icons: browser icons, flags and similar icons, that are too many to convert manually. Because of that I created an script that converted the images from various sources and different file formats to optimized png files. (https://github.com/piwik/piwik-icons)

Neither Font-Awesome nor IcoMoon can help with this as they (obviously) don't include the necessary icons. And loading this icon via an icon font won't change the fact that the source file is an 16px gif.

I also doubt that adding image-rendering: auto; will improve rendering as I guess it's the default value.

[JamesAndersonJr]

@Findus23 You're absolutely right! I don't know what the exact copyright laws are in Austria (Where you live), but in my country (USA) Google Images has a plethora of 3x-large [and beyond] sized icons for any brand, or product you could imagine. And as long as you're not using them in an "illegal" way (e.g. to use their brand, to sell or advertise a product not related to their brand), they are all covered under "Fair-Use" laws. Give me a week, and I can have all of these icons at at least 128x128 if not larger, given that I can find suitable replacements on Google Images, and use GIMP, or Paint.NET to scale them to similar sizes.

In the meantime, take a look at THIS site. They have absolutely nailed (mastered) what we're trying to accomplish with Piwik. Their browser, and device icons are always sharp and clean! Also, notice how the browser icons are not the same for different versions of the same browser (For example, the icon for IE8 is not the same icon as IE9, or IE10). Now that is awesome!

[Findus23]

Hi, thanks for the suggestion. If you have better source icons feel free to open pull requests on the src/ directory in https://github.com/piwik/piwik-icons. (The resizing is already automated with a bash script

I am not sure we are viewing the same page. The browser logos here are only 52px large (so they are smaller than the ones in Piwik) and I am not sure a comparison between Tablets and Chrome makes any sense. The icons on the details page are only 12px large and as a result are horribly blurred

source

Also, notice how the browser icons are not the same for different versions of the same browser

As I have mentioned in #11173: If someone implements this feature in Piwik, I'll provide the icons.

[JamesAndersonJr]

Oh, I see. So that's why they look ok on my 1920x1080 screen, because they're not resized/re-sampled by the browser, itself. They are WYSIWYG. @Findus23 are you on a 4K screen? Because, as I mentioned before, they're OK/decent (or relatively viewable) from my screen, just so long as you don't have any magnification enabled in your OS. Though, they probably look more horrible, as you said, when scaled-up, or even scaled-down. I'll will still try to dig up some higher res ones from Google Images, but I might use GIMP or Paint.NET to resize manually, because although using a bash script like the one you've programmed makes resizing easy, it doesn't always use the best resizing/scaling algorithm (For example, GIMP can use 'cubic interpolation' in scaling images), so it can make the image lose some of it's quality.

[Findus23]

Hi,

As I have mentioned before I only use 1920x1080 screens.

I know that resizing really depends on the inperpolation algorithm. Because of that I did a lot of testing and finally decided to use the -thumbnail parameter which combines multiple techniques and add an additional sharpening with -unsharp 0x1.

[JamesAndersonJr]

Oh, ok. It's my nations holiday, today (July 4th a.k.a. _"Independence Day"_). So while I'm home from work, I should have a little time to look into Google Images, as promised.

[JamesAndersonJr]

Just FFT (food for thought): Any icon represented as 16x16 on typical 1024x768 screen, needs to have a "source image" 2 x as large (32x32) for a typical 2K display, 4 x as large (64x64) for a typical 4K display, and 8 x as large (128x128) for a typical 8K display. Anything larger, just give up...Only kidding. ;-) For larger displays (as they arrive, and become mainstream), just follow the same pattern... A 16K display? More than we need, or more than we're used to? ;-)

Each source image needs to be a completely separate image, if possible (e.g. a 128x128 source image does not scale well to 16x16). So, when I recreate the images, I will create (4) folders (16x16, 32x32, 64x64, and 128x128), each with their own icons, at their own fidelity, then package them all up in a 'uncompressed' (just stored) zip file (appropriately named: piwik_src_icons.zip), with WinRAR, and post to my Dropbox, and send the link to @Findus23 , and/or post the link here, so the proper CSS, or JS script can be applied to fetch and use them properly.

32x32 icons will be suffixed with "_2x" in the file name, 64x64 icons, with "_4x" and 128x128, with "_8x" to make CSS and/or JS screen-dimension detection, and corresponding smart image fetching easier. Besides the aforementioned suffixes, all images between the folders will have the same corresponding image names, to make writing an appropriate CSS/JS script easier (e.g. to switch between different 'source image' sizes just change folder name, and suffix).

Hope this all turns out well!

[JamesAndersonJr]

piwik_src_icons.zip

I'm on a productive start. I'll need more time to complete the set though. I got rid of the uppercase files and folders, and replaced with single-case (lower-case) files and folders, to uncomplicate, and neaten the set.

Let me know if you think this will work before I finish the icon set.

[Findus23]

Hi, thanks for your work.

There is a reason why large open source projects are using git and GitHub and are not sending zip files around: It makes collaborating, seeing how the files evolved and keeping everything reproducible much easier. Please fork the piwik-icons repository, swap out the files in the src/ directory and create a pull request. I have also written a python script which runs some automated sanity check on every commit to make sure the new changes break nothing in piwik.

While I understand that the naming convention isn't ideal, this is because I replicated the names of plugins in piwik and the short codes of DeviceDetector.

Creating multiple image sizes is in my opinion a large expense with little gain. PNG is very good at compressing icons. the 64px icons are not much larger than they would be if we would load 16px icons And remember: we are talking about files which are around 500 bytes (!) large. The whole HTTP overhead (every cookie piwik sets) influences the file size a lot more.

Another note: To solve the copyright issue, I have to insist that you include a .source file for every icon which explains where the image is from and if you have modified it. (example)

To sum up: please stay at the established (git) way of keeping a structure in the mass of icons.

[Findus23]

About your icons:

• bing isn't a brand (at least in the way device-detector defines it
• dell, hp and microsoft are already svg icons so there is little to improve

[JamesAndersonJr]

Oh, ok. @Findus23 While I'm still working on the main set, here is the cleaned up device icons. These updated versions should eliminate some of the blur. You may turn these into fonts or svg. They are much cleaner than the originals. cleaner_device_icons.zip

Please Note: You may not be able to see the improved quality of the icons, on a Linux-based computer, because of the way it renders graphics. Always use Windows 7 or higher (e.g. Windows 10) when inspecting icons, to get the best view.

IMPORTANT EDIT: @Findus23 I just saw your previous post. I'll try to stick to the standard git way of doing things from now on. Thanks for the heads up! No more zip files from me, I promise! just 'pull' request. Hope I figure out how to convert all the work I've done into a 'pull' request.

[JamesAndersonJr]

BTW, here is the progress of the main icon set, as of 07-05-2017 3:50 PM (EST). Slow, and steady, but quality is at 100%, as it should be. piwik_src_icons.zip

IMPORTANT EDIT: @Findus23 I just saw your previous post. I'll try to stick to the standard git way of doing things from now on. Thanks for the heads up! No more zip files from me, I promise! just 'pull' request. Hope I figure out how to convert all the work I've done into a 'pull' request.

[JamesAndersonJr]

Convert the new 8x (128x128) Dell, HP, and Microsoft Icons into svg, because great care was taken to make them as accurate, and clean as possible. Can you post here, the svg versions of these icons you have, so I can compare?

IMPORTANT EDIT: @Findus23 I just saw your previous post. I'll try to stick to the standard git way of doing things from now on. Thanks for the heads up! No more zip files from me, I promise! just 'pull' request. Hope I figure out how to convert all the work I've done into a 'pull' request.

[JamesAndersonJr]

@Findus23 I just saw your previous post. I'll try to stick to the standard git way of doing things from now on. Thanks for the heads up! No more zip files from me, I promise! just 'pull' request. Hope I figure out how to convert all the work I've done into a 'pull' request.

[Findus23]

Hi,

Before you start investing more time, I want to make some things clear:

• I can only accept icon changes in the src/ directory of piwik-icons and no zip archives.
• I can only use icons that are expected by piwik. There is a reason why the files are named this way and while everything can be changed it always needs modification of the corresponding part of piwik (or device-detector)
• I need sources for every file
• Where have you got filehorse and adblock from? The former is no hardware manufacturer and the latter isn't detected by piwik.

[JamesAndersonJr]

I'm sorry @Findus23 I didn't see your previous post before I posted the other zip files. It won't happen again. Next update will be a pull request, as promised above.

[JamesAndersonJr]

@Findus23 can you check to see if you received my pull request?

[JamesAndersonJr]

Nevermind. Let me convert them to svg, because I remember you can only accept 'pull' request in the 'src' folder (according to your notes above).

[JamesAndersonJr]

While I convert the new device icons into svg, check out this link I just found, and let me know if we can use their resources (logo svg's).

[JamesAndersonJr]

How am I supposed to convert the new png's into svg? All converters I've found (e.g. http://image.online-convert.com/convert-to-svg and https://convertio.co/png-svg/ ) are all aweful. :-(

[Findus23]

Hi, converting from pixel graphics to vector graphics (svg) isn't possible in an automated way as information that isn't there can't be interpolated.

But that's not necessary as the source files are already SVGs as I got them from Googles material design icon collection: https://github.com/piwik/piwik-icons/tree/master/src/devices

While I convert the new device icons into svg, check out this link I just found, and let me know if we can use their resources (logo svg's).

From their terms of use:

The content of this site is intended for inspiration to create new logos. The logo designs are protected and may not be distributed modified or copied.

[Findus23]

@JamesAndersonJr You can look here: https://travis-ci.org/piwik/piwik-icons/jobs/250710708#L1076

My script produces a list of icons that need improvement, which is a good point to start.

[JamesAndersonJr]

You can look here: https://travis-ci.org/piwik/piwik-icons/jobs/250710708#L1076

My script produces a list of icons that need improvement, which is a good point to start.

Whoa! Thanks for the link. It helps clarify things a ton, but that is one-huge-list! And to have to write '.source' files for every improvement? I might be in well over my head! 8-o And I thought the '.ico' files in the src/searchEngines/ dir were in a permanent format. I'm working today, but I may be able to help when I get some free time. Until then, Good Luck!

[Findus23]

It is only that large because I try to list every icon (even the unimportant ones). Just scroll through the list and see if you recognize any name.

src/searchEngines/ and src/socials/ are a bit special as they are less important (and I was to lazy to manually collect the icons). Because of that I wrote a script to automatically download the favicons and touch icons. Because of that they are mostly .ico files. Today I replaced the most common ones (on demo.piwik.org) with "real" icons (https://github.com/piwik/piwik-icons/commit/f9f7b04aa27ac259f7b30fab5108b5ff02afc5de).

[JamesAndersonJr]

@Findus23 Those look great! Are they SVG's, ICO's or PNG's? I just wish there was some way to kindly ask these guy's for permission to use their SVG's, because they're flawless! It would save a ton of time/resources too!

[Findus23]

I always try to use a SVG if I find one and a high resolution png otherwise.

I doubt that their icons will help much as most of the missing icons are of pretty unknown sites/brands/browsers/os.

[tsteur]

I think that's done.