diff --git a/src/css/tabs/motors.css b/src/css/tabs/motors.css index 11048ab49..5d2f00b36 100644 --- 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; -} \ No newline at end of file +} + +.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 index d57cc76d6..64a714762 100644 --- a/tabs/outputs.html +++ b/tabs/outputs.html @@ -117,7 +117,11 @@
- + +
1
+
2
+
3
+
4
diff --git a/tabs/outputs.js b/tabs/outputs.js index d936d18af..c7f259445 100644 --- a/tabs/outputs.js +++ b/tabs/outputs.js @@ -501,6 +501,8 @@ TABS.outputs.initialize = function (callback) { $motorSliders.append('
'); $motorValues.append('
  • '); + 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) {