diff --git a/css/main.css b/css/main.css index b6af9b3..89e6299 100644 --- a/css/main.css +++ b/css/main.css @@ -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; diff --git a/index.html b/index.html index 49063df..c52a899 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@ +
Debug
No active gamepad. Press H to see how it works.
@@ -45,6 +46,10 @@ C Change active gamepad color + + D + Toggle debug mode + H Display this help diff --git a/js/gamepad.js b/js/gamepad.js index 5596ffd..f03db4b 100644 --- a/js/gamepad.js +++ b/js/gamepad.js @@ -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); diff --git a/templates/debug/template.css b/templates/debug/template.css new file mode 100644 index 0000000..36561ee --- /dev/null +++ b/templates/debug/template.css @@ -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; +} diff --git a/templates/debug/template.html b/templates/debug/template.html new file mode 100644 index 0000000..8fa7b8e --- /dev/null +++ b/templates/debug/template.html @@ -0,0 +1,17 @@ + + +
+ +
+
+
diff --git a/templates/debug/template.js b/templates/debug/template.js new file mode 100644 index 0000000..dd34147 --- /dev/null +++ b/templates/debug/template.js @@ -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( + '
  • ' + + ' ' + + ' 0' + + '
    • ' + ); +} + +for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) { + $buttons.append( + '
  • ' + + ' ' + + ' 0' + + '
    • ' + ); +} + +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); +}