Outputs tab rework part 1

8 files changed, 401 insertions, 481 deletions

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 3d811dec..ce5b3df5 100755
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1432,7 +1432,12 @@
     "gpsSignalStr": {
         "message": "Signal Strength"
     },
-
+    "motors": {
+        "message": "Motors"
+    },
+    "servos": {
+        "message": "Servos"
+    },
     "motorsMaster": {
         "message": "Master"
     },
diff --git a/main.html b/main.html
index 94b37271..19518622 100755
--- a/main.html
+++ b/main.html
@@ -161,8 +161,7 @@
     <div class="tab_container">
         <div id="tabs">
             <ul class="mode-disconnected">
-                <li class="tab_landing"><a href="#" data-i18n="tabLanding" class="tabicon ic_welcome"
-                                           title="Welcome"></a></li>
+                <li class="tab_landing"><a href="#" data-i18n="tabLanding" class="tabicon ic_welcome" title="Welcome"></a></li>
                 <li class="tab_help"><a href="https://github.com/iNavFlight/inav/wiki" target="_blank" data-i18n="tabHelp" class="tabicon ic_help"
                                         title="Documentation &amp; Support"></a></li>
                 <li class="tab_mission_control"><a href="#" data-i18n="tabMissionControl" class="tabicon ic_mission" title="Mission Control"></a></li>
@@ -173,6 +172,7 @@
                 <li class="tab_setup"><a href="#" data-i18n="tabSetup" class="tabicon ic_setup" title="Setup"></a></li>
                 <li class="tab_calibration"><a href="#" data-i18n="tabCalibration" class="tabicon ic_calibration" title="Calibration"></a></li>
                 <li class="tab_mixer"><a href="#" data-i18n="tabMixer" class="tabicon ic_mixer" title="Mixer"></a></li>
+                <li class="tab_motors"><a href="#" data-i18n="tabMotorTesting" class="tabicon ic_motor" title="Motors"></a></li>
                 <li class="tab_profiles"><a href="#" data-i18n="tabPresets" class="tabicon ic_wizzard"
                                             title="Presets"></a></li>
                 <li class="tab_ports"><a href="#" data-i18n="tabPorts" class="tabicon ic_ports" title="Ports"></a></li>
@@ -184,18 +184,12 @@
                                               title="PID Tuning"></a></li>
                 <li class="tab_advanced_tuning"><a href="#" data-i18n="tabAdvancedTuning" class="tabicon ic_advanced" title="Advanced Tuning"></a></li>
 
-                <li class="tab_receiver"><a href="#" data-i18n="tabReceiver" class="tabicon ic_rx" title="Receiver"></a>
-                </li>
-                <li class="tab_auxiliary"><a href="#" data-i18n="tabAuxiliary" class="tabicon ic_modes"
-                                             title="Modes"></a></li>
-                <li class="tab_adjustments"><a href="#" data-i18n="tabAdjustments" class="tabicon ic_adjust"
-                                               title="Adjustments"></a></li>
-                <li class="tab_servos"><a href="#" data-i18n="tabServos" class="tabicon ic_servo" title="Servos"></a>
-                </li>
+                <li class="tab_receiver"><a href="#" data-i18n="tabReceiver" class="tabicon ic_rx" title="Receiver"></a></li>
+                <li class="tab_auxiliary"><a href="#" data-i18n="tabAuxiliary" class="tabicon ic_modes" title="Modes"></a></li>
+                <li class="tab_adjustments"><a href="#" data-i18n="tabAdjustments" class="tabicon ic_adjust" title="Adjustments"></a></li>
+                <li class="tab_servos"><a href="#" data-i18n="tabServos" class="tabicon ic_servo" title="Servos"></a></li>
                 <li class="tab_gps"><a href="#" data-i18n="tabGPS" class="tabicon ic_gps" title="GPS"></a></li>
                 <li class="tab_mission_control"><a href="#" data-i18n="tabMissionControl" class="tabicon ic_mission" title="Mission Control"></a></li>
-                <li class="tab_motors"><a href="#" data-i18n="tabMotorTesting" class="tabicon ic_motor"
-                                          title="Motors"></a></li>
                 <li class="tab_osd"><a href="#" data-i18n="tabOSD" class="tabicon ic_osd" title="OSD"></a></li>
                 <!--<li class="tab_transponder"><a href="#" data-i18n="tabTransponder" class="tabicon ic_transponder" title="Transponder"></a></li>-->
                 <li class="tab_led_strip"><a href="#" data-i18n="tabLedStrip" class="tabicon ic_led"
diff --git a/src/css/tabs/motors.css b/src/css/tabs/motors.css
index 13fdbf3b..68e0d8f5 100644
--- a/src/css/tabs/motors.css
+++ b/src/css/tabs/motors.css
@@ -14,10 +14,6 @@
     width: calc(100% - 292px);
 }
 
-.tab-motors .mixerPreview {
-    float: left;
-}
-
 .tab-motors .mixerPreview img {
     width: 120px;
     height: 120px;
@@ -173,27 +169,20 @@
     stroke: #CB4B4B;
 }
 
