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

fixed code files to match editorconfig rules

Browse Source
This commit is contained in:
e7d 2017-05-14 15:42:13 +02:00
parent fb928898d9
commit af6c61bec5
12 changed files with 228 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
css/main.css
View File

@ -3,6 +3,7 @@ body {
overflow: hidden; overflow: hidden;
font-family: sans-serif; font-family: sans-serif;
} }
.debug { .debug {
position: absolute; position: absolute;
top: 0; top: 0;
@ -13,6 +14,7 @@ body {
line-height: 80px; line-height: 80px;
text-align: center; text-align: center;
} }
.no-gamepad { .no-gamepad {
position: absolute; position: absolute;
top: 20px; top: 20px;
@ -21,6 +23,7 @@ body {
line-height: 2em; line-height: 2em;
text-align: center; text-align: center;
} }
.gamepad { .gamepad {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -30,6 +33,7 @@ body {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
} }
.help { .help {
background: whitesmoke; background: whitesmoke;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
@ -44,16 +48,20 @@ body {
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.help.active { .help.active {
display: block; display: block;
} }
.help h2 { .help h2 {
margin-top: 0; margin-top: 0;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
.help h3 { .help h3 {
margin-top: 1.5em; margin-top: 1.5em;
} }
.help p:last-child { .help p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -69,7 +77,8 @@ body {
text-align: left; text-align: left;
} }
.help th, .help td { .help th,
.help td {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
line-height: 1.42857143; line-height: 1.42857143;
padding: 8px; padding: 8px;
@ -83,45 +92,48 @@ body {
} }
kbd { kbd {
display: inline; display: inline;
display: inline-block; display: inline-block;
min-width: 1em; min-width: 1em;
padding: .2em .3em; padding: .2em .3em;
margin: 0 .2em; margin: 0 .2em;
font: normal 1em monospace; font: normal 1em monospace;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
-moz-border-radius: .3em; -moz-border-radius: .3em;
-webkit-border-radius: .3em; -webkit-border-radius: .3em;
border-radius: .3em; border-radius: .3em;
border: none; border: none;
cursor: default; cursor: default;
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
}
kbd[title], .key[title] {
cursor: help;
} }
kbd, kbd.dark { kbd[title],
background: rgb(80, 80, 80); .key[title] {
background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80)); cursor: help;
background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80))); }
color: rgb(250, 250, 250);
text-shadow: -1px -1px 0 rgb(70, 70, 70); kbd,
-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); kbd.dark {
-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); background: rgb(80, 80, 80);
box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
color: rgb(250, 250, 250);
text-shadow: -1px -1px 0 rgb(70, 70, 70);
-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
} }
kbd.light { kbd.light {
background: rgb(250, 250, 250); background: rgb(250, 250, 250);
background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255)); background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255))); background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
color: rgb(50, 50, 50); color: rgb(50, 50, 50);
text-shadow: 0 0 2px rgb(255, 255, 255); text-shadow: 0 0 2px rgb(255, 255, 255);
-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
} }

127
index.html
View File

@ -1,69 +1,72 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Gamepad Viewer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="css/normalize.css"> <head>
<link rel="stylesheet" href="css/main.css"> <meta charset="utf-8">
</head> <meta http-equiv="x-ua-compatible" content="ie=edge">
<body> <title>Gamepad Viewer</title>
<div class="no-gamepad">No active gamepad detected. Press <kbd>H</kbd> to read instructions.</div> <meta name="description" content="">
<div class="gamepad"></div> <meta name="viewport" content="width=device-width, initial-scale=1">
<div class="help"> <link rel="icon" type="image/png" href="favicon.png">
<h2>Help</h2>
<h3>Instructions</h3> <link rel="stylesheet" href="css/normalize.css">
<p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.</p> <link rel="stylesheet" href="css/main.css">
</head>
<h3>Keyboard shortcuts</h3> <body>
<table> <div class="no-gamepad">No active gamepad detected. Press <kbd>H</kbd> to read instructions.</div>
<thead> <div class="gamepad"></div>
<tr> <div class="help">
<th>Key</th> <h2>Help</h2>
<th>Action</th>
</tr> <h3>Instructions</h3>
</thead> <p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.</p>
<tbody>
<tr> <h3>Keyboard shortcuts</h3>
<th><kbd>+</kbd></th> <table>
<td>Zoom gamepad in</td> <thead>
</tr> <tr>
<tr> <th>Key</th>
<th><kbd>-</kbd></th> <th>Action</th>
<td>Zoom gamepad out</td> </tr>
</tr> </thead>
<tr> <tbody>
<th><kbd>0</kbd></th> <tr>
<td>Reset gamepad zoom</td> <th><kbd>+</kbd></th>
</tr> <td>Zoom gamepad in</td>
<tr> </tr>
<th><kbd>C</kbd></th> <tr>
<td>Change active gamepad color</td> <th><kbd>-</kbd></th>
</tr> <td>Zoom gamepad out</td>
<tr> </tr>
<th><kbd>D</kbd></th> <tr>
<td>Toggle debug mode for active gamepad</td> <th><kbd>0</kbd></th>
</tr> <td>Reset gamepad zoom</td>
<tr> </tr>
<th><kbd>H</kbd></th> <tr>
<td>Display this help</td> <th><kbd>C</kbd></th>
</tr> <td>Change active gamepad color</td>
<tr> </tr>
<th><kbd>Delete</kbd>, <kbd>Escape</kbd></th> <tr>
<td>Clear active gamepad</td> <th><kbd>D</kbd></th>
</tr> <td>Toggle debug mode for active gamepad</td>
</tbody> </tr>
</table> <tr>
</div> <th><kbd>H</kbd></th>
<td>Display this help</td>
</tr>
<tr>
<th><kbd>Delete</kbd>, <kbd>Escape</kbd></th>
<td>Clear active gamepad</td>
</tr>
</tbody>
</table>
</div>
<script src="https://static.e7d.io/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/urlParam.jquery.js"></script>
<script src="js/gamepad.js"></script>
<script src="js/app.js"></script>
</body>
<script src="https://static.e7d.io/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/urlParam.jquery.js"></script>
<script src="js/gamepad.js"></script>
<script src="js/app.js"></script>
</body>
</html> </html>

