66 lines
1.9 KiB
JavaScript
66 lines
1.9 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() {
|
|
$timestamp.html(activeGamepad.timestamp);
|
|
}
|
|
})();
|