Add a new checkbox for showing the angles on the "more tools" screen

[samreid]

@arouinfar will create a mockup

[arouinfar]

Here's an updated mockup showing the Angles checkbox. The dimensions of the toolbox have not been altered.

Toolbox:

What do you think @samreid @ariel-phet?

[samreid]

The checkbox seems reasonable, but I have some questions about how the feature will work:

1. when showing the angles, will it just show numbers, or arcs, or arc'ed arrows?
2. will it show angles in degrees or radians (or user-selectable)?
3. can you show angles (from the normal) without showing the normal itself?
4. do you want to show an icon for the checkbox? If not, why not?

[ariel-phet]

I will chime in on 3 of these:

1. Just degrees (radians are almost never used in optics reflection/refraction)
2. The angles are definitely always measured from the normal. General practice is to draw the normal when measuring the angles, but it could work without the normal. My preference would be angles includes the normal.
3. I think an icon would be fine, but not necessary

[arouinfar]

Great questions, @samreid.

1. I've mocked up a few different options. I personally like the last option best.
2. Let's stick with just degrees. The mockup doesn't show it, but we should probably show at least one decimal place.
3. I think it looks a little strange without the normal, but it could work. More detail follows.
4. I don't think an icon is necessary. I think it would add additional visual weight, without actually clarifying much.

Here's a mockup showing one possible option for showing the angles

Possible options w/ Normal on:

Normal off:

I find the angles hard to interpret without the Normal. One option is to require the Normal to be on to veiw the angles. Alternatively, we could add a small tick mark. I prefer this option.

I'd like to hear @ariel-phet's thoughts on these options, so re-assigning to him.

[ariel-phet]

@arouinfar I think the small tick mark is a really nice compromise. The double headed arrows feel cluttered and unecessary (and well look bad for small angles)...so I think the simple arcs are the way to go. I would also choose a point after which the numerical angle indicator jumps "outside" for very small angles (or ask @samreid to do so). I am not sure how I feel about the number intersecting the beam, so maybe that is the rule?

[ariel-phet]

And looking at your mockup, if you move the arcs and numbers further from the interface, you will have more room to work with, no need to cramp them so close.

[arouinfar]

How about this, @ariel-phet?

[ariel-phet]

Looks great! Assigning to @samreid

[ariel-phet]

@samreid if you would like an icon with the angles, feel free to add a simple one (the classic angle symbol)

[samreid]

Here's Google Images idea of angle icons:

I'm going to do one oriented like the incoming light ray angle, for consistency within the sim.

[samreid]

After the above commit, the angle icon looks like this:

@ariel-phet or @arouinfar let me know your thoughts on the icon itself.

[ariel-phet]

@samreid - I think the icon itself is good. However, I think the icon will be more recognizable if rotated 90 deg to the right. That is sort of the more traditional angle icon (even though in the sim the angles are measure from the normal) - so I see the logic of this rotation, but I think for clarity/convention it will look better rotated IMO

[samreid]

I'll give it a try and see how it looks, thanks for the suggestion.

[arouinfar]

I like the icon @samreid, but I also agree with @ariel-phet about rotating it for clarity.

[samreid]

@jonathanolson what is the best way to draw an arc that will change its angles?

[samreid]

Basic support implemented above, but please do not test until I resolve #189

[samreid]

189 fixed and this is ready for testing. I tested on Chrome and Firefox, both on OS X. I'm ready for feedback from @arouinfar, please take it for a test drive and report back, thanks!

http://www.colorado.edu/physics/phet/dev/html/bending-light/1.0.0-dev.25/bending-light_en.html

[samreid]

Oops, I realized this is on both the intro screen and the more tools screen, but it was only requested for the more tools screen. Please take dev.25 for a test drive (even thought the angle checkbox appears in the intro screen as well) and please confirm whether you only want this for the more tools screen.

[ariel-phet]

@samreid @arouinfar - I think this is looking really good in terms of functionality. Very smooth and clear.

A few polishes/suggestions

