Overhaul of the configuration tab.

_locales/en/messages.json

@@ -331,7 +331,7 @@
         "message": "Enabled"
     },
     "configurationFeatureName": {
-        "message": "Name"
+        "message": "Feature"
     },
     "configurationFeatureDescription": {
         "message": "Description"
@@ -342,10 +342,19 @@
         "message": "Mixer"
     },
     "configurationFeatures": {
-        "message": "Features"
+        "message": "Other Features"
+    },
+    "configurationReceiver": {
+        "message": "Receiver Mode"
+    },
+    "configurationRSSI": {
+        "message": "RSSI (Signal Strength)"
+    },
+    "configurationEscFeatures": {
+        "message": "ESC/Motor Features"
     },
     "configurationFeaturesHelp": {
-        "message": "<strong>Note:</strong> that not all combinations of features are valid.  When the flight controller firmware detects this conflicting features will be disabled.<br /><strong>Note:</strong> Configure serial ports <span style=\"color: red\">before</span> enabling the features that will use the ports."
+        "message": "<strong>Note:</strong> Not all combinations of features are valid.  When the flight controller firmware detects invalid feature combinations conflicting features will be disabled.<br /><strong>Note:</strong> Configure serial ports <span style=\"color: red\">before</span> enabling the features that will use the ports."
     },
     
     "configurationBoardAlignment": {
@@ -360,8 +369,8 @@
     "configurationBoardAlignmentYaw": {
         "message": "Yaw Adjustment [deg]"
     },
-    "configurationAccelTrimMagDec": {
+    "configurationAccelTrims": {
-        "message": "Accelerometer & Magnetometer"
+        "message": "Accelerometer Trim"
     },
     "configurationAccelTrimRoll": {
         "message": "Accelerometer Roll Trim"
@@ -372,9 +381,6 @@
     "configurationMagDeclination": {
         "message": "Magnetometer Declination [deg]"
     },
-    "configurationThrottle": {
-        "message": "Throttle"
-    },
     "configurationThrottleMinimum": {
         "message": "Minimum Throttle"
     },
@@ -420,8 +426,8 @@
     "configurationGPS": {
         "message": "GPS"
     },
-    "configurationGPStype": {
+    "configurationGPSProtocol": {
-        "message": "Type"
+        "message": "Protocol"
     },
     "configurationGPSbaudrate": {
         "message": "Baudrate"
@@ -430,7 +436,7 @@
         "message": "Ground Assistance Type"
     },
     "configurationSerialRX": {
-        "message": "Serial Receiver"
+        "message": "Serial Receiver Provider"
     },
     "configurationEepromSaved": {
         "message": "EEPROM <span style=\"color: green\">saved</span>"

tabs/configuration.css

@@ -1,10 +1,11 @@
 .tab-configuration .help {
-    float: left;
+    padding: 10px;
+    background-color: #ffcb18;
+    margin-bottom: 10px;
 }
 
-.tab-configuration table {
-    float: left;
 
+.tab-configuration table {
     margin-bottom: 10px;
 
     border-collapse: collapse;
@@ -57,17 +58,13 @@
 .tab-configuration .mixerPreview img {
     display: block;
 
-    width: calc(100% - 10px);
+    width: 100%;
-    height: calc(100% - 10px);
+    height: 100%;
-
-    padding: 5px;
-
-    border: 1px solid silver;
-    border-bottom: 0;
 }
 .tab-configuration select.mixerList {
-    width: calc(100% + 2px);
+    width: 180px;
     height: 20px;
+    margin-top: 10px;
 
     font-weight: bold;
 
@@ -91,6 +88,7 @@
 }
 .tab-configuration .number {
     margin-bottom: 5px;
+    clear: left;
 }
 .tab-configuration .number input {
     width: 60px;
@@ -125,6 +123,7 @@
     width: 125px;
 
     border: 1px solid silver;
+    margin-bottom: 5px;
 }
 .tab-configuration .current .checkbox {
     margin-top: 2px;

tabs/configuration.html

@@ -1,15 +1,19 @@
 <div class="tab-configuration">
+    <div class="help">
+        <p i18n="configurationFeaturesHelp"></p>
+    </div>
+
     <div class="leftWrapper">
         <div class="groupTitle" i18n="configurationMixer"></div>
         <div class="mixerPreview">
             <img src="./resources/motor_order/custom.svg" />
+        </div>
         <select class="mixerList">
             <!-- list generated here -->
         </select>
     </div>
-    </div>
     <div class="rightWrapper">        
-        <div class="groupTitle" i18n="configurationFeatures"></div>
+        <div class="groupTitle" i18n="configurationEscFeatures"></div>
         <table>
             <thead>
                 <tr>
@@ -18,17 +22,10 @@
                     <th i18n="configurationFeatureDescription"></th>
                 </tr>
             </thead>
-            <tbody class="features">
+            <tbody class="features esc">
                 <!-- table generated here -->
             </tbody>
         </table>
-        <div class="help">
-            <p i18n="configurationFeaturesHelp"></p>
-        </div>
-    </div>
-    <div class="clear-both"></div>
-    <div class="leftWrapper">
-        <div class="groupTitle" i18n="configurationThrottle"></div>
         <div class="number">
             <label>
                 <input type="number" name="minthrottle" min="0" max="2000" />
@@ -60,8 +57,30 @@
             </label>
         </div>
     </div>
+    <div class="clear-both"></div>
+    <div class="leftWrapper">
+        <div class="groupTitle" i18n="configurationBoardAlignment"></div>
+        <div class="number">
+            <label>
+                <input type="number" name="board_align_roll" step="1" min="-180" max="180" />
+                <span i18n="configurationBoardAlignmentRoll"></span>
+            </label>
+        </div>
+        <div class="number">
+            <label>
+                <input type="number" name="board_align_pitch" step="1" min="-180" max="180" />
+                <span i18n="configurationBoardAlignmentPitch"></span>
+            </label>
+        </div>
+        <div class="number">
+            <label>
+                <input type="number" name="board_align_yaw" step="1" min="-180" max="180" />
+                <span i18n="configurationBoardAlignmentYaw"></span>
+            </label>
+        </div>
+    </div>
     <div class="rightWrapper">
-        <div class="groupTitle" i18n="configurationAccelTrimMagDec"></div>
+        <div class="groupTitle" i18n="configurationAccelTrims"></div>
         <div class="number">
             <label>
                 <input type="number" name="roll"   min="-300" max="300" />
@@ -74,27 +93,76 @@
                 <span i18n="configurationAccelTrimPitch"></span>
             </label>
         </div>
-        <div class="number">
-            <label>
-                <input type="number" name="mag_declination" step="0.1" min="-180" max="180" />
-                <span i18n="configurationMagDeclination"></span>
-            </label>
-        </div>
     </div>
     <div class="clear-both"></div>
     <div class="leftWrapper">
+        <div class="groupTitle" i18n="configurationReceiver"></div>
+        <table>
+            <thead>
+                <tr>
+                    <th i18n="configurationFeatureEnabled"></th>
+                    <th i18n="configurationFeatureName"></th>
+                    <th i18n="configurationFeatureDescription"></th>
+                </tr>
+            </thead>
+            <tbody class="features rxMode">
+                <!-- table generated here -->
+            </tbody>
+        </table>
+                
         <div class="groupTitle" i18n="configurationSerialRX"></div>
         <select class="serialRX" size="4">
             <!-- list generated here -->
         </select>
+        
+        <div class="groupTitle" i18n="configurationRSSI"></div>
+        <table>
+            <thead>
+                <tr>
+                    <th i18n="configurationFeatureEnabled"></th>
+                    <th i18n="configurationFeatureName"></th>
+                    <th i18n="configurationFeatureDescription"></th>
+                </tr>
+            </thead>
+            <tbody class="features rssi">
+                <!-- table generated here -->
+            </tbody>
+        </table>
+        <div class="groupTitle" i18n="configurationFailsafe"></div>
+        <table>
+            <thead>
+                <tr>
+                    <th i18n="configurationFeatureEnabled"></th>
+                    <th i18n="configurationFeatureName"></th>
+                    <th i18n="configurationFeatureDescription"></th>
+                </tr>
+            </thead>
+            <tbody class="features rxMisc">
+                <!-- table generated here -->
+            </tbody>
+        </table>
+
     </div>
     <div class="rightWrapper gps">
         <div class="groupTitle" i18n="configurationGPS"></div>
+        <table>
+            <thead>
+                <tr>
+                    <th i18n="configurationFeatureEnabled"></th>
+                    <th i18n="configurationFeatureName"></th>
+                    <th i18n="configurationFeatureDescription"></th>
+                </tr>
+            </thead>
+            <tbody class="features gps">
+                <!-- table generated here -->
+            </tbody>
+        </table>
+        
         <div class="line">
-            <select class="gps_type">
+            <select class="gps_protocol">
                 <!-- list generated here -->
             </select>
-            <span i18n="configurationGPStype"></span>
+            <span i18n="configurationGPSProtocol"></span>
         </div>
 <!--         <div class="line"> -->
 <!--             <select class="gps_baudrate"> -->
@@ -108,10 +176,29 @@
             </select>
             <span i18n="configurationGPSubxSbas"></span>
         </div>
+        <div class="number">
+            <label>
+                <input type="number" name="mag_declination" step="0.1" min="-180" max="180" />
+                <span i18n="configurationMagDeclination"></span>
+            </label>
+        </div>
     </div>
     <div class="clear-both"></div>
     <div class="leftWrapper">
         <div class="groupTitle" i18n="configurationBatteryVoltage"></div>
+        <table>
+            <thead>
+                <tr>
+                    <th i18n="configurationFeatureEnabled"></th>
+                    <th i18n="configurationFeatureName"></th>
+                    <th i18n="configurationFeatureDescription"></th>
+                </tr>
+            </thead>
+            <tbody class="features batteryVoltage">
+                <!-- table generated here -->
+            </tbody>
+        </table>
+        
         <div class="number">
             <label>
                 <input type="number" name="mincellvoltage" step="0.1" min="1" max="5" />
@@ -139,6 +226,18 @@
     </div>
     <div class="rightWrapper current">
         <div class="groupTitle" i18n="configurationCurrent"></div>
+        <table>
+            <thead>
+                <tr>
+                    <th i18n="configurationFeatureEnabled"></th>
+                    <th i18n="configurationFeatureName"></th>
+                    <th i18n="configurationFeatureDescription"></th>
+                </tr>
+            </thead>
+            <tbody class="features batteryCurrent">
+                <!-- table generated here -->
+            </tbody>
+        </table>        
         <div class="number">
             <label>
                 <input type="number" name="currentscale" step="1" min="1" max="1000" />
@@ -162,25 +261,19 @@
     </div>
     <div class="clear-both"></div>
     <div class="leftWrapper">
-        <div class="groupTitle" i18n="configurationBoardAlignment"></div>
+        <div class="groupTitle" i18n="configurationFeatures"></div>
-        <div class="number">
+        <table>
-            <label>
+            <thead>
-                <input type="number" name="board_align_roll" step="1" min="-180" max="180" />
+                <tr>
-                <span i18n="configurationBoardAlignmentRoll"></span>
+                    <th i18n="configurationFeatureEnabled"></th>
-            </label>
+                    <th i18n="configurationFeatureName"></th>
-        </div>
+                    <th i18n="configurationFeatureDescription"></th>
-        <div class="number">
+                </tr>
-            <label>
+            </thead>
-                <input type="number" name="board_align_pitch" step="1" min="-180" max="180" />
+            <tbody class="features other">
-                <span i18n="configurationBoardAlignmentPitch"></span>
+                <!-- table generated here -->
-            </label>
+            </tbody>
-        </div>
+        </table>
-        <div class="number">
-            <label>
-                <input type="number" name="board_align_yaw" step="1" min="-180" max="180" />
-                <span i18n="configurationBoardAlignmentYaw"></span>
-            </label>
-        </div>
     </div>
     <div class="clear-both"></div>
     <div class="buttons">

tabs/configuration.js

@@ -53,38 +53,66 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
         mixer_list_e.val(BF_CONFIG.mixerConfiguration).change();
 
         // generate features
-        var featureNames = [
+        var features = [
-            {name: 'RX_PPM', description: 'PPM RX input'},
+            {bit: 0, group: 'rxMode', mode: 'group', name: 'RX_PPM', description: 'PPM RX input'},
-            {name: 'VBAT', description: 'Battery voltage monitoring'},
+            {bit: 1, group: 'batteryVoltage', name: 'VBAT', description: 'Battery voltage monitoring'},
-            {name: 'INFLIGHT_ACC_CAL', description: 'In-flight level calibration'},
+            {bit: 2, group: 'other', name: 'INFLIGHT_ACC_CAL', description: 'In-flight level calibration'},
-            {name: 'RX_SERIAL', description: 'Serial-based receiver (SPEKSAT, SBUS, SUMD)'},
+            {bit: 3, group: 'rxMode', mode: 'group', name: 'RX_SERIAL', description: 'Serial-based receiver (SPEKSAT, SBUS, SUMD)'},
-            {name: 'MOTOR_STOP', description: 'Don\'t spin the motors when armed'},
+            {bit: 4, group: 'esc', name: 'MOTOR_STOP', description: 'Don\'t spin the motors when armed'},
-            {name: 'SERVO_TILT', description: 'Servo gimbal'},
+            {bit: 5, group: 'other', name: 'SERVO_TILT', description: 'Servo gimbal'},
-            {name: 'SOFTSERIAL', description: 'Enable CPU based serial ports (configure port scenario first)'},
+            {bit: 6, group: 'other', name: 'SOFTSERIAL', description: 'Enable CPU based serial ports (configure port scenario first)'},
-            {name: 'GPS', description: 'GPS (configure port scenario first)'},
+            {bit: 7, group: 'gps', name: 'GPS', description: 'GPS (configure port scenario first)'},
-            {name: 'FAILSAFE', description: 'Failsafe settings on RX signal loss'},
+            {bit: 8, group: 'rxFailsafe', name: 'FAILSAFE', description: 'Failsafe settings on RX signal loss'},
-            {name: 'SONAR', description: 'Sonar'},
+            {bit: 9, group: 'other', name: 'SONAR', description: 'Sonar'},
-            {name: 'TELEMETRY', description: 'Telemetry output'},
+            {bit: 10, group: 'other', name: 'TELEMETRY', description: 'Telemetry output'},
-            {name: 'CURRENT_METER', description: 'Battery current monitoring'},
+            {bit: 11, group: 'batteryCurrent', name: 'CURRENT_METER', description: 'Battery current monitoring'},
-            {name: '3D', description: '3D mode (for use with reversible ESCs)'},
+            {bit: 12, group: 'other', name: '3D', description: '3D mode (for use with reversible ESCs)'},
-            {name: 'RX_PARALLEL_PWM', description: 'PWM RX input'},
+            {bit: 13, group: 'rxMode', mode: 'group', name: 'RX_PARALLEL_PWM', description: 'PWM RX input'},
-            {name: 'RX_MSP', description: 'MSP RX input'},
+            {bit: 14, group: 'rxMode', mode: 'group', name: 'RX_MSP', description: 'MSP RX input'},
-            {name: 'RSSI_ADC', description: 'Analog RSSI input'},
+            {bit: 15, group: 'rssi', name: 'RSSI_ADC', description: 'Analog RSSI input'},
-            {name: 'LED_STRIP', description: 'Addressable RGB LED strip support'},
+            {bit: 16, group: 'other', name: 'LED_STRIP', description: 'Addressable RGB LED strip support'},
-            {name: 'DISPLAY', description: 'OLED Screen Display'},
+            {bit: 17, group: 'other', name: 'DISPLAY', description: 'OLED Screen Display'},
-            {name: 'ONESHOT125', description: 'ONESHOT ESC support (disconnect ESCs, remove props)'}
+            {bit: 18, group: 'esc', name: 'ONESHOT125', description: 'ONESHOT ESC support (disconnect ESCs, remove props)'}
         ];
 
-        var features_e = $('.features');
+        var radioGroups = [];
-        for (var i = 0; i < featureNames.length; i++) {
-            var row_e = $('<tr><td><input id="feature-' + i + '" title="' + featureNames[i].name + '" type="checkbox" /></td><td><label for="feature-' + i + '">' + featureNames[i].name + '</label></td><td>' + featureNames[i].description + '</td>');
-            row_e.find('input').attr('checked', bit_check(BF_CONFIG.features, i));
         
-            features_e.append(row_e);
+        var features_e = $('.features');
+        for (var i = 0; i < features.length; i++) {
+            var row_e;
+            
+            if (features[i].mode == 'group') {
+                row_e = $('<tr><td><input class="feature" id="feature-' + i + '" value="' + features[i].bit + '" title="' + features[i].name + '" type="radio" name="' + features[i].group + '" /></td><td><label for="feature-' + i + '">' + features[i].name + '</label></td><td>' + features[i].description + '</td>');
+                radioGroups.push(features[i].group);
+            } else {
+                row_e = $('<tr><td><input class="feature" id="feature-' + i + '" title="' + features[i].name + '" type="checkbox" /></td><td><label for="feature-' + i + '">' + features[i].name + '</label></td><td>' + features[i].description + '</td>');
+                var feature_e = row_e.find('input.feature');
+                feature_e.data('bit', features[i].bit);
+                feature_e.prop('checked', bit_check(BF_CONFIG.features, features[i].bit));
+            }
+
+            features_e.each(function () {
+                if ($(this).hasClass(features[i].group)) {
+                    $(this).append(row_e);
+                }
+            });
+        }
+
+        for (var i = 0; i < radioGroups.length; i++) {
+            var group = radioGroups[i];
+            var controls_e = $('input[name="' + group + '"].feature');
+            
+            
+            controls_e.each(function() {
+                var bit = parseInt($(this).attr('value'));
+                var state = bit_check(BF_CONFIG.features, bit);
+                
+                $(this).prop('checked', state);
+            });
         }
 
         // generate GPS
-        var gpsTypes = [
+        var gpsProtocols = [
             'NMEA',
             'UBLOX'
         ];
@@ -108,12 +136,12 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
             'Indian GAGAN'
         ];
 
-        var gps_type_e = $('select.gps_type');
+        var gps_protocol_e = $('select.gps_protocol');
-        for (var i = 0; i < gpsTypes.length; i++) {
+        for (var i = 0; i < gpsProtocols.length; i++) {
-            gps_type_e.append('<option value="' + i + '">' + gpsTypes[i] + '</option>');
+            gps_protocol_e.append('<option value="' + i + '">' + gpsProtocols[i] + '</option>');
         }
 
-        gps_type_e.change(function () {
+        gps_protocol_e.change(function () {
             MISC.gps_type = parseInt($(this).val());
         });
 
@@ -138,7 +166,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
         });
 
         // select current gps configuration
-        gps_type_e.val(MISC.gps_type);
+        gps_protocol_e.val(MISC.gps_type);
         //gps_baudrate_e.val(MISC.gps_baudrate);
         gps_ubx_sbas_e.val(MISC.gps_ubx_sbas);
 
@@ -201,9 +229,9 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
 
 
         // UI hooks
-        $('input', features_e).change(function () {
+        $('input[type="checkbox"].feature', features_e).change(function () {
             var element = $(this),
-                index = $('input', features_e).index(element),
+                index = element.data('bit'),
                 state = element.is(':checked');
 
             if (state) {
@@ -213,6 +241,27 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
             }
         });
 
+        // UI hooks
+        $('input[type="radio"].feature', features_e).change(function () {
+            var element = $(this),
+                group = element.attr('name');
+
+            var controls_e = $('input[name="' + group + '"]');
+            var selected_bit = controls_e.filter(':checked').val();
+            
+            controls_e.each(function() {
+                var bit = $(this).attr('value');
+                
+                var selected = (selected_bit == bit);
+                if (selected) {
+                    BF_CONFIG.features = bit_set(BF_CONFIG.features, bit);
+                } else {
+                    BF_CONFIG.features = bit_clear(BF_CONFIG.features, bit);
+                }
+
+            });
+        });
+
         $('a.save').click(function () {
             // gather data that doesn't have automatic change event bound
             BF_CONFIG.board_align_roll = parseInt($('input[name="board_align_roll"]').val());