Rim-Modules/gamepad-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

multiple fixes and code simplification

Browse Source
This commit is contained in:
e7d 2020-07-02 18:13:21 +02:00
parent 86e71288db
commit 236a4fdfed
No known key found for this signature in database
GPG Key ID: F320BE007C0B8881
10 changed files with 214 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -87,7 +87,7 @@
</div> </div>
<script src="js/jquery.min.js"></script> <script src="js/jquery.min.js"></script>
<script src="js/gamepad-demo.js"></script> <script src="js/demo.js"></script>
<script src="js/gamepad.js"></script> <script src="js/gamepad.js"></script>
</body> </body>

6
js/gamepad-demo.js → js/demo.js
View File

@ -1,11 +1,11 @@
/** /**
* The Gamepad demo class * The Gamepad demo class
* *
* @class GamepadDemo * @class Demo
*/ */
class GamepadDemo { class Demo {
/** /**
* Creates an instance of GamepadDemo. * Creates an instance of Demo.
* *
* @param Gamepad gamepad * @param Gamepad gamepad
*/ */

417
js/gamepad.js
View File

@ -8,7 +8,7 @@ class Gamepad {
* Creates an instance of Gamepad. * Creates an instance of Gamepad.
*/ */
constructor() { constructor() {
this.gamepadDemo = new GamepadDemo(this); this.demo = new Demo(this);
// cached DOM references // cached DOM references
this.$body = $("body"); this.$body = $("body");
@ -25,17 +25,16 @@ class Gamepad {
"lime", "lime",
"magenta", "magenta",
]; ];
this.backgroundColorIndex = 0;
// gamepad collection default values // gamepad collection default values
this.gamepads = {}; this.gamepads = {};
this.gamepadIdentifiers = { this.identifiers = {
"debug": { debug: {
id: /debug/, id: /debug/,
name: "Debug", name: "Debug",
colors: [], colors: [],
}, },
"ds4": { ds4: {
id: /054c.*?05c4/, id: /054c.*?05c4/,
name: "DualShock 4", name: "DualShock 4",
colors: ["black", "white", "red", "blue"], colors: ["black", "white", "red", "blue"],
@ -53,19 +52,21 @@ class Gamepad {
}; };
// gamepad help default values // gamepad help default values
this.gamepadHelpTimeout = null; this.helpTimeout = null;
this.gamepadHelpDelay = 5000; this.helpDelay = 5000;
// active gamepad default values // active gamepad default values
this.scanGamepadsDelay = 500; this.scanDelay = 500;
this.debug = false; this.debug = false;
this.activeGamepadIndex = null; this.index = null;
this.activeGamepadType = null; this.type = null;
this.activeGamepadIdentifier = null; this.identifier = null;
this.activeGamepadColorIndex = null; this.timestamp = null;
this.activeGamepadColorName = null; this.backgroundColorIndex = 0;
this.activeGamepadZoomMode = "manual"; this.colorIndex = null;
this.activeGamepadZoomLevel = 1; this.colorName = null;
this.zoomMode = "manual";
this.zoomLevel = 1;
this.mapping = { this.mapping = {
buttons: [], buttons: [],
axes: [], axes: [],
@ -92,10 +93,7 @@ class Gamepad {
window.addEventListener("resize", this.onResize.bind(this)); window.addEventListener("resize", this.onResize.bind(this));
// bind a gamepads scan // bind a gamepads scan
window.setInterval( window.setInterval(this.scan.bind(this), this.scanDelay);
this.scanGamepads.bind(this),
this.scanGamepadsDelay
);
// read URI for display parameters to initalize // read URI for display parameters to initalize
this.params = { this.params = {
@ -110,30 +108,26 @@ class Gamepad {
if (this.params.background) { if (this.params.background) {
for (let i = 0; i < this.backgroundColors.length; i++) { for (let i = 0; i < this.backgroundColors.length; i++) {
if (this.params.background === this.backgroundColors[i]) { if (this.params.background === this.backgroundColors[i]) {
this.backgroundColorIndex = i; this.index = i;
break; break;
} }
} }
if (!this.backgroundColorIndex) { if (!this.index) {
return; return;
} }
this.$body.css( this.$body.css("background", this.backgroundColors[this.index]);
"background",
this.backgroundColors[this.backgroundColorIndex]
);
} }
// start the demo if requested by params // start the demo if requested by params
if (this.params.demo) { if (this.params.demo) {
this.gamepadDemo.start(this.params.demo); this.demo.start(this.params.demo);
return; return;
} }
// by default, enqueue a delayed display of the help modal // by default, enqueue a delayed display of the help modal
this.displayGamepadHelp(); this.displayHelp();
} }
/** /**
@ -155,19 +149,17 @@ class Gamepad {
/** /**
* Displays the help modal on screen * Displays the help modal on screen
*/ */
displayGamepadHelp() { displayHelp() {
// do not display help if we have an active gamepad // do not display help if we have an active gamepad
if (null !== this.activeGamepadIndex) { if (null !== this.index) return;
return;
}
// cancel the queued display of the help modal, if any // cancel the queued display of the help modal, if any
window.clearTimeout(this.gamepadHelpTimeout); window.clearTimeout(this.helpTimeout);
// hide the help modal // hide the help modal
this.$nogamepad.show(); this.$nogamepad.show();
// enqueue a delayed display of the help modal // enqueue a delayed display of the help modal
this.hideGamepadHelp(); this.hideHelp();
} }
/** /**
@ -175,16 +167,16 @@ class Gamepad {
* *
* @param {boolean} [hideNow=false] * @param {boolean} [hideNow=false]
*/ */
hideGamepadHelp(hideNow = false) { hideHelp(hideNow = false) {
// hide the message right away if needed // hide the message right away if needed
if (hideNow) { if (hideNow) {
this.$nogamepad.hide(); this.$nogamepad.hide();
} }
// hide help modal if no gamepad is active after X ms // hide help modal if no gamepad is active after X ms
this.gamepadHelpTimeout = window.setTimeout(() => { this.helpTimeout = window.setTimeout(() => {
this.$nogamepad.fadeOut(); this.$nogamepad.fadeOut();
}, this.gamepadHelpDelay); }, this.helpDelay);
} }
/** /**
@ -193,8 +185,8 @@ class Gamepad {
* @param {GamepadEvent} e * @param {GamepadEvent} e
*/ */
onGamepadConnect(e) { onGamepadConnect(e) {
// on gamepad connection, add it to the list // on gamepad connection, refresh available gamepads list
this.addGamepad(e.gamepad); this.refresh(e.gamepad);
} }
/** /**
@ -204,7 +196,7 @@ class Gamepad {
*/ */
onGamepadDisconnect(e) { onGamepadDisconnect(e) {
// on gamepad disconnection, remove it from the list // on gamepad disconnection, remove it from the list
this.removeGamepad(e.gamepad.index); this.disconnect(e.gamepad.index);
} }
/** /**
@ -213,7 +205,7 @@ class Gamepad {
* @param {MouseEvent} e * @param {MouseEvent} e
*/ */
onMouseMove() { onMouseMove() {
this.displayGamepadHelp(); this.displayHelp();
} }
/** /**
@ -225,7 +217,7 @@ class Gamepad {
switch (e.code) { switch (e.code) {
case "Delete": case "Delete":
case "Escape": case "Escape":
this.removeGamepad(true); this.disconnect(true);
break; break;
case "KeyB": case "KeyB":
this.changeBackgroundColor(); this.changeBackgroundColor();
@ -240,7 +232,7 @@ class Gamepad {
this.toggleHelp(); this.toggleHelp();
break; break;
case "KeyO": case "KeyO":
this.gamepadDemo.start(); this.demo.start();
break; break;
case "NumpadAdd": case "NumpadAdd":
case "Equal": case "Equal":
@ -251,7 +243,7 @@ class Gamepad {
this.changeZoom("-"); this.changeZoom("-");
break; break;
case "NumpadDecimal": case "NumpadDecimal":
this.autoAdjustZoom(1); this.adjustZoom(1);
break; break;
case "Numpad0": case "Numpad0":
case "Digit0": case "Digit0":
@ -266,7 +258,7 @@ class Gamepad {
* @param {WindowEvent} e * @param {WindowEvent} e
*/ */
onResize(e) { onResize(e) {
if (this.activeGamepadZoomMode === "auto") this.autoAdjustZoom(1); if (this.zoomMode === "auto") this.adjustZoom(1);
} }
/** /**
@ -283,7 +275,7 @@ class Gamepad {
/** /**
* Reloads gamepads data * Reloads gamepads data
*/ */
refreshGamepads() { refresh() {
// get fresh information from DOM about gamepads // get fresh information from DOM about gamepads
this.gamepads = this.getNavigatorGamepads(); this.gamepads = this.getNavigatorGamepads();
@ -315,16 +307,16 @@ class Gamepad {
/** /**
* Return the connected gamepad * Return the connected gamepad
*/ */
getActiveGamepad() { getActive() {
return this.gamepads[this.activeGamepadIndex]; return this.gamepads[this.index];
} }
/** /**
* Return the gamepad type for the connected gamepad * Return the gamepad type for the connected gamepad
* *
* @param {object} activeGamepad * @param {object} gamepad
*/ */
getActiveGamepadType(activeGamepad) { getType(gamepad) {
if (this.debug) { if (this.debug) {
// if the debug option is active, use the associated template // if the debug option is active, use the associated template
return "debug"; return "debug";
@ -336,76 +328,26 @@ class Gamepad {
} }
// else, determine the template to use from the gamepad identifier // else, determine the template to use from the gamepad identifier
for (let gamepadType in this.gamepadIdentifiers) { for (let gamepadType in this.identifiers) {
if ( if (this.identifiers[gamepadType].id.test(gamepad.id)) {
this.gamepadIdentifiers[gamepadType].id.test(activeGamepad.id)
) {
return gamepadType; return gamepadType;
} }
} }
} return "debug";
/**
* Adds a gamepad to the gamepads collection
*
* @param {object} gamepad
*/
addGamepad(gamepad) {
this.gamepads[gamepad.index] = gamepad;
}
/**
* Removes a gamepad to the gamepads collection
*
* @param {object} gamepad
*/
removeGamepad(gamepadIndex) {
// ensure we have an index to remove
if ("undefined" === typeof gamepadIndex) {
return;
}
// ensure to kill demo mode
if ("demo" === this.activeGamepadIndex) {
this.gamepadDemo.stop();
}
// if this is the active gamepad
if (true === gamepadIndex || this.activeGamepadIndex === gamepadIndex) {
// clear associated date
this.activeGamepadIndex = null;
this.activeGamepadType = null;
this.activeGamepadIdentifier = null;
this.activeGamepadColorIndex = null;
this.activeGamepadColorName = null;
this.activeGamepadZoomLevel = 1;
this.$gamepad.empty();
}
delete this.gamepads[gamepadIndex];
// enqueue a display of the help modal
this.displayGamepadHelp();
this.debug = false;
} }
/** /**
* Scans gamepads for activity * Scans gamepads for activity
*/ */
scanGamepads() { scan() {
// don't scan if we have an active gamepad // don't scan if we have an active gamepad
if (null !== this.activeGamepadIndex) { if (null !== this.index) return;
return;
}
// refresh gamepad information // refresh gamepad information
this.refreshGamepads(); this.refresh();
for ( for (let index = 0; index < this.gamepads.length; index++) {
let gamepadIndex = 0; const gamepad = this.gamepads[index];
gamepadIndex < this.gamepads.length;
gamepadIndex++
) {
const gamepad = this.gamepads[gamepadIndex];
if (!gamepad) continue; if (!gamepad) continue;
// read the gamepad buttons // read the gamepad buttons
@ -419,7 +361,7 @@ class Gamepad {
// if one of its button is pressed, activate this gamepad // if one of its button is pressed, activate this gamepad
if (button.pressed) { if (button.pressed) {
this.mapGamepad(gamepad.index); this.map(gamepad.index);
return; return;
} }
} }
@ -429,62 +371,87 @@ class Gamepad {
/** /**
* Sets a gamepad as active from its index * Sets a gamepad as active from its index
* *
* @param {int} gamepadIndex * @param {int} index
*/ */
mapGamepad(gamepadIndex) { map(index) {
// ensure a gamepad need to be mapped // ensure a gamepad need to be mapped
if ("undefined" === typeof gamepadIndex) { if ("undefined" === typeof index) return;
return;
}
// hide the help message // hide the help messages
this.hideGamepadHelp(true); this.hideHelp(true);
this.$help.removeClass("active");
// update local references // update local references
this.activeGamepadIndex = gamepadIndex; this.index = index;
const activeGamepad = this.getActiveGamepad(); const gamepad = this.getActive();
// ensure that a gamepad was actually found for this index // ensure that a gamepad was actually found for this index
if (!activeGamepad) { if (!gamepad) {
// this mapping request was probably a mistake : // this mapping request was probably a mistake :
// - remove the active gamepad index and reference // - remove the active gamepad index and reference
this.activeGamepadIndex = null; this.index = null;
// - enqueue a display of the help modal right away // - enqueue a display of the help modal right away
this.displayGamepadHelp(true); this.displayHelp(true);
return; return;
} }
// determine gamepad type // determine gamepad type
this.activeGamepadType = this.getActiveGamepadType(activeGamepad); this.type = this.getType(gamepad);
this.activeGamepadIdentifier = this.gamepadIdentifiers[ this.identifier = this.identifiers[this.type];
this.activeGamepadType this.colorIndex = 0;
];
this.activeGamepadColorIndex = 0;
// ensure a valid gamepad type was discovered // ensure a valid gamepad type was discovered
if (!this.activeGamepadType) { if (!this.type) return;
return;
}
// load the HTML template file // load the HTML template file
this.loadTemplate(activeGamepad); this.loadTemplate(gamepad);
// hide the help before displaying the template // hide the help before displaying the template
this.hideGamepadHelp(); this.hideHelp();
}
/**
* Disconnect the active gamepad
*
* @param {object} gamepad
*/
disconnect(index) {
// ensure we have an index to remove
if ("undefined" === typeof index) return;
// ensure to kill demo mode
if ("demo" === this.index) {
this.demo.stop();
}
// if this is the active gamepad
if (true === index || this.index === index) {
// clear associated date
this.index = null;
this.type = null;
this.identifier = null;
this.colorIndex = null;
this.colorName = null;
this.zoomLevel = 1;
this.$gamepad.empty();
}
// enqueue a display of the help modal
this.displayHelp();
this.debug = false;
} }
/** /**
* Load the HTML template file for the active gamepad * Load the HTML template file for the active gamepad
* *
* @param {*} activeGamepad * @param {*} gamepad
*/ */
loadTemplate(activeGamepad) { loadTemplate(gamepad) {
$.ajax("templates/" + this.activeGamepadType + "/template.html").done( $.ajax(`templates/${this.type}/template.html`).done((template) => {
(template) => {
// inject the template HTML // inject the template HTML
this.$gamepad.html(template); this.$gamepad.html(template);
window.setTimeout(() => { window.setTimeout(() => {
this.autoAdjustZoom(1); this.adjustZoom(1);
}); });
// read for parameters to apply: // read for parameters to apply:
@ -499,32 +466,22 @@ class Gamepad {
// save the buttons mapping of this template // save the buttons mapping of this template
this.mapping.buttons = []; this.mapping.buttons = [];
for ( for (let index = 0; index < gamepad.buttons.length; index++) {
let buttonIndex = 0; this.mapping.buttons[index] = $(`[data-button="${index}"]`);
buttonIndex < activeGamepad.buttons.length;
buttonIndex++
) {
this.mapping.buttons[buttonIndex] = $(
`[data-button="${buttonIndex}"]`
);
} }
// save the axes mapping of this template // save the axes mapping of this template
this.mapping.axes = []; this.mapping.axes = [];
for ( for (let index = 0; index < gamepad.axes.length; index++) {
let axisIndex = 0; this.mapping.axes[index] = $(
axisIndex < activeGamepad.axes.length; `[data-axis=${index}], [data-axis-x=${index}], [data-axis-y=${index}], [data-axis-z=${index}]`
axisIndex++
) {
this.mapping.axes[axisIndex] = $(
`[data-axis=${axisIndex}], [data-axis-x=${axisIndex}], [data-axis-y=${axisIndex}], [data-axis-z=${axisIndex}]`
); );
} }
// enqueue the initial display refresh // enqueue the initial display refresh
this.timestamp = null;
this.updateStatus(); this.updateStatus();
} });
);
} }
/** /**
@ -532,22 +489,18 @@ class Gamepad {
*/ */
updateStatus() { updateStatus() {
// ensure that a gamepad is currently active // ensure that a gamepad is currently active
if (null === this.activeGamepadIndex) { if (null === this.index) return;
return;
}
// enqueue the next refresh right away // enqueue the next refresh right away
// window.setTimeout(this.updateStatus.bind(this), 1000 / 60);
window.requestAnimationFrame(this.updateStatus.bind(this)); window.requestAnimationFrame(this.updateStatus.bind(this));
// window.setTimeout(this.updateStatus.bind(this), 1000 / 60);
// load latest gamepad data // load latest gamepad data
this.refreshGamepads(); this.refresh();
const activeGamepad = this.getActiveGamepad(); const activeGamepad = this.getActive();
if (activeGamepad.timestamp === this.activeGamepadTimestamp) { if (activeGamepad.timestamp === this.timestamp) return;
return; this.timestamp = activeGamepad.timestamp;
}
this.activeGamepadTimestamp = activeGamepad.timestamp;
this.updateButtons(activeGamepad); this.updateButtons(activeGamepad);
this.updateAxes(activeGamepad); this.updateAxes(activeGamepad);
@ -556,24 +509,20 @@ class Gamepad {
/** /**
* Updates the buttons status of the active gamepad * Updates the buttons status of the active gamepad
* *
* @param {*} activeGamepad * @param {*} gamepad
*/ */
updateButtons(activeGamepad) { updateButtons(gamepad) {
// update the buttons // update the buttons
for ( for (let index = 0; index < gamepad.buttons.length; index++) {
let buttonIndex = 0;
buttonIndex < activeGamepad.buttons.length;
buttonIndex++
) {
// find the DOM element // find the DOM element
const $button = this.mapping.buttons[buttonIndex]; const $button = this.mapping.buttons[index];
if (!$button) { if (!$button) {
// nothing to do for this button if no DOM element exists // nothing to do for this button if no DOM element exists
break; break;
} }
// read the button data // read the button data
const button = activeGamepad.buttons[buttonIndex]; const button = gamepad.buttons[index];
// update the display values // update the display values
$button.attr("data-pressed", button.pressed); $button.attr("data-pressed", button.pressed);
@ -589,36 +538,32 @@ class Gamepad {
/** /**
* Updates the axes status of the active gamepad * Updates the axes status of the active gamepad
* *
* @param {*} activeGamepad * @param {*} gamepad
*/ */
updateAxes(activeGamepad) { updateAxes(gamepad) {
// update the axes // update the axes
for ( for (let index = 0; index < gamepad.axes.length; index++) {
let axisIndex = 0;
axisIndex < activeGamepad.axes.length;
axisIndex++
) {
// find the DOM element // find the DOM element
const $axis = this.mapping.axes[axisIndex]; const $axis = this.mapping.axes[index];
if (!$axis) { if (!$axis) {
// nothing to do for this button if no DOM element exists // nothing to do for this button if no DOM element exists
break; break;
} }
// read the axis data // read the axis data
const axis = activeGamepad.axes[axisIndex]; const axis = gamepad.axes[index];
// update the display values // update the display values
if ($axis.is("[data-axis=" + axisIndex + "]")) { if ($axis.is("[data-axis=" + index + "]")) {
$axis.attr("data-value", axis); $axis.attr("data-value", axis);
} }
if ($axis.is("[data-axis-x=" + axisIndex + "]")) { if ($axis.is("[data-axis-x=" + index + "]")) {
$axis.attr("data-value-x", axis); $axis.attr("data-value-x", axis);
} }
if ($axis.is("[data-axis-y=" + axisIndex + "]")) { if ($axis.is("[data-axis-y=" + index + "]")) {
$axis.attr("data-value-y", axis); $axis.attr("data-value-y", axis);
} }
if ($axis.is("[data-axis-z=" + axisIndex + "]")) { if ($axis.is("[data-axis-z=" + index + "]")) {
$axis.attr("data-value-z", axis); $axis.attr("data-value-z", axis);
} }
@ -632,16 +577,16 @@ class Gamepad {
/** /**
* Changes the background color * Changes the background color
* *
* @param {any} backgroundColor * @param {any} color
*/ */
changeBackgroundColor(backgroundColor) { changeBackgroundColor(color) {
if ("undefined" === typeof gamepadColor) { if ("undefined" === typeof color) {
this.backgroundColorIndex++; this.backgroundColorIndex++;
if (this.backgroundColorIndex > this.backgroundColors.length - 1) { if (this.backgroundColorIndex > this.backgroundColors.length - 1) {
this.backgroundColorIndex = 0; this.backgroundColorIndex = 0;
} }
} else { } else {
this.backgroundColorIndex = backgroundColor; this.backgroundColorIndex = color;
} }
this.$body.css( this.$body.css(
@ -653,65 +598,53 @@ class Gamepad {
/** /**
* Changes the active gamepad color * Changes the active gamepad color
* *
* @param {any} gamepadColor * @param {any} color
*/ */
changeGamepadColor(gamepadColor) { changeGamepadColor(color) {
// ensure that a gamepad is currently active // ensure that a gamepad is currently active
if (null === this.activeGamepadIndex) { if (null === this.index) return;
return;
}
if ("undefined" === typeof gamepadColor) { if ("undefined" === typeof color) {
// no color was specified, load the next one in list // no color was specified, load the next one in list
this.activeGamepadColorIndex++; this.colorIndex++;
if ( if (this.colorIndex > this.identifier.colors.length - 1) {
this.activeGamepadColorIndex > this.colorIndex = 0;
this.activeGamepadIdentifier.colors.length - 1
) {
this.activeGamepadColorIndex = 0;
} }
this.activeGamepadColorName = this.activeGamepadIdentifier.colors[ this.colorName = this.identifier.colors[this.colorIndex];
this.activeGamepadColorIndex
];
} else { } else {
if (!isNaN(parseInt(gamepadColor))) { if (!isNaN(parseInt(color))) {
// the color is a number, load it by its index // the color is a number, load it by its index
this.activeGamepadColorIndex = gamepadColor; this.colorIndex = color;
this.activeGamepadColorName = this.activeGamepadIdentifier.colors[ this.colorName = this.identifier.colors[this.colorIndex];
this.activeGamepadColorIndex
];
} else { } else {
// the color is a string, load it by its name // the color is a string, load it by its name
this.activeGamepadColorName = gamepadColor; this.colorName = color;
this.activeGamepadColorIndex = 0; this.colorIndex = 0;
for (let gamepadColorIndex in this.activeGamepadIdentifier for (let gamepadColorIndex in this.identifier.colors) {
.colors) {
if ( if (
this.activeGamepadColorName === this.colorName ===
this.activeGamepadIdentifier.colors[gamepadColorIndex] this.identifier.colors[gamepadColorIndex]
) { ) {
break; break;
} }
this.activeGamepadColorIndex++; this.colorIndex++;
} }
} }
} }
// update the DOM with the color value // update the DOM with the color value
this.$gamepad.attr("data-color", this.activeGamepadColorName); this.$gamepad.attr("data-color", this.colorName);
} }
/** /**
* Adjusts the zoom level to the available space * Adjusts the zoom level to the available space
*/ */
autoAdjustZoom(maxZoom = null) { adjustZoom(maxZoom = null) {
// let the browser the time to paint // let the browser the time to paint
const smallerRatio = Math.min( const smallerRatio = Math.min(
window.innerWidth / window.innerWidth / (this.$gamepad.width() / this.zoomLevel),
(this.$gamepad.width() / this.activeGamepadZoomLevel), window.innerHeight / (this.$gamepad.height() / this.zoomLevel)
window.innerHeight /
(this.$gamepad.height() / this.activeGamepadZoomLevel)
); );
this.changeZoom( this.changeZoom(
maxZoom !== null && smallerRatio >= maxZoom maxZoom !== null && smallerRatio >= maxZoom
@ -724,42 +657,38 @@ class Gamepad {
/** /**
* Changes the active gamepad zoom level * Changes the active gamepad zoom level
* *
* @param {any} zoomLevel * @param {any} level
*/ */
changeZoom(zoomLevel, zoomMode = "manual") { changeZoom(level, mode = "manual") {
// ensure that a gamepad is currently active // ensure that a gamepad is currently active
if (null === this.activeGamepadIndex) { if (null === this.index) return;
return;
}
// ensure we have some data to process // ensure we have some data to process
if ("undefined" === typeof zoomLevel) { if ("undefined" === typeof level) return;
return;
}
this.activeGamepadZoomMode = zoomMode; this.zoomMode = mode;
if ("0" === zoomLevel) { if ("0" === level) {
// "0" means a zoom reset // "0" means a zoom reset
this.activeGamepadZoomLevel = 1; this.zoomLevel = 1;
} else if ("+" === zoomLevel && this.activeGamepadZoomLevel < 2) { } else if ("+" === level && this.zoomLevel < 2) {
// "+" means a zoom in if we still can // "+" means a zoom in if we still can
this.activeGamepadZoomLevel += 0.1; this.zoomLevel += 0.1;
} else if ("-" === zoomLevel && this.activeGamepadZoomLevel > 0.2) { } else if ("-" === level && this.zoomLevel > 0.2) {
// "-" means a zoom out if we still can // "-" means a zoom out if we still can
this.activeGamepadZoomLevel -= 0.1; this.zoomLevel -= 0.1;
} else if (!isNaN((zoomLevel = parseFloat(zoomLevel)))) { } else if (!isNaN((level = parseFloat(level)))) {
// an integer value means a value-based zoom // an integer value means a value-based zoom
this.activeGamepadZoomLevel = zoomLevel; this.zoomLevel = level;
} }
// hack: fix js float issues // hack: fix js float issues
this.activeGamepadZoomLevel = +this.activeGamepadZoomLevel.toFixed(2); this.zoomLevel = +this.zoomLevel.toFixed(2);
// update the DOM with the zoom value // update the DOM with the zoom value
this.$gamepad.css( this.$gamepad.css(
"transform", "transform",
`translate(-50%, -50%) scale(${this.activeGamepadZoomLevel}, ${this.activeGamepadZoomLevel})` `translate(-50%, -50%) scale(${this.zoomLevel}, ${this.zoomLevel})`
); );
} }
@ -775,15 +704,13 @@ class Gamepad {
*/ */
toggleDebug() { toggleDebug() {
// ensure that a gamepad is currently active // ensure that a gamepad is currently active
if (null === this.activeGamepadIndex) { if (null === this.index) return;
return;
}
// update debug value // update debug value
this.debug = !this.debug; this.debug = !this.debug;
// remap current gamepad // remap current gamepad
this.mapGamepad(this.activeGamepadIndex); this.map(this.index);
} }
} }

8
templates/debug/template.js
View File

@ -7,7 +7,7 @@
$buttons = $(".buttons .container"); $buttons = $(".buttons .container");
gamepad = window.gamepad; gamepad = window.gamepad;
activeGamepad = gamepad.getActiveGamepad(); activeGamepad = gamepad.getActive();
if (!activeGamepad) { if (!activeGamepad) {
return; return;
@ -27,7 +27,7 @@
<div class="box medium"> <div class="box medium">
<div class="content"> <div class="content">
<div class="label">AXIS ${axisIndex}</div> <div class="label">AXIS ${axisIndex}</div>
<div class="value" data-axis="${axisIndex}">0</div> <div class="value" data-axis="${axisIndex}"></div>
</div> </div>
</div> </div>
`); `);
@ -42,7 +42,7 @@
<div class="box small"> <div class="box small">
<div class="content"> <div class="content">
<div class="label">B${buttonIndex}</div> <div class="label">B${buttonIndex}</div>
<div class="value" data-button="${buttonIndex}">0</div> <div class="value" data-button="${buttonIndex}"></div>
</div> </div>
</div> </div>
`); `);
@ -66,7 +66,7 @@
} }
function updateTimestamp() { function updateTimestamp() {
activeGamepad = gamepad.getActiveGamepad(); activeGamepad = gamepad.getActive();
if (!activeGamepad) { if (!activeGamepad) {
return; return;
} }

1
templates/ds4/template.css
View File

@ -35,6 +35,7 @@
width: 99px; width: 99px;
height: 100%; height: 100%;
background: url(triggers.svg); background: url(triggers.svg);
clip-path: inset(100% 0px 0px 0pc);
} }
#gamepad .trigger[data-value="0"] { #gamepad .trigger[data-value="0"] {

4
templates/ds4/template.html
View File

@ -1,8 +1,8 @@
<link rel="stylesheet" href="templates/ds4/template.css"> <link rel="stylesheet" href="templates/ds4/template.css">
<script async src="templates/ds4/template.js"></script> <script async src="templates/ds4/template.js"></script>
<div class="triggers"> <div class="triggers">
<span class="trigger left" data-button="6" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span> <span class="trigger left" data-button="6"></span>
<span class="trigger right" data-button="7" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span> <span class="trigger right" data-button="7"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="bumpers"> <div class="bumpers">

3
templates/ds4/template.js
View File

@ -3,7 +3,8 @@ gamepad.updateButton = function($button) {
if ($button.is(".trigger")) { if ($button.is(".trigger")) {
$button.css({ $button.css({
"-webkit-clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)` // "opacity": `${(value) * 100}%`,
"clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
}); });
} }
}; };

2
templates/xbox-one/template.css
View File

@ -27,7 +27,7 @@
width: 89px; width: 89px;
height: 122px; height: 122px;
background: url(trigger.svg); background: url(trigger.svg);
opacity: 1; clip-path: inset(100% 0px 0px 0pc);
} }
#gamepad .trigger[data-value="0"] { #gamepad .trigger[data-value="0"] {

4
templates/xbox-one/template.html
View File

@ -1,8 +1,8 @@
<link rel="stylesheet" href="templates/xbox-one/template.css"> <link rel="stylesheet" href="templates/xbox-one/template.css">
<script async src="templates/xbox-one/template.js"></script> <script async src="templates/xbox-one/template.js"></script>
<div class="triggers"> <div class="triggers">
<span class="trigger left" data-button="6" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span> <span class="trigger left" data-button="6"></span>
<span class="trigger right" data-button="7" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span> <span class="trigger right" data-button="7"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="bumpers"> <div class="bumpers">

3
templates/xbox-one/template.js
View File

@ -3,7 +3,8 @@ gamepad.updateButton = function($button) {
if ($button.is(".trigger")) { if ($button.is(".trigger")) {
$button.css({ $button.css({
"-webkit-clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)` // "opacity": `${(value) * 100}%`,
"clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
}); });
} }
}; };