polishing some of the UI outstanding quirks

_locales/en/messages.json

@@ -51,7 +51,7 @@
         "message": "GPS"
     },
     "tab7": {
-        "message": "Motor/Servo Outputs"
+        "message": "Motor Testing"
     },
     "tab8": {
         "message": "Raw Sensor Data"
@@ -442,9 +442,6 @@
         "message": "Signal Strength"
     },
 
-    "motorsBarInfo": {
-        "message": "Bars on the <strong>left</strong> are representing raw PWM signal for <strong>ESCs</strong>.<br />Bars on the <strong>right</strong> are representing raw PWM signal for <strong>Servos</strong>.<br />"
-    },
     "motorsMaster": {
         "message": "Master"
     },

changelog.html

@@ -3,6 +3,7 @@
     - Experimental passthrough support for logging<br />
     - MSP_ANALOG support for logging<br />
     - Allow running motors (testing) while monitoring sensors<br />
+    - Major UI changes in Motor Testing tab<br />
     - Tiny cosmetic changes<br />
     - Initial set of UI bugfixes for Chrome 36+<br />
 </p>

tabs/motor_outputs.css

@@ -84,15 +84,19 @@
 .tab-motor_outputs .left.motors {
     float: left;
 
-    margin-right: 50px;
-
     width: calc(50% - 50px);
 }
 .tab-motor_outputs .right.servos {
-    float: left;
+    float: right;
 
     width: 50%;
 }
+.tab-motor_outputs .title {
+    padding-bottom: 2px;
+
+    text-align: center;
+    font-weight: bold;
+}
 .tab-motor_outputs .titles {
     height: 20px;
 }
@@ -118,7 +122,7 @@
     float: left;
 
     width: calc((100% / 9) - 12px);
-    height: 80px;
+    height: 100px;
 
     margin-right: 10px;
 
@@ -137,28 +141,23 @@
 
     width: 100%;
 }
-.tab-motor_outputs p {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    padding: 5px;
-
-    border: 1px dotted silver;
-}
 .tab-motor_outputs .motor_testing {
     display: none;
+    margin-top: 15px;
 }
     .tab-motor_outputs .motor_testing .left {
-        margin-right: 50px;
-
         width: calc(50% - 50px);
-    }
-    .tab-motor_outputs .motor_testing .sliders {
     }
         .tab-motor_outputs .motor_testing .sliders input {
             -webkit-appearance: slider-vertical;
 
-            width: calc((100% / 9) - 3px); /* - (width / 9 elements, not sure about -3 */
-            height: 80px;
+            width: calc((100% / 9) - 13px);
+            height: 100px;
+
+            margin-right: 10px;
+        }
+        .tab-motor_outputs .motor_testing .sliders input:first-child {
+            /* margin-left: 2px; */ /* seems to vary depending on chrome version O.o */
         }
     .tab-motor_outputs .motor_testing .values {
         margin-top: 5px;
@@ -166,7 +165,8 @@
         .tab-motor_outputs .motor_testing .values li {
             float: left;
 
-            width: calc((100% / 9));
+            width: calc((100% / 9) - 10px);
+            margin-right: 10px;
 
             text-align: center;
         }

tabs/motor_outputs.html

@@ -40,15 +40,16 @@
         <div class="clear-both"></div>
     </div>
     <div class="left motors">
+        <div class="title">Motors</div>
         <ul class="titles">
-            <li title="Motor - 1">M - 1</li>
-            <li title="Motor - 2">M - 2</li>
-            <li title="Motor - 3">M - 3</li>
-            <li title="Motor - 4">M - 4</li>
-            <li title="Motor - 5">M - 5</li>
-            <li title="Motor - 6">M - 6</li>
-            <li title="Motor - 7">M - 7</li>
-            <li title="Motor - 8">M - 8</li>
+            <li title="Motor - 1">1</li>
+            <li title="Motor - 2">2</li>
+            <li title="Motor - 3">3</li>
+            <li title="Motor - 4">4</li>
+            <li title="Motor - 5">5</li>
+            <li title="Motor - 6">6</li>
+            <li title="Motor - 7">7</li>
+            <li title="Motor - 8">8</li>
         </ul>
         <div class="bar-wrapper">
             <div class="m-block motor-0"><div class="indicator"></div></div>
@@ -62,15 +63,16 @@
         </div>
     </div>
     <div class="right servos">
+        <div class="title">Servos</div>
         <ul class="titles">
-            <li title="Servo - 8">S - 8</li>
-            <li title="Servo - 7">S - 7</li>
-            <li title="Servo - 6">S - 6</li>
-            <li title="Servo - 5">S - 5</li>
-            <li title="Servo - 4">S - 4</li>
-            <li title="Servo - 3">S - 3</li>
-            <li title="Servo - 2">S - 2</li>
-            <li title="Servo - 1">S - 1</li>
+            <li title="Servo - 8">8</li>
+            <li title="Servo - 7">7</li>
+            <li title="Servo - 6">6</li>
+            <li title="Servo - 5">5</li>
+            <li title="Servo - 4">4</li>
+            <li title="Servo - 3">3</li>
+            <li title="Servo - 2">2</li>
+            <li title="Servo - 1">1</li>
         </ul>
         <div class="bar-wrapper">
             <div class="m-block servo-7"><div class="indicator"></div></div>
@@ -84,8 +86,6 @@
         </div>
     </div>
     <div class="clear-both"></div>
-    <p i18n="motorsBarInfo">
-    </p>
     <div class="motor_testing">
         <div class="left">
             <div class="sliders">
@@ -113,8 +113,7 @@
                 </ul>
             </div>
         </div>
-        <div class="notice" i18n="motorsNotice">
-        </div>
+        <div class="notice" i18n="motorsNotice"></div>
         <div class="cler-both"></div>
     </div>
 </div>