76 lines
2.0 KiB
JavaScript
76 lines
2.0 KiB
JavaScript
(() => {
|
|
$id = $("#info-id .value");
|
|
$timestamp = $("#info-timestamp .value");
|
|
$index = $("#info-index .value");
|
|
$mapping = $("#info-mapping .value");
|
|
$axes = $(".axes .container");
|
|
$buttons = $(".buttons .container");
|
|
|
|
gamepad = window.gamepad;
|
|
activeGamepad = gamepad.getActiveGamepad();
|
|
|
|
if (!activeGamepad) {
|
|
return;
|
|
}
|
|
|
|
$id.html(activeGamepad.id);
|
|
$timestamp.html(activeGamepad.timestamp);
|
|
$index.html(activeGamepad.index);
|
|
$mapping.html(activeGamepad.mapping);
|
|
|
|
for (
|
|
let axisIndex = 0;
|
|
axisIndex < activeGamepad.axes.length;
|
|
axisIndex++
|
|
) {
|
|
$axes.append(`
|
|
<div class="box medium">
|
|
<div class="content">
|
|
<div class="label">AXIS ${axisIndex}</div>
|
|
<div class="value" data-axis="${axisIndex}">0</div>
|
|
</div>
|
|
</div>
|
|
`);
|
|
}
|
|
|
|
for (
|
|
let buttonIndex = 0;
|
|
buttonIndex < activeGamepad.buttons.length;
|
|
buttonIndex++
|
|
) {
|
|
$buttons.append(`
|
|
<div class="box small">
|
|
<div class="content">
|
|
<div class="label">B${buttonIndex}</div>
|
|
<div class="value" data-button="${buttonIndex}">0</div>
|
|
</div>
|
|
</div>'
|
|
`);
|
|
}
|
|
|
|
gamepad.updateButton = function($button) {
|
|
updateElem($button);
|
|
};
|
|
|
|
gamepad.updateAxis = function($axis) {
|
|
updateElem($axis, 6);
|
|
};
|
|
|
|
function updateElem($elem, precision = 2) {
|
|
updateTimestamp();
|
|
|
|
var value = parseFloat($elem.attr("data-value"), 10).toFixed(precision);
|
|
$elem.html(value);
|
|
var color = Math.floor(255 * 0.3 + 255 * 0.7 * Math.abs(value));
|
|
$elem.css({ color: `rgb(${color}, ${color}, ${color})` });
|
|
}
|
|
|
|
function updateTimestamp() {
|
|
activeGamepad = gamepad.getActiveGamepad();
|
|
if (!activeGamepad) {
|
|
return;
|
|
}
|
|
$timestamp.html(activeGamepad.timestamp);
|
|
}
|
|
})();
|