diff --git a/css/main.css b/css/main.css index 045a26a..2cb460b 100644 --- a/css/main.css +++ b/css/main.css @@ -3,6 +3,7 @@ body { overflow: hidden; font-family: sans-serif; } + .debug { position: absolute; top: 0; @@ -13,6 +14,7 @@ body { line-height: 80px; text-align: center; } + .no-gamepad { position: absolute; top: 20px; @@ -21,6 +23,7 @@ body { line-height: 2em; text-align: center; } + .gamepad { position: absolute; top: 50%; @@ -30,6 +33,7 @@ body { background-repeat: no-repeat; background-size: contain; } + .help { background: whitesmoke; border: 1px solid rgba(0, 0, 0, 0.2); @@ -44,16 +48,20 @@ body { top: 50%; transform: translate(-50%, -50%); } + .help.active { display: block; } + .help h2 { margin-top: 0; margin-bottom: 1.5em; } + .help h3 { margin-top: 1.5em; } + .help p:last-child { margin-bottom: 0; } @@ -69,7 +77,8 @@ body { text-align: left; } -.help th, .help td { +.help th, +.help td { border-top: 1px solid #ddd; line-height: 1.42857143; padding: 8px; @@ -83,45 +92,48 @@ body { } kbd { - display: inline; - display: inline-block; - min-width: 1em; - padding: .2em .3em; + display: inline; + display: inline-block; + min-width: 1em; + padding: .2em .3em; margin: 0 .2em; font: normal 1em monospace; - text-align: center; - text-decoration: none; - -moz-border-radius: .3em; - -webkit-border-radius: .3em; - border-radius: .3em; - border: none; - cursor: default; - -moz-user-select: none; - -webkit-user-select: none; - user-select: none; -} -kbd[title], .key[title] { - cursor: help; + text-align: center; + text-decoration: none; + -moz-border-radius: .3em; + -webkit-border-radius: .3em; + border-radius: .3em; + border: none; + cursor: default; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; } -kbd, kbd.dark { - background: rgb(80, 80, 80); - background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80)); - background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80))); - color: rgb(250, 250, 250); - text-shadow: -1px -1px 0 rgb(70, 70, 70); - -moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); - -webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); - box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); +kbd[title], +.key[title] { + cursor: help; +} + +kbd, +kbd.dark { + background: rgb(80, 80, 80); + background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80)); + background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80))); + color: rgb(250, 250, 250); + text-shadow: -1px -1px 0 rgb(70, 70, 70); + -moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); + -webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); + box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); } kbd.light { - background: rgb(250, 250, 250); - background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255)); - background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255))); - color: rgb(50, 50, 50); - text-shadow: 0 0 2px rgb(255, 255, 255); - -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); - -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); - box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); + background: rgb(250, 250, 250); + background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255)); + background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255))); + color: rgb(50, 50, 50); + text-shadow: 0 0 2px rgb(255, 255, 255); + -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); + -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); + box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); } diff --git a/index.html b/index.html index 2ee5690..6b65260 100644 --- a/index.html +++ b/index.html @@ -1,69 +1,72 @@ - - - - Gamepad Viewer - - - - - - - -
No active gamepad detected. Press H to read instructions.
-
-
-

Help

+ + + + Gamepad Viewer + + + -

Instructions

-

Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.

+ + + -

Keyboard shortcuts

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyAction
+Zoom gamepad in
-Zoom gamepad out
0Reset gamepad zoom
CChange active gamepad color
DToggle debug mode for active gamepad
HDisplay this help
Delete, EscapeClear active gamepad
-
+ +
No active gamepad detected. Press H to read instructions.
+
+
+

Help

+ +

Instructions

+

Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.

+ +

Keyboard shortcuts

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyAction
+Zoom gamepad in
-Zoom gamepad out
0Reset gamepad zoom
CChange active gamepad color
DToggle debug mode for active gamepad
HDisplay this help
Delete, EscapeClear active gamepad
+
+ + + + + + - - - - - diff --git a/js/gamepad.js b/js/gamepad.js index 5545bf6..95e9c1a 100644 --- a/js/gamepad.js +++ b/js/gamepad.js @@ -1,6 +1,6 @@ /** * The main Gamepad class - * + * * @class Gamepad */ class Gamepad { @@ -9,7 +9,7 @@ class Gamepad { */ constructor() { this.haveEvents = 'GamepadEvent' in window; - + // cached DOM references this.$gamepad = $('.gamepad'); this.$nogamepad = $('.no-gamepad'); @@ -39,7 +39,7 @@ class Gamepad { // gamepad help default values this.gamepadHelpTimeout = null; this.gamepadHelpDelay = 5000; - + // active gamepad default values this.scanGamepadsDelay = 500; this.debug = false; @@ -58,7 +58,7 @@ class Gamepad { // listen for gamepad related events window.addEventListener("gamepadconnected", this.onGamepadConnect.bind(this)); window.addEventListener("gamepaddisconnected", this.onGamepadDisconnect.bind(this)); - + // listen for keyboard events window.addEventListener("keydown", this.onKeyDown.bind(this)); @@ -84,11 +84,11 @@ class Gamepad { // by default, enqueue a delayed display of the help modal this.displayGamepadHelp(); } - + /** * Displays the help modal on screen - * - * @param {boolean} [displayNow=false] + * + * @param {boolean} [displayNow=false] */ displayGamepadHelp(displayNow = false) { // display help modal if no gamepad is active after X ms @@ -112,8 +112,8 @@ class Gamepad { /** * Handles the gamepad connection event - * - * @param {GamepadEvent} e + * + * @param {GamepadEvent} e */ onGamepadConnect(e) { // on gamepad connection, add it to the list @@ -122,8 +122,8 @@ class Gamepad { /** * Handles the gamepad disconnection event - * - * @param {GamepadEvent} e + * + * @param {GamepadEvent} e */ onGamepadDisconnect(e) { // on gamepad disconnection, remove it from the list @@ -132,8 +132,8 @@ class Gamepad { /** * Handles the keyboard "keydown" event - * - * @param {KeyboardEvent} e + * + * @param {KeyboardEvent} e */ onKeyDown(e) { switch (e.code) { @@ -182,8 +182,8 @@ class Gamepad { /** * Adds a gamepad to the gamepads collection - * - * @param {object} gamepad + * + * @param {object} gamepad */ addGamepad(gamepad) { this.gamepads[gamepad.index] = gamepad; @@ -191,8 +191,8 @@ class Gamepad { /** * Removes a gamepad to the gamepads collection - * - * @param {object} gamepad + * + * @param {object} gamepad */ removeGamepad(gamepadIndex) { // ensure we have an index to remove @@ -251,8 +251,8 @@ class Gamepad { /** * Sets a gamepad as active from its index - * - * @param {int} gamepadIndex + * + * @param {int} gamepadIndex */ mapGamepad(gamepadIndex) { // ensure a gamepad need to be mapped @@ -421,7 +421,7 @@ class Gamepad { /** * Changes the active gamepad color - * + * * @param {any} gamepadColor */ changeGamepadColor(gamepadColor) { @@ -462,7 +462,7 @@ class Gamepad { /** * Changes the active gamepad zoom level - * + * * @param {any} zoomLevel */ changeZoom(zoomLevel) { @@ -479,16 +479,13 @@ class Gamepad { if ('0' === zoomLevel) { // "0" means a zoom reset this.activeGamepadZoomLevel = 1; - } - else if ('+' === zoomLevel && this.activeGamepadZoomLevel < 2) { + } else if ('+' === zoomLevel && this.activeGamepadZoomLevel < 2) { // "+" means a zoom in if we still can this.activeGamepadZoomLevel += 0.1; - } - else if ('-' === zoomLevel && this.activeGamepadZoomLevel > 0.2) { + } else if ('-' === zoomLevel && this.activeGamepadZoomLevel > 0.2) { // "-" means a zoom out if we still can this.activeGamepadZoomLevel -= 0.1; - } - else if (!isNaN(zoomLevel = parseFloat(zoomLevel))) { + } else if (!isNaN(zoomLevel = parseFloat(zoomLevel))) { // an integer value means a value-based zoom this.activeGamepadZoomLevel = zoomLevel; } diff --git a/templates/debug/template.css b/templates/debug/template.css index dc915b6..2def630 100644 --- a/templates/debug/template.css +++ b/templates/debug/template.css @@ -3,7 +3,7 @@ padding: 0; list-style: none; display: flex; - flex-flow: row wrap; + flex-flow: row wrap; max-width: 600px; } @@ -12,18 +12,22 @@ line-height: 1; box-sizing: border-box; } + .box.small { width: 12.5%; min-width: 50px; } + .box.medium { width: 25%; min-width: 100px; } + .box.large { width: 50%; min-width: 200px; } + .box.extra-large { width: 100%; min-width: 400px; diff --git a/templates/debug/template.html b/templates/debug/template.html index ef4c8a1..bd3355d 100644 --- a/templates/debug/template.html +++ b/templates/debug/template.html @@ -1,40 +1,40 @@
-
-
-
-
ID
-
-
-
-
+
+
+
+
ID
+
+
+
+
-
-
-
-
TIMESTAMP
-
-
-
-
-
-
INDEX
-
-
-
-
-
-
MAPPING
-
-
-
-
+
+
+
+
TIMESTAMP
+
+
+
+
+
+
INDEX
+
+
+
+
+
+
MAPPING
+
+
+
+
-
+
-
+
diff --git a/templates/debug/template.js b/templates/debug/template.js index f551d88..89307b6 100644 --- a/templates/debug/template.js +++ b/templates/debug/template.js @@ -40,11 +40,11 @@ ); } - gamepad.updateButton = function($button) { + gamepad.updateButton = function ($button) { updateElem($button); } - gamepad.updateAxis = function($axis) { + gamepad.updateAxis = function ($axis) { updateElem($axis, 6); } diff --git a/templates/ds4/template.css b/templates/ds4/template.css index da2a6f0..38e9c67 100644 --- a/templates/ds4/template.css +++ b/templates/ds4/template.css @@ -112,14 +112,16 @@ left: 227px; } -.gamepad .select, .gamepad .start { +.gamepad .select, +.gamepad .start { background: url(start.svg); width: 28px; height: 46px; opacity: 0; } -.gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] { +.gamepad .select[data-pressed="true"], +.gamepad .start[data-pressed="true"] { opacity: 1; } @@ -219,12 +221,14 @@ position: absolute; } -.gamepad .face.up, .gamepad .face.down { +.gamepad .face.up, +.gamepad .face.down { width: 36px; height: 52px; } -.gamepad .face.left, .gamepad .face.right { +.gamepad .face.left, +.gamepad .face.right { width: 52px; height: 36px; } diff --git a/templates/ds4/template.html b/templates/ds4/template.html index 58d6815..9fe5257 100644 --- a/templates/ds4/template.html +++ b/templates/ds4/template.html @@ -1,35 +1,35 @@
- - - + + +
- - - + + +
- - - + + +
- - - - + + + +
- - + +
- - - - + + + +
diff --git a/templates/ds4/template.js b/templates/ds4/template.js index 09f324d..021ae36 100644 --- a/templates/ds4/template.js +++ b/templates/ds4/template.js @@ -1,4 +1,4 @@ -gamepad.updateButton = function($button) { +gamepad.updateButton = function ($button) { const value = parseFloat($button.attr('data-value'), 10); if ($button.is('.trigger')) { @@ -8,7 +8,7 @@ gamepad.updateButton = function($button) { } } -gamepad.updateAxis = function($axis) { +gamepad.updateAxis = function ($axis) { const axisX = $axis.attr('data-value-x'); const axisY = $axis.attr('data-value-y'); const axisZ = $axis.attr('data-value-z'); diff --git a/templates/xbox-one/template.css b/templates/xbox-one/template.css index be50fa8..b2932e3 100644 --- a/templates/xbox-one/template.css +++ b/templates/xbox-one/template.css @@ -101,14 +101,16 @@ left: 306px; } -.gamepad .select, .gamepad .start { +.gamepad .select, +.gamepad .start { background: url(start-select.svg); width: 33px; height: 33px; opacity: 0; } -.gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] { +.gamepad .select[data-pressed="true"], +.gamepad .start[data-pressed="true"] { opacity: 1; } diff --git a/templates/xbox-one/template.html b/templates/xbox-one/template.html index 65c415f..3c03259 100644 --- a/templates/xbox-one/template.html +++ b/templates/xbox-one/template.html @@ -1,34 +1,34 @@
- - - + + +
- - - + + +
- - - + + +
- - - - + + + +
- - + +
- - - - + + + +
diff --git a/templates/xbox-one/template.js b/templates/xbox-one/template.js index 3a50f13..021ae36 100644 --- a/templates/xbox-one/template.js +++ b/templates/xbox-one/template.js @@ -1,4 +1,4 @@ -gamepad.updateButton = function($button) { +gamepad.updateButton = function ($button) { const value = parseFloat($button.attr('data-value'), 10); if ($button.is('.trigger')) { @@ -8,7 +8,7 @@ gamepad.updateButton = function($button) { } } -gamepad.updateAxis = function($axis) { +gamepad.updateAxis = function ($axis) { const axisX = $axis.attr('data-value-x'); const axisY = $axis.attr('data-value-y'); const axisZ = $axis.attr('data-value-z'); @@ -20,4 +20,4 @@ gamepad.updateAxis = function($axis) { 'transform': 'rotateX(' + -parseFloat(axisY * 30, 8) + 'deg) rotateY(' + parseFloat(axisX * 30, 8) + 'deg)' }); } -} \ No newline at end of file +}