various update:

- settings overlay
- better url params handling
- debug toggle fixes

css/main.css

@@ -94,6 +94,34 @@ body.unsupported #gamepad {
     transform: translate(-50%, -50%);
 }
 
+#overlay {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    padding: 8px 0;
+    display: flex;
+    justify-content: center;
+    align-self: center;
+}
+
+#overlay > span {
+    padding: 0 8px;
+}
+
+#overlay #color,
+#overlay #triggers {
+    display: none;
+}
+
+#overlay select {
+    padding: 4px 0;
+    border-radius: 4px;
+    background: whitesmoke;
+    border: none;
+}
+
 #help-popout {
     background: whitesmoke;
     border: 1px solid rgba(0, 0, 0, 0.2);
@@ -156,19 +184,19 @@ body.unsupported #gamepad {
 }
 
 kbd {
-    -moz-border-radius: .3em;
+    -moz-border-radius: 0.3em;
     -moz-user-select: none;
-    -webkit-border-radius: .3em;
+    -webkit-border-radius: 0.3em;
     -webkit-user-select: none;
-    border-radius: .3em;
+    border-radius: 0.3em;
     border: none;
     cursor: default;
     display: inline-block;
     display: inline;
     font: normal 1em monospace;
-    margin: 0 .2em;
+    margin: 0 0.2em;
     min-width: 1em;
-    padding: .2em .6em;
+    padding: 0.2em 0.6em;
     text-align: center;
     text-decoration: none;
     font-weight: bold;
@@ -183,23 +211,51 @@ kbd[title],
 
 kbd,
 kbd.dark {
-    -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);
+    -moz-box-shadow: inset 0 0 1px rgb(150, 150, 150),
-    -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);
+        inset 0 -0.05em 0.4em rgb(80, 80, 80), 0 0.1em 0 rgb(30, 30, 30),
+        0 0.1em 0.1em rgba(0, 0, 0, 0.3);
+    -webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150),
+        inset 0 -0.05em 0.4em rgb(80, 80, 80), 0 0.1em 0 rgb(30, 30, 30),
+        0 0.1em 0.1em rgba(0, 0, 0, 0.3);
     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)));
+    background: -webkit-gradient(
+        linear,
+        left top,
+        left bottom,
+        from(rgb(60, 60, 60)),
+        to(rgb(80, 80, 80))
+    );
     background: rgb(80, 80, 80);
-    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 -0.05em 0.4em rgb(80, 80, 80), 0 0.1em 0 rgb(30, 30, 30),
+        0 0.1em 0.1em rgba(0, 0, 0, 0.3);
     color: rgb(250, 250, 250);
     text-shadow: -1px -1px 0 rgb(70, 70, 70);
 }
 
 kbd.light {
-    -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);
+    -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255),
-    -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);
+        inset 0 0 0.4em rgb(200, 200, 200), 0 0.1em 0 rgb(130, 130, 130),
-    background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
+        0 0.11em 0 rgba(0, 0, 0, 0.4), 0 0.1em 0.11em rgba(0, 0, 0, 0.9);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
+    -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255),
+        inset 0 0 0.4em rgb(200, 200, 200), 0 0.1em 0 rgb(130, 130, 130),
+        0 0.11em 0 rgba(0, 0, 0, 0.4), 0 0.1em 0.11em rgba(0, 0, 0, 0.9);
+    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))
+    );
     background: rgb(250, 250, 250);
-    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 0.4em rgb(200, 200, 200), 0 0.1em 0 rgb(130, 130, 130),
+        0 0.11em 0 rgba(0, 0, 0, 0.4), 0 0.1em 0.11em rgba(0, 0, 0, 0.9);
     color: rgb(50, 50, 50);
     text-shadow: 0 0 2px rgb(255, 255, 255);
 }

index.html

@@ -14,11 +14,11 @@
 </head>
 
 <body>
