Merge pull request #55 from mikeller/move_throttle_settings_into_pid_tab

Move throttle settings into pid tab

_locales/en/messages.json

@@ -787,6 +787,9 @@
     "rcYawCurve": {
 	"message": "RC Yaw Curve"
     },
+    "throttle": {
+	"message": "Throttle"
+    },
     "pidTuningButtonSave": {
         "message": "Save"
     },

tabs/pid_tuning.css

@@ -44,6 +44,127 @@
     border: 1px solid silver;
 }
 
+.tab-pid_tuning .curves {
+    float: left;
+    margin-right: 10px;
+}
+
+.tab-pid_tuning .throttle_curve {
+    float: right;
+    width: calc(100% - 2px); /* - ( "virtual" margin) */
+    margin: 0 0px 0px 0;
+    border: 1px solid silver;
+    border-radius: 3px;
+    background-image: url(../images/paper.jpg);
+    background-size: 200%;
+    background-position: center;
+}
+
+.tab-pid_tuning .throttle {
+    float: right;
+    width: 45%;
+}
+
+.tab-pid_tuning .throttle table {
+    border-collapse: collapse;
+    width: calc(100% - 2px);
+}
+
+.tab-pid_tuning .throttle table, .tab-pid_tuning .throttle table th, .tab-pid_tuning .throttle table td {
+    padding: 4px;
+    text-align: left;
+    padding-left: 6px;
+}
+
+.tab-pid_tuning .throttle table th {
+    background: #828885;
+    color: white;
+    border-right: 1px solid silver;
+    font-weight: normal;
+}
+
+.tab-pid_tuning .throttle table th:first-child {
+    border-top-left-radius: 3px;
+}
+
+.tab-pid_tuning .throttle table th:last-child {
+    border-top-right-radius: 3px;
+    border-right: 0px;
+}
+
+.tab-pid_tuning .throttle table td {
+    background: #DEDEDE;
+    border-right: 1px solid silver;
+}
+
+.tab-pid_tuning .throttle table td:first-child {
+    border-bottom-left-radius: 3px;
+}
+
+.tab-pid_tuning .throttle {
+    float: right;
+    width: 45%;
+}
+
+.tab-pid_tuning .throttle table {
+    border-collapse: collapse;
+    width: calc(100% - 2px);
+}
+
+.tab-pid_tuning .throttle table, .tab-pid_tuning .throttle table th, .tab-pid_tuning .throttle table td {
+    padding: 4px;
+    text-align: left;
+    padding-left: 6px;
+}
+
+.tab-pid_tuning .throttle table th {
+    background: #828885;
+    color: white;
+    border-right: 1px solid silver;
+    font-weight: normal;
+}
+
+.tab-pid_tuning .throttle table th:first-child {
+    border-top-left-radius: 3px;
+}
+
+.tab-pid_tuning .throttle table th:last-child {
+    border-top-right-radius: 3px;
+    border-right: 0px;
+}
+
+.tab-pid_tuning .throttle table td {
+    background: #DEDEDE;
+    border-right: 1px solid silver;
+}
+
+.tab-pid_tuning .throttle table td:first-child {
+    border-bottom-left-radius: 3px;
+}
+
+.tab-pid_tuning .throttle table td:last-child {
+    border-bottom-right-radius: 3px;
+    border-right: 0px;
+}
+
+.tab-pid_tuning .throttle table td {
+    padding: 1px;
+}
+
+.tab-pid_tuning .throttle table tr:nth-child(odd) {
+    background-color: #ececec;
+}
+
+.tab-pid_tuning .throttle table input {
+    width: calc(100% - 8px);
+    border: 1px solid silver;
+    border-radius: 3px;
+    height: 20px;
+    margin: 3px;
+    line-height: 20px;
+    text-align: right;
+}
+
 .tab-pid_tuning .tpa th:nth-child(2) {
     border-top-left-radius: 3px;
 }

tabs/pid_tuning.html

@@ -242,6 +242,34 @@
 			</tbody>
                     </table>
                 </div>
