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;
overflow: hidden;
}
.debug {
position: absolute;
top: 0;
display: none;
width: 100vw;
font-size: 60px;
color: red;
line-height: 80px;
text-align: center;
}
.no-gamepad {
position: absolute;
bottom: 0;

5
index.html
View File

@ -12,6 +12,7 @@
<link rel="stylesheet" href="css/main.css?ef81677">
</head>
<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="gamepad"></div>
<div class="help">
@ -45,6 +46,10 @@
<th><kbd>C</kbd></th>
<td>Change active gamepad color</td>
</tr>
<tr>
<th><kbd>D</kbd></th>
<td>Toggle debug mode</td>
</tr>
<tr>
<th><kbd>H</kbd></th>
<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) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results === null) {
@ -9,19 +9,25 @@
};
var haveEvents = 'ongamepadconnected' in window;
var debug = false;
var gamepads = {};
var $gamepad = $('.gamepad');
var $nogamepad = $('.no-gamepad');
var $debug = $('.debug');
var $help = $('.help');
var gamepadIdentifiers = {
'debug': {
'id': /xinput|XInput/,
'colors': []
},
'ds4': {
'id': /054c.*?05c4/,
'colors': ['black', 'white', 'red', 'blue']
},
'xbox-one': {
'id': /xinput|XInput/,
'colors': ['black', 'white']
}
// 'xbox-one': {
// 'id': /xinput|XInput/,
// 'colors': ['black', 'white']
// }
};
var gamepadHelpTimeout = null;
var gamepadHelpDelay = 10000;
@ -68,6 +74,9 @@
case "KeyC":
changeGamepadColor();
break;
case "KeyD":
toggleDebug();
break;
case "KeyH":
toggleHelp();
break;
@ -174,7 +183,7 @@
mapping.axes = [];
for (var axisIndex = 0; axisIndex < gamepad.axes.length; 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();
@ -223,6 +232,9 @@
axis = activeGamepad.axes[axisIndex];
if ($axis.is('[data-axis=' + axisIndex + ']')) {
$axis.attr('data-value', axis);
}
if ($axis.is('[data-axis-x=' + axisIndex + ']')) {
$axis.attr('data-value-x', axis);
}
@ -301,4 +313,10 @@
function toggleHelp(zoomLevel) {
$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);
}