outputs tab preview label motor numbers

iNavFlight · Nov 23, 2024 · 2d685df · 2d685df
1 parent 3c6197d
commit 2d685df
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 2 deletions.
diff --git a/src/css/tabs/motors.css b/src/css/tabs/motors.css
@@ -463,4 +463,17 @@
 
 .tab-motors .config-section .number input {
     margin-right: 4px;
-}
+}
+
+.tab-motors .mixerPreview {
+  position: relative;
+}
+
+.tab-motors .motorNumber {
+    position: absolute;
+    font-size: 1.4em;
+}
+
+.tab-motors .mixer-preview-image-numbers {
+    width: fit-content;
+}
diff --git a/tabs/outputs.html b/tabs/outputs.html
@@ -117,7 +117,11 @@
                 <div class="motors right">
                     <div class="half">
                         <div class="mixerPreview">
-                            <img src="./resources/motor_order/custom.svg" />
+                            <img src="./resources/motor_order/custom.svg" id="motor-mixer-preview-img" />
+                                <div class="motorNumber" id="motorNumber1">1</div>
+                                <div class="motorNumber" id="motorNumber2">2</div>
+                                <div class="motorNumber" id="motorNumber3">3</div>
+                                <div class="motorNumber" id="motorNumber4">4</div>
                         </div>
                     </div>
                     <div class="half">

diff --git a/tabs/outputs.js b/tabs/outputs.js
@@ -501,6 +501,8 @@ TABS.outputs.initialize = function (callback) {
         $motorSliders.append('<div class="motor-slider-container"><input type="range" min="1000" max="2000" value="1000" disabled="disabled" class="master"/></div>');
         $motorValues.append('<li style="font-weight: bold" data-i18n="motorsMaster"></li>');
 
+        labelMotorNumbers();
+
         for (let i = 0; i < FC.SERVO_RULES.getServoCount(); i++) {
 
             let opacity = "";
@@ -717,6 +719,39 @@ TABS.outputs.initialize = function (callback) {
         GUI.content_ready(callback);
     }
 
+   function labelMotorNumbers() {
+        let index = 0;
+        var rules = FC.MOTOR_RULES.get();
+
+        for (const i in rules) {
+            if (rules.hasOwnProperty(i)) {
+                const rule = rules[i];
+                index++;
+
+                /*
+                if (currentMixerPreset.image != 'quad_x') {
+                    $("#motorNumber"+index).css("visibility", "hidden");
+                    continue;
+                }
+                */
+
+                let top_px = 30;
+                let left_px = 28;
+                if (rule.getRoll() < -0.5) {
+                  left_px = $("#motor-mixer-preview-img").width() - 20;
+                }
+
+                if (rule.getPitch() > 0.5) {
+                  top_px = $("#motor-mixer-preview-img").height() - 20;
+                }
+                $("#motorNumber"+index).css("left", left_px + "px");
+                $("#motorNumber"+index).css("top", top_px + "px");
+                $("#motorNumber"+index).css("visibility", "visible");
+            }
+        }
+    }
+
+
 };
 
 TABS.outputs.cleanup = function (callback) {