GNOME Bugzilla – Bug 504822
Get better icons (larger, better styled, etc)
Last modified: 2011-03-20 05:18:47 UTC
At this moment NM is the only tools I use which not use tango icon style. It would prettier with some tango love, specially for the signal-strengh icon. Cheers.
an example of the icons are at the address http://jimmac.musichall.cz/i.php?i=NetworkManager it would be awesome to commit this quickly before the freeze.
Created attachment 102117 [details] The Icons used in OpenSuse All greetings should be sent to Jimmac
Reference of the discussion on the mailing-list can be view at http://mail.gnome.org/archives/networkmanager-list/2008-January/msg00018.html
Remove misleading title
Um, is Tango the official GNOME style now or something? I didn't think it was....
This is something I tried hardly to explain on the mailing (http://mail.gnome.org/archives/networkmanager-list/2008-January/msg00083.html), GNOME icon theme use now tango guideline, but not the whole style (like the color palette, or the metaphors), and that's why I wanted to replace the icons provided in nm-applet to match the actual desktop. even gtk+ icons style were updated in 2.12 to tango style (see http://jimmac.musichall.cz/log/?p=5)
Hi Dan! Yes, we're using the tango-style-guidelines [1] for drawing all the icons in GNOME since a couple of releases back. The current nm icons tend to look out of place with GNOME upstream, Fedora, Suse and Ubuntu. I think Jakubs icons would work great. If there are any metaphor issues, we can work those out. (as a side note, I have never been able to work out what's the difference between having one of the green lights lit and having two of them) 1. http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines
I think I raised these issues on the mailing list; the connecting icons use a stairstep looks too confusingly like the signal strength bars. And the "wired" icon (which is a cable plug) looks like a toothbrush at smaller sizes. Using the 'two-computer' icon here is a better fit because it doesn't degrade at smaller sizes. We tried the 'plug' icon way back with 0.3 - 0.5 and it didn't work very well. The current icon set has some bad icons (nm-no-connection-icon.png is much worse than the default GNOME disconnected icon of two computers with the red in the lower corner) and I'm not married to it or anything, but what might replace it has to be better, not just "different".
CCing Jimmac as it was the artist of these icons. Dan, Could you explain what are the two green dots flashing during the connections, it would helps drawing something better. It seems nm-applet uses gnome icon network-offline.png instead of nm-no-connection-icon.png here, and it is fine. Thanks
Dan, if I replace the stage progress bar with the dots lighting up, will you be willing to ship a tango styled set with NM?
jakub: I'd certainly take another look... I'm not strongly pro-green-dot either, in the end we just want something that conveys a sense of progress (though not overly detailed!) and isn't confusing. I'm certainly open to suggestions about what that should be. We've tried a vertical progress bar on the left side of the applet icon area (way back in 0.3/0.4 days) and that just sucked; let's not do that. We've tried dots and I think they work OK (though not great). I don't really like the stair-step (since I feel it's too easy to confuse with signal strength). So that leaves us with dots or something else entirely...
"That just sucked" means what exactly? We didn't do specific network manager tests in our usability lab at Novell, but while I get all sorts of wild bugreports about metaphors, nobody has confused the progress bar with a strength meter. I think the core of the bug isn't about inappropriate metaphors though, but an unpolished icon set that's not style-consistent with itself nor the rest of GNOME. To fellow tango artists -- the task is up for grabs, I'm passing on this one.
Hello, In order to going forward to make our prefered network management tool beautiful, it is possble at least to commit the signal strength icons ? This is the icon displayed 99,9% of the time... For the handshake / initialisation phase, I'm thinking about a small pulse, like the Knight Rider's car :).
*** Bug 554011 has been marked as a duplicate of this bug. ***
what license are jimmac's icons under?
#15 - same as NM itself, GPL2+ I believe.
Very nice looking icons. Looking forward to see them in network manager
Karl Latimer posted a nice set on the NM lists that re-does the progress thing; that's what we should use once he finishes the VPN connection progress icons.
will Karl's icons make it into 0.7.0 final?
I haven't seen updated icons for the VPN connecting series yet...
*** Bug 425704 has been marked as a duplicate of this bug. ***
*** Bug 562377 has been marked as a duplicate of this bug. ***
Partially related to this bug: connecting icons (i.e. the animated ones) don't follow the Icon Naming Spec from freedesktop.org The spec specifies an "animation" context that could be used to provide icons than need an animation. Quote: "Animations should be a PNG with frames which are the size of the directory the animation is in, tiled in a WxH grid. Implementations should determine the number of frames by dividing the image into its frames, and iterating from left to right, wrapping to the first frame, after rendering the last." NM-applet, instead, provides a single PNG for each frame of animations (nm-stage0X-connecting0Y.png and nm-vpn-connectingZ.png). This is sub-optimal, forcing theme makers to use the exact number of steps choosen developers. For example, I was planning to add some icons for HighContrast a11y theme, but honestly 11 steps are too much for the simplified animations needed HC a11y themes. GDK Pixmap has some facilities to implement this Kind of animations. See http://library.gnome.org/devel/gdk-pixbuf/unstable/gdk-pixbuf-animation.html I don't remember if something simpler then GDK pixbuf animation is exposed directly in GTK+ PS Should I've to open a separate bug?
About previous comment, this[1] spinner icon from gnome-icon-theme could be used as base for connecting icons. [1] http://git.gnome.org/cgit/gnome-icon-theme/plain/22x22/animations/process-working.png
Hey there, what's the status on this now? Is this going to be handled by gnome-icon-theme 2.30 or NM?
Either one. But somebody needs to actually draw some new icons first.
*** Bug 568949 has been marked as a duplicate of this bug. ***
*** Bug 607581 has been marked as a duplicate of this bug. ***
As Bug 607581 has been marked as a duplicate of this bug. Which IMO isnt exactly related to this bug report. But the devs seem to be collecting all icon related bugs here , so I thought I'd atleast mention its details here. When resizing the panel to 25 pixels the nm-applet icon become blurry. [easily noticed with the humanity-icon-theme] This is because: nm just uses gtk_icon_theme_load_icon and passes the current screen size in there. [this causes the icon to scale] While the behavior of most of the other applets [like gpm , volume] uses (gtk_status_icon_set_from_name) then it feels like an inconsistent handling of size -> icon theme in those too places. It would be ideal if the nm-applet used the same icon call as the rest of the applets. Bug initially reported in launchpad > https://bugs.launchpad.net/network-manager-applet/+bug/386407
(In reply to comment #29) > This is because: > nm just uses gtk_icon_theme_load_icon and passes the current screen size in > there. [this causes the icon to scale] > > While the behavior of most of the other applets [like gpm , volume] uses > (gtk_status_icon_set_from_name) then it feels like an inconsistent handling of > size -> icon theme in those too places. > > It would be ideal if the nm-applet used the same icon call as the rest of the > applets. The applet doesn't just use static icons, it will composite various icons on top of the main icon too. So it cannot just tell the notification area what icon to display, because there aren't icon theme names for all the icons that the applet actually shows in the panel. The real fix is to get new artwork that's in a scalable form so that the icon *can* be used at any size.
The style used in GNOME doesn't allow icons to be scaled for the small resolutions. Unless we implement an non-existant icon hinting technology or switch to a simple glyph style icons for the systray. Some references on why we pixel-precise low res icons -- http://www.firewheeldesign.com/sparkplug/2006/April/icon_design_bitmap_vs_vector.php http://mezzoblue.com/archives/2007/02/21/icon_design/ http://jimmac.musichall.cz/log/?p=31
*** Bug 579244 has been marked as a duplicate of this bug. ***
Jakub, would you be at all interested in working with me to do a set of new icons for the applet? Any the existing "new" sets all incorporate aspects of what we should have, I don't think any of them have everything we want, or have small issues that would prevent them being used without modification. In addition, we'll want to differentiate cellular and wifi signal strength, and I think we should re-do the metphor for them; cellular should be roughly what the current wifi bars are (but with a standard celltower icon on the left side), and wifi should be a dot on the bottom with arcs moving up like the iPhone/WebOS/Android/etc. We'll also want cellular technology icons (GPRS, EDGE, UMTS, HSPA, CDMA 1xRTT, EVDO rev 0, and EVDO rev A) as well as a "Roaming" icon. Most of these icons can be letters inside a colored square in the lower left-hand side of the icon (nm-applet can certainly composite these into the right place). So I'd suggest: GPRS: [G] EDGE: [E] UMTS: [U] HSPA: [H] 1xRTT: [1x] EVDOr0: [EV0] EVDOrA: [EVA] and the composited cellular icon would be something like this: ___ _ \|/ _| | | _| | | | _|*| | | | _|*|*| | | [H] |*|*|*| |[V] etc, where [V] = the existing VPN icon and the [H] would be the area that the cellular technology or roaming status would be displayed.
I like the idea of combining connection method and a signal strength. Some notes: - I would argue it's beneficial if wifi signal strength was marked in wave bars that is common on mobile platforms (android, iphone, webos). It would be immidiately obvious I'm connected using a 'free' channel (at least in most cases, cell connections are more expensive option). - The systray is small. If we want to communicate the type of cellular connection (which is a good thing, indicates speed) I would simplify the icon to only hold the distinguishing element - [G] rather that an antenna + [G]. See #3 in http://turbomilk.com/blog/cookbook/criticism/10_mistakes_in_icon_design/ I will come up with a proposal (but I'm quite busy at the moment).
(In reply to comment #34) > I like the idea of combining connection method and a signal strength. Some > notes: > > - I would argue it's beneficial if wifi signal strength was marked in wave bars > that is common on mobile platforms (android, iphone, webos). It would be > immidiately obvious I'm connected using a 'free' channel (at least in most > cases, cell connections are more expensive option). Agreed. Maemo uses the same waves motif too. > - The systray is small. If we want to communicate the type of cellular > connection (which is a good thing, indicates speed) I would simplify the icon > to only hold the distinguishing element - [G] rather that an antenna + [G]. See > #3 in http://turbomilk.com/blog/cookbook/criticism/10_mistakes_in_icon_design/ > > I will come up with a proposal (but I'm quite busy at the moment). Ok, definitely let me know. looking forward to it.
In an effort to help push this forward I downloaded Karl's icons and tweaked the VPN progress icon and lock. I've rendered the SVGs to PNGs for still images and animated GIFs for the animations to make them readily viewable. You can see the current results here: http://www.kence.org/projects/nm-icons-new/ I'm happy to assist in further tweaking and/or the creation of new images (like the wireless icons enhancements mentioned in comment 33 and changing the wifi icon to be the wave bars instead). Before I went down that path I wanted some confirmation from the NM developers that starting with Karl's icons were the way to go.
I've created new 'wave' wireless icons for consideration: http://www.kence.org/projects/nm-icons-new/#wave
For the wifi signal strength icon we were thinking more of what Android/Maemo/WebOS/iPhone use: webos (not enough arcs): http://www.palminfocenter.com/images/uploads/findapps_2009-13-09_135834.png android (too thin): http://cache.gawker.com/assets/images/lifehacker/2009/07/sshot-2009-07-28-_3_.jpg iphone (right width, but not enough arcs): http://apcmag.com/images/ABCMobile2.jpg For the "progress" animation, we were thinking to use a series of 3 dots where one gets alternately bigger like so: * . . . * . . . * . * . * . . <etc> or something like that. Maybe the dots could change color depending on the connect stage, but that's debatable. Any interest in rotating your wifi signal bars a few degress counter-clockwise? Thanks for helping out!
Thanks for the feedback. I've created new iPhone-esque wireless icons and the requested 3-dot animation (both for connecting and VPN). Programatically I think we'd want an 8-stage connection animation to allow themers the ability to create more detailed animations. That isn't a problem with the 3-dot animation concept as it's already 4-frames that could just be reused again (frames 5-8 = frames 1-4). I've also slowed down the connection animation as the previous speed was too fast for the 3-dot implementation. http://www.kence.org/projects/nm-icons-new/
(In reply to comment #38) > For the "progress" animation, we were thinking to use a series of 3 dots where > one gets alternately bigger like so: > > * . . > . * . > . . * > . * . > * . . > <etc> > > or something like that. Maybe the dots could change color depending on the > connect stage, but that's debatable. I don't think we want the dots to pulse. I think it is better if they progress in one direction. * . . . * . . . * <repeat> I'd also suggest that the difference between "." and "*" should be subtle and tasteful. It would also be nice if the effect was done smoothly (not abruptly) and gently (not quickly).
[in response to comment 40] I've created another set of 3-dot connecting icons using 8 frames and a left-to-right progression. This version looks a bit more graceful. http://www.kence.org/projects/nm-icons-new/
I like the animation, good job. You shouldn't scale the stroke up for the larger sizes though. All of the sizes use a 1px stroke. http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines
The animation looks nice. In addition to what Jakub said, I think it might be interesting to try creating some icons here with a more reserved/limited use of color. Could we try that?
@Jakub - Looks like all the svg files were at 24x24 doc size with 1px strokes. I've adjusted all the files such that the svgs are at 48x48 and the stroke is at 1px. Note that all of the PNGs are currently rendered directly from the same SVG so the stroke will be scaled accordingly. Obviously we can resize them in vector format to the 22x22/32x23 sizes without stroke scaling and then create a PNG but that's not something my automatic build process will do and I'd rather not do it by hand until we get a commitment to a design. @William - all the new icons that I've created use the tango palette. Are you speaking of other existing NM icons or to change the new icons so that they don't use the tango palette? I've uploaded new icons with the tango-compliant stroke size. In addition I've created some scalable NM 0.7-inspired nm-signal icons but using tango colors. The page also includes a tar.gz file that users of 0.7 can use to try out the new icon designs, including instructions on how to install them (YMMV, etc, etc). [Hint: after installing them, resize the panel holding the notification area and watch the icons scale beautifully :) ] After using them for a few hours I think the new 3-dot nm-stage* icons would look better laid over the nm-signal-00 (or nm-wireless-00) icons instead of by themselves. And finally I've made the original svgs available since it seems that I'm reaching the end of my artistic ability in case others want to pick them up and play with them some more. I'm happy to continue helping (merging, scaling, changing colors, etc) but I'm uncertain I'd be able to create any new graphics from scratch - an artist I am not. http://www.kence.org/projects/nm-icons-new/
Created attachment 154763 [details] various network statuses using a simple stencil icon theme While I'm still working on the Tango styled variants of the NM status icons, here's a mockup of how things should ideally look when using the symbolic icons we've been playing around here in London. Some background on what symbolic icons are and why we need them -- http://www.freedesktop.org/wiki/SymbolicIcons Beginnings of the symbolic icon theme -- http://github.com/jimmac/gnome-stencils Regardless of the style, I think the combination of connection type + signal strength icons is a good one. Not sure if VPN status should be done as an overlay on the connection type or simply as another symbol next to the type and strength symbols.
This is all great work everyone. Just wanted to say that.
yup, I am watching with happiness - thanks for all the effort everyone!
Created attachment 155216 [details] wireless bigger I noticed that the wireless icons were a bit smaller than the rest of the symbolic icons , so , I tried 2 variations to make them a bit taller... thoughts?
jimmac, did the gnome-stencil repo move somewhere off github?
Dan, it moved to git://git.gnome.org/gnome-icon-theme-symbolic
*** Bug 509199 has been marked as a duplicate of this bug. ***
I think we're all set here. If not we should open a new and more specific bug.