Update preferences icon

[amanda-phet]

Based on interviews that @catherinecarter and I did, and discussions with @BLFiedler and @terracoda , we'd like to move ahead with a "cog" icon for the preferences dialog. To match the style of the other icons, we like this hollow version.

However, this style isn't available in font awesome 4, so I made these PNGs.

Assigning to @veillette to make this change in joist. If you need help, I believe @chrisklus is available.

The icon should fit the scheme where the height matches the height of the P in PhET, which is also the height of the sound icon. The distance between each icon should also be equal. Let me know if any questions come up in the process!

[veillette]

@amanda-phet : do you have an svg of the cog? It is a highly symmetric shape so it would be better as an SVG.

[amanda-phet]

Sure, I just made a PNG to be consistent with the keyboard icon. Here are the icons as SVGs.

SVG.zip

[veillette]

Thanks @amanda-phet . I see what you mean about the keyboard Icon. I'll stick to the png then and follow the pattern for the keyboard icon.

[veillette]

I haven't committed my work on master yet but it would look like this.

In charges-and-fields (which has a projection mode) we have and in projection mode (there is an apparent change of size from the above screenshot due to the fact the two screenshots do not have the exact same sizes)

In quadrilateral, it yields,

[veillette]

I noticed that the keyboard icons have uploaded their assets as ai files. I think we should the same. @amanda-phet , whenever you have the opportunity, please provide me with the assets for the icons.

[veillette]

@amanda-phet provided the assets for the icons.

[veillette]

@amanda-phet and I had a bit of back and forth about how to scale the image. We settled on

  const icon = new Image( preferencesIcon_png, {
      scale: 0.145, // empirically determined to match the height of the P in PhET button
      pickable: false
    } );

which yields

[veillette]

In summary, we have updated the preference button icon. There are two png files that have been uploaded: one for the white background and the other for a black background. The pattern used here followed the pattern from the keyboard icon (which is also a png).

To review this issue, please

• Check that you can toggle the icon on master with a sim with a projection mode (such as charges and fields)
• Check that the license.json file has been updated correctly.
• Look at the modifications in the NavigationBarPreferencesButton.ts

[veillette]

Assigning to @chrisklus to review.

[chrisklus]

Looking great, thanks @veillette! @zepumph and I reviewed together. The only thing we changed was the way the icon is scaled - by factoring out the height the image can be changed to any resolution and will render at the same size.

Back to you to close if nothing else.

[veillette]

Thanks @chrisklus and @zepumph for the quick review.

[zepumph]

Also noting that we though about how using png files are slightly blurrier when really zoomed in than the SVG font awesome audio button. Perhaps using SVG would make this clearer, but probably wouldn't be worth it for the amount of SVG data for something like the keyboard button. We don't want to make a new issue for that.

Number play team will proceed in https://github.com/phetsims/number-play/issues/233, and are ready to close this issue. Thanks so much for making this happen.

[veillette]

The work is done here. Closing.