phetsims / collision-lab

"Collision Lab" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
6 stars 4 forks source link

What do the BallValuesPanels look like in 1D screens? #83

Closed brandonLi8 closed 4 years ago

brandonLi8 commented 4 years ago

In the 2D screen, the BallValuesPanel looks like

image

What does it look like in the 1D Screens? Are the top labels ('position', 'velocity', 'momentum') labels still there? Are the component labels ('x', 'y', 'v_x', etc. ) there?

arouinfar commented 4 years ago

@brandonLi8 good question. The components aren't necessary in 1D.

The fields would be similar to Flash: image

If we leave the units in-line with the label, the spacing looks odd. Can we move the units below the label?

image

brandonLi8 commented 4 years ago

If we leave the units in-line with the label, the spacing looks odd. Can we move the units below the label?

@arouinfar it is possible (not ideal, however) to do this.

I did give it a try locally (did not push to master as the code is ugly) . Based on your mockups, the spacing between the columns have increased when the unit is inlined.

image

But that increased the spacing of the mass-sliders and the mass number displays as well. image It also looks weird to wrap the unit to a second line here (explore 1d, more data off).

Compared to in the Explore 2D screen: image the spacing is less.

It is even more ugly if we wrap separate lines in explore 1d with more data on, but not on explore 1D with more data off.


What if we did something like: Screen Shot 2020-06-04 at 11 26 57 AM where we leave a label, but get rid of the subscripts. This is much more feasible in my opinion. We could even remove the 'x' label or just remove all labels all together (like in your first mockup). This would also leave the spacing between the mass-sliders and mass number displays the same for all screens.

@arouinfar thoughts?

arouinfar commented 4 years ago

@brandonLi8 here's the mockup we discussed in today's design meeting.

I've kept the heading positions the same, but re-centered the x-data. image

brandonLi8 commented 4 years ago

Done in the commits above.

Back to @arouinfar for review.

arouinfar commented 4 years ago

Looks good, thanks @brandonLi8!