-
Notifications
You must be signed in to change notification settings - Fork 11
/
raw-gamepad-api-test.html
94 lines (87 loc) · 2.42 KB
/
raw-gamepad-api-test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
<head>
<script type="text/javascript">
var controllers = {};
function connecthandler(e) {
var controller = e.gamepad;
controllers[e.gamepad.index] = controller;
var d = document.createElement("div");
d.setAttribute("id", "controller" + e.gamepad.index);
var t = document.createElement("h1");
t.appendChild(document.createTextNode("gamepad: " + e.gamepad.id));
d.appendChild(t);
var b = document.createElement("div");
b.className = "buttons";
for (var i=0; i<controller.buttons.length; i++) {
var e = document.createElement("span");
e.className = "button";
//e.id = "b" + i;
e.innerHTML = i;
b.appendChild(e);
}
d.appendChild(b);
var a = document.createElement("div");
a.className = "axes";
for (var i=0; i<controller.axes.length; i++) {
var e = document.createElement("progress");
e.className = "axis";
//e.id = "a" + i;
e.setAttribute("max", "2");
e.setAttribute("value", "1");
e.innerHTML = i;
a.appendChild(e);
}
d.appendChild(a);
document.getElementById("start").style.display = "none";
document.body.appendChild(d);
window.mozRequestAnimationFrame(updateStatus);
}
function disconnecthandler(e) {
var d = document.getElementById("controller" + e.gamepad.index);
document.body.removeChild(d);
delete controllers[e.gamepad.index];
}
function updateStatus() {
for (j in controllers) {
var controller = controllers[j];
var d = document.getElementById("controller" + j);
var buttons = d.getElementsByClassName("button");
for (var i=0; i<controller.buttons.length; i++) {
var b = buttons[i];
if (controller.buttons[i]) {
b.className = "button pressed";
}
else {
b.className = "button";
}
}
var axes = d.getElementsByClassName("axis");
for (var i=0; i<controller.axes.length; i++) {
var a = axes[i];
a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
a.setAttribute("value", controller.axes[i] + 1);
}
}
window.mozRequestAnimationFrame(updateStatus);
}
window.addEventListener("MozGamepadConnected", connecthandler);
window.addEventListener("MozGamepadDisconnected", disconnecthandler);
</script>
<style>
.buttons, .axes {
padding: 1em;
}
.button {
padding: 1em;
border-radius: 20px;
border: 1px solid black;
}
.pressed {
background-color: green;
}
</style>
</head>
<body>
<h2 id="start">Press a button on your controller to start</h2>
</body>
</html>