design of pHMeterNode.valueNode

[arouinfar]

For #117

When reviewing mySolutionsScreen.view.pHMeterNode.valueNode @kathy-phet and I had some questions we thought would be best discussed in design meeting.

• This looks like a NumberSpinner (but isn't), should we be considering general design patterns for this type of UI control?
• Should the increment/decrement buttons be grouped? If grouped, instructional designers could remove them through a single visibleProperty. There may be a11y implications for this, though.
• What is the best name for the buttons? Increment/Decrement is accurate, but something like up/down might be friendlier. (These are somewhat similar to the tweaker buttons on a NumberControl which have been called leftArrowButton and rightArrowButton in Projectile Motion.)

[pixelzoom]

• This looks like a NumberSpinner (but isn't), should we be considering general design patterns for this type of UI control?

It is definitely a NumberSpinner, and that conversion was done in #95.

It's phetioID is currently phScale.mySolutionScreen.view.pHMeterNode.valueNode. Would you like to renamed it phScale.mySolutionScreen.view.pHMeterNode.spinner?

[pixelzoom]

• Should the increment/decrement buttons be grouped? If grouped, instructional designers could remove them through a single visibleProperty. There may be a11y implications for this, though.
• What is the best name for the buttons? Increment/Decrement is accurate, but something like up/down might be friendlier. (These are somewhat similar to the tweaker buttons on a NumberControl which have been called leftArrowButton and rightArrowButton in Projectile Motion.)

Since this is a NumberSpinner, these are common-code design decisions. Whatever you decide will apply to all NumberSpinner instances.

Recommended to transfer this issue to sun repo, since code changes will be in sun.

[arouinfar]

Glad to know it is indeed a NumberSpinner! We should definitely be thinking about the general PhET-iO design pattern for NumberSpinner. @pixelzoom please transfer this to sun and rename as you see appropriate.

[pixelzoom]

I'll handle moving the issue to sun.

@arouinfar what is the answer to this question?

It's phetioID is currently phScale.mySolutionScreen.view.pHMeterNode.valueNode. Would you like to renamed it phScale.mySolutionScreen.view.pHMeterNode.spinner?

[pixelzoom]

Slack:

Amy Rouinfar:spiral_calendar_pad: 10:08 AM
I’m not sure that spinner would be a well-understood term, so perhaps valueNode is preferable. We can check with KP in the design meeting

Chris Malley 10:09 AM
spinner should be as familiar as checkbox, combo box, ... it's a standard UI component that's in all UI toolkits.

Amy Rouinfar:spiral_calendar_pad: 10:10 AM
I didn’t know that. I hadn’t heard of spinner before working at PhET.

Chris Malley 10:11 AM
There are definitely some PhET-specific names, like "picker". But "spinner" is standard, see https://en.wikipedia.org/wiki/Spinner_(computing). spinner is also used throughout gas-properties, and I suspect other sims. e.g.
gasProperties.energyScreen.view.particlesAccordionBox.numberOfHeavyParticlesControl.spinner

[pixelzoom]

I've moved the general NumberSpinner design to phetsims/sun#575.

mySolutionsScreen.view..phMeterNode currently looks like this in Studio (see below). The remaining question for this issue is whether to rename valueNode to spinner. I recommend yes, because it's a spinner, a spinner is a standard UI component, and it would be consistent with other sims (e.g. gas-properties).

[pixelzoom]

3/5/20 design meeting:

• rename to spinner
• address general spinner design in PhET-iO design for NumberSpinner sun#575

[pixelzoom]

valueNode has been renamed to spinner. Here's what it looks like in Studio:

Since this was so trivial, I'm going to close without review. Other spinner changes will be addressed in phetsims/sun#575.