Add info overlay about gyro status over model view (#4358)

Many people don't realised about the arming flags, this PR aims
to make more clear the arming flags related to the gyro status.

It read the arming flag about NO-GYRO and CALIBRATION to overlay
on the model view a message informing about the status.

Co-authored-by: jesuslopezxing <jesus.lopez@onlyfy.com>

locales/en/messages.json

@@ -7618,5 +7618,17 @@
     "programmingFailedNotification": {
         "message": "FC programming failed",
         "description": "Notification message when programming is unsuccessful"
+    },
+    "accCalibratingMessageText": {
+        "message": "Calibrating accelerometer"
+    },
+    "accCalibratingDescriptionText": {
+        "message": "Place the drone on a flat surface and wait for the calibration to complete."
+    },
+    "gyroErroredText": {
+        "message": "No Gyro"
+    },
+    "gyroErroredDescriptionText": {
+        "message": "Gyro has not been detected."
     }
 }

src/css/main.less

@@ -1832,6 +1832,9 @@ each(range(12), {
         shape-rendering: crispEdges;
     }
 }
+.blur {
+    filter: blur(3px);
+}
 @media not all and (max-width: 575px) {
     .visible-on-phone-only {
         display: none !important;

src/css/tabs/setup.less

@@ -167,3 +167,21 @@
 .disarm-flag {
     padding-left: 5px;
 }
+
+#model-and-info-container {
+    position: relative;
+
+    .overlay-status {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 1;
+        text-align: center;
+
+        .status-message {
+            font-weight: bold;
+            font-size: 2.1rem;
+        }
+    }
+}

src/js/tabs/setup.js

@@ -497,6 +497,8 @@ setup.initialize = function (callback) {
                 );
             }
 
+            setup.updateGyroStatus(FC.CONFIG.armingDisableFlags);
+
             // System info is acquired in the background using update_live_status() in serial_backend.js
 
             bat_voltage_e.text(i18n.getMessage("initialSetupBatteryValue", [FC.ANALOG.voltage]));
@@ -604,6 +606,34 @@ setup.refresh = function () {
     });
 };
 
+setup.updateGyroStatus = function (armingDisableFlags) {
+    const NO_GYRO_BIT = 0; // Position of NO_GYRO flag
+    const CALIBRATING_BIT = 12; // Position of CALIBRATING flag
+    const ACC_CALIBRATION_BIT = 23; // Position of ACC_CALIBRATION flag
+
+    const hasNoGyro = armingDisableFlags & (1 << NO_GYRO_BIT);
+    const isCalibrating =
+        armingDisableFlags & (1 << CALIBRATING_BIT) || armingDisableFlags & (1 << ACC_CALIBRATION_BIT);
+
+    const hasGyroIssue = hasNoGyro || isCalibrating;
+
+    if (hasGyroIssue) {
+        // Show appropriate text based on the issue
+        $(".overlay-status .status-message").text(
+            i18n.getMessage(hasNoGyro ? "gyroErroredText" : "accCalibratingMessageText"),
+        );
+        $(".overlay-status .status-description").text(
+            i18n.getMessage(hasNoGyro ? "gyroErroredDescriptionText" : "accCalibratingDescriptionText"),
+        );
+
+        $("#interactive_block").addClass("blur");
+        $(".overlay-status").show();
+    } else {
+        $(".overlay-status").hide();
+        $("#interactive_block").removeClass("blur");
+    }
+};
+
 TABS.setup = setup;
 
 export { setup };

src/tabs/setup.html

@@ -70,21 +70,29 @@
         <div class="modelwrapper"></div>
         <div class="grid-row grid-box col4">
             <div class="col-span-3 model-and-info">
-                <div id="interactive_block">
+                <div id="model-and-info-container">
-                    <div id="canvas_wrapper" class="background_paper">
+                    <div class="overlay-status">
-                        <canvas id="canvas"></canvas>
+                        <p class="status-message"
-                        <div class="attitude_info">
+                            i18n="accCalibratingMessageText"></p>
-                            <dl>
+                        <p class="status-description"
-                                <dt i18n="initialSetupHeading"></dt>
+                            i18n="accCalibratingDescriptionText"></p>
-                                <dd class="heading">&nbsp;</dd>
+                    </div>
-                                <dt i18n="initialSetupPitch"></dt>
+                    <div id="interactive_block">
-                                <dd class="pitch">&nbsp;</dd>
+                        <div id="canvas_wrapper" class="background_paper">
-                                <dt i18n="initialSetupRoll"></dt>
+                            <canvas id="canvas"></canvas>
-                                <dd class="roll">&nbsp;</dd>
+                            <div class="attitude_info">
-                            </dl>
+                                <dl>
-                        </div>
+                                    <dt i18n="initialSetupHeading"></dt>
+                                    <dd class="heading">&nbsp;</dd>
+                                    <dt i18n="initialSetupPitch"></dt>
+                                    <dd class="pitch">&nbsp;</dd>
+                                    <dt i18n="initialSetupRoll"></dt>
+                                    <dd class="roll">&nbsp;</dd>
+                                </dl>
+                            </div>
+                        </div>
+                        <a class="reset sm-min" href="#" i18n="initialSetupButtonResetZaxis"></a>
                     </div>
-                    <a class="reset sm-min" href="#" i18n="initialSetupButtonResetZaxis"></a>
                 </div>
             </div>
             <div class="col-span-1 grid-box col1">