jareiko.github.com/gamepad-api-test.html at master · jareiko/jareiko.github.com · GitHub

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html>
  <head>
    <title>Gamepad API Test</title>

    <style>
      td {
        border: 1px solid #ddd;
      }
    </style>
  </head>
  <body>
    <h1>Gamepad API Test</h1>
    <p>
      Latest draft spec is <a href="https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html">here</a>,
      but currently the only browser with any support is Chrome, and it doesn't implement events so you have to poll.
    </p>
    <p>
      Connect a gamepad and press a button on it to activate. This page polls 10 times per second.
    </p>

    <div id="methods">
    </div>

    <script>
      var doc = document;
      var methods = doc.getElementById("methods");

      var rgb = function(r, g, b) {
        return (
          Math.min(255, Math.max(0, Math.floor(b * 256))) +
          Math.min(255, Math.max(0, Math.floor(g * 256))) * 256 +
          Math.min(255, Math.max(0, Math.floor(r * 256))) * 65536);
      }

      var fmtNumber = function(number) {
        var color = rgb(
          1 - 0.5 * number,
          1 + 0.5 * number,
          1 - 0.5 * Math.abs(number)
        ).toString(16);
        var repr = number.toFixed(3);
        var spacer = repr[0] === "-" ? "" : "+";
        return "<code style=\"background:#" + color + "\">" + spacer + repr + "</code>";
      }

      var showGamepads = function(getterName) {
        methods.appendChild(doc.createElement("hr"));
        var title = doc.createElement("h2");
        var TIMEOUT = 100;
        title.innerHTML = "<code>" + getterName + "</code>";
        methods.appendChild(title);

        if (!navigator[getterName]) {
          var p = doc.createElement("p");
          p.textContent = "Method not supported by this browser."
          methods.appendChild(p);
          return;
        }

        var table = doc.createElement("table");
        methods.appendChild(table);

        setInterval(function() {
          var i, j, x, gamepads, gamepad, row, cell;
          table.innerHTML = "";
          gamepads = navigator[getterName]();
          for (i = 0; i < gamepads.length; ++i) {
            gamepad = gamepads[i];
            if (!gamepad) {
              row = doc.createElement("tr");
              cell = doc.createElement("td");
              cell.innerHTML = "gamepad " + i + " absent";
              row.appendChild(cell);
              table.appendChild(row);
              continue;
            }
            row = doc.createElement("tr");
            cell = doc.createElement("td");
            cell.innerHTML = "gamepad " + i + " id";
            row.appendChild(cell);
            cell = doc.createElement("td");
            cell.colSpan = 10;
            cell.innerHTML = "<code>" + gamepad.id + "</code>";
            row.appendChild(cell);
            table.appendChild(row);
            row = doc.createElement("tr");
            cell = doc.createElement("td");
            cell.innerHTML = "gamepad " + i + " axes";
            row.appendChild(cell);
            for (j = 0; j < gamepad.axes.length; ++j) {
              cell = doc.createElement("td");
              cell.innerHTML = j + ": " + fmtNumber(gamepad.axes[j]);
              row.appendChild(cell);
            }
            table.appendChild(row);
            row = doc.createElement("tr");
            cell = doc.createElement("td");
            cell.innerHTML = "gamepad " + i + " buttons";
            row.appendChild(cell);
            for (j = 0; j < gamepad.buttons.length; ++j) {
              cell = doc.createElement("td");
              cell.innerHTML = j + ": " + fmtNumber(gamepad.buttons[j]);
              row.appendChild(cell);
            }
            table.appendChild(row);
          }
        }, TIMEOUT);
      };

      showGamepads('getGamepads');
      showGamepads('mozGetGamepads');
      showGamepads('webkitGetGamepads');

    </script>

  </body>
</html>