JavaScript question here: (Ref: Gamepad API located at https://w3c.github.io/gamepad/)
Given the following code:
<script>
var joystick_data
window.addEventListener("gamepadconnected", (event) => {
joystick_data = event.gamepad;
console.log("A gamepad was connected:");
console.log("joystick_data");
console.log(joystick_data);
console.log("joystick.data.id");
console.log(joystick_data.id);
console.log("joystick_data.buttons");
console.log(joystick_data.buttons);
console.log("joystick_data.buttons[0] - joystick_data.buttons[23]");
console.log(joystick_data.buttons[0], " - ", joystick_data.buttons[23]);
});
window.addEventListener("gamepaddisconnected", (event) => {
console.log("A gamepad was disconnected:");
console.log(event.gamepad);
});
</script>
when run returns the following in the browser console:
A gamepad was connected:
joystick_data
Gamepad { id: "06a3-075c-Saitek X52 Flight Control System", index: 0, mapping: "", hand: "", displayId: 0, connected: true, buttons: (34) […], axes: (10) […], timestamp: 251, pose: GamepadPose }
joystick.data.id
06a3-075c-Saitek X52 Flight Control System
joystick_data.buttons
Array(34) [ GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, … ]
joystick_data.buttons[0] - joystick_data.buttons[23]
GamepadButton { pressed: true, touched: true, value: 1 } - GamepadButton { pressed: false, touched: false, value: 0 }
Note particularly the last line where I read two of the gamepad buttons. Button 0 is the trigger, which I was holding. Button 23 is one step on a 3-position selector switch - and is always on when selected - and it is.
Note that gamepad button 0 shows true and gamepad button 23 shows false, (not selected).
Now, here is a “closeup” of the gamepad button objects:
First is the gamepad button object, then the expansion of that object
(There’s a little triangle next to the word "gamepad indicating it can be expanded.)
Gamepad button 0, (the main “trigger”), which I am holding:
GamepadButton { pressed: true, touched: true, value: 1 }
GamepadButton
pressed: false
touched: false
value: 0
Gamepad button 23, (which should be pressed):
GamepadButton { pressed: false, touched: false, value: 0 }
GamepadButton
pressed: true
touched: true
value: 1
I am including two snips of the web console showing the two states of the two gamepad objects. The first one shows the objects collapsed (at the very bottom) and the second shows the same to objects expanded.
Console window
#1 with the properties collapsed.
Console window
#2 with the properties expanded.
All other buttons show “false” and the expansion shows false as well.
Note that in the case of the “trigger” button, the first view shows it pressed but the expanded view of that property shows it not pressed.
In the case of the “selector wheel” button which should be always selected, the first view shows it not pressed and the expanded view of the button’s property shows true
I am confused.
I am attaching the complete code file. You can put it some where and click on it - assuming you have a joystick with at least 23 buttons on it.
Any help would be gratefully appreciated as there is nothing online that even begins to talk about this.
joystick_test-2.html.txt (2.5 KB)
Remove the “.txt” at the end.
