luser / gamepadtest

Gamepad API Test

This is a simple demo of using the Gamepad API in JavaScript. It attempts to account for differences in implementations of the unfinished spec, as well as Chrome's prefixed implementation.

Gamepad API Test

Written in 2013 by Ted Mielczarek [email protected]

To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.

You should have received a copy of the CC0 Public Domain Dedication along with this software. If not, see http://creativecommons.org/publicdomain/zero/1.0/.

gamepadtest's Issues

Inconsistent formatting

Code has inconsistent formatting, for example you use spacer in for loops or don't
line 93 for (var i=0; i<controller.axes.length; i++) {
line 104 for (var i = 0; i < gamepads.length; i++) {

Confusing css class name changes in javascript

If I understood it correctly, the code overrides the className with every loop iteration.
b.className = "button"; is used to remove the "pressed" class.

To make it more clear, you could use the add and remove methods of classList property.
instead use buttonElement.classList.remove('pressed');
also utilize buttonElement.classList.add('pressed'); when it's needed.

Does not work in Chrome

see https://developer.mozilla.org/en-US/docs/Web/Guide/API/Gamepad$revision/699429 and https://developer.mozilla.org/en-US/docs/Web/Guide/API/Gamepad$revision/699433

Chrome sniffing is completely unnecessary

There's no need at all for separate Chrome/Firefox code paths here. Just check navigator.getGamepads() instead of storing Event.gamepad, and the same code works exactly the same way for both.

Unnecessary use of global variable

for (j in controllers)
uses global "j" variable,
use const and a meaningful variable name
for (const property in controllers)
or
for (const controller in controllers)
whichever is more appropriate
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

Broken in Chrome Canary

Chrome added support for gamepadconnected/gamepaddisconnected events, but something is not working right, as nothing shows up. This is in Chrome Canary 36.0.1964.2. Not sure if this is a bug in my code or in Chrome. Works fine in 34.0.1847.131 on the same machine.

@toji, @sgraham, any thoughts?

Display axis bar including digital value.

Thank you awesome example program.
I have changed axis bar too convinient.

To display Axis bar including digital number value, add CSS.

.axis::before {
min-height: 14px;
content: attr(num);
color: red;
vertical-align: text-top;
font-size: x-small;
font-weight: bold;
margin-left: 3px;
}

And rewrite part of addgamepad function for "num" attribute,

var b = $("<div class='buttons'>");
for (var i=0; i<gamepad.buttons.length; i++) {
var e = $("<span class='button'>"+i+"</span>");
b.append(e);
}
d.append(b);
var a = $("<div class='axes'>");
for (i=0; i<gamepad.axes.length; i++) {
e = $("<progress class='axis'>",{"max":"2","value":"1","num":"ax"+i});
a.append(e);
}
d.append(a);
document.body.appendChild(d[0]);
rAF(updateStatus);

And updatestatus function too,
var a = axes[i];
a.setAttribute("max", "2");
a.setAttribute("num", "ax"+i+ ": " + controller.axes[i].toFixed(4));
a.setAttribute("value", controller.axes[i] + 1);

Thank you.

Backbone plugin

Thanks for writing this example.

I reformed it into a re-usable Backbone.js plugin - for anyone interested:
https://github.com/backbone-input/gamepad

Hope it helps!

Vibration

It would be nice to have a button that vibrates the controller.

before contributing

Hi, first thanks for this awesome demo!

Would you accept a pull request with the following commits ? :

• Replace <progress> with <meter>
• Rename variables that uses single letter with more descriptive names
• performance optimizations

Also another question: Is window.addEventListener("gamepadconnected", connecthandler); window.addEventListener("gamepaddisconnected", disconnecthandler); useless considering scangamepads(); is called all the time in the requestAnimationFrame ? Or am I missing something ?

Xbox one controller

I am using an xbox one controller, but it's showing that I'm using Xbox 360 controller.