kiosk: support gamepad dpad for navigation #9712
Conversation
| launchSelectedGame(); | ||
| } | ||
| }, | ||
| GamepadManager.GamepadControl.AButton, | ||
| GamepadManager.GamepadControl.BButton | ||
| GamepadManager.GamepadControl.AButton |
There was a problem hiding this comment.
What is this line doing? And why remove the B button?
There was a problem hiding this comment.
Oh, is this just setting the button to launch the games?
There was a problem hiding this comment.
That's correct, this is the code that maps which button (or buttons) launch the selected game. This is a spot where the expected behavior of keyboard and gamepad differ. With a keyboard, you would typically expect that pressing Enter would launch the game. But, in kiosk's setup, both the keyboard's Enter key and the gamepad's B button are mapped to the same functionality: they both represent the simulator's B button. In other areas of Kiosk, B is used to navigate back within the UI, like closing a dialog. It felt like a bug to be able to launch a game with the gamepad's B button. For that reason, and for consistency with the "navigate back" behavior elsewhere, I decided to remove it here.
| return ControlValue.Down; | ||
| } | ||
| } | ||
| return ControlValue.Up; |
There was a problem hiding this comment.
I'm a little confused. Do the left and right controls become an up control?
There was a problem hiding this comment.
This code just returns Down if any of the passed in values are Down. Otherwise it returns Up. It's a helper function that is useful when multiple gamepad buttons are mapped to the same control. For example, both left-stick-left and dpad-left represent the DPadLeft control. It either one are active, we want to represent the DPadLeft control as being Down.
| export const focusElement = (el: HTMLElement | null | undefined): void => { | ||
| setTimeout(() => { | ||
| el?.focus({ focusVisible: true, preventScroll: true } as any); | ||
| }, 0); |
There was a problem hiding this comment.
Why is the setTimeout needed here?
There was a problem hiding this comment.
It probably isn't needed. I was struggling with getting focus to work reliably on Xbox, but turns out the problem was elsewhere. This was a workaround I found for a similar problem seen in earlier browsers like IE. I will make a note to remove it.
| const axisIndex = axisConf.Pin; | ||
| if (axisIndex < 0 || axisIndex >= gamepad.axes.length) | ||
| return ControlValue.Up; | ||
| const threshold = axisConf.Sign * axisConf.Threshold; |
There was a problem hiding this comment.
What does threshold mean?
There was a problem hiding this comment.
This value represents the threshold at which a gamepad axis is considered active. Gamepad sticks, even when not touched, rarely report (0,0) as their position due to inherent noise. They're always changing and reporting small, off-center values, like (0.01, -0.003). Furthermore, small stick movements report erratic positions and aren't reliable. The threshold allows us to filter out this noise and only respond to meaningful movements.
* Add `--no-webapps` gulp option (#9622) * Add `--no-webapps' gulp option * Fix function declaration inconsistency * docs * Move kiosk project to pxt repo (#9624) * Move kiosk to pxt repo * sync latest kiosk changes from arcade repo * Move kiosk config files to arcade docs * kiosk updates * update GameDataUrl * comment missing icon resources * disable eslint, for now * fix code scan warning * Include kiosk build in npm package contents (#9631) * Sync kiosk changes (#9645) * Restore absolute url on kiosk qr code (#9660) * Add prettier to kiosk (#9667) * kiosk: increase gamepad polling frequency (#9668) * Kiosk navigation improvements (#9669) * Navigation improvements * add return types * sound effect tweak * Add switch sound to Adding Game screen * New UI effects for Kiosk, authored in Arcade (#9671) * New UI effects authored in Arcade * Update readme * Clarify readme * Moving kiosk sfx to arcade repo (#9672) * Remove unused components from kiosk (#9678) * disable app insights correlation headers (#9679) * load pxtlib into kiosk (#9680) * Made a few small navigation improvements (#9686) * Kiosk: Use pxt.tickEvent (#9687) * Kiosk: Use pxt.tickEvent * remove localhost special case * Refactor kiosk state management (#9689) * kiosk: refactor add game polling (#9691) * kiosk: refactor add game polling * show toast on game delete * poll for games even while playing a game * Kiosk: Remove direct dom manipulation (#9692) * Remove direct dom manipulation * tweak adding game css * prettier * Removed unneeded css attribute * update readme * Remove unwanted memo dependency * Kiosk: Support event-based navigation (#9700) * Kiosk: Support event-based navigation * remove unused packages * Add spacer to add game layout to keep it centered at wide resolutions * Restore link border on scan qr page * Shortened background transition time * Better focus trapping. Fix tab nav on ScanQR page. * pr feedback * prettier * lf all the strings (#9710) * kiosk: support gamepad dpad for navigation (#9712) * Identify kiosk uwp app in telemetry (#9714) * kiosk: setup react-common dependency (#9717) * react-common: support for button children (#9719) * kiosk: use button control from react common (#9720) * css fix for "press start" label on safari (#9722) * kiosk: download targetconfig.json at startup (#9723) * kiosk: download targetconfig.json at startup * update cli crowdin thing * Update cli/cli.ts Co-authored-by: Joey Wunderlich <[email protected]> --------- Co-authored-by: Joey Wunderlich <[email protected]> * Add `--noauth` option to `pxt serve` (#9725) * kiosk: persist built game js in local storage (#9726) * kiosk: persist built game js in local storage * better null check * kiosk: fixes for carousel touch nav, storage exceptions (#9731) Pushing this through in time for testing today. * fixes for carousel touch nav, storage exceptions * don't save compiled js in local storage. * Log gamepad type to telemetry (#9739) * support setting color of "loading" text in run.html (#9738) * fix for shoebox controller (#9737) * kiosk: remap esc to the controller's back button (#9735) * kiosk: fix for skipped letters when entering high score (#9734) * kiosk: fix for skipping letters when entering high score * whitespace * kiosk: store built js in indexeddb, not local storage (#9736) * kiosk: map controller Y to escapebutton functionality (#9741) --------- Co-authored-by: Joey Wunderlich <[email protected]>
Also made tweaks to control focus logic for more reliable behavior on Xbox.