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

simplify code

Browse Source
This commit is contained in:
e7d 2019-06-01 14:39:32 +02:00
parent 9cc290ac48
commit 7dfd14e9f0
6 changed files with 322 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

336
js/gamepad.js
View File

@ -11,33 +11,39 @@ class Gamepad {
this.gamepadDemo = new GamepadDemo(this); this.gamepadDemo = new GamepadDemo(this);
// cached DOM references // cached DOM references
this.$body = $('body'); this.$body = $("body");
this.$gamepad = $('#gamepad'); this.$gamepad = $("#gamepad");
this.$nogamepad = $('#no-gamepad'); this.$nogamepad = $("#no-gamepad");
this.$nogamepadLink = $('#no-gamepad a'); this.$nogamepadLink = $("#no-gamepad a");
this.$help = $('#help'); this.$help = $("#help");
this.$gamepadList = $('#gamepad-list'); this.$gamepadList = $("#gamepad-list");
this.backgroundColors = ['transparent', 'dimgrey', 'black', 'lime', 'magenta']; this.backgroundColors = [
"transparent",
"dimgrey",
"black",
"lime",
"magenta"
];
this.backgroundColorIndex = 0; this.backgroundColorIndex = 0;
// gamepad collection default values // gamepad collection default values
this.gamepads = {}; this.gamepads = {};
this.gamepadIdentifiers = { this.gamepadIdentifiers = {
'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"]
}, },
'xbox-one': { "xbox-one": {
'id': /xinput|XInput/, id: /xinput|XInput/,
'name': 'Xbox One', name: "Xbox One",
'colors': ['black', 'white'] colors: ["black", "white"]
} }
}; };
@ -60,10 +66,16 @@ class Gamepad {
}; };
// listen for gamepad related events // listen for gamepad related events
this.haveEvents = 'GamepadEvent' in window; this.haveEvents = "GamepadEvent" in window;
if (this.haveEvents) { if (this.haveEvents) {
window.addEventListener("gamepadconnected", this.onGamepadConnect.bind(this)); window.addEventListener(
window.addEventListener("gamepaddisconnected", this.onGamepadDisconnect.bind(this)); "gamepadconnected",
this.onGamepadConnect.bind(this)
);
window.addEventListener(
"gamepaddisconnected",
this.onGamepadDisconnect.bind(this)
);
} }
// listen for mouse move events // listen for mouse move events
@ -72,16 +84,18 @@ class Gamepad {
window.addEventListener("keydown", this.onKeyDown.bind(this)); window.addEventListener("keydown", this.onKeyDown.bind(this));
// bind a gamepads scan // bind a gamepads scan
window.setInterval(this.scanGamepads.bind(this), this.scanGamepadsDelay); window.setInterval(
this.scanGamepads.bind(this),
this.scanGamepadsDelay
);
// read URI for display parameters to initalize // read URI for display parameters to initalize
this.params = { this.params = {
background: $.urlParam('background') || $.urlParam('b') || null, background: $.urlParam("background") || null,
color: $.urlParam('color') || $.urlParam('c') || null, color: $.urlParam("color") || null,
demo: $.urlParam('demo') || null, type: $.urlParam("type") || null,
index: $.urlParam('index') || $.urlParam('i') || null, demo: $.urlParam("demo") || null,
type: $.urlParam('type') || $.urlParam('t') || null, zoom: $.urlParam("zoom") || null
zoom: $.urlParam('zoom') || $.urlParam('z') || null
}; };
// change the background is specified // change the background is specified
@ -97,7 +111,10 @@ class Gamepad {
return; return;
} }
this.$body.css('background', this.backgroundColors[this.backgroundColorIndex]); this.$body.css(
"background",
this.backgroundColors[this.backgroundColorIndex]
);
} }
// start the demo if requested by params // start the demo if requested by params
@ -107,14 +124,6 @@ class Gamepad {
return; return;
} }
// if a gamepad index is specified, try to map the corresponding gamepad
if (this.params.index) {
this.refreshGamepads();
this.mapGamepad(+this.params.index);
return;
}
// by default, enqueue a delayed display of the help modal // by default, enqueue a delayed display of the help modal
this.displayGamepadHelp(); this.displayGamepadHelp();
} }
@ -149,11 +158,9 @@ class Gamepad {
} }
// 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.gamepadHelpTimeout = window.setTimeout(() => {
() => {
this.$nogamepad.fadeOut(); this.$nogamepad.fadeOut();
}, this.gamepadHelpDelay }, this.gamepadHelpDelay);
);
} }
/** /**
@ -231,7 +238,11 @@ class Gamepad {
*/ */
refreshGamepads() { refreshGamepads() {
// get fresh information from DOM about gamepads // get fresh information from DOM about gamepads
const navigatorGamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []); const navigatorGamepads = navigator.getGamepads
? navigator.getGamepads()
: navigator.webkitGetGamepads
? navigator.webkitGetGamepads()
: [];
for (let key in navigatorGamepads) { for (let key in navigatorGamepads) {
this.gamepads[key] = navigatorGamepads[key]; this.gamepads[key] = navigatorGamepads[key];
} }
@ -250,13 +261,15 @@ class Gamepad {
continue; continue;
} }
$tbody.push('<tr><td>' + gamepad.index + '</td><td>' + gamepad.id + '</td></tr>'); $tbody.push(
`<tr><td>${gamepad.index}</td><td>${gamepad.id}</td></tr>"`
);
} }
if ($tbody.length === 0) { if ($tbody.length === 0) {
$tbody.push('<tr><td colspan="2">No gamepad detected.</td></tr>'); $tbody.push('<tr><td colspan="2">No gamepad detected.</td></tr>');
} }
this.$gamepadList.html($tbody.join('')); this.$gamepadList.html($tbody.join(""));
} }
/** /**
@ -266,6 +279,32 @@ class Gamepad {
return this.gamepads[this.activeGamepadIndex]; return this.gamepads[this.activeGamepadIndex];
} }
/**
* Return the gamepad type for the connected gamepad
*
* @param {object} activeGamepad
*/
getActiveGamepadType(activeGamepad) {
if (this.debug) {
// if the debug option is active, use the associated template
return "debug";
}
if (this.params.type) {
// if the gamepad type is set through params, apply it
return this.params.type;
}
// else, determine the template to use from the gamepad identifier
for (let gamepadType in this.gamepadIdentifiers) {
if (
this.gamepadIdentifiers[gamepadType].id.test(activeGamepad.id)
) {
return gamepadType;
}
}
}
/** /**
* Adds a gamepad to the gamepads collection * Adds a gamepad to the gamepads collection
* *
@ -282,20 +321,24 @@ class Gamepad {
*/ */
removeGamepad(gamepadIndex) { removeGamepad(gamepadIndex) {
// ensure we have an index to remove // ensure we have an index to remove
if ('undefined' === typeof gamepadIndex) { if ("undefined" === typeof gamepadIndex) {
return; return;
} }
// ensure to kill demo mode // ensure to kill demo mode
if ('demo' === this.activeGamepadIndex) { if ("demo" === this.activeGamepadIndex) {
this.gamepadDemo.stop(); this.gamepadDemo.stop();
} }
// if this is the active gamepad // if this is the active gamepad
if (true === gamepadIndex || if (true === gamepadIndex || this.activeGamepadIndex === gamepadIndex) {
this.activeGamepadIndex === gamepadIndex) {
// clear associated date // clear associated date
this.activeGamepadIndex = null; this.activeGamepadIndex = null;
this.activeGamepadType = null;
this.activeGamepadIdentifier = null;
this.activeGamepadColorIndex = null;
this.activeGamepadColorName = null;
this.activeGamepadZoomLevel = 1;
this.$gamepad.empty(); this.$gamepad.empty();
} }
delete this.gamepads[gamepadIndex]; delete this.gamepads[gamepadIndex];
@ -317,24 +360,27 @@ class Gamepad {
// refresh gamepad information // refresh gamepad information
this.refreshGamepads(); this.refreshGamepads();
// read information for each gamepad for (
for (let gamepadIndex = 0; gamepadIndex < this.gamepads.length; gamepadIndex++) { let gamepadIndex = 0;
gamepadIndex < this.gamepads.length;
gamepadIndex++
) {
const gamepad = this.gamepads[gamepadIndex]; const gamepad = this.gamepads[gamepadIndex];
if (gamepad) { if (!gamepad) continue;
// store the current gamepad give its index
if (gamepad.index in this.gamepads) {
this.gamepads[gamepad.index] = gamepad;
}
// read the gamepad buttons // read the gamepad buttons
let button; let button;
for (let buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) { for (
let buttonIndex = 0;
buttonIndex < gamepad.buttons.length;
buttonIndex++
) {
button = gamepad.buttons[buttonIndex]; button = gamepad.buttons[buttonIndex];
// 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.mapGamepad(gamepad.index);
} return;
} }
} }
} }
@ -347,7 +393,7 @@ class Gamepad {
*/ */
mapGamepad(gamepadIndex) { mapGamepad(gamepadIndex) {
// ensure a gamepad need to be mapped // ensure a gamepad need to be mapped
if ('undefined' === typeof gamepadIndex) { if ("undefined" === typeof gamepadIndex) {
return; return;
} }
@ -370,40 +416,35 @@ class Gamepad {
} }
// determine gamepad type // determine gamepad type
this.activeGamepadType = null; this.activeGamepadType = this.getActiveGamepadType(activeGamepad);
if (this.debug) { this.activeGamepadIdentifier = this.gamepadIdentifiers[
// if the debug option is active, use the associated template this.activeGamepadType
this.activeGamepadType = 'debug'; ];
} else if (this.params.type) {
// if the gamepad type is set through params, apply it
this.activeGamepadType = this.params.type;
} else {
// else, determine the template to use from the gamepad identifier
for (let gamepadType in this.gamepadIdentifiers) {
if (this.gamepadIdentifiers[gamepadType].id.test(activeGamepad.id)) {
this.activeGamepadType = gamepadType;
}
}
}
this.activeGamepadIdentifier = this.gamepadIdentifiers[this.activeGamepadType];
this.activeGamepadColorIndex = 0; this.activeGamepadColorIndex = 0;
// ensure a valid gamepad type was discovered // ensure a valid gamepad type was discovered
if (!this.activeGamepadType) { if (!this.activeGamepadType) {
return; return;
} }
// load the HTML template file
this.loadTemplate(activeGamepad);
// hide the help before displaying the template
this.hideGamepadHelp();
}
/**
* Load the HTML template file for the active gamepad
*
* @param {*} activeGamepad
*/
loadTemplate(activeGamepad) {
$.ajax("templates/" + this.activeGamepadType + "/template.html").done(
template => {
// hoist some template related variables // hoist some template related variables
let button; let button;
let axis; let axis;
// hide the help before displaying the template
this.hideGamepadHelp();
// load the template HTML file
$.ajax(
'templates/' + this.activeGamepadType + '/template.html'
).done((template) => {
// inject the template HTML // inject the template HTML
this.$gamepad.html(template); this.$gamepad.html(template);
@ -419,21 +460,34 @@ class Gamepad {
// save the buttons mapping of this template // save the buttons mapping of this template
this.mapping.buttons = []; this.mapping.buttons = [];
for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) { for (
let buttonIndex = 0;
buttonIndex < activeGamepad.buttons.length;
buttonIndex++
) {
button = activeGamepad.buttons[buttonIndex]; button = activeGamepad.buttons[buttonIndex];
this.mapping.buttons[buttonIndex] = $('[data-button=' + 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 (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) { for (
let axisIndex = 0;
axisIndex < activeGamepad.axes.length;
axisIndex++
) {
axis = activeGamepad.axes[axisIndex]; axis = activeGamepad.axes[axisIndex];
this.mapping.axes[axisIndex] = $('[data-axis=' + axisIndex + '], [data-axis-x=' + axisIndex + '], [data-axis-y=' + axisIndex + '], [data-axis-z=' + 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.updateStatus(); this.updateStatus();
}); }
);
} }
/** /**
@ -452,14 +506,26 @@ class Gamepad {
this.refreshGamepads(); this.refreshGamepads();
const activeGamepad = this.getActiveGamepad(); const activeGamepad = this.getActiveGamepad();
this.updateButtons(activeGamepad);
this.updateAxes(activeGamepad);
}
/**
* Updates the buttons status of the active gamepad
*
* @param {*} activeGamepad
*/
updateButtons(activeGamepad) {
// hoist some variables // hoist some variables
let button; let button;
let $button; let $button;
let axis;
let $axis;
// update the buttons // update the buttons
for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) { for (
let buttonIndex = 0;
buttonIndex < activeGamepad.buttons.length;
buttonIndex++
) {
// find the DOM element // find the DOM element
$button = this.mapping.buttons[buttonIndex]; $button = this.mapping.buttons[buttonIndex];
if (!$button) { if (!$button) {
@ -471,17 +537,32 @@ class Gamepad {
button = activeGamepad.buttons[buttonIndex]; button = activeGamepad.buttons[buttonIndex];
// update the display values // update the display values
$button.attr('data-pressed', button.pressed); $button.attr("data-pressed", button.pressed);
$button.attr('data-value', button.value); $button.attr("data-value", button.value);
// hook the template defined button update method // hook the template defined button update method
if ("function" === typeof this.updateButton) { if ("function" === typeof this.updateButton) {
this.updateButton($button); this.updateButton($button);
} }
} }
}
/**
* Updates the axes status of the active gamepad
*
* @param {*} activeGamepad
*/
updateAxes(activeGamepad) {
// hoist some variables
let axis;
let $axis;
// update the axes // update the axes
for (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) { for (
let axisIndex = 0;
axisIndex < activeGamepad.axes.length;
axisIndex++
) {
// find the DOM element // find the DOM element
$axis = this.mapping.axes[axisIndex]; $axis = this.mapping.axes[axisIndex];
if (!$axis) { if (!$axis) {
@ -493,17 +574,17 @@ class Gamepad {
axis = activeGamepad.axes[axisIndex]; axis = activeGamepad.axes[axisIndex];
// update the display values // update the display values
if ($axis.is('[data-axis=' + axisIndex + ']')) { if ($axis.is("[data-axis=" + axisIndex + "]")) {
$axis.attr('data-value', axis); $axis.attr("data-value", axis);
} }
if ($axis.is('[data-axis-x=' + axisIndex + ']')) { if ($axis.is("[data-axis-x=" + axisIndex + "]")) {
$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=" + axisIndex + "]")) {
$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=" + axisIndex + "]")) {
$axis.attr('data-value-z', axis); $axis.attr("data-value-z", axis);
} }
// hook the template defined axis update method // hook the template defined axis update method
@ -519,7 +600,7 @@ class Gamepad {
* @param {any} backgroundColor * @param {any} backgroundColor
*/ */
changeBackgroundColor(backgroundColor) { changeBackgroundColor(backgroundColor) {
if ('undefined' === typeof gamepadColor) { if ("undefined" === typeof gamepadColor) {
this.backgroundColorIndex++; this.backgroundColorIndex++;
if (this.backgroundColorIndex > this.backgroundColors.length - 1) { if (this.backgroundColorIndex > this.backgroundColors.length - 1) {
this.backgroundColorIndex = 0; this.backgroundColorIndex = 0;
@ -528,8 +609,10 @@ class Gamepad {
this.backgroundColorIndex = backgroundColor; this.backgroundColorIndex = backgroundColor;
} }
this.$body.css(
this.$body.css('background', this.backgroundColors[this.backgroundColorIndex]); "background",
this.backgroundColors[this.backgroundColorIndex]
);
} }
/** /**
@ -543,25 +626,36 @@ class Gamepad {
return; return;
} }
if ('undefined' === typeof gamepadColor) { if ("undefined" === typeof gamepadColor) {
// no color was specified, load the next one in list // no color was specified, load the next one in list
this.activeGamepadColorIndex++; this.activeGamepadColorIndex++;
if (this.activeGamepadColorIndex > this.activeGamepadIdentifier.colors.length - 1) { if (
this.activeGamepadColorIndex >
this.activeGamepadIdentifier.colors.length - 1
) {
this.activeGamepadColorIndex = 0; this.activeGamepadColorIndex = 0;
} }
this.activeGamepadColorName = this.activeGamepadIdentifier.colors[this.activeGamepadColorIndex]; this.activeGamepadColorName = this.activeGamepadIdentifier.colors[
this.activeGamepadColorIndex
];
} else { } else {
if (!isNaN(parseInt(gamepadColor))) { if (!isNaN(parseInt(gamepadColor))) {
// the color is a number, load it by its index // the color is a number, load it by its index
this.activeGamepadColorIndex = gamepadColor; this.activeGamepadColorIndex = gamepadColor;
this.activeGamepadColorName = this.activeGamepadIdentifier.colors[this.activeGamepadColorIndex]; this.activeGamepadColorName = this.activeGamepadIdentifier.colors[
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.activeGamepadColorName = gamepadColor;
this.activeGamepadColorIndex = 0; this.activeGamepadColorIndex = 0;
for (let gamepadColorIndex in this.activeGamepadIdentifier.colors) { for (let gamepadColorIndex in this.activeGamepadIdentifier
if (this.activeGamepadColorName === this.activeGamepadIdentifier.colors[gamepadColorIndex]) { .colors) {
if (
this.activeGamepadColorName ===
this.activeGamepadIdentifier.colors[gamepadColorIndex]
) {
break; break;
} }
this.activeGamepadColorIndex++; this.activeGamepadColorIndex++;
@ -570,7 +664,7 @@ class Gamepad {
} }
// 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.activeGamepadColorName);
} }
/** /**
@ -585,20 +679,20 @@ class Gamepad {
} }
// ensure we have some data to process // ensure we have some data to process
if ('undefined' === typeof zoomLevel) { if ("undefined" === typeof zoomLevel) {
return; return;
} }
if ('0' === zoomLevel) { if ("0" === zoomLevel) {
// "0" means a zoom reset // "0" means a zoom reset
this.activeGamepadZoomLevel = 1; this.activeGamepadZoomLevel = 1;
} else if ('+' === zoomLevel && this.activeGamepadZoomLevel < 2) { } else if ("+" === zoomLevel && this.activeGamepadZoomLevel < 2) {
// "+" means a zoom in if we still can // "+" means a zoom in if we still can
this.activeGamepadZoomLevel += 0.1; 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 // "-" means a zoom out if we still can
this.activeGamepadZoomLevel -= 0.1; this.activeGamepadZoomLevel -= 0.1;
} else if (!isNaN(zoomLevel = parseFloat(zoomLevel))) { } else if (!isNaN((zoomLevel = parseFloat(zoomLevel)))) {
// an integer value means a value-based zoom // an integer value means a value-based zoom
this.activeGamepadZoomLevel = zoomLevel; this.activeGamepadZoomLevel = zoomLevel;
} }
@ -608,8 +702,10 @@ class Gamepad {
// 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.activeGamepadZoomLevel}, ${
this.activeGamepadZoomLevel
})`
); );
} }
@ -617,7 +713,7 @@ class Gamepad {
* Toggles the on-screen help message * Toggles the on-screen help message
*/ */
toggleHelp() { toggleHelp() {
this.$help.toggleClass('active'); this.$help.toggleClass("active");
} }
/** /**

2
js/urlParam.jquery.js
View File

@ -1,5 +1,5 @@
$.urlParam = function(name) { $.urlParam = function(name) {
let results = new RegExp('[\?&]' + name + '(=([^&#]*))?').exec(window.location.href); let results = new RegExp('[\?&]' + name + '(=([^&#]*))?').exec(window.location.search);
if (results === null) { if (results === null) {
return null; return null;
} }

70
templates/debug/template.js
View File

@ -1,10 +1,10 @@
(() => { (() => {
$id = $('#info-id .value'); $id = $("#info-id .value");
$timestamp = $('#info-timestamp .value'); $timestamp = $("#info-timestamp .value");
$index = $('#info-index .value'); $index = $("#info-index .value");
$mapping = $('#info-mapping .value'); $mapping = $("#info-mapping .value");
$axes = $('.axes .container'); $axes = $(".axes .container");
$buttons = $('.buttons .container'); $buttons = $(".buttons .container");
gamepad = window.gamepad; gamepad = window.gamepad;
activeGamepad = gamepad.getActiveGamepad(); activeGamepad = gamepad.getActiveGamepad();
@ -18,48 +18,58 @@
$index.html(activeGamepad.index); $index.html(activeGamepad.index);
$mapping.html(activeGamepad.mapping); $mapping.html(activeGamepad.mapping);
for (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) { for (
$axes.append( let axisIndex = 0;
'<div class="box medium">' + axisIndex < activeGamepad.axes.length;
' <div class="content">' + axisIndex++
' <div class="label">AXIS ' + axisIndex + '</div>' + ) {
' <div class="value" data-axis="' + axisIndex + '">0</div>' + $axes.append(`
' </div>' + <div class="box medium">
'</div>' <div class="content">
); <div class="label">AXIS ${axisIndex}</div>
<div class="value" data-axis="${axisIndex}">0</div>
</div>
</div>
`);
} }
for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) { for (
$buttons.append( let buttonIndex = 0;
'<div class="box small">' + buttonIndex < activeGamepad.buttons.length;
' <div class="content">' + buttonIndex++
' <div class="label">B' + buttonIndex + '</div>' + ) {
' <div class="value" data-button="' + buttonIndex + '">0</div>' + $buttons.append(`
' </div>' + <div class="box small">
'</div>' <div class="content">
); <div class="label">B${buttonIndex}</div>
<div class="value" data-button="${buttonIndex}">0</div>
</div>
</div>'
`);
} }
gamepad.updateButton = function($button) { gamepad.updateButton = function($button) {
updateElem($button); updateElem($button);
} };
gamepad.updateAxis = function($axis) { gamepad.updateAxis = function($axis) {
updateElem($axis, 6); updateElem($axis, 6);
} };
function updateElem($elem, precision = 2) { function updateElem($elem, precision = 2) {
updateTimestamp(); updateTimestamp();
var value = parseFloat($elem.attr('data-value'), 10).toFixed(precision); var value = parseFloat($elem.attr("data-value"), 10).toFixed(precision);
$elem.html(value); $elem.html(value);
var color = Math.floor(255 * 0.3 + 255 * 0.7 * Math.abs(value)); var color = Math.floor(255 * 0.3 + 255 * 0.7 * Math.abs(value));
$elem.css({ $elem.css({ color: `rgb(${color}, ${color}, ${color})` });
'color': 'rgb(' + color + ', ' + color + ', ' + color + ')'
});
} }
function updateTimestamp() { function updateTimestamp() {
activeGamepad = gamepad.getActiveGamepad();
if (!activeGamepad) {
return;
}
$timestamp.html(activeGamepad.timestamp); $timestamp.html(activeGamepad.timestamp);
} }
})(); })();

26
templates/ds4/template.js
View File

@ -1,23 +1,25 @@
gamepad.updateButton = function($button) { gamepad.updateButton = function($button) {
const value = parseFloat($button.attr('data-value'), 10); const value = parseFloat($button.attr("data-value"), 10);
if ($button.is('.trigger')) { if ($button.is(".trigger")) {
$button.css({ $button.css({
'-webkit-clip-path': 'inset(' + (1 - value) * 100 + '% 0px 0px 0pc)' "-webkit-clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
}); });
} }
} };
gamepad.updateAxis = function($axis) { gamepad.updateAxis = function($axis) {
const axisX = $axis.attr('data-value-x'); const axisX = $axis.attr("data-value-x");
const axisY = $axis.attr('data-value-y'); const axisY = $axis.attr("data-value-y");
const axisZ = $axis.attr('data-value-z');
if ($axis.is('.stick')) { if ($axis.is(".stick")) {
$axis.css({ $axis.css({
'margin-top': axisY * 25, "margin-top": axisY * 25,
'margin-left': axisX * 25, "margin-left": axisX * 25,
'transform': 'rotateX(' + -parseFloat(axisY * 30, 8) + 'deg) rotateY(' + parseFloat(axisX * 30, 8) + 'deg)' transform: `rotateX(${-parseFloat(
axisY * 30,
8
)}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`
}); });
} }
} };

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

@ -1,23 +1,25 @@
gamepad.updateButton = function($button) { gamepad.updateButton = function($button) {
const value = parseFloat($button.attr('data-value'), 10); const value = parseFloat($button.attr("data-value"), 10);
if ($button.is('.trigger')) { if ($button.is(".trigger")) {
$button.css({ $button.css({
'-webkit-clip-path': 'inset(' + (1 - value) * 100 + '% 0px 0px 0pc)' "-webkit-clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
}); });
} }
} };
gamepad.updateAxis = function($axis) { gamepad.updateAxis = function($axis) {
const axisX = $axis.attr('data-value-x'); const axisX = $axis.attr("data-value-x");
const axisY = $axis.attr('data-value-y'); const axisY = $axis.attr("data-value-y");
const axisZ = $axis.attr('data-value-z');
if ($axis.is('.stick')) { if ($axis.is(".stick")) {
$axis.css({ $axis.css({
'margin-top': axisY * 25, "margin-top": axisY * 25,
'margin-left': axisX * 25, "margin-left": axisX * 25,
'transform': 'rotateX(' + -parseFloat(axisY * 30, 8) + 'deg) rotateY(' + parseFloat(axisX * 30, 8) + 'deg)' transform: `rotateX(${-parseFloat(
axisY * 30,
8
)}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`
}); });
} }
} };