add a triggers meter toggle

css/main.css

@@ -99,6 +99,7 @@ body {
     font-size: 0.9em;
     left: 50%;
     min-width: 400px;
+    width: 600px;
     padding: 20px;
     position: absolute;
     top: 50%;
@@ -148,21 +149,23 @@ body {
 }
 
 kbd {
-    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;
+    -moz-user-select: none;
     -webkit-border-radius: .3em;
+    -webkit-user-select: none;
     border-radius: .3em;
     border: none;
     cursor: default;
-    -moz-user-select: none;
+    display: inline-block;
-    -webkit-user-select: none;
+    display: inline;
+    font: normal 1em monospace;
+    margin: 0 .2em;
+    min-width: 1em;
+    padding: .2em .6em;
+    text-align: center;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 14px;
     user-select: none;
 }
 

index.html

@@ -139,6 +139,10 @@
 					<th><kbd>H</kbd></th>
 					<td>Toggle this help menu</td>
 				</tr>
+				<tr>
+					<th><kbd>T</kbd></th>
+					<td>Toggle triggers meter mode</td>
+				</tr>
 				<tr>
 					<th><kbd>Delete</kbd>, <kbd>Escape</kbd></th>
 					<td>Clear active gamepad</td>

js/gamepad.js

@@ -64,6 +64,7 @@ class Gamepad {
         this.backgroundColorIndex = 0;
         this.colorIndex = null;
         this.colorName = null;
+        this.triggersMeter = false;
         this.zoomMode = "manual";
         this.zoomLevel = 1;
         this.mapping = {
@@ -232,6 +233,9 @@ class Gamepad {
             case "KeyH":
                 this.toggleHelp();
                 break;
+            case "KeyT":
+                this.toggleTriggersMeter();
+                break;
             case "NumpadAdd":
             case "Equal":
                 this.changeZoom("+");
@@ -741,23 +745,6 @@ class Gamepad {
         }
     }
 
-    /**
-     * Toggles the on-screen help message
-     */
-    toggleHelp() {
-        this.$help.toggleClass("active");
-
-        // save statistics
-        if (!!window.ga) {
-            ga("send", "event", {
-                eventCategory: "Gamepad",
-                eventAction: "toggle-help",
-                eventLabel: "Toggle Help",
-                eventValue: this.$help.is("active"),
-            });
-        }
-    }
-
     /**
      * Toggles the debug template for the active gamepad, if any
      */
@@ -781,6 +768,31 @@ class Gamepad {
         // remap current gamepad
         this.map(this.index);
     }
+
+    /**
+     * Toggles the on-screen help message
+     */
+    toggleHelp() {
+        this.$help.toggleClass("active");
+
+        // save statistics
+        if (!!window.ga) {
+            ga("send", "event", {
+                eventCategory: "Gamepad",
+                eventAction: "toggle-help",
+                eventLabel: "Toggle Help",
+                eventValue: this.$help.is("active"),
+            });
+        }
+    }
+
+    /**
+     * Toggles the triggers meter display
+     */
+    toggleTriggersMeter() {
+        this.triggersMeter = !this.triggersMeter;
+        this.$gamepad[this.triggersMeter ? 'addClass' : 'removeClass']('triggers-meter');
+    }
 }
 
 window.gamepad = new Gamepad();

templates/ds4/template.js

@@ -2,10 +2,17 @@ gamepad.updateButton = function($button) {
     const value = parseFloat($button.attr("data-value"), 10);
 
     if ($button.is(".trigger")) {
-        $button.css({
+        $button.css(
-            // "opacity": `${(value) * 100}%`,
+            gamepad.triggersMeter
-            "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
+                ? {
-        });
+                      opacity: 1,
+                      "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`,
+                  }
+                : {
+                      opacity: `${value * 100}%`,
+                      "clip-path": "none",
+                  }
+        );
     }
 };
 
@@ -20,7 +27,7 @@ gamepad.updateAxis = function($axis) {
             transform: `rotateX(${-parseFloat(
                 axisY * 30,
                 8
-            )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`
+            )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`,
         });
     }
 };

templates/xbox-one/template.css

@@ -136,7 +136,6 @@
     background: url(buttons.svg);
     width: 53px;
     height: 53px;
-    /* display: none; */
 }
 
 #gamepad .button[data-pressed="true"] {

templates/xbox-one/template.js

@@ -2,10 +2,17 @@ gamepad.updateButton = function($button) {
     const value = parseFloat($button.attr("data-value"), 10);
 
     if ($button.is(".trigger")) {
-        $button.css({
+        $button.css(
-            // "opacity": `${(value) * 100}%`,
+            gamepad.triggersMeter
-            "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
+                ? {
-        });
+                      opacity: 1,
+                      "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`,
+                  }
+                : {
+                      opacity: `${value * 100}%`,
+                      "clip-path": "none",
+                  }
+        );
     }
 };
 
@@ -20,7 +27,7 @@ gamepad.updateAxis = function($axis) {
             transform: `rotateX(${-parseFloat(
                 axisY * 30,
                 8
-            )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`
+            )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`,
         });
     }
 };