zepumph
commented
2 years ago @matthew-blackman and I experiemented with this a bit, just in a basic case where you can focus the keypad and listen to number keys, it worked well enough that I'll put the patch in here for next time:
```diff
Index: js/keypad/Key.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/keypad/Key.ts b/js/keypad/Key.ts
--- a/js/keypad/Key.ts (revision 5a9d545803ad99f6199953954520ab0dc9a100d4)
+++ b/js/keypad/Key.ts (date 1668185846827)
@@ -15,6 +15,7 @@
type SelfOptions = {
horizontalSpan?: number;
verticalSpan?: number;
+ keyboardIdentifier?: string | null;
};
export type KeyOptions = SelfOptions;
@@ -30,6 +31,8 @@
// The tandem component name to use when creating a button from this key.
public readonly buttonTandemName: string;
+ public readonly keyboardIdentifier: string | null;
+
/**
* @param label - node or string that will appear on the key
* @param identifier - ID for this key, see KeyID.js
@@ -42,11 +45,13 @@
const options = optionize()( {
horizontalSpan: 1,
- verticalSpan: 1
+ verticalSpan: 1,
+ keyboardIdentifier: null
}, providedOptions );
this.horizontalSpan = options.horizontalSpan;
this.verticalSpan = options.verticalSpan;
+ this.keyboardIdentifier = options.keyboardIdentifier;
this.buttonTandemName = `${_.camelCase( this.identifier )}Button`;
}
Index: js/demo/components/demoKeypad.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/demo/components/demoKeypad.ts b/js/demo/components/demoKeypad.ts
--- a/js/demo/components/demoKeypad.ts (revision 5a9d545803ad99f6199953954520ab0dc9a100d4)
+++ b/js/demo/components/demoKeypad.ts (date 1668185846856)
@@ -200,8 +200,8 @@
resize: false,
children: [
integerVBox,
- floatingPointVBox,
- positiveAndNegativeFloatingPointVBox
+ // floatingPointVBox,
+ // positiveAndNegativeFloatingPointVBox
],
center: layoutBounds.center
} );
Index: js/keypad/Keypad.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/keypad/Keypad.ts b/js/keypad/Keypad.ts
--- a/js/keypad/Keypad.ts (revision 5a9d545803ad99f6199953954520ab0dc9a100d4)
+++ b/js/keypad/Keypad.ts (date 1668186023976)
@@ -9,7 +9,7 @@
import merge from '../../../phet-core/js/merge.js';
import optionize from '../../../phet-core/js/optionize.js';
-import { Font, Node, NodeOptions, Text, TPaint } from '../../../scenery/js/imports.js';
+import { Font, KeyboardListener, Node, NodeOptions, Text, TPaint } from '../../../scenery/js/imports.js';
import RectangularPushButton from '../../../sun/js/buttons/RectangularPushButton.js';
import Tandem from '../../../tandem/js/Tandem.js';
import BackspaceIcon from '../BackspaceIcon.js';
@@ -29,16 +29,16 @@
const DEFAULT_BUTTON_COLOR = 'white';
const PLUS_CHAR = '\u002b';
const MINUS_CHAR = '\u2212';
-const _0 = new Key( '0', KeyID.ZERO );
-const _1 = new Key( '1', KeyID.ONE );
-const _2 = new Key( '2', KeyID.TWO );
-const _3 = new Key( '3', KeyID.THREE );
-const _4 = new Key( '4', KeyID.FOUR );
-const _5 = new Key( '5', KeyID.FIVE );
-const _6 = new Key( '6', KeyID.SIX );
-const _7 = new Key( '7', KeyID.SEVEN );
-const _8 = new Key( '8', KeyID.EIGHT );
-const _9 = new Key( '9', KeyID.NINE );
+const _0 = new Key( '0', KeyID.ZERO, { keyboardIdentifier: '0' } );
+const _1 = new Key( '1', KeyID.ONE, { keyboardIdentifier: '1' } );
+const _2 = new Key( '2', KeyID.TWO, { keyboardIdentifier: '2' } );
+const _3 = new Key( '3', KeyID.THREE, { keyboardIdentifier: '3' } );
+const _4 = new Key( '4', KeyID.FOUR, { keyboardIdentifier: '4' } );
+const _5 = new Key( '5', KeyID.FIVE, { keyboardIdentifier: '5' } );
+const _6 = new Key( '6', KeyID.SIX, { keyboardIdentifier: '6' } );
+const _7 = new Key( '7', KeyID.SEVEN, { keyboardIdentifier: '7' } );
+const _8 = new Key( '8', KeyID.EIGHT, { keyboardIdentifier: '8' } );
+const _9 = new Key( '9', KeyID.NINE, { keyboardIdentifier: '9' } );
const WIDE_ZERO = new Key( '0', KeyID.ZERO, { horizontalSpan: 2 } );
const BACKSPACE_KEY = new Key( ( new BackspaceIcon( { scale: 1.5 } ) ), KeyID.BACKSPACE );
const PLUS_MINUS_KEY = new Key( `${PLUS_CHAR}/${MINUS_CHAR}`, KeyID.PLUS_MINUS );
@@ -90,7 +90,7 @@
*/
public constructor( layout: ( Key | null )[][], providedOptions?: KeypadOptions ) {
- const options = optionize()( {
+ const options = optionize()( {
buttonWidth: DEFAULT_BUTTON_WIDTH,
buttonHeight: DEFAULT_BUTTON_HEIGHT,
xSpacing: 10,
@@ -102,7 +102,10 @@
accumulator: null,
accumulatorOptions: null,
tandem: Tandem.REQUIRED,
- tandemNameSuffix: 'Keypad'
+ tandemNameSuffix: 'Keypad',
+
+ tagName: 'div',
+ focusable: true
}, providedOptions );
super();
@@ -148,12 +151,15 @@
}
}
+ const keyboardKeys: IntentionalAny = [];
+
// interpret the layout specification
for ( let row = 0; row < layout.length; row++ ) {
const startRow = row;
for ( let column = 0; column < layout[ row ].length; column++ ) {
const button = layout[ row ][ column ];
if ( button ) {
+ button.keyboardIdentifier && keyboardKeys.push( button.keyboardIdentifier );
const keyBefore = layout[ row ][ column - 1 ];
const startColumn = column +
( column > 0 && keyBefore ?
@@ -181,6 +187,13 @@
}
}
+ this.addInputListener( new KeyboardListener( {
+ keys: keyboardKeys,
+ callback: ( x ) => {
+ console.log( x );
+ }
+ } ) );
+
this.mutate( options );
}
matthew-blackman
The "Lab" screen in this sim supports the ability to specify a "Custom" projectile, and then enter values for several parameters such as mass, diameter, etc. Currently, the user has to interact with the keypad in the sim to enter these values, and can't just type the numbers on their keyboard. Part of the reason for this behavior is that we didn't want to make the inputs real HTML input fields, because that caused the keyboard to pop up on devices like iPads. With the recent advances that we've made on keyboard input listeners (see https://github.com/phetsims/scenery/issues/1445), it should now be possible to add a global key listener that would support entering numeric values.
Here is a screenshot from the Lab screen that shows the state where the values can be entered:
During the 10/27/2022 developer meeting, we discussed adding numeric entry to several sims, and decided to set up this particular issue as a sort of "pilot project" for handling numeric entry from the keypad. Some of what is done here may need to in common code to make it easier to add the same or similar functionality to other sims.