Alt Input support

[pixelzoom]

@kathy-phet asked to evalute alt input for #191.

From a Slack conversation with @kathy-phet @arouinfar @pixelzoom:

@kathy-phet
Let's evaluate alt input and UI sound, and see if there are any challenges there.

@arouinfar
Alt Input might be tricky. The BicyclePumpNode will need common code work and the movable container wall would benefit from multiple speeds, which KeyboardDragListener doesn’t support. It was proposed in phetsims/scenery#1601 and was deferred/closed.

@pixelzoom:
For alt input, the following interactions would be sim-specific, not provided by common code:

• resizing the box (multiple speeds?)
• opening the lid on the box
• operating the bicycle pump
• moving the collision detector
• moving the stopwatch

@kathy-phet
OK. I think we should plan on alt-input work, and as we do that alt-input prioritization board in Monday, we can prioritize these for work in time for the sim schedule?

[pixelzoom]

Alt Input is now "on" for all sims in this suite. pdomOrder is not being set, so focus order defaults to the order that Nodes are added to the scene graph -- which is clearly not a desirable order.

Setting a quick-&-dirty pdomOrder is not straightforward because it has ths ScreenView class hierachy:

BaseScreenView
  DiffusionScreenView
  IdealGasLawScreenView
    EnergyScreenView
    ExploreScreenView
    IdealScreenView

[pixelzoom]

In the above commits, I set an initial pdomOrder by adding everything to the Control Area, as elements appear from left-to-right, top-to-bottom on the screens. @arouinfar please let me know how you'd like things divided between Play Area and Control Area, and what the order should be.

Sim-specific things that are missing alt input:

• Container lid handle - see LidDragListener
• Container resize handle - see ContainerResizeDragListener and Control wall speed with alt input #197
• Collision counter - ComboBox needs arrow keys, conflicts with group focus highlight used for StopwatchNode?

Common-code things that are missing alt input, this work needs to be scheduled:

• BicyclePumpNode - somewhat like a slider, except particles come out only on the down stroke. See Alt input and UI sound for BicyclePumpNode scenery-phet#848.
• FineCoarseSpinner - in Particles accordion boxes. How should alt input behave? Should it be like NumberSpinner? Should each button get focus and operate like a push button? Or should the entire FineCoarseSpinner get focus and use left/right arrows for increment/decrement and shift for fine/coarse? See Alt input and UI sound for FineCoarseSpinner (and NumberSpinner?) scenery-phet#847.

[terracoda]

@pixelzoom, I agree, I think the FineCoarseSpinner is a number spinner type interaction. I think the number spinners In GFLB and RaP are implemented like discrete sliders.

The FineCoarseSpinner adds a second mode to the number spinner - a single-release and bunch-release. This could be handled in different ways, so it would be good to discuss options.

One option is to make 2 tab stops (like two separate number spinners on top of each other) and have one release singles and the other release bursts, but both share the same model value total. The first Tab Stop encases the single buttons, the second Tab Stop encases the burst buttons.

Option two could use custom modifier keys on a single number spinner to release singles or bursts. E.g. arrow keys -> singles; Page Up/Page Down -->> bursts. Just an idea. Depending on keys, the appropriate button is highlighted.

There could be other options. These are just ideas.

For the bicycle pump we could look at mapping that to a slider, going up/left is loading with air and going down/right is pumping out particles and increasing pressure. We could explore the standard types of slider shortcuts to pump a little or a lot.

The Container Lid Handle and Container Resize Handle appear like they would map well to a standard HTML slider interaction as well, though from #197 a particular kind of control over speed (or steps) seems very important.

The Collision Counter like the Stopwatch is a composite widget, but the guts of it seem somewhat straight forward for Alt Input.

[arouinfar]

Thanks @pixelzoom, I think this a nice improvement over dev.10, and we strike a better balance between interaction order and visual order. I don't have any change requests.

@Nancy-Salpepi @kathy-phet can you take the alt input for a spin?

[Nancy-Salpepi]

@pixelzoom @arouinfar
I really like the order on the first 3 screens. It is really logical in terms of how users would interact in order to explore relationships and doesn't jump around too much.

I find it a little odd that the expand/collapse button for the Data accordion box is first in the focus order on the Diffusion Screen (or the stopwatch if that is checked). The box is closed by default to allow for predictions/qualitative exploration. Making the expand/collapse button first in the focus order, gives the impression that it is really important and I should press the button to open the accordion box. Similarly, interacting with the Stopwatch before adding any particles or changing variables also seems strange. I think it might be better to start with the Particles Panel first on this screen as well.

The hotkey for Play/Pause is going to be really useful when setting up experiments. It should be added to the Keyboard Shortcuts Dialog to remind users of it.

[pixelzoom]

@Nancy-Salpepi said:

I find it a little odd that the expand/collapse button for the Data accordion box is first in the focus order on the Diffusion Screen (or the stopwatch if that is checked). ...

I agree with this, which is why I asked about changes to the Diffusion screen order in #213 (comment).

@arouinfar thoughts?

[arouinfar]

@arouinfar thoughts?

@Nancy-Salpepi raises a good point. Let's start with the settings panel so people can set up the experiment. If we keep things consistent with the previous screens, the Tools Panel should be the first thing in the Control Area (Option 1). If we don't like breaking up the visual flow, we could go with Option 2 instead. This also has the benefit of putting the StopwatchNode after the Stopwatch Checkbox, which is a more natural experience, though is inconsistent with how we do it in other sims.

My vote would be for Option 1, though I am fine with Option 2 if others prefer it.

Option 1

Play Area

1. Settings Panel
2. Data AccordionBox
3. Stopwatch Node

Control Area

4. Tools Panel
5. TimeControlNode
6. ResetAllButton

Option 2

Play Area

1. Settings Panel
2. Tools Panel
3. Data AccordionBox
4. Stopwatch Node

Control Area

6. TimeControlNode
7. ResetAllButton

[kathy-phet]

I like Option 1 as well.

[kathy-phet]

And I agree with @Nancy-Salpepi here:

The hotkey for Play/Pause is going to be really useful when setting up experiments. It should be added to the Keyboard Shortcuts Dialog to remind users of it.

[Nancy-Salpepi]

I also like Option 1. It is more consistent with the other screens.

[pixelzoom]

Option 1 it is. @arouinfar please review, close if OK.

And note that keyboard help for Play/Pause was added in #215.

[arouinfar]

Looks good, thanks everyone! Closing.