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

various improvments and fixes

Browse Source
This commit is contained in:
e7d 2019-05-18 17:40:43 +02:00
parent 27ac451303
commit 9cc290ac48
3 changed files with 84 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -14,7 +14,7 @@
</head> </head>
<body> <body>
<div id="no-gamepad">No active gamepad detected. Press <kbd>H</kbd> to read instructions.</div> <div id="no-gamepad">No active gamepad detected. Press <kbd>H</kbd> to read instructions.</div>
<div id="gamepad"></div> <div id="gamepad"></div>
<div id="help"> <div id="help">
<h2>Help</h2> <h2>Help</h2>
@ -74,6 +74,10 @@
<th><kbd>H</kbd></th> <th><kbd>H</kbd></th>
<td>Display this help</td> <td>Display this help</td>
</tr> </tr>
<tr>
<th><kbd>O</kbd></th>
<td>Start the demo</td>
</tr>
<tr> <tr>
<th><kbd>Delete</kbd>, <kbd>Escape</kbd></th> <th><kbd>Delete</kbd>, <kbd>Escape</kbd></th>
<td>Clear active gamepad</td> <td>Clear active gamepad</td>

106
js/gamepad.js
View File

@ -14,6 +14,7 @@ class Gamepad {
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.$help = $('#help'); this.$help = $('#help');
this.$gamepadList = $('#gamepad-list'); this.$gamepadList = $('#gamepad-list');
@ -65,6 +66,8 @@ class Gamepad {
window.addEventListener("gamepaddisconnected", this.onGamepadDisconnect.bind(this)); window.addEventListener("gamepaddisconnected", this.onGamepadDisconnect.bind(this));
} }
// listen for mouse move events
window.addEventListener("mousemove", this.onMouseMove.bind(this));
// listen for keyboard events // listen for keyboard events
window.addEventListener("keydown", this.onKeyDown.bind(this)); window.addEventListener("keydown", this.onKeyDown.bind(this));
@ -73,23 +76,41 @@ class Gamepad {
// read URI for display parameters to initalize // read URI for display parameters to initalize
this.params = { this.params = {
demoMode: $.urlParam('demo') || null, background: $.urlParam('background') || $.urlParam('b') || null,
gamepadColor: $.urlParam('color') || $.urlParam('c') || null, color: $.urlParam('color') || $.urlParam('c') || null,
gamepadIndex: $.urlParam('index') || $.urlParam('i') || null, demo: $.urlParam('demo') || null,
gamepadType: $.urlParam('type') || $.urlParam('t') || null, index: $.urlParam('index') || $.urlParam('i') || null,
type: $.urlParam('type') || $.urlParam('t') || null,
zoom: $.urlParam('zoom') || $.urlParam('z') || null zoom: $.urlParam('zoom') || $.urlParam('z') || null
}; };
// if a gamepad index is specified, try to map the corresponding gamepad // change the background is specified
if (this.params.gamepadIndex) { if (this.params.background) {
this.refreshGamepads(); for (let i = 0; i < this.backgroundColors.length; i++) {
this.mapGamepad(+this.params.gamepadIndex); if (this.params.background === this.backgroundColors[i]) {
this.backgroundColorIndex = i;
break;
}
}
if (!this.backgroundColorIndex) {
return;
}
this.$body.css('background', this.backgroundColors[this.backgroundColorIndex]);
}
// start the demo if requested by params
if (this.params.demo) {
this.gamepadDemo.start(this.params.demo);
return; return;
} }
if (this.params.demoMode) { // if a gamepad index is specified, try to map the corresponding gamepad
this.gamepadDemo.start(this.params.demoMode); if (this.params.index) {
this.refreshGamepads();
this.mapGamepad(+this.params.index);
return; return;
} }
@ -100,27 +121,39 @@ class Gamepad {
/** /**
* Displays the help modal on screen * Displays the help modal on screen
*
* @param {boolean} [displayNow=false]
*/ */
displayGamepadHelp(displayNow = false) { displayGamepadHelp() {
// display help modal if no gamepad is active after X ms // do not display help if we have an active gamepad
this.gamepadHelpTimeout = window.setTimeout( if (null !== this.activeGamepadIndex) {
() => { return;
this.$nogamepad.fadeIn(); }
},
displayNow ? 0 : this.gamepadHelpDelay // cancel the queued display of the help modal, if any
); window.clearTimeout(this.gamepadHelpTimeout);
// hide the help modal
this.$nogamepad.show();
// enqueue a delayed display of the help modal
this.hideGamepadHelp();
} }
/** /**
* Hides the help modal * Hides the help modal
*
* @param {boolean} [hideNow=false]
*/ */
hideGamepadHelp() { hideGamepadHelp(hideNow = false) {
// cancel the queued display of the help modal, if any // hide the message right away if needed
window.clearTimeout(this.gamepadHelpTimeout); if (hideNow) {
// hide the help modal this.$nogamepad.hide();
this.$nogamepad.hide(); }
// hide help modal if no gamepad is active after X ms
this.gamepadHelpTimeout = window.setTimeout(
() => {
this.$nogamepad.fadeOut();
}, this.gamepadHelpDelay
);
} }
/** /**
@ -143,6 +176,15 @@ class Gamepad {
this.removeGamepad(e.gamepad.index); this.removeGamepad(e.gamepad.index);
} }
/**
* Handles the mouse "mouslmove" event
*
* @param {MouseEvent} e
*/
onMouseMove() {
this.displayGamepadHelp();
}
/** /**
* Handles the keyboard "keydown" event * Handles the keyboard "keydown" event
* *
@ -166,6 +208,9 @@ class Gamepad {
case "KeyH": case "KeyH":
this.toggleHelp(); this.toggleHelp();
break; break;
case "KeyO":
this.gamepadDemo.start();
break;
case "NumpadAdd": case "NumpadAdd":
case "Equal": case "Equal":
this.changeZoom("+"); this.changeZoom("+");
@ -306,6 +351,9 @@ class Gamepad {
return; return;
} }
// hide the help message
this.hideGamepadHelp(true);
// update local references // update local references
this.activeGamepadIndex = gamepadIndex; this.activeGamepadIndex = gamepadIndex;
const activeGamepad = this.getActiveGamepad(); const activeGamepad = this.getActiveGamepad();
@ -326,9 +374,9 @@ class 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
this.activeGamepadType = 'debug'; this.activeGamepadType = 'debug';
} else if (this.params.gamepadType) { } else if (this.params.type) {
// if the gamepad type is set through params, apply it // if the gamepad type is set through params, apply it
this.activeGamepadType = this.params.gamepadType; this.activeGamepadType = this.params.type;
} else { } else {
// 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.gamepadIdentifiers) {
@ -361,8 +409,8 @@ class Gamepad {
// read for parameters to apply: // read for parameters to apply:
// - color // - color
if (this.params.gamepadColor) { if (this.params.color) {
this.changeGamepadColor(this.params.gamepadColor); this.changeGamepadColor(this.params.color);
} }
// - zoom // - zoom
if (this.params.zoom) { if (this.params.zoom) {

4
js/urlParam.jquery.js
View File

@ -2,7 +2,7 @@ $.urlParam = function(name) {
let results = new RegExp('[\?&]' + name + '(=([^&#]*))?').exec(window.location.href); let results = new RegExp('[\?&]' + name + '(=([^&#]*))?').exec(window.location.href);
if (results === null) { if (results === null) {
return null; return null;
} else {
return decodeURIComponent(results[2] || true) || true;
} }
return decodeURIComponent(results[2] || true) || true;
}; };