fixed debug template
This commit is contained in:
e7d
parent
d99b4801d0
commit
5ee5a1f0a3
@ -12,7 +12,6 @@
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="debug">Debug</div>
|
||||
<div class="no-gamepad">No active gamepad detected. Press <kbd>H</kbd> to read instructions.</div>
|
||||
<div class="gamepad"></div>
|
||||
<div class="help">
|
||||
|
||||
552
js/gamepad.js
552
js/gamepad.js
@ -1,151 +1,156 @@
|
||||
(function(window, document, undefined) {
|
||||
$.urlParam = function(name) {
|
||||
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
|
||||
if (results === null) {
|
||||
return null;
|
||||
} else {
|
||||
return decodeURIComponent(results[1]) || 0;
|
||||
}
|
||||
};
|
||||
$.urlParam = function(name) {
|
||||
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
|
||||
if (results === null) {
|
||||
return null;
|
||||
} else {
|
||||
return decodeURIComponent(results[1]) || 0;
|
||||
}
|
||||
};
|
||||
|
||||
var haveEvents = 'ongamepadconnected' in window;
|
||||
var debug = false;
|
||||
var scanGamepadsDelay = 1000;
|
||||
var gamepads = {};
|
||||
var $gamepad = $('.gamepad');
|
||||
var $nogamepad = $('.no-gamepad');
|
||||
var $debug = $('.debug');
|
||||
var $help = $('.help');
|
||||
var gamepadIdentifiers = {
|
||||
'debug': {
|
||||
'id': /debug/,
|
||||
'colors': []
|
||||
},
|
||||
'ds4': {
|
||||
'id': /054c.*?05c4/,
|
||||
'colors': ['black', 'white', 'red', 'blue']
|
||||
},
|
||||
'xbox-one': {
|
||||
'id': /xinput|XInput/,
|
||||
'colors': ['black', 'white']
|
||||
}
|
||||
};
|
||||
var gamepadHelpTimeout = null;
|
||||
var gamepadHelpDelay = 5000;
|
||||
var activeGamepadIndex = null;
|
||||
var activeGamepadType = null;
|
||||
var activeGamepadIdentifier = null;
|
||||
var activeGamepadColorIndex = null;
|
||||
var activeGamepadColorName = null;
|
||||
var activeGamepadZoomLevel = 1;
|
||||
var mapping = {
|
||||
buttons: [],
|
||||
axes: []
|
||||
};
|
||||
var haveEvents = 'ongamepadconnected' in window;
|
||||
var debug = false;
|
||||
var scanGamepadsDelay = 1000;
|
||||
var gamepads = {};
|
||||
var $gamepad = $('.gamepad');
|
||||
var $nogamepad = $('.no-gamepad');
|
||||
var $debug = $('.debug');
|
||||
var $help = $('.help');
|
||||
var gamepadIdentifiers = {
|
||||
'debug': {
|
||||
'id': /debug/,
|
||||
'colors': []
|
||||
},
|
||||
'ds4': {
|
||||
'id': /054c.*?05c4/,
|
||||
'colors': ['black', 'white', 'red', 'blue']
|
||||
},
|
||||
'xbox-one': {
|
||||
'id': /xinput|XInput/,
|
||||
'colors': ['black', 'white']
|
||||
}
|
||||
};
|
||||
var gamepadHelpTimeout = null;
|
||||
var gamepadHelpDelay = 5000;
|
||||
var activeGamepadIndex = null;
|
||||
var activeGamepadType = null;
|
||||
var activeGamepadIdentifier = null;
|
||||
var activeGamepadColorIndex = null;
|
||||
var activeGamepadColorName = null;
|
||||
var activeGamepadZoomLevel = 1;
|
||||
var mapping = {
|
||||
buttons: [],
|
||||
axes: []
|
||||
};
|
||||
|
||||
window.addEventListener("gamepadconnected", onGamepadConnect);
|
||||
window.addEventListener("gamepaddisconnected", onGamepadDisconnect);
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
window.addEventListener("gamepadconnected", onGamepadConnect);
|
||||
window.addEventListener("gamepaddisconnected", onGamepadDisconnect);
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
|
||||
displayGamepadHelp();
|
||||
function displayGamepadHelp() {
|
||||
gamepadHelpTimeout = window.setTimeout(function() {
|
||||
$nogamepad.fadeIn();
|
||||
}, gamepadHelpDelay);
|
||||
}
|
||||
function hideGamepadHelp() {
|
||||
window.clearTimeout(gamepadHelpTimeout);
|
||||
$nogamepad.hide();
|
||||
}
|
||||
|
||||
function onGamepadConnect(e) {
|
||||
addGamepad(e.gamepad);
|
||||
}
|
||||
|
||||
function onGamepadDisconnect(e) {
|
||||
removeGamepad(e.gamepad.index);
|
||||
}
|
||||
|
||||
function onKeyDown(e) {
|
||||
switch (e.code) {
|
||||
case "Delete":
|
||||
case "Escape":
|
||||
removeGamepad(activeGamepadIndex);
|
||||
break;
|
||||
case "KeyC":
|
||||
changeGamepadColor();
|
||||
break;
|
||||
case "KeyD":
|
||||
toggleDebug();
|
||||
break;
|
||||
case "KeyH":
|
||||
toggleHelp();
|
||||
break;
|
||||
case "NumpadAdd":
|
||||
case "Equal":
|
||||
changeZoom("+");
|
||||
break;
|
||||
case "NumpadSubtract":
|
||||
case "Minus":
|
||||
changeZoom("-");
|
||||
break;
|
||||
case "Numpad0":
|
||||
case "Digit0":
|
||||
changeZoom("0");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function getGamepads() {
|
||||
return navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
|
||||
}
|
||||
|
||||
function addGamepad(gamepad) {
|
||||
gamepads[gamepad.index] = gamepad;
|
||||
}
|
||||
|
||||
function removeGamepad(gamepadIndex) {
|
||||
if (gamepadIndex === activeGamepadIndex) {
|
||||
activeGamepadIndex = null;
|
||||
$gamepad.empty();
|
||||
}
|
||||
delete gamepads[gamepadIndex];
|
||||
|
||||
displayGamepadHelp();
|
||||
function displayGamepadHelp() {
|
||||
gamepadHelpTimeout = window.setTimeout(function() {
|
||||
$nogamepad.fadeIn();
|
||||
}, gamepadHelpDelay);
|
||||
}
|
||||
function hideGamepadHelp() {
|
||||
window.clearTimeout(gamepadHelpTimeout);
|
||||
$nogamepad.hide();
|
||||
}
|
||||
|
||||
setInterval(scanGamepads, scanGamepadsDelay);
|
||||
function scanGamepads() {
|
||||
if (null !== activeGamepadIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
function onGamepadConnect(e) {
|
||||
addGamepad(e.gamepad);
|
||||
}
|
||||
gamepads = getGamepads();
|
||||
for (var gamepadIndex = 0; gamepadIndex < gamepads.length; gamepadIndex++) {
|
||||
var gamepad = gamepads[gamepadIndex];
|
||||
if (gamepad) {
|
||||
if (gamepad.index in gamepads) {
|
||||
gamepads[gamepad.index] = gamepad;
|
||||
}
|
||||
|
||||
function onGamepadDisconnect(e) {
|
||||
removeGamepad(e.gamepad.index);
|
||||
}
|
||||
|
||||
function onKeyDown(e) {
|
||||
switch (e.code) {
|
||||
case "Delete":
|
||||
case "Escape":
|
||||
removeGamepad(activeGamepadIndex);
|
||||
break;
|
||||
case "KeyC":
|
||||
changeGamepadColor();
|
||||
break;
|
||||
case "KeyD":
|
||||
toggleDebug();
|
||||
break;
|
||||
case "KeyH":
|
||||
toggleHelp();
|
||||
break;
|
||||
case "NumpadAdd":
|
||||
case "Equal":
|
||||
changeZoom("+");
|
||||
break;
|
||||
case "NumpadSubtract":
|
||||
case "Minus":
|
||||
changeZoom("-");
|
||||
break;
|
||||
case "Numpad0":
|
||||
case "Digit0":
|
||||
changeZoom("0");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function getGamepads() {
|
||||
return navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
|
||||
}
|
||||
|
||||
function addGamepad(gamepad) {
|
||||
gamepads[gamepad.index] = gamepad;
|
||||
}
|
||||
|
||||
function removeGamepad(gamepadIndex) {
|
||||
if (gamepadIndex === activeGamepadIndex) {
|
||||
activeGamepadIndex = null;
|
||||
$gamepad.empty();
|
||||
}
|
||||
delete gamepads[gamepadIndex];
|
||||
|
||||
displayGamepadHelp();
|
||||
}
|
||||
|
||||
setInterval(scanGamepads, scanGamepadsDelay);
|
||||
function scanGamepads() {
|
||||
if (null !== activeGamepadIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
gamepads = getGamepads();
|
||||
for (var gamepadIndex = 0; gamepadIndex < gamepads.length; gamepadIndex++) {
|
||||
var gamepad = gamepads[gamepadIndex];
|
||||
if (gamepad) {
|
||||
if (gamepad.index in gamepads) {
|
||||
gamepads[gamepad.index] = gamepad;
|
||||
}
|
||||
|
||||
for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
|
||||
button = gamepad.buttons[buttonIndex];
|
||||
if (null === activeGamepadIndex && button.pressed) {
|
||||
mapGamepad(gamepad);
|
||||
}
|
||||
for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
|
||||
button = gamepad.buttons[buttonIndex];
|
||||
if (null === activeGamepadIndex && button.pressed) {
|
||||
mapGamepad(gamepad.index);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function mapGamepad(gamepad) {
|
||||
var button;
|
||||
var axis;
|
||||
function mapGamepad(gamepadIndex) {
|
||||
activeGamepadIndex = gamepadIndex;
|
||||
var gamepad = gamepads[gamepadIndex];
|
||||
|
||||
activeGamepadIndex = gamepad.index;
|
||||
var button;
|
||||
var axis;
|
||||
|
||||
hideGamepadHelp();
|
||||
hideGamepadHelp();
|
||||
|
||||
if (debug) {
|
||||
activeGamepadType = 'debug';
|
||||
activeGamepadIdentifier = gamepadIdentifiers[activeGamepadType];
|
||||
activeGamepadColorIndex = 0;
|
||||
} else {
|
||||
for (var gamepadType in gamepadIdentifiers) {
|
||||
if (gamepadIdentifiers[gamepadType].id.test(gamepad.id)) {
|
||||
activeGamepadType = gamepadType;
|
||||
@ -153,171 +158,172 @@
|
||||
activeGamepadColorIndex = 0;
|
||||
}
|
||||
}
|
||||
|
||||
$.ajax(
|
||||
'templates/' + activeGamepadType + '/template.html', {
|
||||
async: true
|
||||
}
|
||||
).done(function(template) {
|
||||
$gamepad.html(template);
|
||||
|
||||
if ($.urlParam('color')) {
|
||||
changeGamepadColor($.urlParam('color'));
|
||||
}
|
||||
if ($.urlParam('c')) {
|
||||
changeGamepadColor($.urlParam('c'));
|
||||
}
|
||||
|
||||
if ($.urlParam('zoom')) {
|
||||
changeZoom($.urlParam('zoom'));
|
||||
}
|
||||
if ($.urlParam('z')) {
|
||||
changeZoom($.urlParam('z'));
|
||||
}
|
||||
|
||||
mapping.buttons = [];
|
||||
for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
|
||||
button = gamepad.buttons[buttonIndex];
|
||||
mapping.buttons[buttonIndex] = $('[data-button=' + buttonIndex + ']');
|
||||
}
|
||||
|
||||
mapping.axes = [];
|
||||
for (var axisIndex = 0; axisIndex < gamepad.axes.length; axisIndex++) {
|
||||
axis = gamepad.axes[axisIndex];
|
||||
mapping.axes[axisIndex] = $('[data-axis=' + axisIndex + '], [data-axis-x=' + axisIndex + '], [data-axis-y=' + axisIndex + '], [data-axis-z=' + axisIndex + ']');
|
||||
}
|
||||
|
||||
updateVisualStatus();
|
||||
});
|
||||
}
|
||||
|
||||
function updateVisualStatus() {
|
||||
if (null === activeGamepadIndex) {
|
||||
return;
|
||||
$.ajax(
|
||||
'templates/' + activeGamepadType + '/template.html', {
|
||||
async: true
|
||||
}
|
||||
).done(function(template) {
|
||||
$gamepad.html(template);
|
||||
|
||||
if ($.urlParam('color')) {
|
||||
changeGamepadColor($.urlParam('color'));
|
||||
}
|
||||
if ($.urlParam('c')) {
|
||||
changeGamepadColor($.urlParam('c'));
|
||||
}
|
||||
|
||||
gamepads = getGamepads();
|
||||
var activeGamepad = gamepads[activeGamepadIndex];
|
||||
|
||||
if (!activeGamepad) {
|
||||
return;
|
||||
if ($.urlParam('zoom')) {
|
||||
changeZoom($.urlParam('zoom'));
|
||||
}
|
||||
if ($.urlParam('z')) {
|
||||
changeZoom($.urlParam('z'));
|
||||
}
|
||||
|
||||
requestAnimationFrame(updateVisualStatus);
|
||||
|
||||
var button;
|
||||
var $button;
|
||||
for (var buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
|
||||
$button = mapping.buttons[buttonIndex];
|
||||
if (!$button) {
|
||||
break;
|
||||
}
|
||||
|
||||
button = activeGamepad.buttons[buttonIndex];
|
||||
|
||||
$button.attr('data-pressed', button.pressed);
|
||||
$button.attr('data-value', button.value);
|
||||
|
||||
if ("function" === typeof updateButton) {
|
||||
updateButton($button);
|
||||
}
|
||||
mapping.buttons = [];
|
||||
for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
|
||||
button = gamepad.buttons[buttonIndex];
|
||||
mapping.buttons[buttonIndex] = $('[data-button=' + buttonIndex + ']');
|
||||
}
|
||||
|
||||
var axis;
|
||||
var $axis;
|
||||
for (var axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
|
||||
$axis = mapping.axes[axisIndex];
|
||||
if (!$axis) {
|
||||
break;
|
||||
}
|
||||
mapping.axes = [];
|
||||
for (var axisIndex = 0; axisIndex < gamepad.axes.length; axisIndex++) {
|
||||
axis = gamepad.axes[axisIndex];
|
||||
mapping.axes[axisIndex] = $('[data-axis=' + axisIndex + '], [data-axis-x=' + axisIndex + '], [data-axis-y=' + axisIndex + '], [data-axis-z=' + axisIndex + ']');
|
||||
}
|
||||
|
||||
axis = activeGamepad.axes[axisIndex];
|
||||
updateVisualStatus();
|
||||
});
|
||||
}
|
||||
|
||||
if ($axis.is('[data-axis=' + axisIndex + ']')) {
|
||||
$axis.attr('data-value', axis);
|
||||
}
|
||||
if ($axis.is('[data-axis-x=' + axisIndex + ']')) {
|
||||
$axis.attr('data-value-x', axis);
|
||||
}
|
||||
if ($axis.is('[data-axis-y=' + axisIndex + ']')) {
|
||||
$axis.attr('data-value-y', axis);
|
||||
}
|
||||
if ($axis.is('[data-axis-z=' + axisIndex + ']')) {
|
||||
$axis.attr('data-value-z', axis);
|
||||
}
|
||||
function updateVisualStatus() {
|
||||
if (null === activeGamepadIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ("function" === typeof updateAxis) {
|
||||
updateAxis($axis);
|
||||
}
|
||||
gamepads = getGamepads();
|
||||
var activeGamepad = gamepads[activeGamepadIndex];
|
||||
|
||||
if (!activeGamepad) {
|
||||
return;
|
||||
}
|
||||
|
||||
requestAnimationFrame(updateVisualStatus);
|
||||
|
||||
var button;
|
||||
var $button;
|
||||
for (var buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
|
||||
$button = mapping.buttons[buttonIndex];
|
||||
if (!$button) {
|
||||
break;
|
||||
}
|
||||
|
||||
button = activeGamepad.buttons[buttonIndex];
|
||||
|
||||
$button.attr('data-pressed', button.pressed);
|
||||
$button.attr('data-value', button.value);
|
||||
|
||||
if ("function" === typeof updateButton) {
|
||||
updateButton($button);
|
||||
}
|
||||
}
|
||||
|
||||
function changeGamepadColor(gamepadColor) {
|
||||
if (! activeGamepadIdentifier) {
|
||||
return;
|
||||
var axis;
|
||||
var $axis;
|
||||
for (var axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
|
||||
$axis = mapping.axes[axisIndex];
|
||||
if (!$axis) {
|
||||
break;
|
||||
}
|
||||
|
||||
if (!! gamepadColor) {
|
||||
if (! isNaN(parseInt(gamepadColor))) {
|
||||
activeGamepadColorIndex = gamepadColor;
|
||||
activeGamepadColorName = activeGamepadIdentifier.colors[activeGamepadColorIndex];
|
||||
} else {
|
||||
activeGamepadColorName = gamepadColor;
|
||||
activeGamepadColorIndex = 0;
|
||||
for (var gamepadColorName in activeGamepadIdentifier.colors) {
|
||||
if (activeGamepadColorName === gamepadColorName) {
|
||||
break;
|
||||
}
|
||||
activeGamepadColorIndex++;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
activeGamepadColorIndex++;
|
||||
if (activeGamepadColorIndex > activeGamepadIdentifier.colors.length - 1) {
|
||||
activeGamepadColorIndex = 0;
|
||||
}
|
||||
axis = activeGamepad.axes[axisIndex];
|
||||
|
||||
if ($axis.is('[data-axis=' + axisIndex + ']')) {
|
||||
$axis.attr('data-value', axis);
|
||||
}
|
||||
if ($axis.is('[data-axis-x=' + axisIndex + ']')) {
|
||||
$axis.attr('data-value-x', axis);
|
||||
}
|
||||
if ($axis.is('[data-axis-y=' + axisIndex + ']')) {
|
||||
$axis.attr('data-value-y', axis);
|
||||
}
|
||||
if ($axis.is('[data-axis-z=' + axisIndex + ']')) {
|
||||
$axis.attr('data-value-z', axis);
|
||||
}
|
||||
|
||||
if ("function" === typeof updateAxis) {
|
||||
updateAxis($axis);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function changeGamepadColor(gamepadColor) {
|
||||
if (! activeGamepadIdentifier) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!! gamepadColor) {
|
||||
if (! isNaN(parseInt(gamepadColor))) {
|
||||
activeGamepadColorIndex = gamepadColor;
|
||||
activeGamepadColorName = activeGamepadIdentifier.colors[activeGamepadColorIndex];
|
||||
} else {
|
||||
activeGamepadColorName = gamepadColor;
|
||||
activeGamepadColorIndex = 0;
|
||||
for (var gamepadColorName in activeGamepadIdentifier.colors) {
|
||||
if (activeGamepadColorName === gamepadColorName) {
|
||||
break;
|
||||
}
|
||||
activeGamepadColorIndex++;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
activeGamepadColorIndex++;
|
||||
if (activeGamepadColorIndex > activeGamepadIdentifier.colors.length - 1) {
|
||||
activeGamepadColorIndex = 0;
|
||||
}
|
||||
|
||||
$gamepad.attr('data-color', activeGamepadColorName);
|
||||
activeGamepadColorName = activeGamepadIdentifier.colors[activeGamepadColorIndex];
|
||||
}
|
||||
|
||||
function changeZoom(zoomLevel) {
|
||||
if (! activeGamepadIdentifier) {
|
||||
return;
|
||||
}
|
||||
$gamepad.attr('data-color', activeGamepadColorName);
|
||||
}
|
||||
|
||||
if (! zoomLevel) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ('0' === zoomLevel) {
|
||||
activeGamepadZoomLevel = 1;
|
||||
}
|
||||
else if ('+' === zoomLevel && activeGamepadZoomLevel < 2) {
|
||||
activeGamepadZoomLevel += 0.1;
|
||||
}
|
||||
else if ('-' === zoomLevel && activeGamepadZoomLevel > 0.2) {
|
||||
activeGamepadZoomLevel -= 0.1;
|
||||
}
|
||||
else if (! isNaN(zoomLevel = parseFloat(zoomLevel))) {
|
||||
activeGamepadZoomLevel = zoomLevel;
|
||||
}
|
||||
|
||||
// hack: fix js float issues
|
||||
activeGamepadZoomLevel = +activeGamepadZoomLevel.toFixed(1);
|
||||
|
||||
$gamepad.css('transform', 'translate(-50%, -50%) scale(' + activeGamepadZoomLevel + ', ' + activeGamepadZoomLevel + ')');
|
||||
function changeZoom(zoomLevel) {
|
||||
if (! activeGamepadIdentifier) {
|
||||
return;
|
||||
}
|
||||
|
||||
function toggleHelp(zoomLevel) {
|
||||
$help.toggleClass('active');
|
||||
if (! zoomLevel) {
|
||||
return;
|
||||
}
|
||||
|
||||
function toggleDebug() {
|
||||
debug = !debug;
|
||||
|
||||
$debug[debug ? 'fadeIn' : 'fadeOut']();
|
||||
if ('0' === zoomLevel) {
|
||||
activeGamepadZoomLevel = 1;
|
||||
}
|
||||
})(window, document);
|
||||
else if ('+' === zoomLevel && activeGamepadZoomLevel < 2) {
|
||||
activeGamepadZoomLevel += 0.1;
|
||||
}
|
||||
else if ('-' === zoomLevel && activeGamepadZoomLevel > 0.2) {
|
||||
activeGamepadZoomLevel -= 0.1;
|
||||
}
|
||||
else if (! isNaN(zoomLevel = parseFloat(zoomLevel))) {
|
||||
activeGamepadZoomLevel = zoomLevel;
|
||||
}
|
||||
|
||||
// hack: fix js float issues
|
||||
activeGamepadZoomLevel = +activeGamepadZoomLevel.toFixed(1);
|
||||
|
||||
$gamepad.css('transform', 'translate(-50%, -50%) scale(' + activeGamepadZoomLevel + ', ' + activeGamepadZoomLevel + ')');
|
||||
}
|
||||
|
||||
function toggleHelp(zoomLevel) {
|
||||
$help.toggleClass('active');
|
||||
}
|
||||
|
||||
function toggleDebug() {
|
||||
debug = !debug;
|
||||
|
||||
// remap current gamepad
|
||||
mapGamepad(activeGamepadIndex);
|
||||
}
|
||||
|
||||
326
js/gamepad.js.orig
Normal file
326
js/gamepad.js.orig
Normal file
@ -0,0 +1,326 @@
|
||||
// (function(window, document, undefined) {
|
||||
$.urlParam = function(name) {
|
||||
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
|
||||
if (results === null) {
|
||||
return null;
|
||||
} else {
|
||||
return decodeURIComponent(results[1]) || 0;
|
||||
}
|
||||
};
|
||||
|
||||
var haveEvents = 'ongamepadconnected' in window;
|
||||
<<<<<<< HEAD
|
||||
var debug = false;
|
||||
=======
|
||||
var scanGamepadsDelay = 1000;
|
||||
>>>>>>> 0b1a9fa0f4293fb99c4d97eb4af31a0627ce444e
|
||||
var gamepads = {};
|
||||
var $gamepad = $('.gamepad');
|
||||
var $nogamepad = $('.no-gamepad');
|
||||
var $debug = $('.debug');
|
||||
var $help = $('.help');
|
||||
var gamepadIdentifiers = {
|
||||
'debug': {
|
||||
'id': /xinput|XInput/,
|
||||
'colors': []
|
||||
},
|
||||
'ds4': {
|
||||
'id': /054c.*?05c4/,
|
||||
'colors': ['black', 'white', 'red', 'blue']
|
||||
},
|
||||
// 'xbox-one': {
|
||||
// 'id': /xinput|XInput/,
|
||||
// 'colors': ['black', 'white']
|
||||
// }
|
||||
};
|
||||
var gamepadHelpTimeout = null;
|
||||
var gamepadHelpDelay = 5000;
|
||||
var activeGamepadIndex = null;
|
||||
var activeGamepadType = null;
|
||||
var activeGamepadIdentifier = null;
|
||||
var activeGamepadColorIndex = null;
|
||||
var activeGamepadColorName = null;
|
||||
var activeGamepadZoomLevel = 1;
|
||||
var mapping = {
|
||||
buttons: [],
|
||||
axes: []
|
||||
};
|
||||
|
||||
window.addEventListener("gamepadconnected", onGamepadConnect);
|
||||
window.addEventListener("gamepaddisconnected", onGamepadDisconnect);
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
|
||||
displayGamepadHelp();
|
||||
function displayGamepadHelp() {
|
||||
gamepadHelpTimeout = window.setTimeout(function() {
|
||||
$nogamepad.fadeIn();
|
||||
}, gamepadHelpDelay);
|
||||
}
|
||||
function hideGamepadHelp() {
|
||||
window.clearTimeout(gamepadHelpTimeout);
|
||||
$nogamepad.hide();
|
||||
}
|
||||
|
||||
function onGamepadConnect(e) {
|
||||
addGamepad(e.gamepad);
|
||||
}
|
||||
|
||||
function onGamepadDisconnect(e) {
|
||||
removeGamepad(e.gamepad.index);
|
||||
}
|
||||
|
||||
function onKeyDown(e) {
|
||||
switch (e.code) {
|
||||
case "Delete":
|
||||
case "Escape":
|
||||
removeGamepad(activeGamepadIndex);
|
||||
break;
|
||||
case "KeyC":
|
||||
changeGamepadColor();
|
||||
break;
|
||||
case "KeyD":
|
||||
toggleDebug();
|
||||
break;
|
||||
case "KeyH":
|
||||
toggleHelp();
|
||||
break;
|
||||
case "NumpadAdd":
|
||||
case "Equal":
|
||||
changeZoom("+");
|
||||
break;
|
||||
case "NumpadSubtract":
|
||||
case "Minus":
|
||||
changeZoom("-");
|
||||
break;
|
||||
case "Numpad0":
|
||||
case "Digit0":
|
||||
changeZoom("0");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function getGamepads() {
|
||||
return navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
|
||||
}
|
||||
|
||||
function addGamepad(gamepad) {
|
||||
gamepads[gamepad.index] = gamepad;
|
||||
}
|
||||
|
||||
function removeGamepad(gamepadIndex) {
|
||||
if (gamepadIndex === activeGamepadIndex) {
|
||||
activeGamepadIndex = null;
|
||||
$gamepad.empty();
|
||||
}
|
||||
delete gamepads[gamepadIndex];
|
||||
|
||||
displayGamepadHelp();
|
||||
}
|
||||
|
||||
setInterval(scanGamepads, scanGamepadsDelay);
|
||||
function scanGamepads() {
|
||||
if (null !== activeGamepadIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
gamepads = getGamepads();
|
||||
for (var gamepadIndex = 0; gamepadIndex < gamepads.length; gamepadIndex++) {
|
||||
var gamepad = gamepads[gamepadIndex];
|
||||
if (gamepad) {
|
||||
if (gamepad.index in gamepads) {
|
||||
gamepads[gamepad.index] = gamepad;
|
||||
}
|
||||
|
||||
for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
|
||||
button = gamepad.buttons[buttonIndex];
|
||||
if (null === activeGamepadIndex && button.pressed) {
|
||||
mapGamepad(gamepad);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function mapGamepad(gamepad) {
|
||||
var button;
|
||||
var axis;
|
||||
|
||||
activeGamepadIndex = gamepad.index;
|
||||
|
||||
hideGamepadHelp();
|
||||
|
||||
for (var gamepadType in gamepadIdentifiers) {
|
||||
if (gamepadIdentifiers[gamepadType].id.test(gamepad.id)) {
|
||||
activeGamepadType = gamepadType;
|
||||
activeGamepadIdentifier = gamepadIdentifiers[gamepadType];
|
||||
activeGamepadColorIndex = 0;
|
||||
}
|
||||
}
|
||||
|
||||
$.ajax(
|
||||
'templates/' + activeGamepadType + '/template.html', {
|
||||
async: true
|
||||
}
|
||||
).done(function(template) {
|
||||
$gamepad.html(template);
|
||||
|
||||
if ($.urlParam('color')) {
|
||||
changeGamepadColor($.urlParam('color'));
|
||||
}
|
||||
if ($.urlParam('c')) {
|
||||
changeGamepadColor($.urlParam('c'));
|
||||
}
|
||||
|
||||
if ($.urlParam('zoom')) {
|
||||
changeZoom($.urlParam('zoom'));
|
||||
}
|
||||
if ($.urlParam('z')) {
|
||||
changeZoom($.urlParam('z'));
|
||||
}
|
||||
|
||||
mapping.buttons = [];
|
||||
for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
|
||||
button = gamepad.buttons[buttonIndex];
|
||||
mapping.buttons[buttonIndex] = $('[data-button=' + buttonIndex + ']');
|
||||
}
|
||||
|
||||
mapping.axes = [];
|
||||
for (var axisIndex = 0; axisIndex < gamepad.axes.length; axisIndex++) {
|
||||
axis = gamepad.axes[axisIndex];
|
||||
mapping.axes[axisIndex] = $('[data-axis=' + axisIndex + '], [data-axis-x=' + axisIndex + '], [data-axis-y=' + axisIndex + '], [data-axis-z=' + axisIndex + ']');
|
||||
}
|
||||
|
||||
updateVisualStatus();
|
||||
});
|
||||
}
|
||||
|
||||
function updateVisualStatus() {
|
||||
if (null === activeGamepadIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
gamepads = getGamepads();
|
||||
var activeGamepad = gamepads[activeGamepadIndex];
|
||||
|
||||
if (!activeGamepad) {
|
||||
return;
|
||||
}
|
||||
|
||||
requestAnimationFrame(updateVisualStatus);
|
||||
|
||||
var button;
|
||||
var $button;
|
||||
for (var buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
|
||||
$button = mapping.buttons[buttonIndex];
|
||||
if (!$button) {
|
||||
break;
|
||||
}
|
||||
|
||||
button = activeGamepad.buttons[buttonIndex];
|
||||
|
||||
$button.attr('data-pressed', button.pressed);
|
||||
$button.attr('data-value', button.value);
|
||||
|
||||
if ("function" === typeof updateButton) {
|
||||
updateButton($button);
|
||||
}
|
||||
}
|
||||
|
||||
var axis;
|
||||
var $axis;
|
||||
for (var axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
|
||||
$axis = mapping.axes[axisIndex];
|
||||
if (!$axis) {
|
||||
break;
|
||||
}
|
||||
|
||||
axis = activeGamepad.axes[axisIndex];
|
||||
|
||||
if ($axis.is('[data-axis=' + axisIndex + ']')) {
|
||||
$axis.attr('data-value', axis);
|
||||
}
|
||||
if ($axis.is('[data-axis-x=' + axisIndex + ']')) {
|
||||
$axis.attr('data-value-x', axis);
|
||||
}
|
||||
if ($axis.is('[data-axis-y=' + axisIndex + ']')) {
|
||||
$axis.attr('data-value-y', axis);
|
||||
}
|
||||
if ($axis.is('[data-axis-z=' + axisIndex + ']')) {
|
||||
$axis.attr('data-value-z', axis);
|
||||
}
|
||||
|
||||
if ("function" === typeof updateAxis) {
|
||||
updateAxis($axis);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function changeGamepadColor(gamepadColor) {
|
||||
if (! activeGamepadIdentifier) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!! gamepadColor) {
|
||||
if (! isNaN(parseInt(gamepadColor))) {
|
||||
activeGamepadColorIndex = gamepadColor;
|
||||
activeGamepadColorName = activeGamepadIdentifier.colors[activeGamepadColorIndex];
|
||||
} else {
|
||||
activeGamepadColorName = gamepadColor;
|
||||
activeGamepadColorIndex = 0;
|
||||
for (var gamepadColorName in activeGamepadIdentifier.colors) {
|
||||
if (activeGamepadColorName === gamepadColorName) {
|
||||
break;
|
||||
}
|
||||
activeGamepadColorIndex++;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
activeGamepadColorIndex++;
|
||||
if (activeGamepadColorIndex > activeGamepadIdentifier.colors.length - 1) {
|
||||
activeGamepadColorIndex = 0;
|
||||
}
|
||||
|
||||
activeGamepadColorName = activeGamepadIdentifier.colors[activeGamepadColorIndex];
|
||||
}
|
||||
|
||||
$gamepad.attr('data-color', activeGamepadColorName);
|
||||
}
|
||||
|
||||
function changeZoom(zoomLevel) {
|
||||
if (! activeGamepadIdentifier) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (! zoomLevel) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ('0' === zoomLevel) {
|
||||
activeGamepadZoomLevel = 1;
|
||||
}
|
||||
else if ('+' === zoomLevel && activeGamepadZoomLevel < 2) {
|
||||
activeGamepadZoomLevel += 0.1;
|
||||
}
|
||||
else if ('-' === zoomLevel && activeGamepadZoomLevel > 0.2) {
|
||||
activeGamepadZoomLevel -= 0.1;
|
||||
}
|
||||
else if (! isNaN(zoomLevel = parseFloat(zoomLevel))) {
|
||||
activeGamepadZoomLevel = zoomLevel;
|
||||
}
|
||||
|
||||
// hack: fix js float issues
|
||||
activeGamepadZoomLevel = +activeGamepadZoomLevel.toFixed(1);
|
||||
|
||||
$gamepad.css('transform', 'translate(-50%, -50%) scale(' + activeGamepadZoomLevel + ', ' + activeGamepadZoomLevel + ')');
|
||||
}
|
||||
|
||||
function toggleHelp(zoomLevel) {
|
||||
$help.toggleClass('active');
|
||||
}
|
||||
|
||||
function toggleDebug() {
|
||||
debug = !debug;
|
||||
|
||||
$debug[debug ? 'fadeIn' : 'fadeOut']();
|
||||
}
|
||||
// })(window, document);
|
||||
@ -21,6 +21,7 @@ li.large {
|
||||
|
||||
label {
|
||||
width: 20px;
|
||||
font-size: 0.8em;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
@ -30,4 +31,5 @@ value {
|
||||
margin-top: 3px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<link rel="stylesheet" href="templates/debug/template.css?ef81677">
|
||||
<script async src="templates/debug/template.js?ef81677"></script>
|
||||
<link rel="stylesheet" href="templates/debug/template.css">
|
||||
<script async src="templates/debug/template.js"></script>
|
||||
<div class="info">
|
||||
<ul>
|
||||
<li id="info-timestamp" class="large"><label>TIMESTAMP</label>
|
||||
|
||||
@ -5,7 +5,6 @@ var $timestamp = $('#info-timestamp value'),
|
||||
$buttons = $('.buttons ul');
|
||||
|
||||
var gamepad = gamepads[activeGamepadIndex];
|
||||
console.log(gamepad);
|
||||
|
||||
$timestamp.html(gamepad.timestamp);
|
||||
$index.html(gamepad.index);
|
||||
@ -40,8 +39,12 @@ function updateAxis($axis) {
|
||||
function updateElem($elem, precision = 2) {
|
||||
updateTimestamp();
|
||||
|
||||
value = parseFloat($elem.attr('data-value'), 10).toFixed(precision);
|
||||
var value = parseFloat($elem.attr('data-value'), 10).toFixed(precision);
|
||||
$elem.html(value);
|
||||
var color = Math.floor(255 * 0.3 + 255 * 0.7 * Math.abs(value));
|
||||
$elem.css({
|
||||
'color': 'rgb(' + color + ', ' + color + ', ' + color + ')'
|
||||
});
|
||||
}
|
||||
|
||||
function updateTimestamp() {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<link rel="stylesheet" href="templates/ds4/template.css?ef81677">
|
||||
<script async src="templates/ds4/template.js?ef81677"></script>
|
||||
<link rel="stylesheet" href="templates/ds4/template.css">
|
||||
<script async src="templates/ds4/template.js"></script>
|
||||
<div class="triggers">
|
||||
<span class="trigger left" data-button="6" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span>
|
||||
<span class="trigger right" data-button="7" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<link rel="stylesheet" href="templates/xbox-one/template.css?ef81677">
|
||||
<script async src="templates/xbox-one/template.js?ef81677"></script>
|
||||
<link rel="stylesheet" href="templates/xbox-one/template.css">
|
||||
<script async src="templates/xbox-one/template.js"></script>
|
||||
<div class="triggers">
|
||||
<span class="trigger left" data-button="6" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span>
|
||||
<span class="trigger right" data-button="7" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user