Gamepad Viewer

commit 1a022d86e084e0bc4a2a02cf643ac63906a57c08 Author: e7d Date: Sun May 8 10:14:36 2016 +0200 Initial commit diff --git a/common.css b/common.css new file mode 100644 index 0000000..4f11bbb --- /dev/null +++ b/common.css @@ -0,0 +1,15 @@ +body { + background: darkgrey; +} + +.gamepad { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + margin-top: 0px !important; + margin-left: 0px !important; + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} diff --git a/ds4/base-white.svg b/ds4/base-white.svg new file mode 100644 index 0000000..77538b9 --- /dev/null +++ b/ds4/base-white.svg @@ -0,0 +1,341 @@ + + + + diff --git a/ds4/base.svg b/ds4/base.svg new file mode 100644 index 0000000..8c13e86 --- /dev/null +++ b/ds4/base.svg @@ -0,0 +1,341 @@ + + + + diff --git a/ds4/bumper.svg b/ds4/bumper.svg new file mode 100644 index 0000000..c3e83d5 --- /dev/null +++ b/ds4/bumper.svg @@ -0,0 +1,12 @@ + + + diff --git a/ds4/buttons.svg b/ds4/buttons.svg new file mode 100644 index 0000000..4fa188d --- /dev/null +++ b/ds4/buttons.svg @@ -0,0 +1,64 @@ + + + + diff --git a/ds4/disconnected.svg b/ds4/disconnected.svg new file mode 100644 index 0000000..57ad2a0 --- /dev/null +++ b/ds4/disconnected.svg @@ -0,0 +1,101 @@ + + + + diff --git a/ds4/dpad.svg b/ds4/dpad.svg new file mode 100644 index 0000000..42996dc --- /dev/null +++ b/ds4/dpad.svg @@ -0,0 +1,69 @@ + + + + diff --git a/ds4/meta.svg b/ds4/meta.svg new file mode 100644 index 0000000..33ec490 --- /dev/null +++ b/ds4/meta.svg @@ -0,0 +1,34 @@ + + + + diff --git a/ds4/start.svg b/ds4/start.svg new file mode 100644 index 0000000..01f5d5a --- /dev/null +++ b/ds4/start.svg @@ -0,0 +1,13 @@ + + + + diff --git a/ds4/sticks.svg b/ds4/sticks.svg new file mode 100644 index 0000000..3f08813 --- /dev/null +++ b/ds4/sticks.svg @@ -0,0 +1,31 @@ + + + + diff --git a/ds4/template.css b/ds4/template.css new file mode 100644 index 0000000..ab20566 --- /dev/null +++ b/ds4/template.css @@ -0,0 +1,251 @@ +.ds4 { + background-image: url(base.svg); + width: 806px; + height: 598px; +} + +.ds4.white { + background-image: url(base-white.svg); +} + +.ds4.disconnected { + background-image: url(disconnected.svg); +} + +.ds4.disconnected div { + display: none; +} + +.ds4 .triggers { + width: 588px; + height: 90px; + position: absolute; + left: 109px; +} + +.ds4 .trigger { + width: 99px; + height: 100%; + background: url(triggers.svg); +} + +.ds4 .trigger.left { + float: left; +} + +.ds4 .trigger.right { + float: right; + background-position-x: 99px; +} + +.ds4 .bumper { + width: 99px; + height: 23px; + background: url(bumper.svg) no-repeat; + opacity: 0; +} + +.ds4 .bumpers { + position: absolute; + width: 588px; + height: 23px; + left: 109px; + top: 94px; +} + +.ds4 .bumper[data-pressed="true"] { + opacity: 1; +} + +.ds4 .bumper.left { + /* -webkit-transform: rotateY(180deg); */ + /* transform: rotateY(180deg); */ + float: left; +} + +.ds4 .bumper.right { + float: right; + transform: rotateY(180deg); +} + +.ds4 .touchpad { + width: 262px; + height: 151px; + position: absolute; + left: 272px; + top: 122px; +} + +.ds4 .touchpad[data-pressed="true"] { + background: url(touchpad.svg) no-repeat center; +} + +.ds4 .meta { + width: 42px; + height: 42px; + position: absolute; + left: 382px; + bottom: 216px; +} + +.ds4 .meta[data-pressed="true"] { + background: url(meta.svg) no-repeat center; +} + +.ds4 .arrows { + position: absolute; + width: 352px; + height: 46px; + top: 142px; + left: 227px; +} + +.ds4 .select, .ds4 .start { + background: url(start.svg); + width: 28px; + height: 46px; + opacity: 0; +} + +.ds4 .select[data-pressed="true"], .ds4 .start[data-pressed="true"] { + opacity: 1; +} + +.ds4 .select { + float: left; +} + +.ds4 .start { + float: right; + background-position: 28px 0; +} + +.ds4 .buttons { + position: absolute; + width: 170px; + height: 170px; + top: 159px; + left: 567px; +} + +.ds4 .button { + position: absolute; + width: 56px; + height: 56px; + background: url(buttons.svg); +} + +.ds4 .button[data-pressed="true"] { + background-position-y: 56px; +} + +.ds4 .a { + background-position: 0 0; + bottom: 0px; + left: 56px; +} + +.ds4 .b { + background-position: -56px 0; + top: 56px; + right: 0px; +} + +.ds4 .x { + background-position: 112px 0; + top: 56px; +} + +.ds4 .y { + background-position: 56px 0; + left: 56px; +} + +.ds4 .sticks { + position: absolute; + width: 361px; + height: 105px; + top: 308px; + left: 228px; +} + +.ds4 .stick { + position: absolute; + background: url(sticks.svg); + height: 94px; + width: 94px; +} + +.ds4 .stick[data-pressed="true"].left { + background-position-x: -96px; +} + +.ds4 .stick[data-pressed="true"].right { + background-position-x: -192px; +} + +.ds4 .stick.left { + top: 0; + left: 0; +} + +.ds4 .stick.right { + top: calc(100% - 105px); + left: calc(100% - 105px); +} + +.ds4 .dpad { + position: absolute; + width: 125px; + height: 126px; + top: 181px; + left: 92px; +} + +.ds4 .face { + background: url(dpad.svg); + position: absolute; +} + +.ds4 .face.up, .ds4 .face.down { + width: 36px; + height: 52px; +} + +.ds4 .face.left, .ds4 .face.right { + width: 52px; + height: 36px; +} + +.ds4 .face.up { + left: 44px; + top: 0; + background-position: -37px 0px; +} + +.ds4 .face.down { + left: 44px; + bottom: 0; + background-position: 0px 0; +} + +.ds4 .face.left { + top: 44px; + left: 0; + background-position: 104px 0; +} + +.ds4 .face.right { + top: 44px; + right: 0px; + background-position: 52px 0; +} + +.ds4 .face[data-pressed="true"] { + /* margin-top: 5px; */ + background-position-y: 52px; +} + +.ds4.half { + margin-top: -300px; +} diff --git a/ds4/template.html b/ds4/template.html new file mode 100644 index 0000000..3374d90 --- /dev/null +++ b/ds4/template.html @@ -0,0 +1,34 @@ + + +

