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>

43
templates/debug/template.js
View File

@ -1,38 +1,46 @@
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);
$timestamp.html(activeGamepad.timestamp);
$index.html(activeGamepad.index);
$mapping.html(activeGamepad.mapping);
for (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
$axes.append( $axes.append(
'<li class="medium">' + '<li class="medium">' +
' <label>AXIS ' + axisIndex + '</label>' + ' <div class="label">AXIS ' + axisIndex + '</div>' +
' <value data-axis="' + axisIndex + '">0</value>' + ' <div class="value" data-axis="' + axisIndex + '">0</div>' +
'</li>' '</li>'
); );
} }
for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) { for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
$buttons.append( $buttons.append(
'<li>' + '<li>' +
' <label>B' + buttonIndex + '</label>' + ' <div class="label">B' + buttonIndex + '</div>' +
' <value data-button="' + buttonIndex + '">0</value>' + ' <div class="value" data-button="' + buttonIndex + '">0</div>' +
'</li>' '</li>'
); );
} }
function updateButton($button) { gamepad.updateButton = function($button) {
updateElem($button); updateElem($button);
} }
function updateAxis($axis) { gamepad.updateAxis = function($axis) {
updateElem($axis, 6); updateElem($axis, 6);
} }
@ -48,5 +56,6 @@ function updateElem($elem, precision = 2) {
} }
function updateTimestamp() { function updateTimestamp() {
$timestamp.html(gamepad.timestamp); $timestamp.html(activeGamepad.timestamp);
} }
})();