Rim-Modules/gamepad-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed debug template issues

Browse Source
This commit is contained in:
e7d 2020-11-26 14:26:53 +01:00
parent 925ca4b30d
commit 35d5f86330
No known key found for this signature in database
GPG Key ID: F320BE007C0B8881
3 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
templates/debug/template.css
View File

@ -41,6 +41,7 @@
.label { .label {
font-size: 0.8em; font-size: 0.8em;
font-weight: 600; font-weight: 600;
text-transform: uppercase;
color: #aaaaaa; color: #aaaaaa;
} }

14
templates/debug/template.html
View File

@ -12,21 +12,27 @@
</div> </div>
<div class="info"> <div class="info">
<div class="container"> <div class="container">
<div id="info-timestamp" class="box large"> <div id="info-timestamp" class="box medium">
<div class="content"> <div class="content">
<div class="label">TIMESTAMP</div> <div class="label">Timestamp</div>
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>
<div id="info-index" class="box medium"> <div id="info-index" class="box medium">
<div class="content"> <div class="content">
<div class="label">INDEX</div> <div class="label">Index</div>
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>
<div id="info-mapping" class="box medium"> <div id="info-mapping" class="box medium">
<div class="content"> <div class="content">
<div class="label">MAPPING</div> <div class="label">Mapping</div>
<div class="value"></div>
</div>
</div>
<div id="info-rumble" class="box medium">
<div class="content">
<div class="label">Vibration</div>
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>

20
templates/debug/template.js
View File

@ -3,6 +3,7 @@
$timestamp = $("#info-timestamp .value"); $timestamp = $("#info-timestamp .value");
$index = $("#info-index .value"); $index = $("#info-index .value");
$mapping = $("#info-mapping .value"); $mapping = $("#info-mapping .value");
$rumble = $("#info-rumble .value");
$axes = $(".axes .container"); $axes = $(".axes .container");
$buttons = $(".buttons .container"); $buttons = $(".buttons .container");
@ -14,9 +15,14 @@
} }
$id.html(activeGamepad.id); $id.html(activeGamepad.id);
$timestamp.html(activeGamepad.timestamp); updateTimestamp();
$index.html(activeGamepad.index); $index.html(activeGamepad.index);
$mapping.html(activeGamepad.mapping); $mapping.html(activeGamepad.mapping);
$rumble.html(
activeGamepad.vibrationActuator
? activeGamepad.vibrationActuator.type
: "N/A"
);
for ( for (
let axisIndex = 0; let axisIndex = 0;
@ -26,7 +32,7 @@
$axes.append(` $axes.append(`
<div class="box medium"> <div class="box medium">
<div class="content"> <div class="content">
<div class="label">AXIS ${axisIndex}</div> <div class="label">Axis ${axisIndex}</div>
<div class="value" data-axis="${axisIndex}"></div> <div class="value" data-axis="${axisIndex}"></div>
</div> </div>
</div> </div>
@ -48,20 +54,20 @@
`); `);
} }
gamepad.updateButton = function($button) { gamepad.updateButton = function ($button) {
updateElem($button); updateElem($button);
}; };
gamepad.updateAxis = function($axis) { gamepad.updateAxis = function ($axis) {
updateElem($axis, 6); updateElem($axis, 6);
}; };
function updateElem($elem, precision = 2) { function updateElem($elem, precision = 2) {
updateTimestamp(); updateTimestamp();
var value = parseFloat($elem.attr("data-value"), 10).toFixed(precision); let value = parseFloat($elem.attr("data-value"), 10).toFixed(precision);
$elem.html(value); $elem.html(value);
var color = Math.floor(255 * 0.3 + 255 * 0.7 * Math.abs(value)); let color = Math.floor(255 * 0.3 + 255 * 0.7 * Math.abs(value));
$elem.css({ color: `rgb(${color}, ${color}, ${color})` }); $elem.css({ color: `rgb(${color}, ${color}, ${color})` });
} }
@ -70,6 +76,6 @@
if (!activeGamepad) { if (!activeGamepad) {
return; return;
} }
$timestamp.html(activeGamepad.timestamp); $timestamp.html(parseFloat(activeGamepad.timestamp).toFixed(3));
} }
})(); })();