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

52
templates/debug/template.html
View File

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

24
templates/debug/template.js
View File

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