-	<div id="unsupported">Sorry, but your browser does not support the <a target="_blank" href="https://developer.mozilla.org/docs/Web/API/Gamepad_API">Gamepad API</a>.</div>
+	<div id="unsupported">Sorry, but your browser does not support the <a target="_blank"
+			href="https://developer.mozilla.org/docs/Web/API/Gamepad_API">Gamepad API</a>.</div>
 	<div id="instructions">
 		<p>Press <kbd>H</kbd> to read instructions.</p>
-		<svg version="1.1" viewBox="0 0 549.3125 367.98749" xml:space="preserve"
+		<svg version="1.1" viewBox="0 0 549.3125 367.98749" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-			xmlns="http://www.w3.org/2000/svg">
 			<defs>
 				<clipPath id="a">
 					<path d="m0 294.39h439.45v-294.39h-439.45v294.39z"></path>
@@ -81,11 +81,48 @@
 		</svg>
 	</div>
 	<div id="gamepad"></div>
+	<div id="overlay">
+		<span id="skin">
+			<label for="skin">Skin</label>
+			<select name="skin">
+				<option value="auto">Auto</option>
+				<option value="ds4">DualShock 4</option>
+				<option value="xbox-one">Xbox One</option>
+				<option value="debug">Debug</option>
+			</select>
+		</span>
+		<span id="background">
+			<label for="background">Background</label>
+			<select name="background">
+				<option value="transparent">Transparent</option>
+				<option value="checkered">Checkered</option>
+				<option value="dimgrey">Grey</option>
+				<option value="black">Black</option>
+				<option value="white">White</option>
+				<option value="lime">Lime</option>
+				<option value="magenta">Magenta</option>
+			</select>
+		</span>
+		<span id="color">
+			<label for="color">Color</label>
+			<select name="color">
+				<option value="">Default</option>
+			</select>
+		</span>
+		<span id="triggers">
+			<label for="triggers">Triggers</label>
+			<select name="triggers">
+				<option value="opacity">Opacity</option>
+				<option value="meter">Meter</option>
+			</select>
+		</span>
+	</div>
 	<div id="help-popout">
 		<h2>Help</h2>
 
 		<h3>Instructions</h3>
-		<p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.</p>
+		<p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.
+		</p>
 
 		<h3>Detected Controllers</h3>
 		<table>
@@ -155,7 +192,8 @@
 		</table>
 
 		<h3>Credits</h3>
-		<p>All information and source code can be found on GitHub at <a target="_blank" href="https://github.com/e7d/gamepad-viewer">e7d/gamepad-viewer</a>.</p>
+		<p>All information and source code can be found on GitHub at <a target="_blank"
+				href="https://github.com/e7d/gamepad-viewer">e7d/gamepad-viewer</a>.</p>
 	</div>
 
 	<script src="js/jquery.min.js"></script>

js/gamepad.js

