Merge pull request #321 from mikeller/improve_rx_settings

Trimmed down RX settings display to save some space on the configuration tab.

_locales/en/messages.json

@@ -573,6 +573,9 @@
         "message": "Other Features"
     },
     "configurationReceiver": {
+        "message": "Receiver"
+    },
+    "configurationReceiverMode": {
         "message": "Receiver Mode"
     },
     "configurationRSSI": {

js/Features.js

@@ -4,10 +4,10 @@ var Features = function (config) {
     var self = this;
 
     var features = [
-        {bit: 0, group: 'rxMode', mode: 'group', name: 'RX_PPM'},
+        {bit: 0, group: 'rxMode', mode: 'select', name: 'RX_PPM'},
         {bit: 1, group: 'batteryVoltage', name: 'VBAT'},
         {bit: 2, group: 'other', name: 'INFLIGHT_ACC_CAL'},
-        {bit: 3, group: 'rxMode', mode: 'group', name: 'RX_SERIAL'},
+        {bit: 3, group: 'rxMode', mode: 'select', name: 'RX_SERIAL'},
         {bit: 4, group: 'esc', name: 'MOTOR_STOP'},
         {bit: 5, group: 'other', name: 'SERVO_TILT'},
         {bit: 6, group: 'other', name: 'SOFTSERIAL', haveTip: true},
@@ -16,8 +16,8 @@ var Features = function (config) {
         {bit: 10, group: 'other', name: 'TELEMETRY'},
         {bit: 11, group: 'batteryCurrent', name: 'CURRENT_METER'},
         {bit: 12, group: 'other', name: '3D'},
-        {bit: 13, group: 'rxMode', mode: 'group', name: 'RX_PARALLEL_PWM'},
+        {bit: 13, group: 'rxMode', mode: 'select', name: 'RX_PARALLEL_PWM'},
-        {bit: 14, group: 'rxMode', mode: 'group', name: 'RX_MSP'},
+        {bit: 14, group: 'rxMode', mode: 'select', name: 'RX_MSP'},
         {bit: 15, group: 'rssi', name: 'RSSI_ADC'},
         {bit: 16, group: 'other', name: 'LED_STRIP'},
         {bit: 17, group: 'other', name: 'DISPLAY'},
@@ -96,7 +96,7 @@ Features.prototype.isEnabled = function (featureName) {
 Features.prototype.generateElements = function (featuresElements) {
     var self = this;
 
-    var radioGroups = [];
+    var listElements = [];
 
     for (var i = 0; i < self._features.length; i++) {
         var row_e;
@@ -106,22 +106,16 @@ Features.prototype.generateElements = function (featuresElements) {
             feature_tip_html = '<div class="helpicon cf_tip" i18n_title="feature' + self._features[i].name + 'Tip"></div>';
         }
 
-        if (self._features[i].mode === 'group') {
+        if (self._features[i].mode === 'select') {
-            row_e = $('<tr><td style="width: 15px;"><input style="width: 13px;" class="feature" id="feature-'
+            row_e = $('<option class="feature" id="feature-'
-                    + i
+                + i
-                    + '" value="'
+                + '" name="'
-                    + self._features[i].bit
+                + self._features[i].name
-                    + '" title="'
+                + '" value="'
-                    + self._features[i].name
+                + self._features[i].bit
-                    + '" type="radio" name="'
+                + '" i18n="feature' + self._features[i].name + '" />');
-                    + self._features[i].group
+
-                    + '" /></td><td><label for="feature-'
+            listElements.push(row_e);
-                    + i
-                    + '">'
-                    + self._features[i].name
-                    + '</label></td><td><span i18n="feature' + self._features[i].name + '"></span>'
-                    + feature_tip_html + '</td></tr>');
-            radioGroups.push(self._features[i].group);
         } else {
             row_e = $('<tr><td><input class="feature toggle" id="feature-'
                     + i
@@ -149,46 +143,36 @@ Features.prototype.generateElements = function (featuresElements) {
         });
     }
 
-    for (var i = 0; i < radioGroups.length; i++) {
+    for (var i = 0; i < listElements.length; i++) {
-        var group = radioGroups[i];
+        var element = listElements[i];
-        var controlElements = $('input[name="' + group + '"].feature');
+        var bit = parseInt(element.attr('value'));
+        var state = bit_check(self._featureMask, bit);
 
-        controlElements.each(function() {
+        element.prop('selected', state);
-            var bit = parseInt($(this).attr('value'));
-            var state = bit_check(self._featureMask, bit);
-
-            $(this).prop('checked', state);
-        });
     }
 }
 
 Features.prototype.updateData = function (featureElement) {
     var self = this;
 
-    switch (featureElement.attr('type')) {
+    if (featureElement.attr('type') === 'checkbox') {
-        case 'checkbox':
+        var bit = featureElement.data('bit');
-            var bit = featureElement.data('bit');
 
-            if (featureElement.is(':checked')) {
+        if (featureElement.is(':checked')) {
+            self._featureMask = bit_set(self._featureMask, bit);
+        } else {
+            self._featureMask = bit_clear(self._featureMask, bit);
+        }
+    } else if (featureElement.prop('localName') === 'select') {
+        var controlElements = featureElement.children();
+        var selectedBit = featureElement.val();
+        for (var i = 0; i < controlElements.length; i++) {
+            var bit = controlElements[i].value;
+            if (selectedBit === bit) {
                 self._featureMask = bit_set(self._featureMask, bit);
             } else {
                 self._featureMask = bit_clear(self._featureMask, bit);
             }
-
+        }
-            break;
-        case 'radio':
-            var group = featureElement.attr('name');
-            var controlElements = $('input[name="' + group + '"]');
-            var selectedBit = controlElements.filter(':checked').val();
-            controlElements.each(function() {
-                var bit = $(this).val();
-                if (selectedBit === bit) {
-                    self._featureMask = bit_set(self._featureMask, bit);
-                } else {
-                    self._featureMask = bit_clear(self._featureMask, bit);
-                }
-
-            });
-            break;
     }
 }

tabs/configuration.css

@@ -120,13 +120,6 @@
     line-height: 20px;
 }
 
-.tab-configuration .serialRX {
-    width: 100%;
-    height: 68px;
-    border: 1px solid silver;
-    margin-bottom: 5px;
-}
-
 .tab-configuration .current .checkbox {
     margin-top: 0px;
     float: left;
@@ -295,10 +288,6 @@
     float: left;
 }
 
-.tab-configuration .rxprovider {
-    min-height: 184px;
-}
-
 .tab-configuration .current td:nth-child(2) {
     width: 30px;
 }
@@ -315,6 +304,10 @@
     width: 30px;
 }
 
+.tab-configuration .serialRXBox {
+    padding-top: 0px;
+}
+
 .tab-configuration .gps td:nth-child(2) {
     width: 38px;
 }
@@ -340,12 +333,6 @@
     padding: 5%;
 }
 
-.tab-configuration .rxMode tr:last-child td {
-    border-bottom: 0px;
-    padding-bottom: 0px;
-    margin-bottom: 0px;
-}
-
 .tab-configuration .gui_box {
     font-style: bold;
     font-family: 'open_sanssemibold', Arial;
@@ -515,9 +502,6 @@
         min-height: 296px;
         float: left;
     }
-    .tab-configuration .rxprovider {
-        min-height: 190px;
-    }
     .tab-configuration .board .gui_box, .tab-configuration .acc .gui_box {
         min-height: 137px;
         float: left;

tabs/configuration.html

@@ -205,33 +205,21 @@
                     <div class="spacer_box_title" i18n="configurationReceiver"></div>
                 </div>
                 <div class="spacer_box">
-                    <table cellpadding="0" cellspacing="0">
+                    <select class="features rxMode" name="rxMode">
-                        <thead>
+                        <!-- list generated here -->
-                            <tr>
+                     </select>
-                                <th i18n="configurationFeatureEnabled"></th>
+                    <span i18n="configurationReceiverMode"></span>
-                                <th i18n="configurationFeatureDescription"></th>
-                                <th i18n="configurationFeatureName"></th>
-                            </tr>
-                        </thead>
-                        <tbody class="features rxMode">
-                            <!-- table generated here -->
-                        </tbody>
-                    </table>
                 </div>
-            </div>
+                <div class="serialRXBox spacer_box">
-            <div class="gui_box grey rxprovider">
+                    <div class="note spacerbottom">
-                <div class="gui_box_titlebar">
-                    <div class="spacer_box_title" i18n="configurationSerialRX"></div>
-                </div>
-                <div class="spacer_box">
-                    <div class="note">
                         <div class="note_spacer">
                             <p i18n="configurationSerialRXHelp"></p>
                         </div>
                     </div>
-                    <select class="serialRX" size="5">
+                    <select class="serialRX">
                         <!-- list generated here -->
                     </select>
+                    <span i18n="configurationSerialRX"></span>
                 </div>
             </div>
             <div class="gui_box grey">

tabs/configuration.js

@@ -411,11 +411,6 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
             $('input[name="autodisarmdelay"]').val(ARMING_CONFIG.auto_disarm_delay);
             $('input[id="disarmkillswitch"]').prop('checked', ARMING_CONFIG.disarm_kill_switch !== 0);
             $('div.disarm').show();            
-            if (BF_CONFIG.features.isEnabled('MOTOR_STOP')) {
-                $('div.disarmdelay').show();
-            } else {
-                $('div.disarmdelay').hide();
-            }
 
             $('div.cycles').show();
         }
@@ -448,6 +443,14 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
         }
 
         // UI hooks
+        function checkShowDisarmDelay() {
+            if (BF_CONFIG.features.isEnabled('MOTOR_STOP')) {
+                $('div.disarmdelay').show();
+            } else {
+                $('div.disarmdelay').hide();
+            }
+        }
+
         $('input.feature', features_e).change(function () {
             var element = $(this);
 
@@ -455,13 +458,30 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
             updateTabList(BF_CONFIG.features);
 
             if (element.attr('name') === 'MOTOR_STOP') {
-                if (BF_CONFIG.features.isEnabled('MOTOR_STOP')) {
+                checkShowDisarmDelay();
-                    $('div.disarmdelay').show();
-                } else {
-                    $('div.disarmdelay').hide();
-                }
             }
         });
+        checkShowDisarmDelay();
+
+        function checkShowSerialRxBox() {
+            if (BF_CONFIG.features.isEnabled('RX_SERIAL')) {
+                $('div.serialRXBox').show();
+            } else {
+                $('div.serialRXBox').hide();
+            }
+        }
+
+        $(features_e).filter('select').change(function () {
+            var element = $(this);
+
+            BF_CONFIG.features.updateData(element);
+            updateTabList(BF_CONFIG.features);
+
+            if (element.attr('name') === 'rxMode') {
+                checkShowSerialRxBox();
+            }
+        });
+        checkShowSerialRxBox();
 
         $("input[id='unsyncedPWMSwitch']").change(function() {
             if ($(this).is(':checked')) {