+ + + +

+ + + + +

+ + +

+ + + + +

diff --git a/ds4/template.js b/ds4/template.js new file mode 100644 index 0000000..1cf20ca --- /dev/null +++ b/ds4/template.js @@ -0,0 +1,26 @@ +function updateButton($button) +{ + value = $button.attr('data-value'); + + if ($button.is('.trigger')) { + $button.css({ + '-webkit-clip-path': 'inset(' + (1 - value) * 100 + '% 0px 0px 0pc)' + }); + } +} + +var axisX, axisY, axisZ; +function updateAxis($axis) +{ + axisX = $axis.attr('data-value-x'); + axisY = $axis.attr('data-value-y'); + axisZ = $axis.attr('data-value-z'); + + if ($axis.is('.stick')) { + $axis.css({ + 'margin-top': axisY * 25, + 'margin-left': axisX * 25, + 'transform': 'rotateX(' + -parseFloat(axisY * 30, 8) + 'deg) rotateY(' + parseFloat(axisX * 30, 8) + 'deg)' + }); + } +} diff --git a/ds4/touchpad.svg b/ds4/touchpad.svg new file mode 100644 index 0000000..17e7911 --- /dev/null +++ b/ds4/touchpad.svg @@ -0,0 +1,31 @@ + + + + diff --git a/ds4/triggers.svg b/ds4/triggers.svg new file mode 100644 index 0000000..2dad2c0 --- /dev/null +++ b/ds4/triggers.svg @@ -0,0 +1,40 @@ + + + + diff --git a/gamepad.js b/gamepad.js new file mode 100644 index 0000000..6d6b07a --- /dev/null +++ b/gamepad.js @@ -0,0 +1,162 @@ +var haveEvents = 'ongamepadconnected' in window; +var gamepads = {}; +var $gamepad = $('.gamepad'); +var gamepadIdentifiers = { + 'ds4': /Vendor: 054c Product: 05c4/, + 'xbox-one': /XInput/ +}; +var activeGamepad = null; +var activeGamepadType = null; +var mapping = { + buttons: [], + axes: [] +}; + +window.addEventListener("gamepadconnected", onGamepadConenct); +window.addEventListener("gamepaddisconnected", onGamepadDisconnect); + +function onGamepadConenct(e) { + addGamepad(e.gamepad); +} + +function onGamepadDisconnect(e) { + removeGamepad(e.gamepad.index); +} + +function addGamepad(gamepad) { + gamepads[gamepad.index] = gamepad; + requestAnimationFrame(updateStatus); +} + +function removeGamepad(gamepadIndex) { + var gamepad = gamepads[gamepadIndex]; + if (gamepad && activeGamepad && gamepad.index === activeGamepad.index) { + activeGamepad = null; + $gamepad.empty(); + } + delete gamepads[gamepadIndex]; +} + +function scanGamepads() { + var navigatorGamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []); + for (var gamepadIndex = 0; gamepadIndex < navigatorGamepads.length; gamepadIndex++) { + var gamepad = navigatorGamepads[gamepadIndex]; + if (gamepad) { + if (gamepad.index in gamepads) { + gamepads[gamepad.index] = gamepad; + } else { + addGamepad(gamepad); + } + + for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) { + button = gamepad.buttons[buttonIndex]; + if (!activeGamepad && button.pressed) { + mapGamepad(gamepad); + } + } + } else { + if (gamepadIndex in gamepads) { + removeGamepad(gamepadIndex); + } + } + } +} + +function updateStatus() { + if (!haveEvents) { + scanGamepads(); + } + + requestAnimationFrame(updateStatus); +} + +function mapGamepad(gamepad) { + var button; + var axis; + + activeGamepad = gamepad; + + for (var gamepadType in gamepadIdentifiers) { + if (gamepadIdentifiers[gamepadType].test(activeGamepad.id)) { + activeGamepadType = gamepadType; + } + } + + $.ajax( + activeGamepadType + '/template.html', + { + async: true + } + ).done(function(template) { + $gamepad.html(template).addClass(activeGamepadType); + + mapping.buttons = []; + for (var buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) { + button = activeGamepad.buttons[buttonIndex]; + mapping.buttons[buttonIndex] = $('[data-button='+buttonIndex+']'); + } + + mapping.axes = []; + for (var axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) { + axis = activeGamepad.axes[axisIndex]; + mapping.axes[axisIndex] = $('[data-axis-x='+axisIndex+'], [data-axis-y='+axisIndex+'], [data-axis-z='+axisIndex+']'); + } + + updateVisualStatus(); + }); +} + +function updateVisualStatus() { + requestAnimationFrame(updateVisualStatus); + + if (!activeGamepad) { + return; + } + + 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-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); + } + } +} + +if (!haveEvents) { + setInterval(scanGamepads, 500); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..ced3054 --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + Gamepad Viewer + + + + + +

+ + + + + diff --git a/reset.css b/reset.css new file mode 100644 index 0000000..704c8aa --- /dev/null +++ b/reset.css @@ -0,0 +1,49 @@ +/** + * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) + * http://cssreset.com + */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; + /* width: 100vw; */ + /* height: 100vh; */ +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/xbox-one/base-white.svg b/xbox-one/base-white.svg new file mode 100644 index 0000000..afcee02 --- /dev/null +++ b/xbox-one/base-white.svg @@ -0,0 +1,488 @@ + + + + diff --git a/xbox-one/base.svg b/xbox-one/base.svg new file mode 100644 index 0000000..d4de64a --- /dev/null +++ b/xbox-one/base.svg @@ -0,0 +1,434 @@ + + + + diff --git a/xbox-one/bumper.svg b/xbox-one/bumper.svg new file mode 100644 index 0000000..8f87be0 --- /dev/null +++ b/xbox-one/bumper.svg @@ -0,0 +1,32 @@ + + + + diff --git a/xbox-one/buttons.svg b/xbox-one/buttons.svg new file mode 100644 index 0000000..47a5670 --- /dev/null +++ b/xbox-one/buttons.svg @@ -0,0 +1,72 @@ + + + + diff --git a/xbox-one/disconnected.svg b/xbox-one/disconnected.svg new file mode 100644 index 0000000..599217f --- /dev/null +++ b/xbox-one/disconnected.svg @@ -0,0 +1,83 @@ + + + + diff --git a/xbox-one/dpad.svg b/xbox-one/dpad.svg new file mode 100644 index 0000000..ed4edee --- /dev/null +++ b/xbox-one/dpad.svg @@ -0,0 +1,102 @@ + + + + diff --git a/xbox-one/start-select.svg b/xbox-one/start-select.svg new file mode 100644 index 0000000..4f4b678 --- /dev/null +++ b/xbox-one/start-select.svg @@ -0,0 +1,24 @@ + + + + diff --git a/xbox-one/stick.svg b/xbox-one/stick.svg new file mode 100644 index 0000000..545a9d4 --- /dev/null +++ b/xbox-one/stick.svg @@ -0,0 +1,811 @@ + + + + diff --git a/xbox-one/template.css b/xbox-one/template.css new file mode 100644 index 0000000..42486b6 --- /dev/null +++ b/xbox-one/template.css @@ -0,0 +1,241 @@ +.xbox-one { + background-image: url(base.svg); + height: 630px; + width: 750px; +} + +.xbox-one.white { + background-image: url(base-white.svg); +} + +.xbox-one.disconnected { + background-image: url(disconnected.svg); +} + +.xbox-one.disconnected div { + display: none; +} + +.xbox-one .triggers { + width: 446px; + height: 121px; + position: absolute; + left: 152px; +} + +.xbox-one .trigger { + width: 88px; + height: 121px; + background: url(trigger.svg); + opacity: 1; +} + +.xbox-one .trigger.left { + float: left; + background-position: 0 0; +} + +.xbox-one .trigger.right { + float: right; + transform: rotateY(180deg); +} + +.xbox-one .bumper { + width: 170px; + height: 61px; + background: url(bumper.svg); + opacity: 0; +} + +.xbox-one .bumpers { + position: absolute; + width: 536px; + height: 61px; + left: 107px; + top: 129px; +} + +.xbox-one .bumper[data-pressed="true"] { + opacity: 1; +} + +.xbox-one .bumper.left { + float: left; +} + +.xbox-one .bumper.right { + float: right; + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +.xbox-one .p0 { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} + +.xbox-one .p1 { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} + +.xbox-one .p2 { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); +} + +.xbox-one .p3 { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} + +.xbox-one .arrows { + position: absolute; + width: 141px; + height: 33px; + top: 264px; + left: 306px; +} + +.xbox-one .select, .xbox-one .start { + background: url(start-select.svg); + width: 33px; + height: 33px; + opacity: 0; +} + +.xbox-one .select[data-pressed="true"], .xbox-one .start[data-pressed="true"] { + opacity: 1; +} + +.xbox-one .select { + float: left; +} + +.xbox-one .start { + background-position: 33px 0px; + float: right; +} + +.xbox-one .buttons { + position: absolute; + width: 153px; + height: 156px; + top: 192px; + left: 488px; +} + +.xbox-one .button { + position: absolute; + background: url(buttons.svg); + width: 48px; + height: 48px; +} + +.xbox-one .button[data-pressed="true"] { + background-position-y: -50px; + opacity: 1; +} + +.xbox-one .a { + background-position: 0 0; + top: 114px; + left: 55px; +} + +.xbox-one .b { + background-position: -49px 0; + top: 64px; + right: 0px; +} + +.xbox-one .x { + background-position: -98px 0; + top: 64px; + left: 3px; +} + +.xbox-one .y { + background-position: 48px 0; + top: 13px; + left: 54px; +} + +.xbox-one .sticks { + position: absolute; + width: 371px; + height: 196px; + top: 239px; + left: 144px; +} + +.xbox-one .stick { + position: absolute; + background: url(stick.svg); + background-position: -85px 0; + height: 83px; + width: 83px; +} + +.xbox-one .stick[data-pressed="true"] { + background-position: 0 0; +} + +.xbox-one .stick.left { + top: 0; + left: 0; +} + +.xbox-one .stick.right { + top: 113px; + left: 288px; +} + +.xbox-one .dpad { + position: absolute; + width: 110px; + height: 111px; + top: 345px; + left: 223px; +} + +.xbox-one .face { + background: url(dpad.svg); + position: absolute; + opacity: 0; +} + +.xbox-one .face[data-pressed="true"] { + opacity: 1; +} + +.xbox-one .face.up { + background-position: 34px 0; + left: 38px; + top: 0px; + width: 34px; + height: 56px; +} + +.xbox-one .face.down { + left: 38px; + bottom: 0; + width: 34px; + height: 56px; +} + +.xbox-one .face.left { + background-position: 0 -93px; + width: 55px; + height: 35px; + top: 38px; + left: 0; +} + +.xbox-one .face.right { + background-position: 0 -57px; + width: 55px; + height: 35px; + top: 38px; + right: 0; +} diff --git a/xbox-one/template.html b/xbox-one/template.html new file mode 100644 index 0000000..ffc2d6d --- /dev/null +++ b/xbox-one/template.html @@ -0,0 +1,34 @@ + + +

+ + + +

+ + + + +

+ + +

+ + + + +

diff --git a/xbox-one/template.js b/xbox-one/template.js new file mode 100644 index 0000000..1cf20ca --- /dev/null +++ b/xbox-one/template.js @@ -0,0 +1,26 @@ +function updateButton($button) +{ + value = $button.attr('data-value'); + + if ($button.is('.trigger')) { + $button.css({ + '-webkit-clip-path': 'inset(' + (1 - value) * 100 + '% 0px 0px 0pc)' + }); + } +} + +var axisX, axisY, axisZ; +function updateAxis($axis) +{ + axisX = $axis.attr('data-value-x'); + axisY = $axis.attr('data-value-y'); + axisZ = $axis.attr('data-value-z'); + + if ($axis.is('.stick')) { + $axis.css({ + 'margin-top': axisY * 25, + 'margin-left': axisX * 25, + 'transform': 'rotateX(' + -parseFloat(axisY * 30, 8) + 'deg) rotateY(' + parseFloat(axisX * 30, 8) + 'deg)' + }); + } +} diff --git a/xbox-one/trigger.svg b/xbox-one/trigger.svg new file mode 100644 index 0000000..4460f59 --- /dev/null +++ b/xbox-one/trigger.svg @@ -0,0 +1,15 @@ + + + +