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

various improvments

Browse Source
This commit is contained in:
e7d 2019-06-02 16:08:49 +02:00
parent 8d9c68d960
commit 3f5e9f522a
6 changed files with 66 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/main.css
View File

@ -1,3 +1,7 @@
.no-break {
display: inline-block;
}
body { body {
background: transparent; background: transparent;
overflow: hidden; overflow: hidden;

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"><span class="no-break">No active gamepad detected.</span> <span class="no-break">Press <kbd>H</kbd> to read instructions.</span></div>
<div id="gamepad"></div> <div id="gamepad"></div>
<div id="help"> <div id="help">
<h2>Help</h2> <h2>Help</h2>
@ -86,11 +86,9 @@
</table> </table>
</div> </div>
<script src="https://static.e7d.io/libs/jquery/3.1.1/jquery.min.js"></script> <script src="js/jquery.min.js"></script>
<script src="js/urlParam.jquery.js"></script>
<script src="js/gamepad-demo.js"></script> <script src="js/gamepad-demo.js"></script>
<script src="js/gamepad.js"></script> <script src="js/gamepad.js"></script>
<script src="js/app.js"></script>
</body> </body>
</html> </html>

1
js/app.js
View File

@ -1 +0,0 @@
window.gamepad = new Gamepad();

85
js/gamepad.js
View File

@ -59,6 +59,7 @@ class Gamepad {
this.activeGamepadIdentifier = null; this.activeGamepadIdentifier = null;
this.activeGamepadColorIndex = null; this.activeGamepadColorIndex = null;
this.activeGamepadColorName = null; this.activeGamepadColorName = null;
this.activeGamepadZoomMode = "manual";
this.activeGamepadZoomLevel = 1; this.activeGamepadZoomLevel = 1;
this.mapping = { this.mapping = {
buttons: [], buttons: [],
@ -81,7 +82,9 @@ class Gamepad {
// listen for mouse move events // listen for mouse move events
window.addEventListener("mousemove", this.onMouseMove.bind(this)); window.addEventListener("mousemove", this.onMouseMove.bind(this));
// listen for keyboard events // listen for keyboard events
window.addEventListener("keypress", this.onKeyPress.bind(this)); window.addEventListener("keydown", this.onKeyDown.bind(this));
// listen for keyboard events
window.addEventListener("resize", this.onResize.bind(this));
// bind a gamepads scan // bind a gamepads scan
window.setInterval( window.setInterval(
@ -91,11 +94,11 @@ class Gamepad {
// read URI for display parameters to initalize // read URI for display parameters to initalize
this.params = { this.params = {
background: $.urlParam("background") || null, background: this.getUrlParam("background") || null,
color: $.urlParam("color") || null, color: this.getUrlParam("color") || null,
type: $.urlParam("type") || null, type: this.getUrlParam("type") || null,
demo: $.urlParam("demo") || null, demo: this.getUrlParam("demo") || null,
zoom: $.urlParam("zoom") || null zoom: this.getUrlParam("zoom") || null
}; };
// change the background is specified // change the background is specified
@ -128,6 +131,22 @@ class Gamepad {
this.displayGamepadHelp(); this.displayGamepadHelp();
} }
/**
* Reads an URL search parameter
*
* @param {*} name
*/
getUrlParam(name) {
let results = new RegExp("[?&]" + name + "(=([^&#]*))?").exec(
window.location.search
);
if (results === null) {
return null;
}
return decodeURIComponent(results[2] || true) || true;
}
/** /**
* Displays the help modal on screen * Displays the help modal on screen
*/ */
@ -197,8 +216,7 @@ class Gamepad {
* *
* @param {KeyboardEvent} e * @param {KeyboardEvent} e
*/ */
onKeyPress(e) { onKeyDown(e) {
console.log(e);
switch (e.code) { switch (e.code) {
case "Delete": case "Delete":
case "Escape": case "Escape":
@ -228,7 +246,7 @@ class Gamepad {
this.changeZoom("-"); this.changeZoom("-");
break; break;
case "NumpadDecimal": case "NumpadDecimal":
this.autoAdjustZoom(); this.autoAdjustZoom(1);
break; break;
case "Numpad0": case "Numpad0":
case "Digit0": case "Digit0":
@ -237,6 +255,15 @@ class Gamepad {
} }
} }
/**
* Handles the keyboard "keydown" event
*
* @param {WindowEvent} e
*/
onResize(e) {
if (this.activeGamepadZoomMode === "auto") this.autoAdjustZoom(1);
}
/** /**
* Reloads gamepads data * Reloads gamepads data
*/ */
@ -445,9 +472,6 @@ class Gamepad {
loadTemplate(activeGamepad) { loadTemplate(activeGamepad) {
$.ajax("templates/" + this.activeGamepadType + "/template.html").done( $.ajax("templates/" + this.activeGamepadType + "/template.html").done(
template => { template => {
// hoist some template related variables
let button;
let axis;
// inject the template HTML // inject the template HTML
this.$gamepad.html(template); this.$gamepad.html(template);
@ -472,7 +496,6 @@ class Gamepad {
buttonIndex < activeGamepad.buttons.length; buttonIndex < activeGamepad.buttons.length;
buttonIndex++ buttonIndex++
) { ) {
button = activeGamepad.buttons[buttonIndex];
this.mapping.buttons[buttonIndex] = $( this.mapping.buttons[buttonIndex] = $(
`[data-button="${buttonIndex}"]` `[data-button="${buttonIndex}"]`
); );
@ -485,7 +508,6 @@ class Gamepad {
axisIndex < activeGamepad.axes.length; axisIndex < activeGamepad.axes.length;
axisIndex++ axisIndex++
) { ) {
axis = activeGamepad.axes[axisIndex];
this.mapping.axes[axisIndex] = $( this.mapping.axes[axisIndex] = $(
`[data-axis=${axisIndex}], [data-axis-x=${axisIndex}], [data-axis-y=${axisIndex}], [data-axis-z=${axisIndex}]` `[data-axis=${axisIndex}], [data-axis-x=${axisIndex}], [data-axis-y=${axisIndex}], [data-axis-z=${axisIndex}]`
); );
@ -507,12 +529,18 @@ class Gamepad {
} }
// enqueue the next refresh right away // enqueue the next refresh right away
window.requestAnimationFrame(this.updateStatus.bind(this)); window.setTimeout(this.updateStatus.bind(this), 1000 / 60);
// window.requestAnimationFrame(this.updateStatus.bind(this));
// load latest gamepad data // load latest gamepad data
this.refreshGamepads(); this.refreshGamepads();
const activeGamepad = this.getActiveGamepad(); const activeGamepad = this.getActiveGamepad();
if (activeGamepad.timestamp === this.activeGamepadTimestamp) {
return;
}
this.activeGamepadTimestamp = activeGamepad.timestamp;
this.updateButtons(activeGamepad); this.updateButtons(activeGamepad);
this.updateAxes(activeGamepad); this.updateAxes(activeGamepad);
} }
@ -523,10 +551,6 @@ class Gamepad {
* @param {*} activeGamepad * @param {*} activeGamepad
*/ */
updateButtons(activeGamepad) { updateButtons(activeGamepad) {
// hoist some variables
let button;
let $button;
// update the buttons // update the buttons
for ( for (
let buttonIndex = 0; let buttonIndex = 0;
@ -534,14 +558,14 @@ class Gamepad {
buttonIndex++ buttonIndex++
) { ) {
// find the DOM element // find the DOM element
$button = this.mapping.buttons[buttonIndex]; const $button = this.mapping.buttons[buttonIndex];
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
button = activeGamepad.buttons[buttonIndex]; const button = activeGamepad.buttons[buttonIndex];
// update the display values // update the display values
$button.attr("data-pressed", button.pressed); $button.attr("data-pressed", button.pressed);
@ -560,10 +584,6 @@ class Gamepad {
* @param {*} activeGamepad * @param {*} activeGamepad
*/ */
updateAxes(activeGamepad) { updateAxes(activeGamepad) {
// hoist some variables
let axis;
let $axis;
// update the axes // update the axes
for ( for (
let axisIndex = 0; let axisIndex = 0;
@ -571,14 +591,14 @@ class Gamepad {
axisIndex++ axisIndex++
) { ) {
// find the DOM element // find the DOM element
$axis = this.mapping.axes[axisIndex]; const $axis = this.mapping.axes[axisIndex];
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
axis = activeGamepad.axes[axisIndex]; const axis = activeGamepad.axes[axisIndex];
// update the display values // update the display values
if ($axis.is("[data-axis=" + axisIndex + "]")) { if ($axis.is("[data-axis=" + axisIndex + "]")) {
@ -688,7 +708,8 @@ class Gamepad {
this.changeZoom( this.changeZoom(
maxZoom !== null && smallerRatio >= maxZoom maxZoom !== null && smallerRatio >= maxZoom
? maxZoom ? maxZoom
: Math.floor(smallerRatio * 10) / 10 : Math.floor(smallerRatio * 100) / 100,
"auto"
); );
} }
@ -697,7 +718,7 @@ class Gamepad {
* *
* @param {any} zoomLevel * @param {any} zoomLevel
*/ */
changeZoom(zoomLevel) { changeZoom(zoomLevel, zoomMode = "manual") {
// ensure that a gamepad is currently active // ensure that a gamepad is currently active
if (null === this.activeGamepadIndex) { if (null === this.activeGamepadIndex) {
return; return;
@ -708,6 +729,8 @@ class Gamepad {
return; return;
} }
this.activeGamepadZoomMode = zoomMode;
if ("0" === zoomLevel) { if ("0" === zoomLevel) {
// "0" means a zoom reset // "0" means a zoom reset
this.activeGamepadZoomLevel = 1; this.activeGamepadZoomLevel = 1;
@ -723,7 +746,7 @@ class Gamepad {
} }
// hack: fix js float issues // hack: fix js float issues
this.activeGamepadZoomLevel = +this.activeGamepadZoomLevel.toFixed(1); this.activeGamepadZoomLevel = +this.activeGamepadZoomLevel.toFixed(2);
// update the DOM with the zoom value // update the DOM with the zoom value
this.$gamepad.css( this.$gamepad.css(
@ -757,3 +780,5 @@ class Gamepad {
this.mapGamepad(this.activeGamepadIndex); this.mapGamepad(this.activeGamepadIndex);
} }
} }
window.gamepad = new Gamepad();

2
js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
js/urlParam.jquery.js
View File

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