9
js/gamepad.js
View File

@ -479,16 +479,13 @@ class Gamepad {
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;
} }

4
templates/debug/template.css
View File

@ -12,18 +12,22 @@
line-height: 1; line-height: 1;
box-sizing: border-box; box-sizing: border-box;
} }
.box.small { .box.small {
width: 12.5%; width: 12.5%;
min-width: 50px; min-width: 50px;
} }
.box.medium { .box.medium {
width: 25%; width: 25%;
min-width: 100px; min-width: 100px;
} }
.box.large { .box.large {
width: 50%; width: 50%;
min-width: 200px; min-width: 200px;
} }
.box.extra-large { .box.extra-large {
width: 100%; width: 100%;
min-width: 400px; min-width: 400px;

60
templates/debug/template.html
View File

@ -1,40 +1,40 @@
<link rel="stylesheet" href="templates/debug/template.css"> <link rel="stylesheet" href="templates/debug/template.css">
<script async src="templates/debug/template.js"></script> <script async src="templates/debug/template.js"></script>
<div class="info"> <div class="info">
<div class="container"> <div class="container">
<div id="info-id" class="box extra-large"> <div id="info-id" class="box extra-large">
<div class="content"> <div class="content">
<div class="label">ID</div> <div class="label">ID</div>
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="info"> <div class="info">
<div class="container"> <div class="container">
<div id="info-timestamp" class="box large"> <div id="info-timestamp" class="box large">
<div class="content"> <div class="content">
<div class="label">TIMESTAMP</div> <div class="label">TIMESTAMP</div>
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>
<div id="info-index" class="box medium"> <div id="info-index" class="box medium">
<div class="content"> <div class="content">
<div class="label">INDEX</div> <div class="label">INDEX</div>
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>
<div id="info-mapping" class="box medium"> <div id="info-mapping" class="box medium">
<div class="content"> <div class="content">
<div class="label">MAPPING</div> <div class="label">MAPPING</div>
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="axes"> <div class="axes">
<div class="container"></div> <div class="container"></div>
</div> </div>
<div class="buttons"> <div class="buttons">
<div class="container"></div> <div class="container"></div>
</div> </div>

4
templates/debug/template.js
View File

@ -40,11 +40,11 @@
); );
} }
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);
} }

12
templates/ds4/template.css
View File

@ -112,14 +112,16 @@
left: 227px; left: 227px;
} }
.gamepad .select, .gamepad .start { .gamepad .select,
.gamepad .start {
background: url(start.svg); background: url(start.svg);
width: 28px; width: 28px;
height: 46px; height: 46px;
opacity: 0; opacity: 0;
} }
.gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] { .gamepad .select[data-pressed="true"],
.gamepad .start[data-pressed="true"] {
opacity: 1; opacity: 1;
} }
@ -219,12 +221,14 @@
position: absolute; position: absolute;
} }
.gamepad .face.up, .gamepad .face.down { .gamepad .face.up,
.gamepad .face.down {
width: 36px; width: 36px;
height: 52px; height: 52px;
} }
.gamepad .face.left, .gamepad .face.right { .gamepad .face.left,
.gamepad .face.right {
width: 52px; width: 52px;
height: 36px; height: 36px;
} }

38
templates/ds4/template.html
View File

