Add semi-transparent background behind Force Value when outside of vector

phetsims / forces-and-motion-basics

"Forces and Motion: Basics" is an educational simulation in HTML5, by PhET Interactive Simulations.

http://phet.colorado.edu/en/simulation/forces-and-motion-basics

GNU General Public License v3.0

7 stars 10 forks source link

Add semi-transparent background behind Force Value when outside of vector #257

Closed arouinfar closed 7 months ago

arouinfar commented 6 years ago

In working on #256, I noticed that the Force Values can be a bit hard to read at times.

One strategy we've used in other sims is to add a semi-transparent background behind the value to improve its readability. We could add a background similar to the Mass Values, but at 50% opacity and a bit less vertical padding. This would only be necessary when the vector is too small/occluded to fit the value within.

Next time a dev spends some time on FAMB, this would be a nice tweak. Do you agree @ariel-phet?

ariel-phet commented 6 years ago

@arouinfar - I agree. Leaving open and unassigned.

amanda-phet commented 9 months ago

This seems reasonable to address with https://github.com/phetsims/forces-and-motion-basics/issues/304

AgustinVallejo commented 7 months ago

Adding the feature, it currently looks like this (Background only appears when the value doesn't fit within the arrow)

Please review and close if it looks OK, otherwise let me know how I can improve it. @arouinfar @amanda-phet

arouinfar commented 7 months ago

@AgustinVallejo the background behind the values generally looks good. Is it possible to dynamically size the labels? If the value is < 100N, there is some extra whitespace.

AgustinVallejo commented 7 months ago

Looking like this since the above commit. Let me know if that's better

arouinfar commented 7 months ago

Looks much better now, thanks @AgustinVallejo!

amanda-phet commented 7 months ago

Thanks for reviewing @arouinfar . I think this looks good too!