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

added debug template

Browse Source
This commit is contained in:
e7d 2017-05-14 10:09:40 +02:00
parent e687a2810e
commit 121ee8942a
3 changed files with 85 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
templates/debug/template.css
View File

@ -6,27 +6,28 @@ ul, li {
li {
display: inline-block;
min-width: 50px;
padding: 3px;
min-width: 40px;
padding: 5px;
margin: 0 5px 5px 0;
background: #333333;
line-height: 1;
}
li.medium {
min-width: 100px;
min-width: 95px;
}
li.large {
min-width: 200px;
min-width: 205px;
}
li.extra-large {
min-width: 425px;
}
label {
width: 20px;
.label {
font-size: 0.8em;
color: #aaaaaa;
}
value {
display: block;
.value {
text-align: right;
margin-top: 3px;
overflow: hidden;

35
templates/debug/template.html
View File

@ -2,16 +2,31 @@
<script async src="templates/debug/template.js"></script>
<div class="info">
<ul>
<li id="info-timestamp" class="large"><label>TIMESTAMP</label>
<value></value>
</li>
<li id="info-index"><label>INDEX</label>
<value></value>
</li>
<li id="info-mapping" class="medium"><label>MAPPING</label>
<value></value>
<li id="info-id" class="extra-large">
<div class="label">ID</div>
<div class="value"></div>
</li>
</ul>
</div>
<div class="axes"><ul></ul></div>
<div class="buttons"><ul></ul></div>
<div class="info">
<ul>
<li id="info-timestamp" class="large">
<div class="label">TIMESTAMP</div>
<div class="value"></div>
</li>
<li id="info-index" class="medium">
<div class="label">INDEX</div>
<div class="value"></div>
</li>
<li id="info-mapping" class="medium">
<div class="label">MAPPING</div>
<div class="value"></div>
</li>
</ul>
</div>
<div class="axes">
<ul></ul>
</div>
<div class="buttons">
<ul></ul>
</div>

93
templates/debug/template.js
View File

@ -1,52 +1,61 @@
var $timestamp = $('#info-timestamp value'),
$index = $('#info-index value'),
$mapping = $('#info-mapping value'),
$axes = $('.axes ul'),
(() => {
$id = $('#info-id .value');
$timestamp = $('#info-timestamp .value');
$index = $('#info-index .value');
$mapping = $('#info-mapping .value');
$axes = $('.axes ul');
$buttons = $('.buttons ul');
var gamepad = gamepads[activeGamepadIndex];
gamepad = window.gamepad;
activeGamepad = gamepad.getActiveGamepad();
$timestamp.html(gamepad.timestamp);
$index.html(gamepad.index);
$mapping.html(gamepad.mapping);
if (!activeGamepad) {
return;
}
for (var axisIndex = 0; axisIndex < gamepad.axes.length; axisIndex++) {
$axes.append(
'<li class="medium">' +
' <label>AXIS ' + axisIndex + '</label>' +
' <value data-axis="' + axisIndex + '">0</value>' +
'</li>'
);
}
$id.html(activeGamepad.id);
$timestamp.html(activeGamepad.timestamp);
$index.html(activeGamepad.index);
$mapping.html(activeGamepad.mapping);
for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
$buttons.append(
'<li>' +
' <label>B' + buttonIndex + '</label>' +
' <value data-button="' + buttonIndex + '">0</value>' +
'</li>'
);
}
for (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
$axes.append(
'<li class="medium">' +
' <div class="label">AXIS ' + axisIndex + '</div>' +
' <div class="value" data-axis="' + axisIndex + '">0</div>' +
'</li>'
);
}
function updateButton($button) {
updateElem($button);
}
for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
$buttons.append(
'<li>' +
' <div class="label">B' + buttonIndex + '</div>' +
' <div class="value" data-button="' + buttonIndex + '">0</div>' +
'</li>'
);
}
function updateAxis($axis) {
updateElem($axis, 6);
}
gamepad.updateButton = function($button) {
updateElem($button);
}
function updateElem($elem, precision = 2) {
updateTimestamp();
gamepad.updateAxis = function($axis) {
updateElem($axis, 6);
}
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 updateElem($elem, precision = 2) {
updateTimestamp();
function updateTimestamp() {
$timestamp.html(gamepad.timestamp);
}
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);
}
})();