@ -1,35 +1,35 @@
<link rel="stylesheet" href="templates/ds4/template.css"> <link rel="stylesheet" href="templates/ds4/template.css">
<script async src="templates/ds4/template.js"></script> <script async src="templates/ds4/template.js"></script>
<div class="triggers"> <div class="triggers">
<span class="trigger left" data-button="6" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span> <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> <span class="trigger right" data-button="7" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="bumpers"> <div class="bumpers">
<span class="bumper left" data-button="4"></span> <span class="bumper left" data-button="4"></span>
<span class="bumper right" data-button="5"></span> <span class="bumper right" data-button="5"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="touchpad" data-button="17"></div> <div class="touchpad" data-button="17"></div>
<div class="meta" data-button="16"></div> <div class="meta" data-button="16"></div>
<div class="arrows"> <div class="arrows">
<span class="select" data-button="8"></span> <span class="select" data-button="8"></span>
<span class="start" data-button="9"></span> <span class="start" data-button="9"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="buttons"> <div class="buttons">
<span class="button a" data-button="0"></span> <span class="button a" data-button="0"></span>
<span class="button b" data-button="1"></span> <span class="button b" data-button="1"></span>
<span class="button x" data-button="2"></span> <span class="button x" data-button="2"></span>
<span class="button y" data-button="3"></span> <span class="button y" data-button="3"></span>
</div> </div>
<div class="sticks"> <div class="sticks">
<span class="stick left" data-button="10" data-axis-x="0" data-axis-y="1"></span> <span class="stick left" data-button="10" data-axis-x="0" data-axis-y="1"></span>
<span class="stick right" data-button="11" data-axis-x="2" data-axis-y="3"></span> <span class="stick right" data-button="11" data-axis-x="2" data-axis-y="3"></span>
</div> </div>
<div class="dpad"> <div class="dpad">
<span class="face up" data-button="12"></span> <span class="face up" data-button="12"></span>
<span class="face down" data-button="13"></span> <span class="face down" data-button="13"></span>
<span class="face left" data-button="14"></span> <span class="face left" data-button="14"></span>
<span class="face right" data-button="15"></span> <span class="face right" data-button="15"></span>
</div> </div>

4
templates/ds4/template.js
View File

@ -1,4 +1,4 @@
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')) {
@ -8,7 +8,7 @@ gamepad.updateButton = function($button) {
} }
} }
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'); const axisZ = $axis.attr('data-value-z');

6
templates/xbox-one/template.css
View File

@ -101,14 +101,16 @@
left: 306px; left: 306px;
} }
.gamepad .select, .gamepad .start { .gamepad .select,
.gamepad .start {
background: url(start-select.svg); background: url(start-select.svg);
width: 33px; width: 33px;
height: 33px; height: 33px;
opacity: 0; opacity: 0;
} }
.gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] { .gamepad .select[data-pressed="true"],
.gamepad .start[data-pressed="true"] {
opacity: 1; opacity: 1;
} }

38
templates/xbox-one/template.html
View File

@ -1,34 +1,34 @@
<link rel="stylesheet" href="templates/xbox-one/template.css"> <link rel="stylesheet" href="templates/xbox-one/template.css">
<script async src="templates/xbox-one/template.js"></script> <script async src="templates/xbox-one/template.js"></script>
<div class="triggers"> <div class="triggers">
<span class="trigger left" data-button="6" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span> <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> <span class="trigger right" data-button="7" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="bumpers"> <div class="bumpers">
<span class="bumper left" data-button="4"></span> <span class="bumper left" data-button="4"></span>
<span class="bumper right" data-button="5"></span> <span class="bumper right" data-button="5"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="meta" data-button="16"></div> <div class="meta" data-button="16"></div>
<div class="arrows"> <div class="arrows">
<span class="select" data-button="8"></span> <span class="select" data-button="8"></span>
<span class="start" data-button="9"></span> <span class="start" data-button="9"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="buttons"> <div class="buttons">
<span class="button a" data-button="0"></span> <span class="button a" data-button="0"></span>
<span class="button b" data-button="1"></span> <span class="button b" data-button="1"></span>
<span class="button x" data-button="2"></span> <span class="button x" data-button="2"></span>
<span class="button y" data-button="3"></span> <span class="button y" data-button="3"></span>
</div> </div>
<div class="sticks"> <div class="sticks">
<span class="stick left" data-button="10" data-axis-x="0" data-axis-y="1"></span> <span class="stick left" data-button="10" data-axis-x="0" data-axis-y="1"></span>
<span class="stick right" data-button="11" data-axis-x="2" data-axis-y="3"></span> <span class="stick right" data-button="11" data-axis-x="2" data-axis-y="3"></span>
</div> </div>
<div class="dpad"> <div class="dpad">
<span class="face up" data-button="12"></span> <span class="face up" data-button="12"></span>
<span class="face down" data-button="13"></span> <span class="face down" data-button="13"></span>
<span class="face left" data-button="14"></span> <span class="face left" data-button="14"></span>
<span class="face right" data-button="15"></span> <span class="face right" data-button="15"></span>
</div> </div>

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

@ -1,4 +1,4 @@
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')) {
@ -8,7 +8,7 @@ gamepad.updateButton = function($button) {
} }
} }
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'); const axisZ = $axis.attr('data-value-z');