From 9b01cec4fb0e5cb9c151d20196a36e1495737e1d Mon Sep 17 00:00:00 2001
From: "Pawel Spychalski (DzikuVx)" <pspychalski@gmail.com>
Date: Tue, 9 Jul 2019 12:42:54 +0200
Subject: [PATCH 1/3] Support 16 servos

---
 js/fc.js                       | 2 +-
 js/servoMixerRuleCollection.js | 2 +-
 tabs/mixer.js                  | 2 +-
 tabs/servos.js                 | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/fc.js b/js/fc.js
index 69ab00d9..86411291 100644
--- a/js/fc.js
+++ b/js/fc.js
@@ -211,7 +211,7 @@ var FC = {
         };
 
         MOTOR_DATA = new Array(8);
-        SERVO_DATA = new Array(8);
+        SERVO_DATA = new Array(16);
 
         GPS_DATA = {
             fix: 0,
diff --git a/js/servoMixerRuleCollection.js b/js/servoMixerRuleCollection.js
index 76ef8245..439336be 100644
--- a/js/servoMixerRuleCollection.js
+++ b/js/servoMixerRuleCollection.js
@@ -5,7 +5,7 @@ let ServoMixerRuleCollection = function () {
 
     let self = {},
         data = [],
-        maxServoCount = 8;
+        maxServoCount = 16;
 
     self.setServoCount = function (value) {
         maxServoCount = value;
diff --git a/tabs/mixer.js b/tabs/mixer.js
index e17f1c02..a94a2db8 100644
--- a/tabs/mixer.js
+++ b/tabs/mixer.js
@@ -120,7 +120,7 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
 
                 $servoMixTableBody.append('\
                     <tr>\
-                    <td><input type="number" class="mix-rule-servo" step="1" min="0" max="7" /></td>\
+                    <td><input type="number" class="mix-rule-servo" step="1" min="0" max="15" /></td>\
                     <td><select class="mix-rule-input"></select></td>\
                     <td><input type="number" class="mix-rule-rate" step="1" min="-125" max="125" /></td>\
                     <td><input type="number" class="mix-rule-speed" step="1" min="0" max="255" /></td>\
diff --git a/tabs/servos.js b/tabs/servos.js
index 7859d088..ad2bb8a2 100755
--- a/tabs/servos.js
+++ b/tabs/servos.js
@@ -182,7 +182,7 @@ TABS.servos.initialize = function (callback) {
 
         let usedServoIndex = 0;
 
-        for (let servoIndex = 0; servoIndex < 8; servoIndex++) {
+        for (let servoIndex = 0; servoIndex < 16; servoIndex++) {
             process_servos('Servo ' + servoIndex, '', servoIndex);
         }
         if (usedServoIndex == 0) {

From cc80e0772684ae54e38bc0bc62a202f0bfd4df07 Mon Sep 17 00:00:00 2001
From: "Pawel Spychalski (DzikuVx)" <pspychalski@gmail.com>
Date: Tue, 9 Jul 2019 12:44:51 +0200
Subject: [PATCH 2/3] Support for 16 servos

---
 tabs/servos.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tabs/servos.js b/tabs/servos.js
index ad2bb8a2..202cb85a 100755
--- a/tabs/servos.js
+++ b/tabs/servos.js
@@ -182,7 +182,7 @@ TABS.servos.initialize = function (callback) {
 
         let usedServoIndex = 0;
 
-        for (let servoIndex = 0; servoIndex < 16; servoIndex++) {
+        for (let servoIndex = 0; servoIndex < SERVO_RULES.getServoCount(); servoIndex++) {
             process_servos('Servo ' + servoIndex, '', servoIndex);
         }
         if (usedServoIndex == 0) {

From 9433319fdfa24b1c3a8c2e791d1e8abde6057590 Mon Sep 17 00:00:00 2001
From: "Pawel Spychalski (DzikuVx)" <pspychalski@gmail.com>
Date: Tue, 16 Jul 2019 19:37:41 +0200
Subject: [PATCH 3/3] Motors tab refactoring

---
 _locales/en/messages.json |  2 +-
 src/css/tabs/motors.css   | 20 ++++++---------
 tabs/motors.html          | 51 ++++++++++++++++++++++++---------------
 tabs/motors.js            |  8 +++++-
 4 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index c0a52e3e..e9e1169e 100755
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -102,7 +102,7 @@
         "message": "GPS"
     },
     "tabMotorTesting": {
-        "message": "Motors"
+        "message": "Outputs"
     },
     "tabLedStrip": {
         "message": "LED Strip"
diff --git a/src/css/tabs/motors.css b/src/css/tabs/motors.css
index 7326e0d2..13fdbf3b 100644
--- a/src/css/tabs/motors.css
+++ b/src/css/tabs/motors.css
@@ -174,9 +174,7 @@
 }
 
 .tab-motors .motorblock {
-    margin-bottom: 0px;
     background-color: #ECECEC;
-    /*background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));*/
 }
 
 .tab-motors .left.motors {
@@ -184,11 +182,6 @@
     width: calc(50% - 50px);
 }
 
-.tab-motors .right.servos {
-    float: right;
-    width: 50%;
-}
-
 .tab-motors .title {
     padding-bottom: 2px;
     text-align: center;
@@ -199,7 +192,8 @@
     padding-bottom: 2px;
     text-align: center;
     font-size: 12px;
-    font-family: 'open_sanslight', Arial;
+    font-weight: bold;
+    margin-bottom: 1em;
 }
 
 .tab-motors .titles {
@@ -215,7 +209,7 @@
 
 .tab-motors .servos .titles li {
     float: right;
-    width: calc((100% / 8) - 10px);
+    width: calc((100% / 16) - 10px);
     margin: 0 0 0 10px;
 }
 
@@ -266,7 +260,7 @@
 
 .tab-motors .servos .m-block {
     float: right;
-    width: calc((100% / 8) - 10px);
+    width: calc((100% / 16) - 10px);
     margin: 0 0 0 10px;
     border-radius: 3px;
 }
@@ -310,7 +304,7 @@
     text-align: center;
 }
 
-.tab-motors .motor_testing .notice {
+.tab-motors .motor_testing_notice {
     float: right;
     width: calc(50% - 24px);
     padding: 5px;
@@ -320,10 +314,10 @@
     font-size: 11px;
 }
 
-.tab-motors .motor_testing .notice p {
+.tab-motors .motor_testing_notice p {
     margin-bottom: 10px;
 }
 
-.tab-motors .motor_testing .notice .motorsEnableTestMode {
+.tab-motors .motor_testing_notice .motorsEnableTestMode {
     margin-left: 10px;
 }
\ No newline at end of file
diff --git a/tabs/motors.html b/tabs/motors.html
index 47cb9978..f01850b4 100644
--- a/tabs/motors.html
+++ b/tabs/motors.html
@@ -62,25 +62,17 @@
         </div>
         <div class="gui_box motorblock">
             <div class="spacer">
+                <div class="title2">Motors</div>
                 <div class="left motors">
-                    <div class="title2">Motors</div>
+                
                     <ul class="titles motor-titles">
                     </ul>
                     <div class="bar-wrapper"></div>
                 </div>
-                <div class="right servos">
-                    <div class="title2">Servos</div>
-                    <ul class="titles">
-                        <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>
+                <div class="motor_testing_notice">
+                    <p i18n="motorsNotice"></p>
+                    <label><input id="motorsEnableTestMode" type="checkbox" class="togglesmall"/><span
+                        class="motorsEnableTestMode" i18n="motorsEnableControl"></span></label>
                 </div>
                 <div class="clear-both"></div>
                 <div class="motor_testing">
@@ -94,14 +86,35 @@
                             </ul>
                         </div>
                     </div>
-                    <div class="notice">
-                        <p i18n="motorsNotice"></p>
-                        <label><input id="motorsEnableTestMode" type="checkbox" class="togglesmall"/><span
-                            class="motorsEnableTestMode" i18n="motorsEnableControl"></span></label>
-                    </div>
                     <div class="cler-both"></div>
                 </div>
             </div>
         </div>
+        <div class="gui_box motorblock">
+            <div class="spacer" style="padding-left: 0">
+                <div class="title2">Servos</div>
+                <div class="servos">
+                    <ul class="titles">
+                        <li title="Servo - 8">15</li>
+                        <li title="Servo - 7">14</li>
+                        <li title="Servo - 6">13</li>
+                        <li title="Servo - 5">12</li>
+                        <li title="Servo - 4">11</li>
+                        <li title="Servo - 3">10</li>
+                        <li title="Servo - 2">9</li>
+                        <li title="Servo - 1">8</li>
+                        <li title="Servo - 8">7</li>
+                        <li title="Servo - 7">6</li>
+                        <li title="Servo - 6">5</li>
+                        <li title="Servo - 5">4</li>
+                        <li title="Servo - 4">3</li>
+                        <li title="Servo - 3">2</li>
+                        <li title="Servo - 2">1</li>
+                        <li title="Servo - 1">0</li>
+                    </ul>
+                    <div class="bar-wrapper"></div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/tabs/motors.js b/tabs/motors.js
index bdf3c4fa..f6994a60 100644
--- a/tabs/motors.js
+++ b/tabs/motors.js
@@ -340,8 +340,14 @@ TABS.motors.initialize = function (callback) {
         $motorValues.append('<li style="font-weight: bold" data-i18n="motorsMaster"></li>');
 
         for (let i = 0; i < SERVO_RULES.getServoCount(); i++) {
+
+            let opacity = "";
+            if (!SERVO_RULES.isServoConfigured(15 - i)) {
+                opacity = ' style="opacity: 0.2"';
+            }
+
             servos_wrapper.append('\
-                <div class="m-block servo-' + (7 - i) + '">\
+                <div class="m-block servo-' + (15 - i) + '" ' + opacity + '>\
                     <div class="meter-bar">\
                         <div class="label"></div>\
                         <div class="indicator">\