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 { li {
display: inline-block; display: inline-block;
min-width: 50px; min-width: 40px;
padding: 3px; padding: 5px;
margin: 0 5px 5px 0; margin: 0 5px 5px 0;
background: #333333; background: #333333;
line-height: 1; line-height: 1;
} }
li.medium { li.medium {
min-width: 100px; min-width: 95px;
} }
li.large { li.large {
min-width: 200px; min-width: 205px;
}
li.extra-large {
min-width: 425px;
} }
label { .label {
width: 20px;
font-size: 0.8em; font-size: 0.8em;
color: #aaaaaa; color: #aaaaaa;
} }
value { .value {
display: block;
text-align: right; text-align: right;
margin-top: 3px; margin-top: 3px;
overflow: hidden; overflow: hidden;

35
templates/debug/template.html
View File

@ -2,16 +2,31 @@
<script async src="templates/debug/template.js"></script> <script async src="templates/debug/template.js"></script>
<div class="info"> <div class="info">
<ul> <ul>
<li id="info-timestamp" class="large"><label>TIMESTAMP</label> <li id="info-id" class="extra-large">
<value></value> <div class="label">ID</div>
</li> <div class="value"></div>
<li id="info-index"><label>INDEX</label>
<value></value>
</li>
<li id="info-mapping" class="medium"><label>MAPPING</label>
<value></value>
</li> </li>
</ul> </ul>
</div> </div>
<div class="axes"><ul></ul></div> <div class="info">
<div class="buttons"><ul></ul></div> <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'), $id = $('#info-id .value');
$mapping = $('#info-mapping value'), $timestamp = $('#info-timestamp .value');
$axes = $('.axes ul'), $index = $('#info-index .value');
$mapping = $('#info-mapping .value');
$axes = $('.axes ul');
$buttons = $('.buttons ul'); $buttons = $('.buttons ul');
var gamepad = gamepads[activeGamepadIndex]; gamepad = window.gamepad;
activeGamepad = gamepad.getActiveGamepad();
$timestamp.html(gamepad.timestamp); if (!activeGamepad) {
$index.html(gamepad.index); return;
$mapping.html(gamepad.mapping); }
for (var axisIndex = 0; axisIndex < gamepad.axes.length; axisIndex++) { $id.html(activeGamepad.id);
$axes.append( $timestamp.html(activeGamepad.timestamp);
'<li class="medium">' + $index.html(activeGamepad.index);
' <label>AXIS ' + axisIndex + '</label>' + $mapping.html(activeGamepad.mapping);
' <value data-axis="' + axisIndex + '">0</value>' +
'</li>'
);
}
for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) { for (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
$buttons.append( $axes.append(
'<li>' + '<li class="medium">' +
' <label>B' + buttonIndex + '</label>' + ' <div class="label">AXIS ' + axisIndex + '</div>' +
' <value data-button="' + buttonIndex + '">0</value>' + ' <div class="value" data-axis="' + axisIndex + '">0</div>' +
'</li>' '</li>'
); );
} }
function updateButton($button) { for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
updateElem($button); $buttons.append(
} '<li>' +
' <div class="label">B' + buttonIndex + '</div>' +
' <div class="value" data-button="' + buttonIndex + '">0</div>' +
'</li>'
);
}
function updateAxis($axis) { gamepad.updateButton = function($button) {
updateElem($axis, 6); updateElem($button);
} }
function updateElem($elem, precision = 2) { gamepad.updateAxis = function($axis) {
updateTimestamp(); updateElem($axis, 6);
}
var value = parseFloat($elem.attr('data-value'), 10).toFixed(precision); function updateElem($elem, precision = 2) {
$elem.html(value); updateTimestamp();
var color = Math.floor(255 * 0.3 + 255 * 0.7 * Math.abs(value));
$elem.css({
'color': 'rgb(' + color + ', ' + color + ', ' + color + ')'
});
}
function updateTimestamp() { var value = parseFloat($elem.attr('data-value'), 10).toFixed(precision);
$timestamp.html(gamepad.timestamp); $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);
}
})();