improve the quality of navbar icons when scaling them down from home screen icons

[pixelzoom]

Related to phetsims/ph-scale#39

But some browsers (e.g., Win8 and either IE10 or Firefox) do a poor job of scaling home icons down to navbar size. A workaround is to provide navbar-specific versions of the icons, properly sized in some external program (e.g. Photoshop, Illustrator,…) But many sims have identical home and navbar icons. Is it possible to instruct the browser to improve the quality of scaled images?

[samreid]

Not sure whether all browsers could be instructed to better subsampling (would be good to investigate). If that doesn't work, then we could look into JS libraries for subsampling, like http://jsfiddle.net/HZewg/1/

[pixelzoom]

As a workaround for phetsims/ph-scale#39, I added navbar-specific icons which (according to doc in joist.Screen) must be no smaller than 147x100. This improved the quality of the icons somewhat. But joist.NavigationBarScreenButton is still doing some scaling, so the icons still look somewhat lousy. So I think we need to investigate better image scaling in general.

[samreid]

Another argument for providing our own subsampling code: it will often reduce in a smaller download than providing manually rescaled images.

[ycarpenterphet]

Note that this is also an issue for the homescreen icons when note selected (since these are also resized down from the full size screen icons), which may suggest that we need a more general fix for resizing.

Noted in pH scale rc2 on Win7/IE10, Win8/Firefox. Notably, does NOT occur in Win8/Firefox on the Surface.

[pixelzoom]

Because I've had to address this in several sims recently, I've started creating screen icons programmatically where possible. For example, most recently in molecule-polarity (see above commit).

[pixelzoom]

From 4/29/14 dev call:

SR will find out what optimal sizes really are for home and navbar, and report to the team. We will need to see if that really fixes things when running on other screen sizes too, though. See balancing-act on IE. If not good enough, we can investigate mipmapping or other scaling algorithms

[samreid]

On iPad retina, navbar icons are displayed at 98x67.

I tried reducing my ESPB friction icon image to that size, and on my Win8/Chrome34 the pie chart is coming out non-circular:

Using the larger image (147x100) makes the pie look nice and circular. This could be a tricky problem to solve.

[jbphet]

I measured the nav bar icon size on an iPad 2 and got 49x33. This is as expected, since it is basically half of the resolution of the iPad with the retina display.

[samreid]

@jbphet the work you did in phetsims/balancing-act#21 looks pretty good, can you comment on what you did, and what resolution you used?

[samreid]

@jbphet said: @samreid requested that I comment on what I did here, since he felt like it improved the look. Basically, I created a new drawing in Adobe Illustrator that was a copy of the original icon drawing and removed a bunch of the finer features like the indents on the garbage can, the wrapping on the present, and so forth. I also removed the stroke on the plank, since that seemed to look aliased in all conditions, and darkened the color so that the plank would still be visible. I exported PNGs with a resolution of 99x67, which is quite close to the resolution seen on iPads with retina displays.

[samreid]

How important was the sizing to making this look good? Should we start advocating 98x67 for future sims?

[jbphet]

I did reduce the size of the icons from 152x104 to the 99x67 value (an it's not 98x67 only because the size of the original drawing was off by a tiny bit), but I can't really say how much of the improvement was due to that and how much was due to simplifying the drawings. I suspect that simplifying the drawings made more of a difference, because I still saw some of the aliasing with the smaller drawing size until I made some modifications. Bottom line: It takes some tweaking to get them to look good, with size and the nature of the drawing both being potential degrees of freedom. And it's probably best to draw them in code whenever possible, and just bypass this altogether.

[pixelzoom]

I'm guessing this can be closed now that we have mipmapping. @jonathanolson please confirm, and close if mipmapping addresses this issue.

[jonathanolson]

Confirmed, although it's up to each sim to do it. Closing.