How to use JS Gamepad API and Build a Gamepad Tester in 12 minutes

An easy to build gamepad tester using the JavaScript Gamepad API. This gamepad tester displays a controller and highlights the buttons being pressed. It can even show the position of the analog sticks in real time.

Controller Image SVG Code (copy into HTML)

GitHub

Try it here:

[Simmerio]

so straightforward so simple, thanks a bunch!

[EnigmatycznyPL]

7:05 - 7:10 in my editor it isn`t working. I don`t see any gamepadButton information

[davidf]

For some reason this won't run on Chrome for me, even using your 'try it here' link. It will recognize the controller connecting/disconnecting and will recognize the first button click, then nothing. But it works perfectly on Firefox. Gamepadviewer works fine on Chrome, but not this. Anyone have any idea of what Chrome configuration I may have messed up to allow it to kinda run JS then stop.

[bahilahijazi]

Thanks! My controller doesn't have these sticks only the arrows and when I do the tutorial the arrows are not identified, if I added the sticks codes will it be the same as programming the arrows? if not, how can I identify the arrows? Many thanks

[Seanmclem]

Do you know where I can get comparable SVGs for other controllers?

[razvangrigore]

How did you came up with the position of the buttons relative to the index in the gamepadApi array? Can the same logic be applied to racing wheels for example? Thank you!

[nizarahamed.m]

Does this work for all types of controller?Like ps4 controller?

[elitetatsuya]

3:13 why do you parenthese a single argument