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
Comments
That's possible although I thought we did apply patches to it again |
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. |
Adding |
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. |
Hi @JamesAndersonJr both Glyphicons are icoMoon are not released under an open source license so we cannot use them |
Hi @lemu - we need your help for closing this issue and making Piwik icons look awesome! |
Yes please! |
Hi @zawadzinski @lemu |
@tsteur are there still some icons that don't look good on Retina display or did we fix all these issues? |
Yes eg row actions and segment edit icon. There might be more but would need to click through all of Piwik's features :) |
The folders in the real time widget, the visitor log / real time icons are blurry as well. |
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. |
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 |
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. |
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 Hope this all turns out well! |
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. |
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 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 To sum up: please stay at the established (git) way of keeping a structure in the mass of icons. |
About your icons:
|
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.
|
BTW, here is the progress of the main icon set, as of
|
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?
|
@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. |
Hi, Before you start investing more time, I want to make some things clear:
|
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. |
@Findus23 can you check to see if you received my pull request? |
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). |
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). |
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. :-( |
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
From their terms of use:
|
@JamesAndersonJr 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 |
It is only that large because I try to list every icon (even the unimportant ones).
|
@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! |
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. |
I think that's done. |
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)
From @tsteur in #886
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.
The text was updated successfully, but these errors were encountered: