diff --git a/css/style.css b/css/style.css
index 6aa8b22cbc..0ac7a81c24 100644
--- a/css/style.css
+++ b/css/style.css
@@ -185,796 +185,4 @@ a:hover {
float: right;
}
#status-bar .notify span {
- }
-
-/* tab specific sections */
-.tab-initial_setup {
-}
- .tab-initial_setup .section {
- clear: both;
- padding-bottom: 8px;
- }
- .tab-initial_setup .section a {
- display: block;
-
- float: left;
-
- width: 160px;
- height: 24px;
- line-height: 24px;
-
- text-align: center;
- color: white;
-
- border: 1px solid #c0c0c0;
- background-color: #5569d0;
- }
- .tab-initial_setup .section a:hover {
- background-color: #424d84;
- }
- .tab-initial_setup .section a.calibrating {
- background-color: #4f4f4f;
- }
- .tab-initial_setup .section a.calibrating:hover {
- cursor: default;
- background-color: #4f4f4f;
- }
-
- .tab-initial_setup .section a.backup {
- width: 75px;
- margin-right: 10px;
- }
- .tab-initial_setup .section a.restore {
- width: 75px;
- }
- .tab-initial_setup .section p {
- margin-left: 180px;
-
- padding: 5px;
-
- border: 1px dotted silver;
- }
-#interactive_block {
- float: left;
-
- margin-top: 10px;
-
- height: 300px;
- width: 400px;
-
- border: 1px solid silver;
- background-color: white;
-}
- #interactive_block .model {
- display: block;
- margin: 10px 0 0 10px;
-
- font-weight: bold;
- }
- #interactive_block a.reset {
- position: absolute;
- display: block;
-
- margin-left: 10px;
- margin-top: 240px;
-
- width: 100px;
- height: 23px;
- line-height: 23px;
-
- color: white;
- text-align: center;
-
- border: 1px solid silver;
- background-color: blue;
-
- z-index: 100;
- }
- #interactive_block a.reset:hover {
- text-decoration: none;
- }
- #perspective {
- -webkit-perspective: 800;
- -webkit-perspective-origin: 50% 150px; /* 150px = (350px / 2) - 25px */
- }
- #cube {
- position: relative;
- top: 110px;
- left: 150px; /* (916px / 2) - 50px */
-
- height: 100px;
- width: 100px;
-
- -webkit-transform-style: preserve-3d;
- }
- #cubePITCH {
- -webkit-transform-style: preserve-3d;
- }
- #cubeROLL {
- -webkit-transform-style: preserve-3d;
- }
- #cube .face {
- position: absolute;
-
- color: white;
- font-size: 25px;
- text-align: center;
- }
- #cube .face.one {
- width: 100px;
- height: 200px;
- line-height: 200px;
-
- -webkit-transform: rotateX(-90deg) translateZ(-50px);
- background-color: purple;
- }
- #cube .face.two {
- width: 100px;
- height: 50px;
- line-height: 50px;
-
- -webkit-transform: translateZ(100px);
- background-color: blue;
- }
- #cube .face.three {
- width: 200px;
- height: 50px;
- line-height: 50px;
-
- -webkit-transform: rotateY(90deg);
- background-color: green;
- }
- #cube .face.four {
- width: 100px;
- height: 50px;
- line-height: 50px;
-
- -webkit-transform: rotateY(180deg) translateZ(100px);
- background-color: black;
- }
- #cube .face.five {
- width: 200px;
- height: 50px;
- line-height: 50px;
-
- -webkit-transform: rotateY(-90deg) translateZ(100px);
- background-color: red;
- }
- #cube .face.six {
- width: 100px;
- height: 200px;
- line-height: 200px;
-
- -webkit-transform: rotateX(90deg) translateZ(100px);
- background-color: silver;
- }
- .tab-initial_setup .battery,
- .tab-initial_setup .acc-trim {
- float: left;
- display: block;
-
- margin-top: 10px;
- margin-left: 25px;
-
- width: 145px;
-
- border: 1px solid silver;
- }
- .tab-initial_setup .battery .head,
- .tab-initial_setup .acc-trim .head {
- display: block;
-
- text-align: center;
- line-height: 20px;
- font-weight: bold;
-
- border-bottom: 1px solid silver;
- background-color: #ececec;
- }
- .tab-initial_setup .battery .fields {
- padding: 5px;
- }
- .tab-initial_setup .battery .bat-voltage {
- padding-left: 20px;
- }
- .tab-initial_setup .acc-trim dl {
- padding: 5px;
- }
- .tab-initial_setup .acc-trim dt {
- float: left;
- width: 50px;
-
- margin-bottom: 4px;
- }
- .tab-initial_setup .acc-trim dd {
- margin-left: 50px;
- margin-bottom: 4px;
- }
- .tab-initial_setup .acc-trim input {
- width: 80px;
- height: 20px;
- line-height: 20px;
-
- border: 1px solid silver;
- text-align: center;
- }
- .tab-initial_setup .acc-trim a.update {
- display: block;
-
- margin-right: 5px;
- margin-bottom: 5px;
- margin-left: 55px;
-
- width: 80px;
- height: 20px;
- line-height: 20px;
-
- color: white;
- text-align: center;
-
- border: 1px solid silver;
- background-color: #6f1515;
- }
- .tab-initial_setup .acc-trim a.update:hover {
- cursor: default;
- }
- .tab-initial_setup .acc-trim a.update.active {
- background-color: #0fab16;
- }
- .tab-initial_setup .acc-trim a.update.active:hover {
- cursor: pointer;
- background-color: #13d81d;
- }
- .tab-initial_setup .compass-wrapper {
- float: left;
-
- margin-top: 20px;
- margin-left: 180px;
-
- border: 1px solid silver;
-
- border-radius: 50%;
- }
- .tab-initial_setup #compass {
- position: relative;
-
- width: 150px;
- height: 150px;
-
- border: 6px dashed silver;
- border-radius: 50%;
- }
- .tab-initial_setup #compass span {
- position: absolute;
- font-weight: bold;
- }
- .tab-initial_setup #compass span:nth-child(1) {
- left: 70px;
- top: 5px;
- }
- .tab-initial_setup #compass span:nth-child(2) {
- right: 5px;
- top: 70px;
- }
- .tab-initial_setup #compass span:nth-child(3) {
- left: 70px;
- bottom: 5px;
- }
- .tab-initial_setup #compass span:nth-child(4) {
- left: 5px;
- top: 70px;
- }
- .tab-initial_setup #compass .pointer {
- position: absolute;
-
- height: 150px;
- width: 150px;
-
- -webkit-transform: rotate(0deg);
- }
- .tab-initial_setup #compass .pointer .tip {
- position: absolute;
-
- margin-top: 14px;
- margin-left: -6px;
-
- width: 0;
- height: 0;
-
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
-
- border-bottom: 30px solid red;
- }
- .tab-initial_setup #compass .pointer .stick {
- position: absolute;
- display: block;
-
- margin-top: -22px;
- margin-right: 69px;
-
- width: 4px;
- height: 30px;
-
- background-color: black;
- }
- .tab-initial_setup #compass .value {
- position: relative;
-
- top: 75px;
- left: 53px;
-
- width: 40px;
- height: 16px;
- line-height: 16px;
-
- text-align: center;
-
- background-color: #f2f2f2;
-
- border: 1px solid silver;
- }
-
-.tab-pid_tuning table {
- width: 100%;
- border-collapse: collapse;
-}
- .tab-pid_tuning table, .tab-pid_tuning table th, .tab-pid_tuning table td {
- padding: 5px;
- border: 1px solid #8b8b8b;
- }
- .tab-pid_tuning table tr:nth-child(odd) {
- background-color: #ececec;
- }
- .tab-pid_tuning table input {
- width: 130px;
- height: 20px;
- line-height: 20px;
-
- padding: 0 5px 0 5px;
- border: 1px solid silver;
- text-align: right;
- }
- .tab-pid_tuning .update {
- display: block;
- float: right;
-
- margin-top: 20px;
-
- width: 120px;
- height: 56px;
- line-height: 56px;
-
- font-size: 14px;
- color: white;
- text-align: center;
-
- border: 1px solid silver;
-
- background-color: #6f1515;
- }
- .tab-pid_tuning .update:hover {
- cursor: default;
- }
- .tab-pid_tuning .update.active {
- background-color: #0fab16;
- }
- .tab-pid_tuning .update.active:hover {
- cursor: pointer;
- background-color: #13d81d;
- }
- .tab-pid_tuning .rate-tpa {
- float: left;
- width: 400px;
- margin-top: 20px;
- }
-.tab-receiver {
-}
- .tab-receiver .bars {
- float: left;
- }
- .tab-receiver .bars ul {
- height: 20px;
- line-height: 20px;
-
- margin-bottom: 5px;
- }
- .tab-receiver .bars li {
- float: left;
- }
- .tab-receiver .bars .name {
- width: 80px;
- }
- .tab-receiver .bars .meter meter {
- width: 200px;
- height: 20px;
-
- border: 1px solid silver;
- }
- .tab-receiver .bars .value {
- width: 60px;
- padding-left: 20px;
- }
- .tab-receiver .tunings {
- float: left;
- border: 1p xsolid red;
- }
- .tab-receiver .tunings table {
- width: 30%;
- border-collapse: collapse;
- margin-bottom: 20px;
- }
- .tab-receiver .tunings table, .tab-receiver .tunings table th, .tab-receiver .tunings table td {
- padding: 5px;
- border: 1px solid #8b8b8b;
- }
- .tab-receiver .tunings table tr:nth-child(odd) {
- background-color: #ececec;
- }
- .tab-receiver .tunings table input {
- width: 130px;
- height: 20px;
- line-height: 20px;
-
- padding: 0 5px 0 5px;
- border: 1px solid silver;
- text-align: right;
- }
- .tab-receiver .update {
- display: block;
- float: right;
-
- width: 120px;
- height: 30px;
- line-height: 30px;
-
- font-size: 14px;
- color: white;
- text-align: center;
-
- border: 1px solid silver;
-
- background-color: #6f1515;
- }
- .tab-receiver .update:hover {
- cursor: default;
- }
- .tab-receiver .update.active {
- background-color: #0fab16;
- }
- .tab-receiver .update.active:hover {
- cursor: pointer;
- background-color: #13d81d;
- }
- .tab-receiver #RX_plot {
- margin: auto;
- margin-top: 20px;
-
- width: 880px;
- height: 250px;
- }
- .tab-receiver .throttle_curve {
- float: right;
-
- margin-bottom: 20px;
- margin-right: 10px;
-
- width: 220px;
- height: 58px;
-
- border: 1px solid silver;
- }
- .tab-receiver .pitch_roll_curve {
- float: right;
-
- margin-right: 10px;
-
- width: 220px;
- height: 58px;
-
- border: 1px solid silver;
- }
-
-.tab-auxiliary_configuration {
-
-}
- .tab-auxiliary_configuration .heads {
- }
- .tab-auxiliary_configuration .heads li {
- float: left;
-
- width: 182px;
- height: 22px;
- line-height: 22px;
-
- text-align: center;
- font-weight: bold;
-
- border: 1px solid #8b8b8b;
- border-bottom: 0;
- border-left: 0;
-
- background-color: #ececec;
- }
- .tab-auxiliary_configuration .heads li:first-child {
- margin-left: 181px;
- border-left: 1px solid #8b8b8b;
- }
- .tab-auxiliary_configuration .heads li:nth-child(3) {
- width: 183px;
- }
- .tab-auxiliary_configuration .heads li:nth-child(4) {
- width: 185px;
- }
- .tab-auxiliary_configuration .boxes {
- width: 100%;
- border-collapse: collapse;
- }
- .tab-auxiliary_configuration .boxes th, .tab-auxiliary_configuration .boxes td {
- line-height: 22px;
- text-align: center;
-
- border: 1px solid #8b8b8b;
- }
- .tab-auxiliary_configuration .boxes .name {
- /* padding-left: 5px; */
- text-align: center;
- }
- .tab-auxiliary_configuration .boxes .on {
- color: white;
- background-color: #0d8b13;
- }
- .tab-auxiliary_configuration .boxes .off {
- color: white;
- background-color: #be2222;
- }
- .tab-auxiliary_configuration .boxes td input {
- position: absolute;
-
- margin-top: -6px;
- margin-left: -6px;
- }
- .tab-auxiliary_configuration .boxes tr:nth-child(odd) {
- background-color: #ececec;
- }
- .tab-auxiliary_configuration .update {
- display: block;
- float: right;
-
- margin-top: 10px;
-
- width: 120px;
- height: 30px;
- line-height: 30px;
-
- font-size: 14px;
- color: white;
- text-align: center;
-
- border: 1px solid silver;
-
- background-color: #6f1515;
- }
- .tab-auxiliary_configuration .update:hover {
- cursor: default;
- }
- .tab-auxiliary_configuration .update.active {
- background-color: #0fab16;
- }
- .tab-auxiliary_configuration .update.active:hover {
- cursor: pointer;
- background-color: #13d81d;
- }
-.tab-gps {
-}
- .tab-gps .GPS_info {
- float: left;
- display: block;
-
-
- width: 170px;
-
- border: 1px solid silver;
- }
- .tab-gps .GPS_info table {
- padding: 5px;
- line-height: 18px;
- }
- .tab-gps .GPS_signal_strength {
- float: left;
-
- margin-left: 10px;
-
- width: 200px;
-
- border: 1px solid silver;
- }
- .tab-gps .GPS_signal_strength table {
- padding: 5px;
- line-height: 18px;
- }
- .tab-gps .GPS_info .head,
- .tab-gps .GPS_signal_strength .head {
- display: block;
-
- text-align: center;
- line-height: 20px;
- font-weight: bold;
-
- border-bottom: 1px solid silver;
- background-color: #ececec;
- }
-.tab-motor_outputs {
-}
- .tab-motor_outputs .right.servos {
- margin-right: -10px;
- }
- .tab-motor_outputs .titles {
- height: 20px;
- }
- .tab-motor_outputs .titles li {
- float: left;
- width: 42px;
- margin-right: 10px;
-
- text-align: center;
- }
- .tab-motor_outputs .titles .active {
- color: green;
- }
- .tab-motor_outputs .m-block {
- float: left;
-
- width: 40px;
- height: 220px;
-
- margin-right: 10px;
-
- border: 1px solid silver;
- background-color: #e9e9e9;
- }
- .tab-motor_outputs .indicator {
- position: absolute;
- margin-top: 330px;
-
- width: 40px;
- height: 0px;
- }
- .tab-motor_outputs p {
- margin-top: 20px;
- padding: 5px;
-
- border: 1px dotted silver;
- }
- .tab-motor_outputs .motor_testing {
- display: none;
- }
- .tab-motor_outputs .motor_testing .sliders {
- margin-top: 20px;
- }
- .tab-motor_outputs .motor_testing .sliders input {
- -webkit-appearance: slider-vertical;
-
- width: 48px;
- }
- .tab-motor_outputs .motor_testing .values {
- margin-top: 5px;
- }
- .tab-motor_outputs .motor_testing .values li {
- float: left;
-
- width: 51px;
-
- text-align: center;
- }
- .tab-motor_outputs .motor_testing .notice {
- float: right;
-
- width: 490px;
-
- margin-top: 20px;
- padding: 5px;
-
- border: 1px dotted silver;
- }
-.tab-sensors {
-}
- .tab-sensors #gyro {
- height: 120px;
- }
- .tab-sensors #accel {
- height: 120px;
- }
- .tab-sensors #mag {
- height: 120px;
- }
- .tab-sensors #baro {
- height: 120px;
- }
- .tab-sensors #debug1 {
- height: 120px;
- }
- .tab-sensors #debug2 {
- height: 120px;
- }
- .tab-sensors #debug3 {
- height: 120px;
- }
- .tab-sensors #debug4 {
- height: 120px;
- }
-
- .tab-sensors select {
- float: right;
-
- border: 1px solid silver;
- }
-.tab-cli {
-}
- .tab-cli p {
- padding: 5px;
- border: 1px dotted silver;
- }
- .tab-cli .window {
- margin-top: 10px;
- height: 400px;
-
- padding: 5px;
-
- overflow-y: scroll;
- overflow-x: hidden;
-
- font-family: monospace;
- color: white;
-
- border: 1px solid silver;
- background-color: black;
-
- -webkit-user-select: text;
- }
- .tab-cli textarea {
- margin-top: 8px;
- display: block;
-
- width: 911px;
- height: 20px;
- line-height: 20px;
-
- padding-left: 5px;
-
- border: 1px solid silver;
-
- resize: none;
- }
- .tab-cli .copy {
- display: block;
- position: absolute;
-
- bottom: 55px;
- right: 40px;
-
- height: 28px;
- line-height: 28px;
-
- padding: 0 15px 0 15px;
-
- text-align: center;
- font-weight: bold;
-
- border: 1px solid silver;
- background-color: #ececec;
- }
- .tab-cli .copy:hover {
- background-color: #dedcdc;
- }
-
-/* Flotr related styles */
-.flotr-legend {
- padding: 2px;
- margin-left: 31px;
- top: 20px;
- border: 0;
-
- background-color: white;
- opacity: 0.75;
-}
\ No newline at end of file
+ }
\ No newline at end of file
diff --git a/main.html b/main.html
index 38bc87ca70..7c1cfee160 100644
--- a/main.html
+++ b/main.html
@@ -30,6 +30,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tabs/auxiliary_configuration.css b/tabs/auxiliary_configuration.css
new file mode 100644
index 0000000000..64e22e5552
--- /dev/null
+++ b/tabs/auxiliary_configuration.css
@@ -0,0 +1,90 @@
+.tab-auxiliary_configuration {
+
+}
+ .tab-auxiliary_configuration .heads {
+ }
+ .tab-auxiliary_configuration .heads li {
+ float: left;
+
+ width: 182px;
+ height: 22px;
+ line-height: 22px;
+
+ text-align: center;
+ font-weight: bold;
+
+ border: 1px solid #8b8b8b;
+ border-bottom: 0;
+ border-left: 0;
+
+ background-color: #ececec;
+ }
+ .tab-auxiliary_configuration .heads li:first-child {
+ margin-left: 181px;
+ border-left: 1px solid #8b8b8b;
+ }
+ .tab-auxiliary_configuration .heads li:nth-child(3) {
+ width: 183px;
+ }
+ .tab-auxiliary_configuration .heads li:nth-child(4) {
+ width: 185px;
+ }
+ .tab-auxiliary_configuration .boxes {
+ width: 100%;
+ border-collapse: collapse;
+ }
+ .tab-auxiliary_configuration .boxes th, .tab-auxiliary_configuration .boxes td {
+ line-height: 22px;
+ text-align: center;
+
+ border: 1px solid #8b8b8b;
+ }
+ .tab-auxiliary_configuration .boxes .name {
+ /* padding-left: 5px; */
+ text-align: center;
+ }
+ .tab-auxiliary_configuration .boxes .on {
+ color: white;
+ background-color: #0d8b13;
+ }
+ .tab-auxiliary_configuration .boxes .off {
+ color: white;
+ background-color: #be2222;
+ }
+ .tab-auxiliary_configuration .boxes td input {
+ position: absolute;
+
+ margin-top: -6px;
+ margin-left: -6px;
+ }
+ .tab-auxiliary_configuration .boxes tr:nth-child(odd) {
+ background-color: #ececec;
+ }
+ .tab-auxiliary_configuration .update {
+ display: block;
+ float: right;
+
+ margin-top: 10px;
+
+ width: 120px;
+ height: 30px;
+ line-height: 30px;
+
+ font-size: 14px;
+ color: white;
+ text-align: center;
+
+ border: 1px solid silver;
+
+ background-color: #6f1515;
+ }
+ .tab-auxiliary_configuration .update:hover {
+ cursor: default;
+ }
+ .tab-auxiliary_configuration .update.active {
+ background-color: #0fab16;
+ }
+ .tab-auxiliary_configuration .update.active:hover {
+ cursor: pointer;
+ background-color: #13d81d;
+ }
\ No newline at end of file
diff --git a/tabs/cli.css b/tabs/cli.css
new file mode 100644
index 0000000000..8b4b92379e
--- /dev/null
+++ b/tabs/cli.css
@@ -0,0 +1,58 @@
+.tab-cli {
+}
+ .tab-cli p {
+ padding: 5px;
+ border: 1px dotted silver;
+ }
+ .tab-cli .window {
+ margin-top: 10px;
+ height: 400px;
+
+ padding: 5px;
+
+ overflow-y: scroll;
+ overflow-x: hidden;
+
+ font-family: monospace;
+ color: white;
+
+ border: 1px solid silver;
+ background-color: black;
+
+ -webkit-user-select: text;
+ }
+ .tab-cli textarea {
+ margin-top: 8px;
+ display: block;
+
+ width: 911px;
+ height: 20px;
+ line-height: 20px;
+
+ padding-left: 5px;
+
+ border: 1px solid silver;
+
+ resize: none;
+ }
+ .tab-cli .copy {
+ display: block;
+ position: absolute;
+
+ bottom: 55px;
+ right: 40px;
+
+ height: 28px;
+ line-height: 28px;
+
+ padding: 0 15px 0 15px;
+
+ text-align: center;
+ font-weight: bold;
+
+ border: 1px solid silver;
+ background-color: #ececec;
+ }
+ .tab-cli .copy:hover {
+ background-color: #dedcdc;
+ }
\ No newline at end of file
diff --git a/tabs/default.css b/tabs/default.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tabs/firmware_flasher.css b/tabs/firmware_flasher.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tabs/gps.css b/tabs/gps.css
new file mode 100644
index 0000000000..fa6a8c3789
--- /dev/null
+++ b/tabs/gps.css
@@ -0,0 +1,39 @@
+.tab-gps {
+}
+ .tab-gps .GPS_info {
+ float: left;
+ display: block;
+
+
+ width: 170px;
+
+ border: 1px solid silver;
+ }
+ .tab-gps .GPS_info table {
+ padding: 5px;
+ line-height: 18px;
+ }
+ .tab-gps .GPS_signal_strength {
+ float: left;
+
+ margin-left: 10px;
+
+ width: 200px;
+
+ border: 1px solid silver;
+ }
+ .tab-gps .GPS_signal_strength table {
+ padding: 5px;
+ line-height: 18px;
+ }
+ .tab-gps .GPS_info .head,
+ .tab-gps .GPS_signal_strength .head {
+ display: block;
+
+ text-align: center;
+ line-height: 20px;
+ font-weight: bold;
+
+ border-bottom: 1px solid silver;
+ background-color: #ececec;
+ }
\ No newline at end of file
diff --git a/tabs/initial_setup.css b/tabs/initial_setup.css
new file mode 100644
index 0000000000..0fdff3d8b7
--- /dev/null
+++ b/tabs/initial_setup.css
@@ -0,0 +1,326 @@
+.tab-initial_setup {
+}
+ .tab-initial_setup .section {
+ clear: both;
+ padding-bottom: 8px;
+ }
+ .tab-initial_setup .section a {
+ display: block;
+
+ float: left;
+
+ width: 160px;
+ height: 24px;
+ line-height: 24px;
+
+ text-align: center;
+ color: white;
+
+ border: 1px solid #c0c0c0;
+ background-color: #5569d0;
+ }
+ .tab-initial_setup .section a:hover {
+ background-color: #424d84;
+ }
+ .tab-initial_setup .section a.calibrating {
+ background-color: #4f4f4f;
+ }
+ .tab-initial_setup .section a.calibrating:hover {
+ cursor: default;
+ background-color: #4f4f4f;
+ }
+
+ .tab-initial_setup .section a.backup {
+ width: 75px;
+ margin-right: 10px;
+ }
+ .tab-initial_setup .section a.restore {
+ width: 75px;
+ }
+ .tab-initial_setup .section p {
+ margin-left: 180px;
+
+ padding: 5px;
+
+ border: 1px dotted silver;
+ }
+#interactive_block {
+ float: left;
+
+ margin-top: 10px;
+
+ height: 300px;
+ width: 400px;
+
+ border: 1px solid silver;
+ background-color: white;
+}
+ #interactive_block .model {
+ display: block;
+ margin: 10px 0 0 10px;
+
+ font-weight: bold;
+ }
+ #interactive_block a.reset {
+ position: absolute;
+ display: block;
+
+ margin-left: 10px;
+ margin-top: 240px;
+
+ width: 100px;
+ height: 23px;
+ line-height: 23px;
+
+ color: white;
+ text-align: center;
+
+ border: 1px solid silver;
+ background-color: blue;
+
+ z-index: 100;
+ }
+ #interactive_block a.reset:hover {
+ text-decoration: none;
+ }
+ #perspective {
+ -webkit-perspective: 800;
+ -webkit-perspective-origin: 50% 150px; /* 150px = (350px / 2) - 25px */
+ }
+ #cube {
+ position: relative;
+ top: 110px;
+ left: 150px; /* (916px / 2) - 50px */
+
+ height: 100px;
+ width: 100px;
+
+ -webkit-transform-style: preserve-3d;
+ }
+ #cubePITCH {
+ -webkit-transform-style: preserve-3d;
+ }
+ #cubeROLL {
+ -webkit-transform-style: preserve-3d;
+ }
+ #cube .face {
+ position: absolute;
+
+ color: white;
+ font-size: 25px;
+ text-align: center;
+ }
+ #cube .face.one {
+ width: 100px;
+ height: 200px;
+ line-height: 200px;
+
+ -webkit-transform: rotateX(-90deg) translateZ(-50px);
+ background-color: purple;
+ }
+ #cube .face.two {
+ width: 100px;
+ height: 50px;
+ line-height: 50px;
+
+ -webkit-transform: translateZ(100px);
+ background-color: blue;
+ }
+ #cube .face.three {
+ width: 200px;
+ height: 50px;
+ line-height: 50px;
+
+ -webkit-transform: rotateY(90deg);
+ background-color: green;
+ }
+ #cube .face.four {
+ width: 100px;
+ height: 50px;
+ line-height: 50px;
+
+ -webkit-transform: rotateY(180deg) translateZ(100px);
+ background-color: black;
+ }
+ #cube .face.five {
+ width: 200px;
+ height: 50px;
+ line-height: 50px;
+
+ -webkit-transform: rotateY(-90deg) translateZ(100px);
+ background-color: red;
+ }
+ #cube .face.six {
+ width: 100px;
+ height: 200px;
+ line-height: 200px;
+
+ -webkit-transform: rotateX(90deg) translateZ(100px);
+ background-color: silver;
+ }
+ .tab-initial_setup .battery,
+ .tab-initial_setup .acc-trim {
+ float: left;
+ display: block;
+
+ margin-top: 10px;
+ margin-left: 25px;
+
+ width: 145px;
+
+ border: 1px solid silver;
+ }
+ .tab-initial_setup .battery .head,
+ .tab-initial_setup .acc-trim .head {
+ display: block;
+
+ text-align: center;
+ line-height: 20px;
+ font-weight: bold;
+
+ border-bottom: 1px solid silver;
+ background-color: #ececec;
+ }
+ .tab-initial_setup .battery .fields {
+ padding: 5px;
+ }
+ .tab-initial_setup .battery .bat-voltage {
+ padding-left: 20px;
+ }
+ .tab-initial_setup .acc-trim dl {
+ padding: 5px;
+ }
+ .tab-initial_setup .acc-trim dt {
+ float: left;
+ width: 50px;
+
+ margin-bottom: 4px;
+ }
+ .tab-initial_setup .acc-trim dd {
+ margin-left: 50px;
+ margin-bottom: 4px;
+ }
+ .tab-initial_setup .acc-trim input {
+ width: 80px;
+ height: 20px;
+ line-height: 20px;
+
+ border: 1px solid silver;
+ text-align: center;
+ }
+ .tab-initial_setup .acc-trim a.update {
+ display: block;
+
+ margin-right: 5px;
+ margin-bottom: 5px;
+ margin-left: 55px;
+
+ width: 80px;
+ height: 20px;
+ line-height: 20px;
+
+ color: white;
+ text-align: center;
+
+ border: 1px solid silver;
+ background-color: #6f1515;
+ }
+ .tab-initial_setup .acc-trim a.update:hover {
+ cursor: default;
+ }
+ .tab-initial_setup .acc-trim a.update.active {
+ background-color: #0fab16;
+ }
+ .tab-initial_setup .acc-trim a.update.active:hover {
+ cursor: pointer;
+ background-color: #13d81d;
+ }
+ .tab-initial_setup .compass-wrapper {
+ float: left;
+
+ margin-top: 20px;
+ margin-left: 180px;
+
+ border: 1px solid silver;
+
+ border-radius: 50%;
+ }
+ .tab-initial_setup #compass {
+ position: relative;
+
+ width: 150px;
+ height: 150px;
+
+ border: 6px dashed silver;
+ border-radius: 50%;
+ }
+ .tab-initial_setup #compass span {
+ position: absolute;
+ font-weight: bold;
+ }
+ .tab-initial_setup #compass span:nth-child(1) {
+ left: 70px;
+ top: 5px;
+ }
+ .tab-initial_setup #compass span:nth-child(2) {
+ right: 5px;
+ top: 70px;
+ }
+ .tab-initial_setup #compass span:nth-child(3) {
+ left: 70px;
+ bottom: 5px;
+ }
+ .tab-initial_setup #compass span:nth-child(4) {
+ left: 5px;
+ top: 70px;
+ }
+ .tab-initial_setup #compass .pointer {
+ position: absolute;
+
+ height: 150px;
+ width: 150px;
+
+ -webkit-transform: rotate(0deg);
+ }
+ .tab-initial_setup #compass .pointer .tip {
+ position: absolute;
+
+ margin-top: 14px;
+ margin-left: -6px;
+
+ width: 0;
+ height: 0;
+
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+
+ border-bottom: 30px solid red;
+ }
+ .tab-initial_setup #compass .pointer .stick {
+ position: absolute;
+ display: block;
+
+ margin-top: -22px;
+ margin-right: 69px;
+
+ width: 4px;
+ height: 30px;
+
+ background-color: black;
+ }
+ .tab-initial_setup #compass .value {
+ position: relative;
+
+ top: 75px;
+ left: 53px;
+
+ width: 40px;
+ height: 16px;
+ line-height: 16px;
+
+ text-align: center;
+
+ background-color: #f2f2f2;
+
+ border: 1px solid silver;
+ }
\ No newline at end of file
diff --git a/tabs/motor_outputs.css b/tabs/motor_outputs.css
new file mode 100644
index 0000000000..2759e8c2eb
--- /dev/null
+++ b/tabs/motor_outputs.css
@@ -0,0 +1,73 @@
+.tab-motor_outputs {
+}
+ .tab-motor_outputs .right.servos {
+ margin-right: -10px;
+ }
+ .tab-motor_outputs .titles {
+ height: 20px;
+ }
+ .tab-motor_outputs .titles li {
+ float: left;
+ width: 42px;
+ margin-right: 10px;
+
+ text-align: center;
+ }
+ .tab-motor_outputs .titles .active {
+ color: green;
+ }
+ .tab-motor_outputs .m-block {
+ float: left;
+
+ width: 40px;
+ height: 220px;
+
+ margin-right: 10px;
+
+ border: 1px solid silver;
+ background-color: #e9e9e9;
+ }
+ .tab-motor_outputs .indicator {
+ position: absolute;
+ margin-top: 330px;
+
+ width: 40px;
+ height: 0px;
+ }
+ .tab-motor_outputs p {
+ margin-top: 20px;
+ padding: 5px;
+
+ border: 1px dotted silver;
+ }
+ .tab-motor_outputs .motor_testing {
+ display: none;
+ }
+ .tab-motor_outputs .motor_testing .sliders {
+ margin-top: 20px;
+ }
+ .tab-motor_outputs .motor_testing .sliders input {
+ -webkit-appearance: slider-vertical;
+
+ width: 48px;
+ }
+ .tab-motor_outputs .motor_testing .values {
+ margin-top: 5px;
+ }
+ .tab-motor_outputs .motor_testing .values li {
+ float: left;
+
+ width: 51px;
+
+ text-align: center;
+ }
+ .tab-motor_outputs .motor_testing .notice {
+ float: right;
+
+ width: 490px;
+
+ margin-top: 20px;
+ padding: 5px;
+
+ border: 1px dotted silver;
+ }
\ No newline at end of file
diff --git a/tabs/pid_tuning.css b/tabs/pid_tuning.css
new file mode 100644
index 0000000000..ff5f8343b1
--- /dev/null
+++ b/tabs/pid_tuning.css
@@ -0,0 +1,53 @@
+.tab-pid_tuning table {
+ width: 100%;
+ border-collapse: collapse;
+}
+ .tab-pid_tuning table, .tab-pid_tuning table th, .tab-pid_tuning table td {
+ padding: 5px;
+ border: 1px solid #8b8b8b;
+ }
+ .tab-pid_tuning table tr:nth-child(odd) {
+ background-color: #ececec;
+ }
+ .tab-pid_tuning table input {
+ width: 130px;
+ height: 20px;
+ line-height: 20px;
+
+ padding: 0 5px 0 5px;
+ border: 1px solid silver;
+ text-align: right;
+ }
+ .tab-pid_tuning .update {
+ display: block;
+ float: right;
+
+ margin-top: 20px;
+
+ width: 120px;
+ height: 56px;
+ line-height: 56px;
+
+ font-size: 14px;
+ color: white;
+ text-align: center;
+
+ border: 1px solid silver;
+
+ background-color: #6f1515;
+ }
+ .tab-pid_tuning .update:hover {
+ cursor: default;
+ }
+ .tab-pid_tuning .update.active {
+ background-color: #0fab16;
+ }
+ .tab-pid_tuning .update.active:hover {
+ cursor: pointer;
+ background-color: #13d81d;
+ }
+ .tab-pid_tuning .rate-tpa {
+ float: left;
+ width: 400px;
+ margin-top: 20px;
+ }
\ No newline at end of file
diff --git a/tabs/receiver.css b/tabs/receiver.css
new file mode 100644
index 0000000000..bfa1692207
--- /dev/null
+++ b/tabs/receiver.css
@@ -0,0 +1,106 @@
+.tab-receiver {
+}
+ .tab-receiver .bars {
+ float: left;
+ }
+ .tab-receiver .bars ul {
+ height: 20px;
+ line-height: 20px;
+
+ margin-bottom: 5px;
+ }
+ .tab-receiver .bars li {
+ float: left;
+ }
+ .tab-receiver .bars .name {
+ width: 80px;
+ }
+ .tab-receiver .bars .meter meter {
+ width: 200px;
+ height: 20px;
+
+ border: 1px solid silver;
+ }
+ .tab-receiver .bars .value {
+ width: 60px;
+ padding-left: 20px;
+ }
+ .tab-receiver .tunings {
+ float: left;
+ border: 1p xsolid red;
+ }
+ .tab-receiver .tunings table {
+ width: 30%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ .tab-receiver .tunings table, .tab-receiver .tunings table th, .tab-receiver .tunings table td {
+ padding: 5px;
+ border: 1px solid #8b8b8b;
+ }
+ .tab-receiver .tunings table tr:nth-child(odd) {
+ background-color: #ececec;
+ }
+ .tab-receiver .tunings table input {
+ width: 130px;
+ height: 20px;
+ line-height: 20px;
+
+ padding: 0 5px 0 5px;
+ border: 1px solid silver;
+ text-align: right;
+ }
+ .tab-receiver .update {
+ display: block;
+ float: right;
+
+ width: 120px;
+ height: 30px;
+ line-height: 30px;
+
+ font-size: 14px;
+ color: white;
+ text-align: center;
+
+ border: 1px solid silver;
+
+ background-color: #6f1515;
+ }
+ .tab-receiver .update:hover {
+ cursor: default;
+ }
+ .tab-receiver .update.active {
+ background-color: #0fab16;
+ }
+ .tab-receiver .update.active:hover {
+ cursor: pointer;
+ background-color: #13d81d;
+ }
+ .tab-receiver #RX_plot {
+ margin: auto;
+ margin-top: 20px;
+
+ width: 880px;
+ height: 250px;
+ }
+ .tab-receiver .throttle_curve {
+ float: right;
+
+ margin-bottom: 20px;
+ margin-right: 10px;
+
+ width: 220px;
+ height: 58px;
+
+ border: 1px solid silver;
+ }
+ .tab-receiver .pitch_roll_curve {
+ float: right;
+
+ margin-right: 10px;
+
+ width: 220px;
+ height: 58px;
+
+ border: 1px solid silver;
+ }
\ No newline at end of file
diff --git a/tabs/sensors.css b/tabs/sensors.css
new file mode 100644
index 0000000000..9957dfa37f
--- /dev/null
+++ b/tabs/sensors.css
@@ -0,0 +1,43 @@
+.tab-sensors {
+}
+ .tab-sensors #gyro {
+ height: 120px;
+ }
+ .tab-sensors #accel {
+ height: 120px;
+ }
+ .tab-sensors #mag {
+ height: 120px;
+ }
+ .tab-sensors #baro {
+ height: 120px;
+ }
+ .tab-sensors #debug1 {
+ height: 120px;
+ }
+ .tab-sensors #debug2 {
+ height: 120px;
+ }
+ .tab-sensors #debug3 {
+ height: 120px;
+ }
+ .tab-sensors #debug4 {
+ height: 120px;
+ }
+
+ .tab-sensors select {
+ float: right;
+
+ border: 1px solid silver;
+ }
+
+/* Flotr related styles */
+.flotr-legend {
+ padding: 2px;
+ margin-left: 31px;
+ top: 20px;
+ border: 0;
+
+ background-color: white;
+ opacity: 0.75;
+}
\ No newline at end of file
diff --git a/tabs/servos.css b/tabs/servos.css
new file mode 100644
index 0000000000..e69de29bb2