Merge pull request #2263 from sensei-hacker/outputs_preview_motor_numbers

Author: MrD-RC

src/css/tabs/motors.css

@@ -463,4 +463,18 @@
 
 .tab-motors .config-section .number input {
     margin-right: 4px;
-}
+}
+
+.tab-motors .mixerPreview {
+  position: relative;
+}
+
+.tab-motors .motorNumber {
+    position: absolute;
+    font-size: 1.4em;
+    visibility: hidden;
+}
+
+.tab-motors .mixer-preview-image-numbers {
+    width: fit-content;
+}

tabs/mixer.js

@@ -476,6 +476,7 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
                 $("#motorNumber"+index).css("left", left_px + "px");
                 $("#motorNumber"+index).css("top", top_px + "px");
                 $("#motorNumber"+index).removeClass("is-hidden");
+                $("#motorNumber"+index).css("visibility", "visible");
             }
         }
     }
@@ -544,7 +545,7 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
             }
 
         }
-        labelMotorNumbers();
+       labelMotorNumbers();
        i18n.localize();;
     }
 
@@ -610,7 +611,6 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
                 }
 
             }
-
             return (errorCount == 0);
         }
 
@@ -661,7 +661,6 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
             const path = './resources/motor_order/'
                 + currentMixerPreset.image + (isReversed ? "_reverse" : "") + '.svg';
             $('.mixerPreview img').attr('src', path);
-
             renderServoOutputImage();
         };
 

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">

tabs/outputs.js

@@ -257,6 +257,7 @@ TABS.outputs.initialize = function (callback) {
         const path = './resources/motor_order/'
             + mixer.getById(val).image + (isReversed ? "_reverse" : "") + '.svg';
         $('.mixerPreview img').attr('src', path);
+        labelMotorNumbers();
     }
 
     function process_servos() {
@@ -717,6 +718,38 @@ TABS.outputs.initialize = function (callback) {
         GUI.content_ready(callback);
     }
 
+   function labelMotorNumbers() {
+
+       if (mixer.getById(FC.MIXER_CONFIG.appliedMixerPreset).image != 'quad_x') {
+           return;
+       }
+
+
+        let index = 0;
+        var rules = FC.MOTOR_RULES.get();
+
+        for (const i in rules) {
+            if (rules.hasOwnProperty(i)) {
+                const rule = rules[i];
+                index++;
+
+                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) {