Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
tsteur opened this issue Nov 26, 2015 · 48 comments
Closed

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

tsteur opened this issue Nov 26, 2015 · 48 comments
Assignees
Labels
answered For when a question was asked and we referred to forum or answered it. Bug For errors / faults / flaws / inconsistencies etc. c: Design / UI For issues that impact Matomo's user interface or the design overall. Help wanted Beginner friendly issues or issues where we'd highly appreciate community's help and involvement. Major Indicates the severity or impact or benefit of an issue is much higher than normal but not critical.

Comments

@tsteur
Copy link
Member

tsteur commented Nov 26, 2015

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 #8869 (comment)

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

From @tsteur in #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 tsteur added Bug For errors / faults / flaws / inconsistencies etc. c: Design / UI For issues that impact Matomo's user interface or the design overall. labels Nov 26, 2015
@tsteur
Copy link
Member Author

tsteur commented Nov 26, 2015

Exporting a graph as image looks like this:

image

@mattab
Copy link
Member

mattab commented Nov 27, 2015

@tsteur that's weird, it was supposed to be fixed in #4594

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

@tsteur
Copy link
Member Author

tsteur commented Nov 27, 2015

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

@tsteur
Copy link
Member Author

tsteur commented Dec 10, 2015

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
Copy link
Member Author

tsteur commented Dec 17, 2015

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

image

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

image

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

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

image

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 #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 mattab added this to the 3.0.0 milestone Dec 23, 2015
@mattab mattab added the Major Indicates the severity or impact or benefit of an issue is much higher than normal but not critical. label Apr 21, 2016
@mattab
Copy link
Member

mattab commented Apr 21, 2016

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.

@mattab mattab changed the title Make Piwik look nice on Apple Retina displays Make Piwik look nice on Apple Retina displays - better icons? Apr 27, 2016
@JamesAndersonJr
Copy link

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.

@tsteur tsteur self-assigned this May 29, 2016
@mattab
Copy link
Member

mattab commented May 30, 2016

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

@mattab mattab assigned tsteur and unassigned tsteur May 30, 2016
@mattab
Copy link
Member

mattab commented May 30, 2016

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

@lipis
Copy link
Contributor

lipis commented Sep 22, 2016

Yes please!

@lipis lipis mentioned this issue Sep 22, 2016
@mattab
Copy link
Member

mattab commented Sep 27, 2016

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
Copy link
Member

mattab commented Jun 14, 2017

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

@tsteur
Copy link
Member Author

tsteur commented Jun 14, 2017

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

@tsteur
Copy link
Member Author

tsteur commented Jun 14, 2017

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

@JamesAndersonJr
Copy link

JamesAndersonJr commented Jul 3, 2017

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
Copy link
Member

Findus23 commented Jul 3, 2017

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
Copy link

JamesAndersonJr commented Jul 4, 2017

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
Copy link

JamesAndersonJr commented Jul 4, 2017

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
Copy link

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
Copy link
Member

Findus23 commented Jul 5, 2017

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
Copy link
Member

Findus23 commented Jul 5, 2017

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
Copy link

JamesAndersonJr commented Jul 5, 2017

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
Copy link

JamesAndersonJr commented Jul 5, 2017

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
Copy link

JamesAndersonJr commented Jul 5, 2017

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
Copy link

JamesAndersonJr commented Jul 5, 2017

@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
Copy link
Member

Findus23 commented Jul 5, 2017

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
Copy link

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
Copy link

JamesAndersonJr commented Jul 5, 2017

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

@JamesAndersonJr
Copy link

JamesAndersonJr commented Jul 5, 2017

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
Copy link

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
Copy link

JamesAndersonJr commented Jul 5, 2017

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
Copy link
Member

Findus23 commented Jul 6, 2017

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
Copy link
Member

Findus23 commented Jul 6, 2017

@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
Copy link

JamesAndersonJr commented Jul 6, 2017

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
Copy link
Member

Findus23 commented Jul 6, 2017

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 (matomo-org/matomo-icons@f9f7b04).

@JamesAndersonJr
Copy link

JamesAndersonJr commented Jul 7, 2017

@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
Copy link
Member

Findus23 commented Jul 8, 2017

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.

@mattab mattab added the Help wanted Beginner friendly issues or issues where we'd highly appreciate community's help and involvement. label Oct 6, 2017
@tsteur
Copy link
Member Author

tsteur commented Mar 13, 2019

I think that's done.

@tsteur tsteur closed this as completed Mar 13, 2019
@mattab mattab added the answered For when a question was asked and we referred to forum or answered it. label Mar 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
answered For when a question was asked and we referred to forum or answered it. Bug For errors / faults / flaws / inconsistencies etc. c: Design / UI For issues that impact Matomo's user interface or the design overall. Help wanted Beginner friendly issues or issues where we'd highly appreciate community's help and involvement. Major Indicates the severity or impact or benefit of an issue is much higher than normal but not critical.
Projects
None yet
Development

No branches or pull requests

5 participants