Scale icon is poorly rendered Win 8.1/ IE11 & FF31

[orejolaphet]

The Scale icon under "Tools:" is poorly rendered. Could be related to small screen size.

Troubleshooting information (do not edit): From IE 11 Name: Balancing Chemical Equations URL: http://www.colorado.edu/physics/phet/dev/html/balancing-chemical-equations/1.0.0-dev.15/balancing-chemical-equations_en.html Version: 1.0.0-dev.15 Features missing: touch, fullscreen Flags: pointerEnabled, msPointerEnabled, pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0; ASU2JS; rv:11.0) like Gecko Language: en-US Window: 1093x538 Pixel Ratio: 1.25/1 WebGL: WebGL 0.93 GLSL: WebGL GLSL ES 0.93 Vendor: Microsoft (Internet Explorer) Vertex: attribs: 16 varying: 14 uniform: 512 Texture: size: 8192 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 8192x8192 OES_texture_float: true

[ycarpenterphet]

@pixelzoom is the balance scale currently an image or is it being drawn in code?

Again, this issue is not a dealbreaker, and should not delay publication.

[pixelzoom]

This is the same problem that we had with the lightbulb image in Acid-Base Solutions, see discussion here: https://github.com/phetsims/acid-base-solutions/issues/121

The balance scale and bar chart icons in the "Tools" combo box are both image files. And this is a general scenery problem - SVG rendering (which is the most performant) of images looks crappy on some browsers. And it's unlikely to be fixed in scenery 0.2. So this is going to keep coming up every time we use an image file for something.

[pixelzoom]

Will not be addressed for 1.0.0, marking this as "deferred".

[pixelzoom]

Consider using the new mipmap feature for the scale image.

[pixelzoom]

Tested with mipmap and it's better, but still a little jaggy. scales.png will need to be saved at a larger size.

[pixelzoom]

I doubled the size of scales.png and it still looks crappy. The diagonal lines are problematic, and the contrast decreased.

Before (image plugin):

After (mipmap plugin, large scales.png):

[pixelzoom]

The problem is mainly the diagonal lines in the scale image. Perhaps there's some "Save As" setting in Illustrator that I'm not familiar with.

@jonathanolson Can you suggest how to make this look better?

[jonathanolson]

The normal size "scales.png" looks really rough, AND includes what looks like a white aliased outline along the outsides, which definitely seems to be the issue.

I can test some ways to export from Illustrator once I'm back at home (no space for a copy on this laptop).

[pixelzoom]

Thanks @jonathanolson, that would be great if you could take a look. Assigning to you, kick it back to me when you're done.

[pixelzoom]

@jonathanolson Any thoughts on how to improve this? Not high priority, but it's the last open issue before this sim can be redeployed.

[jonathanolson]

See the above change, to me it looks good on Win7 IE11/FF.

[pixelzoom]

Here's what I currently see in Win7+IE11. It's definitely better, but still jaggy compared to other platforms.

Compare to Safari:

Compare to Mac+Chrome:

[pixelzoom]

@jonathanolson is this what you see also? I'm OK with this if that's as good as we think it can be.

[pixelzoom]

Talked with @jonathanolson, we're going with this.