Merge pull request #1364 from MrD-RC/rearange-modes-to-make-clearere

Updated mode order and added sections

src/css/tabs/auxiliary.css

@@ -48,6 +48,21 @@
     border-spacing: 0;
 }
 
+.tab-auxiliary .modeSection > td {
+    background-color: #f9f9f9;
+    vertical-align: top;
+    padding-bottom: 5px;
+}
+
+.tab-auxiliary .modeSectionArea {
+    background-color: #37a8db;
+    color: white;
+    font-weight: bold;
+    font-size: 1.1em;
+    text-shadow: 0 1px rgba(0, 0, 0, 0.5);
+    padding: 5px;
+}
+
 .tab-auxiliary .mode {
     background-color: #f9f9f9;
     vertical-align: top;

tabs/auxiliary.html

@@ -61,4 +61,9 @@
             <a class="deleteRange" href="#">&nbsp;</a>
         </div>
     </div>
+    <table>
+        <tr class="modeSection">
+            <td colspan="2"><div class="modeSectionArea"><p class="modeSectionName"></p></div></td>
+        </tr>
+    </table>
 </div>

tabs/auxiliary.js

@@ -36,20 +36,30 @@ TABS.auxiliary.initialize = function (callback) {
 
     MSP.send_message(MSPCodes.MSP_BOXNAMES, false, false, get_mode_ranges);
 
+    const modeSections = {};
+        modeSections["ARM"] = "Arming";
+        modeSections["ANGLE"] = "Flight Modes";
+        modeSections["NAV COURSE HOLD"] = "Navigation Modes";
+        modeSections["NAV ALTHOLD"] = "Flight Mode Modifiers";
+        modeSections["AUTO TUNE"] = "Fixed Wing";
+        modeSections["FPV ANGLE MIX"] = "Multi-rotor";
+        modeSections["OSD OFF"] = "OSD Modes";
+        modeSections["CAMSTAB"] = "FPV Camera Modes";
+        modeSections["BEEPER"] = "Misc Modes";
+
     function sort_modes_for_display() {
         // This array defines the order that the modes are displayed in the configurator modes page
-        configuratorBoxOrder = [
-            "ARM", "PREARM",                                                                           // Arming
-            "ANGLE", "HORIZON", "MANUAL",                                                              // Flight modes
-            "NAV RTH", "NAV POSHOLD", "NAV CRUISE", "NAV COURSE HOLD",                                 // Navigation mode
-            "NAV ALTHOLD", "HEADING HOLD", "AIR MODE",                                                 // Flight mode modifiers
-            "NAV WP", "GCS NAV", "HOME RESET",                                                         // Navigation
-            "SERVO AUTOTRIM", "AUTO LEVEL", "AUTO TUNE", "NAV LAUNCH", "LOITER CHANGE", "FLAPERON",    // Fixed wing specific
-            "TURTLE", "FPV ANGLE MIX", "TURN ASSIST", "MC BRAKING", "SURFACE", "HEADFREE", "HEADADJ",  // Multi-rotor specific
-            "BEEPER", "LEDS OFF", "LIGHTS",                                                            // Feedback
-            "OSD OFF", "OSD ALT 1", "OSD ALT 2", "OSD ALT 3",                                          // OSD
-            "CAMSTAB", "CAMERA CONTROL 1", "CAMERA CONTROL 2", "CAMERA CONTROL 3",                     // FPV Camera
-            "BLACKBOX", "FAILSAFE", "KILLSWITCH", "TELEMETRY", "MSP RC OVERRIDE", "USER1", "USER2"     // Misc
+        const configuratorBoxOrder = [
+            "ARM", "PREARM",                                                                                        // Arming
+            "ANGLE", "HORIZON", "MANUAL",                                                                           // Flight modes
+            "NAV COURSE HOLD", "NAV CRUISE", "NAV POSHOLD", "NAV RTH", "NAV WP", "GCS NAV",                         // Navigation modes
+            "NAV ALTHOLD", "HEADING HOLD", "AIR MODE",                                                              // Flight mode modifiers
+            "AUTO TUNE", "SERVO AUTOTRIM", "AUTO LEVEL", "NAV LAUNCH", "LOITER CHANGE", "FLAPERON", "TURN ASSIST",  // Fixed wing specific
+            "FPV ANGLE MIX", "TURTLE", "MC BRAKING", "SURFACE", "HEADFREE", "HEADADJ",                              // Multi-rotor specific
+            "OSD OFF", "OSD ALT 1", "OSD ALT 2", "OSD ALT 3",                                                       // OSD
+            "CAMSTAB", "CAMERA CONTROL 1", "CAMERA CONTROL 2", "CAMERA CONTROL 3",                                  // FPV Camera
+            "BEEPER", "LEDS OFF", "LIGHTS", "HOME RESET", "BLACKBOX", "FAILSAFE", "KILLSWITCH", "TELEMETRY",        // Misc
+                "MSP RC OVERRIDE", "USER1", "USER2"
         ];
 
         // Sort the modes
@@ -98,6 +108,15 @@ TABS.auxiliary.initialize = function (callback) {
         }
     }
 
+    function createModeSection(sectionName) {
+        var modeSectionTemplate = $('#tab-auxiliary-templates .modeSection');
+        var newModeSection = modeSectionTemplate.clone();
+        $(newModeSection).attr('id', 'section-' + sectionName);
+        $(newModeSection).find('.modeSectionName').text(sectionName);
+
+        return newModeSection;
+    }
+
     function createMode(modeIndex, modeId) {
         var modeTemplate = $('#tab-auxiliary-templates .mode');
         var newMode = modeTemplate.clone();
@@ -198,6 +217,11 @@ TABS.auxiliary.initialize = function (callback) {
         var modeTableBodyElement = $('.tab-auxiliary .modes tbody')
         for (var modeIndex = 0; modeIndex < AUX_CONFIG.length; modeIndex++) {
 
+            if (AUX_CONFIG[modeIndex] in modeSections) {
+                var newSection = createModeSection(modeSections[AUX_CONFIG[modeIndex]]);
+                modeTableBodyElement.append(newSection);
+            }
+
             var modeId = AUX_CONFIG_IDS[modeIndex];
             var newMode = createMode(modeIndex, modeId);
             modeTableBodyElement.append(newMode);
@@ -415,7 +439,11 @@ TABS.auxiliary.initialize = function (callback) {
                 if (modeElement.find(' .range').length == 0) {
                     modeElement.toggle(!hideUnused);
                 }
-            }    
+            }
+            
+            $(".modeSection").each(function() {
+                $(this).toggle(!hideUnused);
+            });
         }
 
         let hideUnusedModes = false;