diff --git a/css/main.css b/css/main.css
index 953e03f..917b8b5 100644
--- a/css/main.css
+++ b/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;
- -webkit-user-select: none;
+ display: inline-block;
+ 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;
}
diff --git a/index.html b/index.html
index 18dd600..cb48a36 100644
--- a/index.html
+++ b/index.html
@@ -139,6 +139,10 @@
H |
Toggle this help menu |
+
+ T |
+ Toggle triggers meter mode |
+
Delete, Escape |
Clear active gamepad |
diff --git a/js/gamepad.js b/js/gamepad.js
index c2414b8..aee4fb0 100644
--- a/js/gamepad.js
+++ b/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();
diff --git a/templates/ds4/template.js b/templates/ds4/template.js
index 26fbf3b..505d715 100644
--- a/templates/ds4/template.js
+++ b/templates/ds4/template.js
@@ -1,15 +1,22 @@
-gamepad.updateButton = function($button) {
+gamepad.updateButton = function ($button) {
const value = parseFloat($button.attr("data-value"), 10);
if ($button.is(".trigger")) {
- $button.css({
- // "opacity": `${(value) * 100}%`,
- "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
- });
+ $button.css(
+ gamepad.triggersMeter
+ ? {
+ opacity: 1,
+ "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`,
+ }
+ : {
+ opacity: `${value * 100}%`,
+ "clip-path": "none",
+ }
+ );
}
};
-gamepad.updateAxis = function($axis) {
+gamepad.updateAxis = function ($axis) {
const axisX = $axis.attr("data-value-x");
const axisY = $axis.attr("data-value-y");
@@ -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)`,
});
}
};
diff --git a/templates/xbox-one/template.css b/templates/xbox-one/template.css
index 363d515..b7906a1 100644
--- a/templates/xbox-one/template.css
+++ b/templates/xbox-one/template.css
@@ -136,7 +136,6 @@
background: url(buttons.svg);
width: 53px;
height: 53px;
- /* display: none; */
}
#gamepad .button[data-pressed="true"] {
diff --git a/templates/xbox-one/template.js b/templates/xbox-one/template.js
index 26fbf3b..505d715 100644
--- a/templates/xbox-one/template.js
+++ b/templates/xbox-one/template.js
@@ -1,15 +1,22 @@
-gamepad.updateButton = function($button) {
+gamepad.updateButton = function ($button) {
const value = parseFloat($button.attr("data-value"), 10);
if ($button.is(".trigger")) {
- $button.css({
- // "opacity": `${(value) * 100}%`,
- "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
- });
+ $button.css(
+ gamepad.triggersMeter
+ ? {
+ opacity: 1,
+ "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`,
+ }
+ : {
+ opacity: `${value * 100}%`,
+ "clip-path": "none",
+ }
+ );
}
};
-gamepad.updateAxis = function($axis) {
+gamepad.updateAxis = function ($axis) {
const axisX = $axis.attr("data-value-x");
const axisY = $axis.attr("data-value-y");
@@ -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)`,
});
}
};