@@ -10,8 +10,17 @@ class Gamepad {
     constructor() {
         // cached DOM references
         this.$body = $("body");
-        this.$gamepad = $("#gamepad");
         this.$instructions = $("#instructions");
+        this.$gamepad = $("#gamepad");
+        this.$overlay = $("#overlay");
+        this.$skinSelect = $("select[name=skin]");
+        this.$backgroundSelect = $("select[name=background]");
+        this.$colorOverlay = this.$overlay.find("#color");
+        this.$colorSelect = this.$colorOverlay.find("select[name=color]");
+        this.$triggersOverlay = this.$overlay.find("#triggers");
+        this.$triggersSelect = this.$triggersOverlay.find(
+            "select[name=triggers]"
+        );
         this.$helpPopout = $("#help-popout");
         this.$gamepadList = $("#gamepad-list");
 
@@ -20,6 +29,7 @@ class Gamepad {
             "checkered",
             "dimgrey",
             "black",
+            "white",
             "lime",
             "magenta",
         ];
@@ -30,11 +40,14 @@ class Gamepad {
             "white",
             "black",
             "black",
+            "black",
         ];
 
         // ensure the GamePad API is available on this browser
         this.assertGamepadAPI();
 
+        this.initOverlaySelectors();
+
         // gamepad collection default values
         this.gamepads = {};
         this.identifiers = {
@@ -42,22 +55,22 @@ class Gamepad {
             debug: {
                 id: /debug/,
                 name: "Debug",
-                colors: [],
             },
             ds4: {
                 id: /054c|54c|09cc|046d|0810|2563/, // 054c = Sony vendor code, 046d,0810,2563 = PS-like controllers vendor codes
                 name: "DualShock 4",
                 colors: ["black", "white", "red", "blue"],
+                triggers: true,
             },
             // gamecube: {
             //     id: /0079/, // 0079 = Nintendo GameCube vendor code
             //     name: "GameCube Controller",
-            //     colors: ["black"],
+            //     colors: ["black", "purple"],
             // },
             // "joy-con": {
             //     id: /200e/, // 0079 = Joy-Con specific product code
             //     name: "Joy-Con (L+R) Controllers",
-            //     colors: ["blue-red"],
+            //     colors: ["blue-red", "grey-grey"],
             // },
             // stadia: {
             //     id: /18d1/, // 18d1 = Google vendor code
@@ -73,12 +86,15 @@ class Gamepad {
                 id: /045e|xinput|XInput/, // 045e = Microsoft vendor code, xinput = standard Windows controller
                 name: "Xbox One",
                 colors: ["black", "white"],
+                triggers: true,
             },
         };
 
         // gamepad help default values
         this.instructionsTimeout = null;
-        this.instructionsDelay = 12000;
+        this.instructionsDelay = 5000;
+        this.overlayTimeout = null;
+        this.overlayDelay = 5000;
 
         // active gamepad default values
         this.scanDelay = 200;
@@ -125,7 +141,13 @@ class Gamepad {
         // bind a gamepads scan
         window.setInterval(this.scan.bind(this), this.scanDelay);
 
-        // change the background is specified
+        // change the type if specified
+        const skin = this.getUrlParam("type");
+        if (skin) {
+            this.changeSkin(skin);
+        }
+
+        // change the background if specified
         const background = this.getUrlParam("background");
         if (background) {
             let backgroundStyleIndex;
@@ -144,6 +166,9 @@ class Gamepad {
         this.displayInstructions();
     }
 
+    /**
+     * Ensures the availability of the Gamepad API in the current navigator
+     */
     assertGamepadAPI() {
         const getGamepadsFn = navigator.getGamepads
             ? () => navigator.getGamepads()
@@ -157,6 +182,24 @@ class Gamepad {
         this.getNavigatorGamepads = getGamepadsFn;
     }
 
+    /**
+     * Initialises the overlay selectors
+     */
+    initOverlaySelectors() {
+        this.$skinSelect.on("change", () =>
+            this.changeSkin(this.$skinSelect.val())
+        );
+        this.$backgroundSelect.on("change", () =>
+            this.changeBackgroundStyle(this.$backgroundSelect.val())
+        );
+        this.$colorSelect.on("change", () =>
+            this.changeGamepadColor(this.$colorSelect.val())
+        );
+        this.$triggersSelect.on("change", () =>
+            this.toggleTriggersMeter(this.$triggersSelect.val() === "meter")
+        );
+    }
+
     /**
      * Displays the instructions animation on screen
      */
@@ -190,6 +233,76 @@ class Gamepad {
         }, this.instructionsDelay);
     }
 
+    /**
+     * Displays the overlay animation on screen
+     */
+    displayOverlay() {
+        // cancel the queued display of the overlay animation, if any
+        window.clearTimeout(this.overlayTimeout);
+        // show the overlay
+        this.$overlay.show();
+
+        // enqueue a delayed display of the overlay animation
+        this.hideOverlay();
+    }
+
+    /**
+     * Hides the overlay animation
+     *
+     * @param {boolean} [hideNow=false]
+     */
+    hideOverlay(hideNow = false) {
+        // hide the message right away if needed
+        if (hideNow) {
+            this.$overlay.hide();
+        }
+
+        // hide overlay animation if no gamepad is active after X ms
+        this.overlayTimeout = window.setTimeout(() => {
+            this.$overlay.fadeOut();
+        }, this.overlayDelay);
+    }
+
+    /**
+     * Update colors following the active/inactive gamepad
+     */
+    updateColors() {
+        if (!this.type) {
+            this.$colorOverlay.hide();
+            return;
+        }
+
+        const colors = this.identifiers[this.type].colors;
+        if (!colors) {
+            this.$colorOverlay.hide();
+            return;
+        }
+
+        const colorOptions = colors.map(
+            (color) => `<option value="${color}">${color}</option>`
+        );
+        this.$colorSelect.html(colorOptions);
+        this.$colorOverlay.fadeIn();
+    }
+
+    /**
+     * Update triggers following the active/inactive gamepad
+     */
+    updateTriggers() {
+        if (!this.type) {
+            this.$triggersOverlay.hide();
+            return;
+        }
+
+        const triggers = this.identifiers[this.type].triggers;
+        if (!triggers) {
+            this.$triggersOverlay.hide();
+            return;
+        }
+
+        this.$triggersOverlay.fadeIn();
+    }
+
     /**
      * Handles the gamepad connection event
      *
@@ -223,6 +336,7 @@ class Gamepad {
      */
     onMouseMove() {
         this.displayInstructions();
+        this.displayOverlay();
     }
 
     /**
@@ -438,11 +552,14 @@ class Gamepad {
         // ensure a valid gamepad type is used
         this.type = this.getType(gamepad);
         if (!this.type) return;
-        this.updateUrlParams({ type: this.type });
 
         // initial setup of the gamepad
         this.identifier = this.identifiers[this.type];
 
+        // update gamepad color and triggers selectors on overlay
+        this.updateColors();
+        this.updateTriggers();
+
         // load the HTML template file
         this.loadTemplate(gamepad);
 
@@ -481,6 +598,8 @@ class Gamepad {
         this.colorName = null;
         this.zoomLevel = 1;
         this.$gamepad.empty();
+        this.updateColors();
+        this.updateTriggers();
         this.clearUrlParams();
 
         // save statistics
@@ -500,6 +619,9 @@ class Gamepad {
      * @param {*} gamepad
      */
     loadTemplate(gamepad) {
+        // hide the gamepad while we prepare it
+        this.$gamepad.hide();
+
         $.ajax(`templates/${this.type}/template.html`).done((template) => {
             // inject the template HTML
             this.$gamepad.html(template);
@@ -513,7 +635,7 @@ class Gamepad {
             window.setTimeout(() =>
                 this.changeZoom(
                     this.type === "debug"
-                        ? 0
+                        ? "auto"
                         : this.getUrlParam("zoom") || "auto"
                 )
             );
@@ -534,6 +656,9 @@ class Gamepad {
 
             // enqueue the initial display refresh
             this.pollStatus(true);
+
+            // once fully loaded, display the gamepad
+            this.$gamepad.fadeIn();
         });
     }
 
@@ -632,6 +757,21 @@ class Gamepad {
         }
     }
 
+    /**
+     * Changes the skin
+     *
+     * @param {any} skin
+     */
+    changeSkin(skin) {
+        // update the visual skin selector
+        this.$skinSelect.val(skin);
+
+        // set the selected skin
+        this.debug = skin === 'debug';
+        this.updateUrlParams({ type: skin !== "auto" ? skin : undefined });
+        this.map(this.index);
+    }
+
     /**
      * Changes the background style
      *
@@ -643,13 +783,15 @@ class Gamepad {
             if (this.backgroundStyleIndex > this.backgroundStyle.length - 1) {
                 this.backgroundStyleIndex = 0;
             }
+        } else if ("string" === typeof style) {
+            this.backgroundStyleIndex = this.backgroundStyle.findIndex(
+                (s) => s === style
+            );
         } else {
             this.backgroundStyleIndex = style;
-            this.backgroundStyleName;
         }
-        this.backgroundStyleName = this.backgroundStyle[
+        this.backgroundStyleName =
-            this.backgroundStyleIndex
+            this.backgroundStyle[this.backgroundStyleIndex];
-        ];
 
         this.$body.css({
             background:
@@ -661,6 +803,7 @@ class Gamepad {
 
         // update current settings
         this.updateUrlParams({ background: this.backgroundStyleName });
+        this.$backgroundSelect.val(this.backgroundStyleName);
 
         // save statistics
         if (!!window.ga) {
@@ -688,6 +831,10 @@ class Gamepad {
             if (this.colorIndex > this.identifier.colors.length - 1) {
                 this.colorIndex = 0;
             }
+        } else if ("string" === typeof style) {
+            this.colorIndex = this.identifier.colors.findIndex(
+                (c) => c === color
+            );
         } else {
             if (!isNaN(parseInt(color))) {
                 // the color is a number, load it by its index
@@ -703,13 +850,16 @@ class Gamepad {
                 }
             }
         }
-        this.colorName = this.identifier.colors[this.colorIndex];
+        this.colorName = this.identifier.colors
+            ? this.identifier.colors[this.colorIndex]
+            : null;
 
         // update the DOM with the color value
         this.$gamepad.attr("data-color", this.colorName);
 
         // update current settings
         this.updateUrlParams({ color: this.colorName });
+        this.$colorSelect.val(this.colorName);
 
         // save statistics
         if (!!window.ga) {
@@ -736,7 +886,7 @@ class Gamepad {
 
         this.zoomMode = level === "auto" ? "auto" : "manual";
 
-        if (level === "auto") {
+        if (this.zoomMode === "auto") {
             // "auto" means a "contained in window" zoom, with a max zoom of 1
             this.zoomLevel = Math.min(
                 window.innerWidth / this.$gamepad.width(),
@@ -748,10 +898,10 @@ class Gamepad {
             this.zoomLevel = 1;
         } else if (level === "+" && this.zoomLevel < 2) {
             // "+" means a zoom in if we still can
-            this.zoomLevel *= 1.1;
+            this.zoomLevel += 0.1;
-        } else if (level === "-" && this.zoomLevel > 0.2) {
+        } else if (level === "-" && this.zoomLevel > 0.1) {
             // "-" means a zoom out if we still can
-            this.zoomLevel /= 1.1;
+            this.zoomLevel -= 0.1;
         } else if (!isNaN((level = parseFloat(level)))) {
             // an integer value means a value-based zoom
             this.zoomLevel = level;
@@ -821,12 +971,12 @@ class Gamepad {
     /**
      * Toggles the debug template for the active gamepad, if any
      */
-    toggleDebug() {
+    toggleDebug(debug = null) {
         // ensure that a gamepad is currently active
         if (this.index === null) return;
 
         // update debug value
-        this.debug = !this.debug;
+        this.debug = debug !== null ? debug : !this.debug;
 
         // save statistics
         if (!!window.ga) {
@@ -839,10 +989,7 @@ class Gamepad {
         }
 
         // update current settings
-        this.updateUrlParams({ type: this.debug ? "debug" : undefined });
+        this.changeSkin(this.debug ? 'debug' : 'auto')
-
-        // remap current gamepad
-        this.map(this.index);
     }
 
     /**
@@ -871,6 +1018,9 @@ class Gamepad {
      * Toggles the triggers meter display
      */
     toggleTriggersMeter(useMeter) {
+        // ensure that a gamepad is currently active
+        if (this.index === null) return;
+
         this.triggersMeter =
             useMeter !== undefined ? useMeter : !this.triggersMeter;
         this.$gamepad[this.triggersMeter ? "addClass" : "removeClass"](
@@ -878,9 +1028,9 @@ class Gamepad {
         );
 
         // update current settings
-        this.updateUrlParams({
+        const triggers = this.triggersMeter ? "meter" : "opacity";
-            triggers: this.triggersMeter ? "meter" : undefined,
+        this.updateUrlParams({ triggers });
-        });
+        this.$triggersSelect.val(triggers);
     }
 
     /**
@@ -932,7 +1082,7 @@ class Gamepad {
     updateUrlParams(newParams) {
         const params = Object.assign(this.getUrlParams(), newParams);
         const query = Object.entries(params)
-            .filter(([, value]) => value !== undefined)
+            .filter(([, value]) => value !== undefined && value !== null)
             .map(([key, value]) => `${key}=${value}`)
             .join("&");
         window.history.replaceState({}, document.title, `/?${query}`);