diff --git a/common.css b/common.css
index 4f11bbb..4892965 100644
--- a/common.css
+++ b/common.css
@@ -1,7 +1,6 @@
body {
background: darkgrey;
}
-
.gamepad {
position: absolute;
top: 50%;
diff --git a/ds4/base-white.svg b/ds4/base-white.svg
index 77538b9..d516de6 100644
--- a/ds4/base-white.svg
+++ b/ds4/base-white.svg
@@ -1,76 +1,77 @@
-
diff --git a/ds4/base.svg b/ds4/base.svg
index 8c13e86..d5e9a7d 100644
--- a/ds4/base.svg
+++ b/ds4/base.svg
@@ -1,76 +1,77 @@
-
diff --git a/ds4/bumper.svg b/ds4/bumper.svg
index c3e83d5..960a3d8 100644
--- a/ds4/bumper.svg
+++ b/ds4/bumper.svg
@@ -1,12 +1,11 @@
-
diff --git a/ds4/buttons.svg b/ds4/buttons.svg
index 4fa188d..9c13ec3 100644
--- a/ds4/buttons.svg
+++ b/ds4/buttons.svg
@@ -1,64 +1,85 @@
-
diff --git a/ds4/disconnected.svg b/ds4/disconnected.svg
index 57ad2a0..fda5830 100644
--- a/ds4/disconnected.svg
+++ b/ds4/disconnected.svg
@@ -1,10 +1,11 @@
-
diff --git a/ds4/dpad.svg b/ds4/dpad.svg
index 42996dc..e7310f2 100644
--- a/ds4/dpad.svg
+++ b/ds4/dpad.svg
@@ -1,69 +1,90 @@
-
diff --git a/ds4/meta.svg b/ds4/meta.svg
index 33ec490..f58ba51 100644
--- a/ds4/meta.svg
+++ b/ds4/meta.svg
@@ -1,34 +1,41 @@
-
diff --git a/ds4/start.svg b/ds4/start.svg
index 01f5d5a..7102e2f 100644
--- a/ds4/start.svg
+++ b/ds4/start.svg
@@ -1,13 +1,14 @@
-
diff --git a/ds4/sticks.svg b/ds4/sticks.svg
index 3f08813..e9b8140 100644
--- a/ds4/sticks.svg
+++ b/ds4/sticks.svg
@@ -1,31 +1,30 @@
-
diff --git a/ds4/template.css b/ds4/template.css
index ab20566..adb1e46 100644
--- a/ds4/template.css
+++ b/ds4/template.css
@@ -1,251 +1,207 @@
-.ds4 {
+.gamepad {
background-image: url(base.svg);
width: 806px;
height: 598px;
}
-
-.ds4.white {
+.gamepad.white {
background-image: url(base-white.svg);
}
-
-.ds4.disconnected {
+.gamepad.disconnected {
background-image: url(disconnected.svg);
}
-
-.ds4.disconnected div {
+.gamepad.disconnected div {
display: none;
}
-
-.ds4 .triggers {
+.gamepad .triggers {
width: 588px;
height: 90px;
position: absolute;
left: 109px;
}
-
-.ds4 .trigger {
+.gamepad .trigger {
width: 99px;
height: 100%;
background: url(triggers.svg);
}
-
-.ds4 .trigger.left {
+.gamepad .trigger.left {
float: left;
}
-
-.ds4 .trigger.right {
+.gamepad .trigger.right {
float: right;
background-position-x: 99px;
}
-
-.ds4 .bumper {
+.gamepad .bumper {
width: 99px;
height: 23px;
background: url(bumper.svg) no-repeat;
opacity: 0;
}
-
-.ds4 .bumpers {
+.gamepad .bumpers {
position: absolute;
width: 588px;
height: 23px;
left: 109px;
top: 94px;
}
-
-.ds4 .bumper[data-pressed="true"] {
+.gamepad .bumper[data-pressed="true"] {
opacity: 1;
}
-
-.ds4 .bumper.left {
+.gamepad .bumper.left {
/* -webkit-transform: rotateY(180deg); */
/* transform: rotateY(180deg); */
float: left;
}
-
-.ds4 .bumper.right {
+.gamepad .bumper.right {
float: right;
transform: rotateY(180deg);
}
-
-.ds4 .touchpad {
+.gamepad .touchpad {
width: 262px;
height: 151px;
position: absolute;
left: 272px;
top: 122px;
}
-
-.ds4 .touchpad[data-pressed="true"] {
+.gamepad .touchpad[data-pressed="true"] {
background: url(touchpad.svg) no-repeat center;
}
-
-.ds4 .meta {
+.gamepad .meta {
width: 42px;
height: 42px;
position: absolute;
left: 382px;
bottom: 216px;
}
-
-.ds4 .meta[data-pressed="true"] {
+.gamepad .meta[data-pressed="true"] {
background: url(meta.svg) no-repeat center;
}
-
-.ds4 .arrows {
+.gamepad .arrows {
position: absolute;
width: 352px;
height: 46px;
top: 142px;
left: 227px;
}
-
-.ds4 .select, .ds4 .start {
+.gamepad .select, .gamepad .start {
background: url(start.svg);
width: 28px;
height: 46px;
opacity: 0;
}
-
-.ds4 .select[data-pressed="true"], .ds4 .start[data-pressed="true"] {
+.gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] {
opacity: 1;
}
-
-.ds4 .select {
+.gamepad .select {
float: left;
}
-
-.ds4 .start {
+.gamepad .start {
float: right;
background-position: 28px 0;
}
-
-.ds4 .buttons {
+.gamepad .buttons {
position: absolute;
width: 170px;
height: 170px;
top: 159px;
left: 567px;
}
-
-.ds4 .button {
+.gamepad .button {
position: absolute;
width: 56px;
height: 56px;
background: url(buttons.svg);
}
-
-.ds4 .button[data-pressed="true"] {
+.gamepad .button[data-pressed="true"] {
background-position-y: 56px;
}
-
-.ds4 .a {
+.gamepad .a {
background-position: 0 0;
bottom: 0px;
left: 56px;
}
-
-.ds4 .b {
+.gamepad .b {
background-position: -56px 0;
top: 56px;
right: 0px;
}
-
-.ds4 .x {
+.gamepad .x {
background-position: 112px 0;
top: 56px;
}
-
-.ds4 .y {
+.gamepad .y {
background-position: 56px 0;
left: 56px;
}
-
-.ds4 .sticks {
+.gamepad .sticks {
position: absolute;
width: 361px;
height: 105px;
top: 308px;
left: 228px;
}
-
-.ds4 .stick {
+.gamepad .stick {
position: absolute;
background: url(sticks.svg);
height: 94px;
width: 94px;
}
-
-.ds4 .stick[data-pressed="true"].left {
+.gamepad .stick[data-pressed="true"].left {
background-position-x: -96px;
}
-
-.ds4 .stick[data-pressed="true"].right {
+.gamepad .stick[data-pressed="true"].right {
background-position-x: -192px;
}
-
-.ds4 .stick.left {
+.gamepad .stick.left {
top: 0;
left: 0;
}
-
-.ds4 .stick.right {
+.gamepad .stick.right {
top: calc(100% - 105px);
left: calc(100% - 105px);
}
-
-.ds4 .dpad {
+.gamepad .dpad {
position: absolute;
width: 125px;
height: 126px;
top: 181px;
left: 92px;
}
-
-.ds4 .face {
+.gamepad .face {
background: url(dpad.svg);
position: absolute;
}
-
-.ds4 .face.up, .ds4 .face.down {
+.gamepad .face.up, .gamepad .face.down {
width: 36px;
height: 52px;
}
-
-.ds4 .face.left, .ds4 .face.right {
+.gamepad .face.left, .gamepad .face.right {
width: 52px;
height: 36px;
}
-
-.ds4 .face.up {
+.gamepad .face.up {
left: 44px;
top: 0;
background-position: -37px 0px;
}
-
-.ds4 .face.down {
+.gamepad .face.down {
left: 44px;
bottom: 0;
background-position: 0px 0;
}
-
-.ds4 .face.left {
+.gamepad .face.left {
top: 44px;
left: 0;
background-position: 104px 0;
}
-
-.ds4 .face.right {
+.gamepad .face.right {
top: 44px;
right: 0px;
background-position: 52px 0;
}
-
-.ds4 .face[data-pressed="true"] {
+.gamepad .face[data-pressed="true"] {
/* margin-top: 5px; */
background-position-y: 52px;
}
-
-.ds4.half {
+.gamepad.half {
margin-top: -300px;
}
diff --git a/ds4/template.js b/ds4/template.js
index 1cf20ca..f98dbbd 100644
--- a/ds4/template.js
+++ b/ds4/template.js
@@ -1,5 +1,4 @@
-function updateButton($button)
-{
+function updateButton($button) {
value = $button.attr('data-value');
if ($button.is('.trigger')) {
@@ -10,8 +9,8 @@ function updateButton($button)
}
var axisX, axisY, axisZ;
-function updateAxis($axis)
-{
+
+function updateAxis($axis) {
axisX = $axis.attr('data-value-x');
axisY = $axis.attr('data-value-y');
axisZ = $axis.attr('data-value-z');
diff --git a/ds4/touchpad.svg b/ds4/touchpad.svg
index 17e7911..ca1a4ac 100644
--- a/ds4/touchpad.svg
+++ b/ds4/touchpad.svg
@@ -1,31 +1,31 @@
-
diff --git a/ds4/triggers.svg b/ds4/triggers.svg
index 2dad2c0..050c710 100644
--- a/ds4/triggers.svg
+++ b/ds4/triggers.svg
@@ -1,40 +1,42 @@
-
diff --git a/gamepad.js b/gamepad.js
index 6d6b07a..1b6a379 100644
--- a/gamepad.js
+++ b/gamepad.js
@@ -83,23 +83,22 @@ function mapGamepad(gamepad) {
}
$.ajax(
- activeGamepadType + '/template.html',
- {
+ activeGamepadType + '/template.html', {
async: true
}
).done(function(template) {
- $gamepad.html(template).addClass(activeGamepadType);
+ $gamepad.html(template);
mapping.buttons = [];
for (var buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
button = activeGamepad.buttons[buttonIndex];
- mapping.buttons[buttonIndex] = $('[data-button='+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+']');
+ mapping.axes[axisIndex] = $('[data-axis-x=' + axisIndex + '], [data-axis-y=' + axisIndex + '], [data-axis-z=' + axisIndex + ']');
}
updateVisualStatus();
@@ -141,13 +140,13 @@ function updateVisualStatus() {
axis = activeGamepad.axes[axisIndex];
- if ($axis.is('[data-axis-x='+axisIndex+']')) {
+ if ($axis.is('[data-axis-x=' + axisIndex + ']')) {
$axis.attr('data-value-x', axis);
}
- if ($axis.is('[data-axis-y='+axisIndex+']')) {
+ if ($axis.is('[data-axis-y=' + axisIndex + ']')) {
$axis.attr('data-value-y', axis);
}
- if ($axis.is('[data-axis-z='+axisIndex+']')) {
+ if ($axis.is('[data-axis-z=' + axisIndex + ']')) {
$axis.attr('data-value-z', axis);
}
diff --git a/index.html b/index.html
index ced3054..a787255 100644
--- a/index.html
+++ b/index.html
@@ -1,15 +1,14 @@
-
- Gamepad Viewer
-
-
-
+
+ Gamepad Viewer
+
+
+
+
+
-
-
-
-
-
-
+
+
+
diff --git a/reset.css b/reset.css
index 704c8aa..9505618 100644
--- a/reset.css
+++ b/reset.css
@@ -46,4 +46,4 @@ q:before, q:after {
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
index afcee02..873b226 100644
--- a/xbox-one/base-white.svg
+++ b/xbox-one/base-white.svg
@@ -1,53 +1,60 @@
-
diff --git a/xbox-one/base.svg b/xbox-one/base.svg
index d4de64a..c86d477 100644
--- a/xbox-one/base.svg
+++ b/xbox-one/base.svg
@@ -277,7 +277,7 @@
-
@@ -396,7 +396,7 @@
-
+
diff --git a/xbox-one/bumper.svg b/xbox-one/bumper.svg
index 8f87be0..74ce3e3 100644
--- a/xbox-one/bumper.svg
+++ b/xbox-one/bumper.svg
@@ -1,11 +1,22 @@
-
diff --git a/xbox-one/buttons.svg b/xbox-one/buttons.svg
index 47a5670..4621d49 100644
--- a/xbox-one/buttons.svg
+++ b/xbox-one/buttons.svg
@@ -1,72 +1,100 @@
-
diff --git a/xbox-one/template.css b/xbox-one/template.css
index 42486b6..2ae44c8 100644
--- a/xbox-one/template.css
+++ b/xbox-one/template.css
@@ -1,53 +1,53 @@
-.xbox-one {
+.gamepad {
background-image: url(base.svg);
height: 630px;
width: 750px;
}
-.xbox-one.white {
+.gamepad.white {
background-image: url(base-white.svg);
}
-.xbox-one.disconnected {
+.gamepad.disconnected {
background-image: url(disconnected.svg);
}
-.xbox-one.disconnected div {
+.gamepad.disconnected div {
display: none;
}
-.xbox-one .triggers {
+.gamepad .triggers {
width: 446px;
height: 121px;
position: absolute;
left: 152px;
}
-.xbox-one .trigger {
+.gamepad .trigger {
width: 88px;
height: 121px;
background: url(trigger.svg);
opacity: 1;
}
-.xbox-one .trigger.left {
+.gamepad .trigger.left {
float: left;
background-position: 0 0;
}
-.xbox-one .trigger.right {
+.gamepad .trigger.right {
float: right;
transform: rotateY(180deg);
}
-.xbox-one .bumper {
+.gamepad .bumper {
width: 170px;
height: 61px;
background: url(bumper.svg);
opacity: 0;
}
-.xbox-one .bumpers {
+.gamepad .bumpers {
position: absolute;
width: 536px;
height: 61px;
@@ -55,41 +55,41 @@
top: 129px;
}
-.xbox-one .bumper[data-pressed="true"] {
+.gamepad .bumper[data-pressed="true"] {
opacity: 1;
}
-.xbox-one .bumper.left {
+.gamepad .bumper.left {
float: left;
}
-.xbox-one .bumper.right {
+.gamepad .bumper.right {
float: right;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
-.xbox-one .p0 {
+.gamepad .p0 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
-.xbox-one .p1 {
+.gamepad .p1 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
-.xbox-one .p2 {
+.gamepad .p2 {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
-.xbox-one .p3 {
+.gamepad .p3 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
-.xbox-one .arrows {
+.gamepad .arrows {
position: absolute;
width: 141px;
height: 33px;
@@ -97,27 +97,27 @@
left: 306px;
}
-.xbox-one .select, .xbox-one .start {
+.gamepad .select, .gamepad .start {
background: url(start-select.svg);
width: 33px;
height: 33px;
opacity: 0;
}
-.xbox-one .select[data-pressed="true"], .xbox-one .start[data-pressed="true"] {
+.gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] {
opacity: 1;
}
-.xbox-one .select {
+.gamepad .select {
float: left;
}
-.xbox-one .start {
+.gamepad .start {
background-position: 33px 0px;
float: right;
}
-.xbox-one .buttons {
+.gamepad .buttons {
position: absolute;
width: 153px;
height: 156px;
@@ -125,43 +125,43 @@
left: 488px;
}
-.xbox-one .button {
+.gamepad .button {
position: absolute;
background: url(buttons.svg);
width: 48px;
height: 48px;
}
-.xbox-one .button[data-pressed="true"] {
+.gamepad .button[data-pressed="true"] {
background-position-y: -50px;
opacity: 1;
}
-.xbox-one .a {
+.gamepad .a {
background-position: 0 0;
top: 114px;
left: 55px;
}
-.xbox-one .b {
+.gamepad .b {
background-position: -49px 0;
top: 64px;
right: 0px;
}
-.xbox-one .x {
+.gamepad .x {
background-position: -98px 0;
top: 64px;
left: 3px;
}
-.xbox-one .y {
+.gamepad .y {
background-position: 48px 0;
top: 13px;
left: 54px;
}
-.xbox-one .sticks {
+.gamepad .sticks {
position: absolute;
width: 371px;
height: 196px;
@@ -169,7 +169,7 @@
left: 144px;
}
-.xbox-one .stick {
+.gamepad .stick {
position: absolute;
background: url(stick.svg);
background-position: -85px 0;
@@ -177,21 +177,21 @@
width: 83px;
}
-.xbox-one .stick[data-pressed="true"] {
+.gamepad .stick[data-pressed="true"] {
background-position: 0 0;
}
-.xbox-one .stick.left {
+.gamepad .stick.left {
top: 0;
left: 0;
}
-.xbox-one .stick.right {
+.gamepad .stick.right {
top: 113px;
left: 288px;
}
-.xbox-one .dpad {
+.gamepad .dpad {
position: absolute;
width: 110px;
height: 111px;
@@ -199,17 +199,17 @@
left: 223px;
}
-.xbox-one .face {
+.gamepad .face {
background: url(dpad.svg);
position: absolute;
opacity: 0;
}
-.xbox-one .face[data-pressed="true"] {
+.gamepad .face[data-pressed="true"] {
opacity: 1;
}
-.xbox-one .face.up {
+.gamepad .face.up {
background-position: 34px 0;
left: 38px;
top: 0px;
@@ -217,14 +217,14 @@
height: 56px;
}
-.xbox-one .face.down {
+.gamepad .face.down {
left: 38px;
bottom: 0;
width: 34px;
height: 56px;
}
-.xbox-one .face.left {
+.gamepad .face.left {
background-position: 0 -93px;
width: 55px;
height: 35px;
@@ -232,7 +232,7 @@
left: 0;
}
-.xbox-one .face.right {
+.gamepad .face.right {
background-position: 0 -57px;
width: 55px;
height: 35px;
diff --git a/xbox-one/template.js b/xbox-one/template.js
index 1cf20ca..f98dbbd 100644
--- a/xbox-one/template.js
+++ b/xbox-one/template.js
@@ -1,5 +1,4 @@
-function updateButton($button)
-{
+function updateButton($button) {
value = $button.attr('data-value');
if ($button.is('.trigger')) {
@@ -10,8 +9,8 @@ function updateButton($button)
}
var axisX, axisY, axisZ;
-function updateAxis($axis)
-{
+
+function updateAxis($axis) {
axisX = $axis.attr('data-value-x');
axisY = $axis.attr('data-value-y');
axisZ = $axis.attr('data-value-z');
diff --git a/xbox-one/trigger.svg b/xbox-one/trigger.svg
index 4460f59..5af3604 100644
--- a/xbox-one/trigger.svg
+++ b/xbox-one/trigger.svg
@@ -1,15 +1,26 @@
-