+                <div class="spacer_left throttle topspacer">
+                    <table class="cf">
+                        <thead>
+                            <tr>
+                                <th colspan=2 i18n="throttle"></th>
+			    </tr>
+		        </thead>
+			</tbody>
+			    <tr>
+			        <td colspan=2>
+                                    <div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
+                                        <div class="throttle_curve">
+                                            <canvas height="120px" style="width: 100%; height: 100%"></canvas>
+                                        </div>
+                                    </div>
+			        </td>
+		            </tr>
+                            <tr>
+                                <th i18n="receiverThrottleMid"></th>
+                                <th i18n="receiverThrottleExpo"></th>
+                            </tr>
+                            <tr>
+                                <td><input type="number" name="mid" step="0.01" min="0" max="1" /></td>
+                                <td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
+                            </tr>
+			</tbody>
+                    </table>
+                </div>
                 <div class="spacer_left topspacer">
                     <table class="tpa cf">
                         <thead>

tabs/pid_tuning.js

@@ -174,6 +174,9 @@ TABS.pid_tuning.initialize = function (callback) {
         $('.pid_tuning input[name="rc_yaw_expo"]').val(RC_tuning.RC_YAW_EXPO.toFixed(2));
         $('.pid_tuning input[name="rc_rate_yaw"]').val(SPECIAL_PARAMETERS.RC_RATE_YAW.toFixed(2));
 
+	$('.throttle input[name="mid"]').val(RC_tuning.throttle_MID.toFixed(2));
+	$('.throttle input[name="expo"]').val(RC_tuning.throttle_EXPO.toFixed(2));
+
         $('.tpa input[name="tpa"]').val(RC_tuning.dynamic_THR_PID.toFixed(2));
         $('.tpa input[name="tpa-breakpoint"]').val(RC_tuning.dynamic_THR_breakpoint);
 
@@ -254,6 +257,9 @@ TABS.pid_tuning.initialize = function (callback) {
         RC_tuning.RC_YAW_EXPO = parseFloat($('.pid_tuning input[name="rc_yaw_expo"]').val());
         SPECIAL_PARAMETERS.RC_RATE_YAW = parseFloat($('.pid_tuning input[name="rc_rate_yaw"]').val());
 
+        RC_tuning.throttle_MID = parseFloat($('.throttle input[name="mid"]').val());
+        RC_tuning.throttle_EXPO = parseFloat($('.throttle input[name="expo"]').val())
+
         RC_tuning.dynamic_THR_PID = parseFloat($('.tpa input[name="tpa"]').val());
         RC_tuning.dynamic_THR_breakpoint = parseInt($('.tpa input[name="tpa-breakpoint"]').val());
         FILTER_CONFIG.gyro_soft_lpf_hz = parseInt($('.pid_filter .gyro').val());
@@ -415,6 +421,49 @@ TABS.pid_tuning.initialize = function (callback) {
             }, 0);
         }).trigger('input');
 
