Implement Grid layout and radio buttons (Grid + Numbering Design, General)
Closed this issue · 22 comments
From #2:
Addition of grid and numbered grid. When grid is selected, a grid overlays the two parallel bars, when numbered grid is selected, numbers are added along one side of the grid (1-10 or something like that). This is represented as radio button group of three radio buttons, first option“none”, second option a small icon of a grid, and third option, an icon of a numbered grid).
Before implementing this. I think I will want to know a bit more about the intended design.
@jessegreenberg also mentioned that we could potentially use GridNode.js from ESP to help with this.
Over to you @BLFiedler.
@zepumph Can you screenshot how the grid (and numbered grid) appear in Dor's Mathematical Imagery Trainer iOS app? This will give me a better idea on how to proceed. Thanks!!
Also, for reference on ESP:
and from an eye-tracking study Dor did:
Here are the three grid views from the iOS app:
For GridNode.js,
- Is it possible to selectively enable horizontal or vertical gridlines?
- Would we be able to scale the numbers dynamically? e.g. a slider that multiplies the numbers on the grid
- Can we dynamically alter the number of demarcations (major and minor gridlines), sort of like how it changes between Easy and Hard in the screenshots above?
@zepumph Is there any obstacle in how the model determines the proportion to arbitrarily assigning the grid values? Like if we wanted to have it go from 0(bottom)-10(top) or 0-50 is that fine?
@zepumph Is there any obstacle in how the model determines the proportion to arbitrarily assigning the grid values? Like if we wanted to have it go from 0(bottom)-10(top) or 0-50 is that fine?
Right now there is no good notion in the model for what the "top" is. I think that this would be valuable to add, and it seems like your example seems like what I should shoot for in the implementation.
@zepumph
Please implement grid lines with the following features:
- Option for horizontal + vertical grid lines (as in ESP), and horizontal only. Note: the horizontal only variant may require a single vertical line for the numbers when in "numbered grid" mode (e.g., when "numbered grid" is selected, a single horizontal line + numbers appears). Ideally, (I think), the default is horizontal only, and the option for horizontal+vertical is in the PhET menu, not on the sim screen.
- Please make the grid lines thin and dark grey in color.
- Ability to change the unit size (see Dor's comment below re a:b -> 2a:2b -> 3a:3b. If there were arrows to do this (as in the MITP app, that would be nice, but if that's challenging initially a small set of radio buttons would be fine at first). Maybe at first an (ugh) nested radio button, where selection of "Numbered grid" has a subset of radio buttons (1x, 2x, 3x).
Relevant comments from Dor below:
My team noted, with time, that where the classical checkered look of grid made for familiarity, in fact the vertical gridlines are unessential. I’d ask Michael to make us a on/off switch for the verticals, just so we can get a sense of any tradeoffs in including them.
The grid color should not be too prominent. It should feel like a supplementary tool, not the thing itself (I can tell you an interesting story about that, code name Charlie). The grid is to be seen as a means of enhancing the enactment/explanation/evaluation of the existing solution strategy, yet in so doing, the grid surreptitiously becomes a frame of reference.
A nice grid feature — albeit one that I’m not entirely clear whether / when / how the student might use, let alone avail of, is controlling the unit size. We spoke about this last time. So a “basic” grid that halved its unit size would double the ratio from a:b to 2a:2b, or, if it thirded its unit size, it would triple the ratio to 3a:3b. Again, that could be something good to toy with. Ultimately, it could take us to proportion (a:b = xa:xb) from a direction that is different from, yet complementary to, the stretching/contracting. (The numerals would need to be showing then.)
Changes to the view over in #23 have made it such that now model values go from 0 (when ratio pointer is at the bottom) to 1 (when the pointer is at the top. I think this will help the implementation of the grid here. I'll take a look.
A first pass has been committed. This was only possible as of today because of @jessegreenberg's really great work over in phetsims/scenery-phet#580.
I implemented horizontal lines, optional vertical lines, and a way to change the base unit.
I haven't yet gotten to adding numbers on the grid, in part because I wonder if that support will be added to the common code Node at some point. I plan on asking @jessegreenberg tomorrow during out weekly meeting.
I also had another idea in terms of the implementation of the numbers. What if we put the numbers in the middle, between both of the boxes? Would that be too distracting. Here is a mockup that a either a small child or I drew:
Currently radio buttons are very great because they are easy and straight forward. I agree that in the future we probably don't want the UI that is currently implemented. I'm excited to use this to further discussion!
I'll chat with Dor re location of numbers. For now, let's start with the numbers on the far left of the grid.
Let's have the grid lines stop at the outside edges of the black bars. (they can extend slightly further to the left if that makes sense to accommodate the numbers when "numbered grid" is selected).
It would be great to have a "None" option as well! I think the default should still be without any grid, but correct me otherwise @emily-phet.
I haven't yet gotten to adding numbers on the grid, in part because I wonder if that support will be added to the common code Node at some point.
To follow up on this, I decided that it still seems best to add labels with decoration. See phetsims/scenery-phet#580 (comment).
Great to hear! Thanks.
@zepumph
I agree with @BLFiedler regarding adding a "none" option for the grid, and having the default be "none".
"none" option added above. Units coming next.
I didn't quite get to units today. Here is an in-progress patch
Index: js/free-objects/view/ProportionGridNode.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- js/free-objects/view/ProportionGridNode.js (revision 1d5873d8e053ecec0190c6bdf8371c997a1280e4)
+++ js/free-objects/view/ProportionGridNode.js (date 1587586335847)
@@ -29,6 +29,7 @@
gridViewProperties.gridBaseUnitProperty.link( () => {
this.updateHorizontalLines( gridViewProperties.gridViewProperty.value );
+ this.updateUnitLabels();
} );
gridViewProperties.gridViewProperty.link( gridView => {
@@ -36,9 +37,20 @@
this.updateVerticalLines( gridView );
} );
+ gridViewProperties.showGridUnitsProperty.link( () => {
+ this.updateUnitLabels();
+ } );
+
this.mutate( options );
}
+ /**
+ * @private
+ */
+ updateUnitLabels() {
+
+ }
+
/**
* @private
* @param {GridView} gridView
Grid Units added above. They are controlled with (another) set of radio buttons. I've just been throwing all the UI control on the right side in no particular order. Please let me know if you would like tweaking on that, or if you want another issue to actually design and implement a control panel.
Copying this from Dor's email:
Something I noticed:
the cursors’ heights appear to reference the black platforms below them. And yet, when we play with the grid, some grid lines may be drawn lower than the platforms. Is that ok? For example, at 1:2, when we change to 4a:4b, we see a horizontal line go lower than the datum line.
And just a note, it appears the hands are not bound by the area indicated by the black bars (they are bound, just not in that area):
@jbphet pointed out that the user in the first touchscreen interview with dev.15 kept lifting up his left hand in order to see the number on the grid. Given this, it may be worth reconsidering putting the grid numbers in the middle for continuous reference during bimanual input.
@emily-phet , what do you think?