Fix gyro enable box (#4611)

Author: haslinghuis

locales/en/messages.json

@@ -1501,6 +1501,9 @@
     "configurationGyroActiveIMU": {
         "message": "Active IMU"
     },
+    "configurationGyroActiveIMUHelp": {
+        "message": "Select which gyro to use as the primary gyro. The primary gyro is used for stabilization and control. If you have only one gyro, it will be selected automatically.<br><br>It is not always possible to enable multiple gyros, when they are of different types or brands."
+    },
     "configurationGyroAlignmentRoll": {
         "message": "$t(configurationBoardAlignmentRoll.message)",
         "description": "Don't translate!!!"

src/js/tabs/configuration.js

@@ -240,10 +240,8 @@ configuration.initialize = function (callback) {
 
         // Multi gyro handling for newer firmware
         if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
-            // Hide unused legacy elements
-            $(".gyro_alignment_inputs_selection").hide();
-            $(".gyro_alignment_inputs_first").hide();
-            $(".gyro_alignment_inputs_second").hide();
+            // Hide deprecated gyro_box
+            $(".tab-configuration .gyro_box").parent().hide();
 
             // Define gyro detection flags
             const GYRO_DETECTION_FLAGS = { DETECTED_DUAL_GYROS: 1 << 7 };
@@ -264,23 +262,10 @@ configuration.initialize = function (callback) {
                 FC.SENSOR_ALIGNMENT.gyro_enable_mask = 1;
             }
 
-            // Use the specific gyro container (not the general sensor_align_content)
-            const gyroContainer = $(".sensor_align_content .gyro_align_box");
-            // Clear any existing content in the gyro container
-            gyroContainer.empty();
-
             if (gyroCount > 1) {
                 // Track which gyros are detected
                 const detected_gyros = [];
 
-                $(".tab-configuration .gyro_box .spacer_box_title")
-                    .attr("i18n", "configurationGyroActiveIMU")
-                    .removeClass("i18n-replaced");
-                i18n.localizePage(); // Update the title text
-
-                // Make the gyro container visible
-                gyroContainer.show();
-
                 function createGyroBox(gyroIndex, container) {
                     // Create a new gyro alignment div
                     const gyroBox = $(`<div id="gyro_box_${gyroIndex + 1}"></div>`);
@@ -340,17 +325,20 @@ configuration.initialize = function (callback) {
 
                     // If gyro is detected, create UI for it
                     if (detected_gyros[i]) {
-                        createGyroBox(i, gyroContainer);
+                        createGyroBox(i, $(".tab-configuration .gyro_enable_configuration"));
                     }
                 }
 
                 // Only show not found message if no gyros are detected
-                $(".gyro_alignment_inputs_notfound").toggle(!detected_gyros.some((detected) => detected));
+                $(".gyro_notfound").toggle(!detected_gyros.some((detected) => detected));
             } else {
                 // Hide the gyro container if not needed
-                $(".tab-configuration .gyro_box").parent().hide();
+                $(".tab-configuration .gyro_enable_box").parent().hide();
             }
         } else {
+            // Hide the gyro enable box introduced in 1.47
+            $(".tab-configuration .gyro_enable_box").parent().hide();
+
             // Original code for older firmware versions remains unchanged
             const orientation_gyro_to_use_e = $("select.gyro_to_use");
             const orientation_gyro_1_align_e = $("select.gyro_1_align");

src/tabs/configuration.html

@@ -185,7 +185,8 @@
                     </div>
                 </div>
                 <!-- END BOARD ALIGNMENT -->
-                <!-- GYRO ALIGNMENT -->
+
+                <!-- GYRO ALIGNMENT - DEPRECATED -->
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar gyro_box">
                         <div class="spacer_box_title" i18n="configurationGyroAlignment"></div>
@@ -229,6 +230,26 @@
                     </div>
                 </div>
                 <!-- END GYRO ALIGNMENT -->
+
+                <!-- GYRO ENABLE INTRODUCED 1.47 -->
+                <div class="gui_box grey">
+                    <div class="gui_box_titlebar gyro_enable_box">
+                        <div class="spacer_box_title" i18n="configurationGyroActiveIMU"></div>
+                        <div class="helpicon cf_tip" i18n_title="configurationGyroActiveIMUHelp"></div>
+                    </div>
+                    <div class="spacer_box">
+                        <table>
+                            <tbody class="gyro_enable_configuration" id="noline">
+                                <!-- table generated here -->
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="gyro_notfound">
+                        <span class="message-negative" i18n="configurationSensorGyroToUseNotFound"></span>
+                    </div>
+                </div>
+                <!-- END GYRO ENABLE -->
+
                 <!-- MAGNETOMETER ALIGNMENT -->
                 <div class="gui_box grey mag_align_box">
                     <div class="gui_box_titlebar">