+        $('.throttle input').on('input change', function () {
+            setTimeout(function () { // let global validation trigger and adjust the values firs
+                var throttleMidE = $('.throttle input[name="mid"]'),
+                    throttleExpoE = $('.throttle input[name="expo"]'),
+                    mid = parseFloat(throttleMidE.val()),
+                    expo = parseFloat(throttleExpoE.val()),
+                    throttleCurve = $('.throttle .throttle_curve canvas').get(0),
+                    context = throttleCurve.getContext("2d");
+
+                // local validation to deal with input event
+                if (mid >= parseFloat(throttleMidE.prop('min')) &&
+                    mid <= parseFloat(throttleMidE.prop('max')) &&
+                    expo >= parseFloat(throttleExpoE.prop('min')) &&
+                    expo <= parseFloat(throttleExpoE.prop('max'))) {
+                    // continue
+                } else {
+                    return;
+                }
+
+                var canvasHeight = throttleCurve.height;
+                var canvasWidth = throttleCurve.width;
+
+                // math magic by englishman
+                var midx = canvasWidth * mid,
+                    midxl = midx * 0.5,
+                    midxr = (((canvasWidth - midx) * 0.5) + midx),
+                    midy = canvasHeight - (midx * (canvasHeight / canvasWidth)),
+                    midyl = canvasHeight - ((canvasHeight - midy) * 0.5 *(expo + 1)),
+                    midyr = (midy / 2) * (expo + 1);
+
+                // draw
+                context.clearRect(0, 0, canvasWidth, canvasHeight);
+                context.beginPath();
+                context.moveTo(0, canvasHeight);
+                context.quadraticCurveTo(midxl, midyl, midx, midy);
+                context.moveTo(midx, midy);
+                context.quadraticCurveTo(midxr, midyr, canvasWidth, 0);
+                context.lineWidth = 2;
+                context.strokeStyle = '#ffbb00';
+                context.stroke();
+            }, 0);
+        }).trigger('input');
+
         $('a.refresh').click(function () {
             GUI.tab_switch_cleanup(function () {
                 GUI.log(chrome.i18n.getMessage('pidTuningDataRefreshed'));

tabs/receiver.css

@@ -144,16 +144,27 @@
 
 .tab-receiver .tunings {
     float: right;
-    width: 45%;
+    position: relative;
+    margin: 0px 0px 20px 0;
+    width: 100%
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    background-color: #DEDEDE;
 }
 
+.tab-receiver .tunings .head {
+    height: 15px;
+    padding: 4px;
+    text-align: left;
+    padding-left: 6px;
+    font-weight: normal;
+    background: #828885;
+    color: white;
+    border-top-left-radius: 3px;
+    border-right: 1px solid silver;
+}
 .tab-receiver .tunings table {
     border-collapse: collapse;
-    width: calc(100% - 2px);
-}
-
-.tab-receiver .tunings .throttle {
-    margin-bottom: 10px;
 }
 
 .tab-receiver .tunings table, .tab-receiver .tunings table th, .tab-receiver .tunings table td {
@@ -210,7 +221,6 @@
     text-align: right;
 }
 
-
 .tab-receiver .rssi_channel_wrapper {
     float: right;
     margin: 0px 0px 20px 0;

tabs/receiver.html

@@ -32,25 +32,8 @@
                     </select>
                 </div>
             </div>
-            <div class="gui_box grey" style="float: right;">
+            <div class="gui_box tunings grey" style="float: right;">
-                <div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
+                <table class="deadband" width="100%">
-                    <div class="cf_column curves" style="width: calc(55% - 10px); min-width: 200px;">
-                        <div class="throttle_curve">
-                            <canvas width="200" height="117"></canvas>
-                        </div>
-                    </div>
-                    <div class="fc_column half tunings">
-                        <table class="throttle">
-                            <tr>
-                                <th i18n="receiverThrottleMid"></th>
-                                <th i18n="receiverThrottleExpo"></th>
-                            </tr>
-                            <tr>
-                                <td><input type="number" name="mid" step="0.01" min="0" max="1" /></td>
-                                <td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
-                            </tr>
-                        </table>
-                        <table class="deadband">
                     <tr>
                         <th i18n="receiverDeadband"></th>
                         <th i18n="receiverYawDeadband"></th>
@@ -70,8 +53,6 @@
                 </table>
             </div>
         </div>
-            </div>
-        </div>
         <div class="clear-both"></div>
         <div class="gui_box grey" style="padding-top: 10px; padding-bottom: 10px; margin-top: 20px;">
             <div class="spacer">

tabs/receiver.js

@@ -11,10 +11,6 @@ TABS.receiver.initialize = function (callback) {
         GUI.active_tab = 'receiver';
     }
 
-    function get_misc_data() {
-        MSP.send_message(MSP_codes.MSP_MISC, false, false, get_rc_data);
-    }
-
     function get_rc_data() {
         MSP.send_message(MSP_codes.MSP_RC, false, false, get_rc_map);
     }
@@ -41,16 +37,12 @@ TABS.receiver.initialize = function (callback) {
         $('#content').load("./tabs/receiver.html", process_html);
     }
 
-    MSP.send_message(MSP_codes.MSP_RC_TUNING, false, false, get_misc_data);
+    MSP.send_message(MSP_codes.MSP_MISC, false, false, get_rc_data);
 
     function process_html() {
         // translate to user-selected language
         localize();
 
-        // fill in data from RC_tuning
-        $('.tunings .throttle input[name="mid"]').val(RC_tuning.throttle_MID.toFixed(2));
-        $('.tunings .throttle input[name="expo"]').val(RC_tuning.throttle_EXPO.toFixed(2));
-
         chrome.storage.local.get('rx_refresh_rate', function (result) {
             if (result.rx_refresh_rate) {
                 $('select[name="rx_refresh_rate"]').val(result.rx_refresh_rate).change();
@@ -199,65 +191,11 @@ TABS.receiver.initialize = function (callback) {
         var rateHeight = TABS.receiver.rateChartHeight;
 
         // UI Hooks
-        // curves
-        $('.tunings .throttle input').on('input change', function () {
-            setTimeout(function () { // let global validation trigger and adjust the values first
-                var throttleMidE = $('.tunings .throttle input[name="mid"]'),
-                    throttleExpoE = $('.tunings .throttle input[name="expo"]'),
-                    mid = parseFloat(throttleMidE.val()),
-                    expo = parseFloat(throttleExpoE.val()),
-                    throttle_curve = $('.throttle_curve canvas').get(0),
-                    context = throttle_curve.getContext("2d");
-
-                // local validation to deal with input event
-                if (mid >= parseFloat(throttleMidE.prop('min')) &&
-                    mid <= parseFloat(throttleMidE.prop('max')) &&
-                    expo >= parseFloat(throttleExpoE.prop('min')) &&
-                    expo <= parseFloat(throttleExpoE.prop('max'))) {
-                    // continue
-                } else {
-                    return;
-                }
-
-                // math magic by englishman
-                var midx = 200 * mid,
-                    midxl = midx * 0.5,
-                    midxr = (((200 - midx) * 0.5) + midx),
-                    midy = rateHeight - (midx * (rateHeight / 200)),
-                    midyl = rateHeight - ((rateHeight - midy) * 0.5 *(expo + 1)),
-                    midyr = (midy / 2) * (expo + 1);
-
-                // draw
-                context.clearRect(0, 0, 200, rateHeight);
-                context.beginPath();
-                context.moveTo(0, rateHeight);
-                context.quadraticCurveTo(midxl, midyl, midx, midy);
-                context.moveTo(midx, midy);
-                context.quadraticCurveTo(midxr, midyr, 200, 0);
-                context.lineWidth = 2;
-				context.strokeStyle = '#ffbb00';
-                context.stroke();
-            }, 0);
-        }).trigger('input');
-
         $('a.refresh').click(function () {
-            MSP.send_message(MSP_codes.MSP_RC_TUNING, false, false, function () {
+	    // Todo: refresh data here
-                GUI.log(chrome.i18n.getMessage('receiverDataRefreshed'));
-
-                // fill in data from RC_tuning
-                $('.tunings .throttle input[name="mid"]').val(RC_tuning.throttle_MID.toFixed(2));
-                $('.tunings .throttle input[name="expo"]').val(RC_tuning.throttle_EXPO.toFixed(2));
-
-                // update visual representation
-                $('.tunings .throttle input').change();
-            });
         });
 
         $('a.update').click(function () {
-            // catch RC_tuning changes
-            RC_tuning.throttle_MID = parseFloat($('.tunings .throttle input[name="mid"]').val());
-            RC_tuning.throttle_EXPO = parseFloat($('.tunings .throttle input[name="expo"]').val());
-
             if (semver.gte(CONFIG.apiVersion, "1.15.0")) {
                RC_deadband.yaw_deadband = parseInt($('.deadband input[name="yaw_deadband"]').val());
                RC_deadband.deadband = parseInt($('.deadband input[name="deadband"]').val());
@@ -274,10 +212,6 @@ TABS.receiver.initialize = function (callback) {
             // catch rssi aux
             MISC.rssi_channel = parseInt($('select[name="rssi_channel"]').val());
 
-            function save_rc_map() {
-                MSP.send_message(MSP_codes.MSP_SET_RX_MAP, MSP.crunch(MSP_codes.MSP_SET_RX_MAP), false, save_misc);
-            }
-
             function save_misc() {
                 MSP.send_message(MSP_codes.MSP_SET_MISC, MSP.crunch(MSP_codes.MSP_SET_MISC), false, save_rc_configs);
             }
@@ -297,7 +231,7 @@ TABS.receiver.initialize = function (callback) {
                 });
             }
 
-            MSP.send_message(MSP_codes.MSP_SET_RC_TUNING, MSP.crunch(MSP_codes.MSP_SET_RC_TUNING), false, save_rc_map);
+            MSP.send_message(MSP_codes.MSP_SET_RX_MAP, MSP.crunch(MSP_codes.MSP_SET_RX_MAP), false, save_misc);
         });
 
         $("a.sticks").click(function() {