1. We only want this feature on the more tools screen
2. Reduce the size of the "normal" and "angles check boxes...they are very large and a bit overwhelming at the moment
3. Considering going to one decimal place for the angle (since snell's law involves sin functions, I think this would be appropriate, and remember the learning goal was to see the difference in angle of refraction between two different colors which was on the order of a tenth of a degree)
4. the tool box generally needs a bit of negative space padding (but I am sure you are already aware of that and just working on functionality first).
5. the angle icon looks good to me eye and very clear
6. I would reduce the vertical height of the normal icon by 30'ish %, no need for it to cramp the vertical space.

[arouinfar]

In general I think this is looking really good @samreid! Thanks for your suggestions @ariel-phet, I agree with your comments and have a few to add.

It could be because @samreid is playing around elsewhere in the code, but on start-up the wave detector was not properly sitting in the toolbox. It was fine after dragging it out and then putting it back in, however.

I noticed the angle can be a bit harder to read when in wave mode.

I'm not sure if this is something that we really need to address, though. If users were previously trying to measure precise angles with the protractor, they would most likely be using the ray mode. One possible solution would be to have a semi-transparent rectangle behind the angle readout, similar to the equipotential value in Charges & Fields

[arouinfar]

One more thing... I think we decided to remove the large protractor when we added the Angles option.

[ariel-phet]

@arouinfar we definitely decided to remove the "enormo" protractor (the button on the protractor that made it grow super large), but I think we were intending on leaving the normal sized one.

[ariel-phet]

@arouinfar - we could also try the numbers in the angle mode in the new gray we plan to use for the normal (that should work well on either a black, red, or white background). And changing the color would be a simple and easy change.

[arouinfar]

@ariel-phet, I was referring to the "enormo" protractor, but my comment was a bit unclear. We are definitely are keeping the regular protractor around. As for the number color, I think we should try the new gray first and see if that improves the contrast against the wave.

[jonathanolson]

@jonathanolson what is the best way to draw an arc that will change its angles?

The easiest is to recreate a Shape. The current best-performing method would probably be to create a Shape with an arc, get the Arc instance from the first Subpath, and mutate that arc's startAngle/endAngle (it should support invalidation after those changes, which will update the Path).

In the future, I'd like to have a better API for creating segments (like Arc) directly, and creating a Shape from one or more.

[samreid]

Outstanding requests from the above comments:

the tool box generally needs a bit of negative space padding (but I am sure you are already aware of that and just working on functionality first).

I'll track this in #222

start-up the wave detector was not properly sitting in the toolbox. It was fine after dragging it out and then putting it back in, however.

This is tracked in https://github.com/phetsims/bending-light/issues/213

I noticed the angle can be a bit harder to read when in wave mode.

It was suggested to try the gray. But I think there are several places the gray won't work:

I also considered changing the position of the readout for wave mode, but we would have to handle a wide variety of angles:

I could easily try putting a semi-opaque background behind the readout text, or disabling the angle readout when wave view is selected. Or a combination: to only show the text backgrounds when the wave mode is selected. @ariel-phet and @arouinfar please advise.

we definitely decided to remove the "enormo" protractor (the button on the protractor that made it grow super large)

I still need to work on this.

[samreid]

The superlarge protractor was removed above. I think the only thing left for this issue is the discussion of showing the text labels against the wave mode. I'll reassign to @arouinfar and/or @ariel-phet for discussion.

[ariel-phet]

@samreid please try the gray, it seems like a simple thing to try.

[samreid]

Reassigned to @samreid to try gray.

[samreid]

It is indeed easy to try a different color for this text, I'll give it a go.

According to photoshop, the gray of the phet-io logo is #999999

Testing this in the sim, I see the default scenario looks like this (in-glass text difficult to read):

In wave mode, I'm seeing problematic cases like this:

@ariel-phet where would you like to go from here?

[samreid]

I'll also publish a testable version shortly.

[samreid]

I published a version here but for unknown reasons it will not launch on my Chrome or Firefox: http://www.colorado.edu/physics/phet/dev/html/bending-light/1.0.0-dev.26/bending-light_en.html

But the localhost built version will launch. I'm not sure what's wrong here.

[samreid]

Here's a testable version with gray text that launches: http://www.colorado.edu/physics/phet/dev/html/bending-light/1.0.0-dev.27/bending-light_en.html

[ariel-phet]

@samreid thanks for implementing...looks good in many cases but a bit tough to read against the water default background of the refracted ray.

It does seem like color is the correct solution to me however, and just finding a color that works well on most backgrounds (I am guessing something like hot pink would do decently..)

Assigning to @arouinfar to find a color that offers good contrast in most circumstances.

[samreid]

Thanks for your suggestion @ariel-phet, I will happily try any new colors out. I also want to take a few minutes and see what it looks like with a text background.

[samreid]

This version uses a pale transparent background for the text: http://www.colorado.edu/physics/phet/dev/html/bending-light/1.0.0-dev.28/bending-light_en.html

Looks pretty good against a medium:

Looks pretty good against a gray wave with webgl=false:

@ariel-phet and @arouinfar can you take it for a test drive and let me know your thoughts?

[ariel-phet]

@samreid I could live with that solution, pale transparent seems like a good compromise and not too heavy handed.

[arouinfar]

I think the transparent background is going to be the best option. I think it looks really clear @samreid, so let's go with this solution.

[samreid]

Thanks for your feedback. Everything else is tracked elsewhere, this issue is ready to close.