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

added a debug template

Browse Source
This commit is contained in:
e7d 2017-05-09 23:23:17 +02:00
parent 2b4661cf62
commit 968ab8beb7
6 changed files with 139 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/main.css
View File

@ -2,6 +2,16 @@ body {
background: transparent; background: transparent;
overflow: hidden; overflow: hidden;
} }
.debug {
position: absolute;
top: 0;
display: none;
width: 100vw;
font-size: 60px;
color: red;
line-height: 80px;
text-align: center;
}
.no-gamepad { .no-gamepad {
position: absolute; position: absolute;
bottom: 0; bottom: 0;

5
index.html
View File

@ -12,6 +12,7 @@
<link rel="stylesheet" href="css/main.css?ef81677"> <link rel="stylesheet" href="css/main.css?ef81677">
</head> </head>
<body> <body>
<div class="debug">Debug</div>
<div class="no-gamepad">No active gamepad. Press <kbd>H</kbd> to see how it works.</div> <div class="no-gamepad">No active gamepad. Press <kbd>H</kbd> to see how it works.</div>
<div class="gamepad"></div> <div class="gamepad"></div>
<div class="help"> <div class="help">
@ -45,6 +46,10 @@
<th><kbd>C</kbd></th> <th><kbd>C</kbd></th>
<td>Change active gamepad color</td> <td>Change active gamepad color</td>
</tr> </tr>
<tr>
<th><kbd>D</kbd></th>
<td>Toggle debug mode</td>
</tr>
<tr> <tr>
<th><kbd>H</kbd></th> <th><kbd>H</kbd></th>
<td>Display this help</td> <td>Display this help</td>

32
js/gamepad.js
View File

@ -1,4 +1,4 @@
(function(window, document, undefined) { // (function(window, document, undefined) {
$.urlParam = function(name) { $.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results === null) { if (results === null) {
@ -9,19 +9,25 @@
}; };
var haveEvents = 'ongamepadconnected' in window; var haveEvents = 'ongamepadconnected' in window;
var debug = false;
var gamepads = {}; var gamepads = {};
var $gamepad = $('.gamepad'); var $gamepad = $('.gamepad');
var $nogamepad = $('.no-gamepad'); var $nogamepad = $('.no-gamepad');
var $debug = $('.debug');
var $help = $('.help'); var $help = $('.help');
var gamepadIdentifiers = { var gamepadIdentifiers = {
'debug': {
'id': /xinput|XInput/,
'colors': []
},
'ds4': { 'ds4': {
'id': /054c.*?05c4/, 'id': /054c.*?05c4/,
'colors': ['black', 'white', 'red', 'blue'] 'colors': ['black', 'white', 'red', 'blue']
}, },
'xbox-one': { // 'xbox-one': {
'id': /xinput|XInput/, // 'id': /xinput|XInput/,
'colors': ['black', 'white'] // 'colors': ['black', 'white']
} // }
}; };
var gamepadHelpTimeout = null; var gamepadHelpTimeout = null;
var gamepadHelpDelay = 10000; var gamepadHelpDelay = 10000;
@ -68,6 +74,9 @@
case "KeyC": case "KeyC":
changeGamepadColor(); changeGamepadColor();
break; break;
case "KeyD":
toggleDebug();
break;
case "KeyH": case "KeyH":
toggleHelp(); toggleHelp();
break; break;
@ -174,7 +183,7 @@
mapping.axes = []; mapping.axes = [];
for (var axisIndex = 0; axisIndex < gamepad.axes.length; axisIndex++) { for (var axisIndex = 0; axisIndex < gamepad.axes.length; axisIndex++) {
axis = gamepad.axes[axisIndex]; axis = gamepad.axes[axisIndex];
mapping.axes[axisIndex] = $('[data-axis-x=' + axisIndex + '], [data-axis-y=' + axisIndex + '], [data-axis-z=' + axisIndex + ']'); mapping.axes[axisIndex] = $('[data-axis=' + axisIndex + '], [data-axis-x=' + axisIndex + '], [data-axis-y=' + axisIndex + '], [data-axis-z=' + axisIndex + ']');
} }
updateVisualStatus(); updateVisualStatus();
@ -223,6 +232,9 @@
axis = activeGamepad.axes[axisIndex]; axis = activeGamepad.axes[axisIndex];
if ($axis.is('[data-axis=' + axisIndex + ']')) {
$axis.attr('data-value', axis);
}
if ($axis.is('[data-axis-x=' + axisIndex + ']')) { if ($axis.is('[data-axis-x=' + axisIndex + ']')) {
$axis.attr('data-value-x', axis); $axis.attr('data-value-x', axis);
} }
@ -301,4 +313,10 @@
function toggleHelp(zoomLevel) { function toggleHelp(zoomLevel) {
$help.toggleClass('active'); $help.toggleClass('active');
} }
})(window, document);
function toggleDebug() {
debug = !debug;
$debug[debug ? 'fadeIn' : 'fadeOut']();
}
// })(window, document);

33
templates/debug/template.css Normal file
View File

@ -0,0 +1,33 @@
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
min-width: 50px;
padding: 3px;
margin: 0 5px 5px 0;
background: #333333;
line-height: 1;
}
li.medium {
min-width: 100px;
}
li.large {
min-width: 200px;
}
label {
width: 20px;
color: #aaaaaa;
}
value {
display: block;
text-align: right;
margin-top: 3px;
overflow: hidden;
white-space: nowrap;
}

17
templates/debug/template.html Normal file
View File

@ -0,0 +1,17 @@
<link rel="stylesheet" href="templates/debug/template.css?ef81677">
<script async src="templates/debug/template.js?ef81677"></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>
</ul>
</div>
<div class="axes"><ul></ul></div>
<div class="buttons"><ul></ul></div>

49
templates/debug/template.js Normal file
View File

@ -0,0 +1,49 @@
var $timestamp = $('#info-timestamp value'),
$index = $('#info-index value'),
$mapping = $('#info-mapping value'),
$axes = $('.axes ul'),
$buttons = $('.buttons ul');
var gamepad = gamepads[activeGamepadIndex];
console.log(gamepad);
$timestamp.html(gamepad.timestamp);
$index.html(gamepad.index);
$mapping.html(gamepad.mapping);
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>'
);
}
for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
$buttons.append(
'<li>' +
' <label>B' + buttonIndex + '</label>' +
' <value data-button="' + buttonIndex + '">0</value>' +
'</li>'
);
}
function updateButton($button) {
updateElem($button);
}
function updateAxis($axis) {
updateElem($axis, 6);
}
function updateElem($elem, precision = 2) {
updateTimestamp();
value = parseFloat($elem.attr('data-value'), 10).toFixed(precision);
$elem.html(value);
}
function updateTimestamp() {
$timestamp.html(gamepad.timestamp);
}