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

improved debug template

Browse Source
This commit is contained in:
e7d 2017-05-14 15:11:09 +02:00
parent d46d1aaaf6
commit 45eb354d98
3 changed files with 70 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
templates/debug/template.css
View File

@ -1,29 +1,42 @@
ul, li { .container {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
display: flex;
flex-flow: row wrap;
max-width: 600px;
} }
li { .box {
display: inline-block; padding: 2px;
min-width: 40px;
padding: 5px;
margin: 0 5px 5px 0;
background: #333333;
line-height: 1; line-height: 1;
box-sizing: border-box;
} }
li.medium { .box.small {
min-width: 95px; width: 12.5%;
min-width: 50px;
} }
li.large { .box.medium {
min-width: 205px; width: 25%;
min-width: 100px;
} }
li.extra-large { .box.large {
min-width: 425px; width: 50%;
min-width: 200px;
}
.box.extra-large {
width: 100%;
min-width: 400px;
}
.box .content {
background: #333333;
padding: 5px;
} }
.label { .label {
font-size: 0.8em; font-size: 0.8em;
font-weight: 600;
color: #aaaaaa; color: #aaaaaa;
} }

36
templates/debug/template.html
View File

@ -1,32 +1,40 @@
<link rel="stylesheet" href="templates/debug/template.css"> <link rel="stylesheet" href="templates/debug/template.css">
<script async src="templates/debug/template.js"></script> <script async src="templates/debug/template.js"></script>
<div class="info"> <div class="info">
<ul> <div class="container">
<li id="info-id" class="extra-large"> <div id="info-id" class="box extra-large">
<div class="content">
<div class="label">ID</div> <div class="label">ID</div>
<div class="value"></div> <div class="value"></div>
</li> </div>
</ul> </div>
</div>
</div> </div>
<div class="info"> <div class="info">
<ul> <div class="container">
<li id="info-timestamp" class="large"> <div id="info-timestamp" class="box large">
<div class="content">
<div class="label">TIMESTAMP</div> <div class="label">TIMESTAMP</div>
<div class="value"></div> <div class="value"></div>
</li> </div>
<li id="info-index" class="medium"> </div>
<div id="info-index" class="box medium">
<div class="content">
<div class="label">INDEX</div> <div class="label">INDEX</div>
<div class="value"></div> <div class="value"></div>
</li> </div>
<li id="info-mapping" class="medium"> </div>
<div id="info-mapping" class="box medium">
<div class="content">
<div class="label">MAPPING</div> <div class="label">MAPPING</div>
<div class="value"></div> <div class="value"></div>
</li> </div>
</ul> </div>
</div>
</div> </div>
<div class="axes"> <div class="axes">
<ul></ul> <div class="container"></div>
</div> </div>
<div class="buttons"> <div class="buttons">
<ul></ul> <div class="container"></div>
</div> </div>

16
templates/debug/template.js
View File

@ -3,8 +3,8 @@
$timestamp = $('#info-timestamp .value'); $timestamp = $('#info-timestamp .value');
$index = $('#info-index .value'); $index = $('#info-index .value');
$mapping = $('#info-mapping .value'); $mapping = $('#info-mapping .value');
$axes = $('.axes ul'); $axes = $('.axes .container');
$buttons = $('.buttons ul'); $buttons = $('.buttons .container');
gamepad = window.gamepad; gamepad = window.gamepad;
activeGamepad = gamepad.getActiveGamepad(); activeGamepad = gamepad.getActiveGamepad();
@ -20,19 +20,23 @@
for (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) { for (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
$axes.append( $axes.append(
'<li class="medium">' + '<div class="box medium">' +
' <div class="content">' +
' <div class="label">AXIS ' + axisIndex + '</div>' + ' <div class="label">AXIS ' + axisIndex + '</div>' +
' <div class="value" data-axis="' + axisIndex + '">0</div>' + ' <div class="value" data-axis="' + axisIndex + '">0</div>' +
'</li>' ' </div>' +
'</div>'
); );
} }
for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) { for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
$buttons.append( $buttons.append(
'<li>' + '<div class="box small">' +
' <div class="content">' +
' <div class="label">B' + buttonIndex + '</div>' + ' <div class="label">B' + buttonIndex + '</div>' +
' <div class="value" data-button="' + buttonIndex + '">0</div>' + ' <div class="value" data-button="' + buttonIndex + '">0</div>' +
'</li>' ' </div>' +
'</div>'
); );
} }