-.tab-motors .motorblock {
-    background-color: #ECECEC;
-}
-
 .tab-motors .left.motors {
     float: left;
     width: calc(50% - 50px);
 }
 
-.tab-motors .title {
-    padding-bottom: 2px;
-    text-align: center;
-    font-weight: bold;
+.tab-motors .right.motors {
+    float: right;
+    width: calc(50% - 50px);
 }
 
-.tab-motors .title2 {
+.tab-motors .title {
     padding-bottom: 2px;
     text-align: center;
-    font-size: 12px;
     font-weight: bold;
-    margin-bottom: 1em;
 }
 
 .tab-motors .titles {
@@ -305,8 +294,6 @@
 }
 
 .tab-motors .motor_testing_notice {
-    float: right;
-    width: calc(50% - 24px);
     padding: 5px;
     border: 2px solid #ccc;
     border-radius: 3px;
@@ -320,4 +307,138 @@
 
 .tab-motors .motor_testing_notice .motorsEnableTestMode {
     margin-left: 10px;
-}
\ No newline at end of file
+}
+
+.tab-motors .tab-servos {
+    margin: 1em;
+}
+
+.tab-servos .title {
+    margin-top: 0;
+    line-height: 30px;
+    text-align: center;
+    font-weight: bold;
+    border: 1px solid #e4e4e4;
+    border-bottom: 0;
+    background-color: #DADADA;
+    color: #797979;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+}
+
+.tab-servos table {
+    margin-bottom: 10px;
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.tab-servos table, .tab-servos table th, .tab-servos table td {
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+}
+
+.tab-servos input[type="number"]::-webkit-inner-spin-button {
+    border: 0;
+}
+
+.tab-servos .directions .direction select {
+    height: 19px;
+    line-height: 19px;
+}
+
+.tab-servos table th {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    text-align: center;
+    border: 1px solid #e4e4e4;
+}
+
+.tab-servos table td {
+    border-bottom: 1px solid #e4e4e4;
+    padding: 6px 5px 7px 5px;
+    border-left: 1px solid #e4e4e4;
+    border-right: 1px solid #e4e4e4;
+}
+
+.tab-servos table tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+.tab-servos table .main {
+    font-weight: bold;
+    text-align: center;
+    background-color: #ececec;
+}
+
+.tab-servos table .channel {
+    width: 22px;
+    text-align: center;
+}
+
+.tab-servos table input {
+    border: 1px solid silver;
+    border-radius: 3px;
+}
+
+.tab-servos table select {
+    border: 1px solid silver;
+}
+
+.tab-servos table .channel input {
+    vertical-align: middle;
+}
+
+.tab-servos table input[type="number"] {
+    display: block;
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    text-align: right;
+}
+
+.tab-servos .direction .name {
+    float: left;
+    display: block;
+    width: 60px;
+}
+
+.tab-servos .direction .alternate {
+    float: left;
+    display: block;
+    width: 60px;
+}
+
+.tab-servos .direction .first {
+    float: left;
+    margin: 2px 10px 0 20px;
+}
+
+.tab-servos .direction .second {
+    float: left;
+    margin: 2px 10px 0 0;
+}
+
+.tab-servos .direction .rate {
+    width: 110px;
+    height: 20px;
+    text-align: center;
+}
+
+.tab-servos .buttons {
+    width: calc(100% - 20px);
+    position: absolute;
+    bottom: 10px;
+}
+
+.tab-servos .live span {
+    margin-right: 10px;
+}
+
+.tab-servos .wide {
+    width: 120px;
+} 
+
+.tab-servos .short {
+    width: 32px;
+} 
\ No newline at end of file
diff --git a/src/css/tabs/servos.css b/src/css/tabs/servos.css
index de4b664e..e69de29b 100644
--- a/src/css/tabs/servos.css
+++ b/src/css/tabs/servos.css
@@ -1,143 +0,0 @@
-.tab-servos .title {
-    margin-top: 0;
-    line-height: 30px;
-    text-align: center;
-    font-weight: bold;
-    border: 1px solid #e4e4e4;
-    border-bottom: 0;
-    background-color: #DADADA;
-    color: #797979;
-    border-top-right-radius: 5px;
-    border-top-left-radius: 5px;
-}
-
-.tab-servos table {
-    margin-bottom: 10px;
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.tab-servos table, .tab-servos table th, .tab-servos table td {
-    border-left: 0;
-    border-right: 0;
-    border-top: 0;
-}
-
-.tab-servos input[type="number"]::-webkit-inner-spin-button {
-    border: 0;
-}
-
-.tab-servos .directions .direction select {
-    height: 19px;
-    line-height: 19px;
-}
-
-.tab-servos table th {
-    padding-top: 3px;
-    padding-bottom: 3px;
-    text-align: center;
-    border: 1px solid #e4e4e4;
-}
-
-.tab-servos table td {
-    border-bottom: 1px solid #e4e4e4;
-    padding: 6px 5px 7px 5px;
-    border-left: 1px solid #e4e4e4;
-    border-right: 1px solid #e4e4e4;
-}
-
-.tab-servos table tr:nth-child(even) {
-    background-color: #f9f9f9;
-}
-
-.tab-servos table .main {
-    font-weight: bold;
-    text-align: center;
-    background-color: #ececec;
-}
-
-.tab-servos table .channel {
-    width: 22px;
-    text-align: center;
-}
-
-.tab-servos table input {
-    border: 1px solid silver;
-    border-radius: 3px;
-}
-
-.tab-servos table select {
-    border: 1px solid silver;
-}
-
-.tab-servos table .channel input {
-    vertical-align: middle;
-}
-
-.tab-servos table input[type="number"] {
-    display: block;
-    width: 100%;
-    height: 20px;
-    line-height: 20px;
-    text-align: right;
-}
-
-.tab-servos .direction .name {
-    float: left;
-    display: block;
-    width: 60px;
-}
-
-.tab-servos .direction .alternate {
-    float: left;
-    display: block;
-    width: 60px;
-}
-
-.tab-servos .direction .first {
-    float: left;
-    margin: 2px 10px 0 20px;
-}
-
-.tab-servos .direction .second {
-    float: left;
-    margin: 2px 10px 0 0;
-}
-
-.tab-servos .direction .rate {
-    width: 110px;
-    height: 20px;
-    text-align: center;
-}
-
-.tab-servos .live {
-    float: left;
-    margin-top: 0px;
-}
-
-.tab-servos .live span {
-    float: left;
-}
-
-.tab-servos .live input {
-    float: left;
-    margin: 0 0 0 5px;
-}
-
-.tab-servos .buttons {
-    width: calc(100% - 20px);
-    position: absolute;
-    bottom: 10px;
-}
-
-.tab-servos .live span {
-    margin-right: 10px;
-}
-
-.tab-servos .wide {
-    width: 120px;
-} 
-
-.tab-servos .short {
-    width: 32px;
-} 
\ No newline at end of file
diff --git a/tabs/motors.html b/tabs/motors.html
index f01850b4..09e18872 100644
--- a/tabs/motors.html
+++ b/tabs/motors.html
@@ -1,98 +1,53 @@
-<div class="tab-motors">
+<div class="tab-motors toolbar_fixed_bottom">
     <div class="content_wrapper">
         <div class="tab_title" i18n="tabMotorTesting">Motors</div>
-        <div class="cf_doc_version_bt">
-            <a id="button-documentation" href="https://github.com/iNavFlight/inav/releases" target="_blank"></a>
-        </div>
-        <div class="gui_box grey" style="margin-bottom: 15px;">
-            <div class="wrapper modelAndAccel">
-                <div class="mixerPreview">
-                    <img src="./resources/motor_order/custom.svg" />
-                </div>
-                <svg id="accel">
-               <g class="grid x" transform="translate(40, 120)"></g>
-               <g class="grid y" transform="translate(40, 10)"></g>
-               <g class="data" transform="translate(41, 10)"></g>
-               <g class="axis x" transform="translate(40, 120)"></g>
-               <g class="axis y" transform="translate(40, 10)"></g>
-            </svg>
-                <div class="plot_control">
-                    <div class="title">
-                        Accelerometer - <a class="reset_accel_max" href="#" title="Reset overtime maximum">[Reset]</a>
-                    </div>
-                    <dl>
-                        <dt i18n="sensorsRefresh"></dt>
-                        <dd class="rate">
-                            <select name="accel_refresh_rate">
-                                <option value="10">10 ms</option>
-                                <option value="20" selected="selected">20 ms</option>
-                                <option value="30">30 ms</option>
-                                <option value="40">40 ms</option>
-                                <option value="50">50 ms</option>
-                                <option value="100">100 ms</option>
-                                <option value="250">250 ms</option>
-                                <option value="500">500 ms</option>
-                                <option value="1000">1000 ms</option>
-                            </select>
-                        </dd>
-                        <dt i18n="sensorsScale"></dt>
-                        <dd class="scale">
-                            <select name="accel_scale">
-                                <option value="0.05">0.05</option>
-                                <option value="0.1">0.1</option>
-                                <option value="0.2">0.2</option>
-                                <option value="0.3">0.3</option>
-                                <option value="0.4">0.4</option>
-                                <option value="0.5">0.5</option>
-                                <option value="1">1</option>
-                                <option value="2" selected="selected">2</option>
-                            </select>
-                        </dd>
-                        <dt>X:</dt>
-                        <dd class="x">0</dd>
-                        <dt>Y:</dt>
-                        <dd class="y">0</dd>
-                        <dt>Z:</dt>
-                        <dd class="z">0</dd>
-                        <dt>RMS:</dt>
-                        <dd class="rms">0</dd>
-                    </dl>
-                </div>
+        <div class="gui_box grey">
+            <div class="gui_box_titlebar">
+                <div class="spacer_box_title" data-i18n="motors"></div>
             </div>
-        </div>
-        <div class="gui_box motorblock">
             <div class="spacer">
-                <div class="title2">Motors</div>
                 <div class="left motors">
-                
                     <ul class="titles motor-titles">
                     </ul>
                     <div class="bar-wrapper"></div>
+                    <div class="clear-both"></div>
+                    <div class="motor_testing">
+                    <div class="sliders motor-sliders"></div>
+                    <div class="values">
+                        <ul class="motor-values"></ul>
+                    </div>
+                    </div>
                 </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">
-                    <div class="left">
-                        <div class="sliders motor-sliders">
-                            
-                        </div>
-                        <div class="values">
-                            <ul class="motor-values">
-                                
-                            </ul>
+                <div class="motors right">
+                    <div class="half">
+                        <div class="mixerPreview">
+                            <img src="./resources/motor_order/custom.svg" />
                         </div>
                     </div>
-                    <div class="cler-both"></div>
+                    <div class="half">
+                        <table class="cf-table">
+                            <tr>
+                                <th>Acc. noise RMS</th>
+                                <td class="acc-rms"></td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="clear-both"></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>
+                <div class="clear-both"></div>
+                
             </div>
         </div>
-        <div class="gui_box motorblock">
+        <div class="gui_box grey">
+            <div class="gui_box_titlebar">
+                <div class="spacer_box_title" data-i18n="servos"></div>
+            </div>
             <div class="spacer" style="padding-left: 0">
-                <div class="title2">Servos</div>
                 <div class="servos">
                     <ul class="titles">
                         <li title="Servo - 8">15</li>
@@ -115,6 +70,29 @@
                     <div class="bar-wrapper"></div>
                 </div>
             </div>
+            <div class="tab-servos" id="servo-config-table-container">
+                <table id="servo-config-table" class="fields">
+                    <tr class="main">
+                        <th width="110px" data-i18n="servosName"></th>
+                        <th data-i18n="servosMid"></th>
+                        <th data-i18n="servosMin"></th>
+                        <th data-i18n="servosMax"></th>
+                        <th data-i18n="servosRate"></th>
+                        <th data-i18n="servosReverse"></th>
+                        <th data-i18n="servoOutput"></th>
+                    </tr>
+                </table>
+                <div class="live">
+                    <input type="checkbox" class="togglemedium" /> <span data-i18n="servosLiveMode"></span>
+                </div>
+            </div>
+            
         </div>
+        
     </div>
+    <div class="content_toolbar">
+            <div class="btn save_btn">
+                <a class="update" href="#" data-i18n="servosButtonSave"></a>
+            </div>
+        </div>
 </div>
diff --git a/tabs/motors.js b/tabs/motors.js
index f6994a60..3f891a84 100644
--- a/tabs/motors.js
+++ b/tabs/motors.js
@@ -28,7 +28,11 @@ TABS.motors.initialize = function (callback) {
         mspHelper.loadMotors,
         mspHelper.loadMotorMixRules,
         mspHelper.loadServoMixRules,
-        mspHelper.loadMixerConfig
+        mspHelper.loadMixerConfig,
+        mspHelper.loadServoMixRules,
+        mspHelper.loadServoConfiguration,
+        mspHelper.loadOutputMapping,
+        mspHelper.loadRcData,
     ]);
     loadChainer.setExitPoint(load_html);
     loadChainer.execute();
@@ -37,7 +41,7 @@ TABS.motors.initialize = function (callback) {
     var saveChainer = new MSPChainerClass();
 
     saveChainer.setChain([
-        mspHelper.sendMotorMixer,
+        mspHelper.sendServoConfigurations,
         mspHelper.saveToEeprom
     ]);
     saveChainer.setExitPoint(function () {
@@ -46,9 +50,15 @@ TABS.motors.initialize = function (callback) {
     });
 
     function load_html() {
-        $('#content').load("./tabs/motors.html", process_html);
+        $('#content').load("./tabs/motors.html", onLoad);
     }
 
+    function onLoad() {
+        process_motors();
+        process_servos();
+        finalize();
+    } 
+
     function update_arm_status() {
         self.armed = FC.isModeEnabled('ARM');
     }
@@ -80,7 +90,7 @@ TABS.motors.initialize = function (callback) {
                 data[i].max = dataPoint;
             }
         }
-        while (data[0].length > 300) {
+        while (data[0].length > 40) {
             for (i = 0; i < data.length; i++) {
                 data[i].shift();
             }
@@ -88,97 +98,141 @@ TABS.motors.initialize = function (callback) {
         return sampleNumber + 1;
     }
 
-    var margin = {top: 20, right: 30, bottom: 10, left: 20};
-    function updateGraphHelperSize(helpers) {
-        helpers.width = helpers.targetElement.width() - margin.left - margin.right;
-        helpers.height = helpers.targetElement.height() - margin.top - margin.bottom;
-
-        helpers.widthScale.range([0, helpers.width]);
-        helpers.heightScale.range([helpers.height, 0]);
+    function update_model(val) {
+        if (MIXER_CONFIG.appliedMixerPreset == -1) return; 
 
-        helpers.xGrid.tickSize(-helpers.height, 0, 0);
-        helpers.yGrid.tickSize(-helpers.width, 0, 0);
+        $('.mixerPreview img').attr('src', './resources/motor_order/'
+            + helper.mixer.getById(val).image + '.svg');
     }
 
-    function initGraphHelpers(selector, sampleNumber, heightDomain) {
-        var helpers = {selector: selector, targetElement: $(selector), dynamicHeightDomain: !heightDomain};
+    function process_servos() {
+
+        let $tabServos = $(".tab-servos"),
+            $servoEmptyTableInfo = $('#servoEmptyTableInfo'),
+            $servoConfigTableContainer = $('#servo-config-table-container'),
+            $servoConfigTable = $('#servo-config-table');
 
-        helpers.widthScale = d3.scale.linear()
-            .clamp(true)
-            .domain([(sampleNumber - 299), sampleNumber]);
+        if (SERVO_CONFIG.length == 0) {
+            $tabServos.addClass("is-hidden");
+            return;
+        }
 
-        helpers.heightScale = d3.scale.linear()
-            .clamp(true)
-            .domain(heightDomain || [1, -1]);
+        function renderServos(name, alternate, obj) {
+
+            $servoConfigTable.append('\
+                <tr> \
+                    <td class="text-center">' + name + '</td>\
+                    <td class="middle"><input type="number" min="500" max="2500" value="' + SERVO_CONFIG[obj].middle + '" /></td>\
+                    <td class="min"><input type="number" min="500" max="2500" value="' + SERVO_CONFIG[obj].min + '" /></td>\
+                    <td class="max"><input type="number" min="500" max="2500" value="' + SERVO_CONFIG[obj].max + '" /></td>\
+                    <td class="text-center rate">\
+                    <td class="text-center reverse">\
+                    </td>\
+                </tr> \
+            ');
 
-        helpers.xGrid = d3.svg.axis();
-        helpers.yGrid = d3.svg.axis();
+            let $currentRow = $servoConfigTable.find('tr:last');
 
-        updateGraphHelperSize(helpers);
+            //This routine is pre 2.0 only
+            if (SERVO_CONFIG[obj].indexOfChannelToForward >= 0) {
+                $currentRow.find('td.channel input').eq(SERVO_CONFIG[obj].indexOfChannelToForward).prop('checked', true);
+            }
 
-        helpers.xGrid
-            .scale(helpers.widthScale)
-            .orient("bottom")
-            .ticks(5)
-            .tickFormat("");
+            // adding select box and generating options
+            $currentRow.find('td.rate').append(
+                '<input class="rate-input" type="number" min="' + FC.MIN_SERVO_RATE + '" max="' + FC.MAX_SERVO_RATE + '" value="' + Math.abs(SERVO_CONFIG[obj].rate) + '" />'
+            );
 
-        helpers.yGrid
-            .scale(helpers.heightScale)
-            .orient("left")
-            .ticks(5)
-            .tickFormat("");
+            $currentRow.find('td.reverse').append(
+                '<input type="checkbox" class="reverse-input togglemedium" ' + (SERVO_CONFIG[obj].rate < 0 ? ' checked ' :  '') + '/>'
+            );
 
-        helpers.xAxis = d3.svg.axis()
-            .scale(helpers.widthScale)
-            .ticks(5)
-            .orient("bottom")
-            .tickFormat(function (d) {return d;});
+            $currentRow.data('info', { 'obj': obj });
 
-        helpers.yAxis = d3.svg.axis()
-            .scale(helpers.heightScale)
-            .ticks(5)
-            .orient("left")
-            .tickFormat(function (d) {return d;});
+            $currentRow.append('<td class="text-center output"></td>');
 
-        helpers.line = d3.svg.line()
-            .x(function (d) { return helpers.widthScale(d[0]); })
-            .y(function (d) { return helpers.heightScale(d[1]); });
+            let output,
+                outputString;
 
-        return helpers;
-    }
+            if (MIXER_CONFIG.platformType == PLATFORM_MULTIROTOR || MIXER_CONFIG.platformType == PLATFORM_TRICOPTER) {
+                output = OUTPUT_MAPPING.getMrServoOutput(usedServoIndex);
+            } else {
+                output = OUTPUT_MAPPING.getFwServoOutput(usedServoIndex);
+            }
+
+            if (output === null) {
+                outputString = "-";
+            } else {
+                outputString = "S" + output;
+            }
+
+            $currentRow.find('.output').html(outputString);
+            //For 2.0 and above hide a row when servo is not configured
+            if (!SERVO_RULES.isServoConfigured(obj)) {
+                $currentRow.hide();
+            } else {
+                usedServoIndex++;
+            }
+        }
+
+        function servos_update(save_configuration_to_eeprom) {
+            $servoConfigTable.find('tr:not(".main")').each(function () {
+                var info = $(this).data('info');
+
+                var selection = $('.channel input', this);
+                var channelIndex = parseInt(selection.index(selection.filter(':checked')));
+                if (channelIndex == -1) {
+                    channelIndex = undefined;
+                }
 
-    function drawGraph(graphHelpers, data, sampleNumber) {
-        var svg = d3.select(graphHelpers.selector);
+                SERVO_CONFIG[info.obj].indexOfChannelToForward = channelIndex;
 
-        if (graphHelpers.dynamicHeightDomain) {
-            var limits = [];
-            $.each(data, function (idx, datum) {
-                limits.push(datum.min);
-                limits.push(datum.max);
+                SERVO_CONFIG[info.obj].middle = parseInt($('.middle input', this).val());
+                SERVO_CONFIG[info.obj].min = parseInt($('.min input', this).val());
+                SERVO_CONFIG[info.obj].max = parseInt($('.max input', this).val());
+                var rate = parseInt($('.rate-input', this).val());
+                if ($('.reverse-input', this).is(':checked')) {
+                    rate = -rate;
+                }
+                SERVO_CONFIG[info.obj].rate = rate;
             });
-            graphHelpers.heightScale.domain(d3.extent(limits));
+
+            //Save configuration to FC
+            saveChainer.execute();
         }
-        graphHelpers.widthScale.domain([(sampleNumber - 299), sampleNumber]);
 
-        svg.select(".x.grid").call(graphHelpers.xGrid);
-        svg.select(".y.grid").call(graphHelpers.yGrid);
-        svg.select(".x.axis").call(graphHelpers.xAxis);
-        svg.select(".y.axis").call(graphHelpers.yAxis);
+        // drop previous table
+        $servoConfigTable.find('tr:not(:first)').remove();
 
-        var group = svg.select("g.data");
-        var lines = group.selectAll("path").data(data, function (d, i) {return i;});
-        lines.enter().append("path").attr("class", "line");
-        lines.attr('d', graphHelpers.line);
-    }
+        let usedServoIndex = 0;
 
-    function update_model(val) {
-        if (MIXER_CONFIG.appliedMixerPreset == -1) return; 
+        for (let servoIndex = 0; servoIndex < SERVO_RULES.getServoCount(); servoIndex++) {
+            renderServos('Servo ' + servoIndex, '', servoIndex);
+        }
+        if (usedServoIndex == 0) {
+            // No servos configured
+            $servoEmptyTableInfo.show();
+            $servoConfigTableContainer.hide();
+        } else {
+            $servoEmptyTableInfo.hide();
+            $servoConfigTableContainer.show();
+        }
+
+        // UI hooks for dynamically generated elements
+        $('table.directions select, table.directions input, #servo-config-table select, #servo-config-table input').change(function () {
+            if ($('div.live input').is(':checked')) {
+                // apply small delay as there seems to be some funky update business going wrong
+                helper.timeout.add('servos_update', servos_update, 10);
+            }
+        });
+
+        $('a.update').click(function () {
+            servos_update(true);
+        });
 
-        $('.mixerPreview img').attr('src', './resources/motor_order/'
-            + helper.mixer.getById(val).image + '.svg');
     }
 
-    function process_html() {
+    function process_motors() {
         $motorsEnableTestMode = $('#motorsEnableTestMode');
 
         self.feature3DEnabled = bit_check(BF_CONFIG.features, 12);
@@ -202,114 +256,62 @@ TABS.motors.initialize = function (callback) {
         // Setup variables
         var samples_accel_i = 0,
             accel_data = initDataArray(3),
-            accelHelpers = initGraphHelpers('#accel', samples_accel_i, [-2, 2]),
             accel_max_read = [0, 0, 0],
             accel_offset = [0, 0, 0],
             accel_offset_established = false;
 
-        var raw_data_text_ements = {
-            x: [],
-            y: [],
-            z: [],
-            rms: []
-        };
-
-        $('.plot_control .x, .plot_control .y, .plot_control .z, .plot_control .rms').each(function () {
-            var el = $(this);
-            if (el.hasClass('x')) {
-                raw_data_text_ements.x.push(el);
-            } else if (el.hasClass('y')) {
-                raw_data_text_ements.y.push(el);
-            } else if (el.hasClass('z')) {
-                raw_data_text_ements.z.push(el);
-            } else if (el.hasClass('rms')) {
-                raw_data_text_ements.rms.push(el);
-            }
-        });
-
-        // set refresh speeds according to configuration saved in storage
-        chrome.storage.local.get('motors_tab_accel_settings', function (result) {
-            if (result.motors_tab_accel_settings) {
-                $('.tab-motors select[name="accel_refresh_rate"]').val(result.motors_tab_accel_settings.rate);
-                $('.tab-motors select[name="accel_scale"]').val(result.motors_tab_accel_settings.scale);
-
-                // start polling data by triggering refresh rate change event
-                $('.tab-motors .rate select:first').change();
-            } else {
-                // start polling immediatly (as there is no configuration saved in the storage)
-                $('.tab-motors .rate select:first').change();
-            }
-        });
+        let $rmsHelper = $(".acc-rms");
 
-        $('.tab-motors .rate select, .tab-motors .scale select').change(function () {
-            var rate = parseInt($('.tab-motors select[name="accel_refresh_rate"]').val(), 10);
-            var scale = parseFloat($('.tab-motors select[name="accel_scale"]').val());
+        // timer initialization
+        helper.interval.killAll(['motor_and_status_pull', 'global_data_refresh', 'msp-load-update']);
+        helper.mspBalancedInterval.flush();
 
-            // store current/latest refresh rates in the storage
-            chrome.storage.local.set({'motors_tab_accel_settings': {'rate': rate, 'scale': scale}});
+        helper.interval.add('IMU_pull', function imu_data_pull() {
 
-            accelHelpers = initGraphHelpers('#accel', samples_accel_i, [-scale, scale]);
+            /*
+                * Enable balancer
+                */
+            if (helper.mspQueue.shouldDrop()) {
+                update_accel_graph();
+                return;
+            }
 
-            // timer initialization
-            helper.interval.killAll(['motor_and_status_pull', 'global_data_refresh', 'msp-load-update']);
-            helper.mspBalancedInterval.flush();
+            MSP.send_message(MSPCodes.MSP_RAW_IMU, false, false, update_accel_graph);
+        }, 25, true);
 
-            helper.interval.add('IMU_pull', function imu_data_pull() {
+        function update_accel_graph() {
 
-                /*
-                 * Enable balancer
-                 */
-                if (helper.mspQueue.shouldDrop()) {
-                    update_accel_graph();
-                    return;
+            if (!accel_offset_established) {
+                for (var i = 0; i < 3; i++) {
+                    accel_offset[i] = SENSOR_DATA.accelerometer[i] * -1;
                 }
 
-                MSP.send_message(MSPCodes.MSP_RAW_IMU, false, false, update_accel_graph);
-            }, rate, true);
+                accel_offset_established = true;
+            }
 
-            function update_accel_graph() {
-                if (!accel_offset_established) {
-                    for (var i = 0; i < 3; i++) {
-                        accel_offset[i] = SENSOR_DATA.accelerometer[i] * -1;
-                    }
+            var accel_with_offset = [
+                accel_offset[0] + SENSOR_DATA.accelerometer[0],
+                accel_offset[1] + SENSOR_DATA.accelerometer[1],
+                accel_offset[2] + SENSOR_DATA.accelerometer[2]
+            ];
 
-                    accel_offset_established = true;
-                }
+            samples_accel_i = addSampleToData(accel_data, samples_accel_i, accel_with_offset);
 
-                var accel_with_offset = [
-                    accel_offset[0] + SENSOR_DATA.accelerometer[0],
-                    accel_offset[1] + SENSOR_DATA.accelerometer[1],
-                    accel_offset[2] + SENSOR_DATA.accelerometer[2]
-                ];
-
-                updateGraphHelperSize(accelHelpers);
-                samples_accel_i = addSampleToData(accel_data, samples_accel_i, accel_with_offset);
-                drawGraph(accelHelpers, accel_data, samples_accel_i);
-
-                // Compute RMS of acceleration in displayed period of time
-                // This is particularly useful for motor balancing as it 
-                // eliminates the need for external tools
-                var sum = 0.0;
-                for (var j = 0; j < accel_data.length; j++)
-                    for (var k = 0; k < accel_data[j].length; k++)
-                       sum += accel_data[j][k][1]*accel_data[j][k][1];
-                var rms = Math.sqrt(sum/(accel_data[0].length+accel_data[1].length+accel_data[2].length));
-
-                raw_data_text_ements.x[0].text(accel_with_offset[0].toFixed(2) + ' (' + accel_max_read[0].toFixed(2) + ')');
-                raw_data_text_ements.y[0].text(accel_with_offset[1].toFixed(2) + ' (' + accel_max_read[1].toFixed(2) + ')');
-                raw_data_text_ements.z[0].text(accel_with_offset[2].toFixed(2) + ' (' + accel_max_read[2].toFixed(2) + ')');
-                raw_data_text_ements.rms[0].text(rms.toFixed(4));
+            // Compute RMS of acceleration in displayed period of time
+            // This is particularly useful for motor balancing as it 
+            // eliminates the need for external tools
+            var sum = 0.0;
+            for (var j = 0; j < accel_data.length; j++)
+                for (var k = 0; k < accel_data[j].length; k++)
+                    sum += accel_data[j][k][1]*accel_data[j][k][1];
 
-                for (var i = 0; i < 3; i++) {
-                    if (Math.abs(accel_with_offset[i]) > Math.abs(accel_max_read[i])) accel_max_read[i] = accel_with_offset[i];
-                }
-            }
-        });
+            let rms = Math.sqrt(sum/(accel_data[0].length+accel_data[1].length+accel_data[2].length));
+            $rmsHelper.text(rms.toFixed(4));
 
-        $('a.reset_accel_max').click(function () {
-            accel_max_read = [0, 0, 0];
-            accel_offset_established = false;
-        });
+            for (var i = 0; i < 3; i++) {
+                if (Math.abs(accel_with_offset[i]) > Math.abs(accel_max_read[i])) accel_max_read[i] = accel_with_offset[i];
+            }
+        }
 
         let motors_wrapper = $('.motors .bar-wrapper'),
             servos_wrapper = $('.servos .bar-wrapper'),
@@ -559,11 +561,13 @@ TABS.motors.initialize = function (callback) {
 
         // enable Status and Motor data pulling
         helper.interval.add('motor_and_status_pull', getPeriodicMotorOutput, 75, true);
+    }
 
+    function finalize() {
         localize();
-
         GUI.content_ready(callback);
     }
+
 };
 
 TABS.motors.cleanup = function (callback) {
diff --git a/tabs/servos.html b/tabs/servos.html
index 66d94962..0cfae5af 100755
--- a/tabs/servos.html
+++ b/tabs/servos.html
@@ -13,10 +13,9 @@
                     <th data-i18n="servosMid"></th>
                     <th data-i18n="servosMin"></th>
                     <th data-i18n="servosMax"></th>
-                    <th class="short">CH1</th>
-                    <th class="short">CH2</th>
-                    <th class="short">CH3</th>
-                    <th class="short">CH4</th>
+                    <th data-i18n="servosRate"></th>
+                    <th data-i18n="servosReverse"></th>
+                    <th data-i18n="servoOutput"></th>
                 </tr>
             </table>
             <div class="live">
diff --git a/tabs/servos.js b/tabs/servos.js
index 202cb85a..6a9bd03d 100755
--- a/tabs/servos.js
+++ b/tabs/servos.js
@@ -44,43 +44,14 @@ TABS.servos.initialize = function (callback) {
             $tabServos = $(".tab-servos"),
             $servoEmptyTableInfo = $('#servoEmptyTableInfo'),
             $servoConfigTableContainer = $('#servo-config-table-container'),
-            $servoConfigTable = $('#servo-config-table'),
-            $servoMixTable = $('#servo-mix-table'),
-            $servoMixTableBody = $servoMixTable.find('tbody');
+            $servoConfigTable = $('#servo-config-table');
 
         if (SERVO_CONFIG.length == 0) {
             $tabServos.addClass("is-hidden");
             return;
         }
 
-        let servoCheckbox = '',
-            servoHeader = '';
-
-        if (semver.lt(CONFIG.flightControllerVersion, "2.0.0")) {
-
-            $servoEmptyTableInfo.hide();
-
-            for (i = 0; i < RC.active_channels - 4; i++) {
-                servoHeader = servoHeader + '<th class="short">CH' + (i + 5) + '</th>';
-            }
-            servoHeader = servoHeader + '<th data-i18n="servosRate"></th><th data-i18n="servosReverse"></th>';
-
-            for (i = 0; i < RC.active_channels; i++) {
-                servoCheckbox = servoCheckbox + '<td class="channel"><input type="checkbox"/></td>';
-            }
-
-            $servoConfigTable.find('tr.main').append(servoHeader);
-        } else {
-            $servoConfigTable.find('tr.main').html('\
-                <th width="110px" data-i18n="servosName"></th>\
-                    <th data-i18n="servosMid"></th>\
-                    <th data-i18n="servosMin"></th>\
-                    <th data-i18n="servosMax"></th>\
-                    <th data-i18n="servosRate"></th>\
-                    <th data-i18n="servosReverse"></th>\
-                    <th data-i18n="servoOutput"></th>\
-                ');
-        }
+        let servoCheckbox = '';
 
         function process_servos(name, alternate, obj) {
 
@@ -115,39 +86,30 @@ TABS.servos.initialize = function (callback) {
 
             $currentRow.data('info', { 'obj': obj });
 
-            if (semver.lt(CONFIG.flightControllerVersion, "2.0.0")) {
-                // only one checkbox for indicating a channel to forward can be selected at a time, perhaps a radio group would be best here.
-                $currentRow.find('td.channel input').click(function () {
-                    if ($(this).is(':checked')) {
-                        $(this).parent().parent().find('.channel input').not($(this)).prop('checked', false);
-                    }
-                });
-            } else {
 
-                $currentRow.append('<td class="text-center output"></td>');
+            $currentRow.append('<td class="text-center output"></td>');
 
-                let output,
-                    outputString;
+            let output,
+                outputString;
 
-                if (MIXER_CONFIG.platformType == PLATFORM_MULTIROTOR || MIXER_CONFIG.platformType == PLATFORM_TRICOPTER) {
-                    output = OUTPUT_MAPPING.getMrServoOutput(usedServoIndex);
-                } else {
-                    output = OUTPUT_MAPPING.getFwServoOutput(usedServoIndex);
-                }
+            if (MIXER_CONFIG.platformType == PLATFORM_MULTIROTOR || MIXER_CONFIG.platformType == PLATFORM_TRICOPTER) {
+                output = OUTPUT_MAPPING.getMrServoOutput(usedServoIndex);
+            } else {
+                output = OUTPUT_MAPPING.getFwServoOutput(usedServoIndex);
+            }
 
-                if (output === null) {
-                    outputString = "-";
-                } else {
-                    outputString = "S" + output;
-                }
+            if (output === null) {
+                outputString = "-";
+            } else {
+                outputString = "S" + output;
+            }
 
-                $currentRow.find('.output').html(outputString);
-                //For 2.0 and above hide a row when servo is not configured
-                if (!SERVO_RULES.isServoConfigured(obj)) {
-                    $currentRow.hide();
-                } else {
-                    usedServoIndex++;
-                }
+            $currentRow.find('.output').html(outputString);
+            //For 2.0 and above hide a row when servo is not configured
+            if (!SERVO_RULES.isServoConfigured(obj)) {
+                $currentRow.hide();
+            } else {
+                usedServoIndex++;
             }
         }