Merge pull request #1954 from sensei-hacker/motor_direction_ui

mixer: Make props in / props out UI more clear
iNavFlight · Feb 2, 2024 · f443051 · f443051
2 parents 61fac35 + 1d31eb8
commit f443051
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -4896,10 +4896,10 @@
         "message": "Illegal state. Restart required."
     },
     "motor_direction_inverted": {
-        "message": "Normal motor direction / Props In configuration"
+        "message": "Normal motor direction / Props-in configuration"
     },
     "motor_direction_isInverted": {
-        "message": "Reversed motor direction / Props Out configuration"
+        "message": "Reversed motor direction / Props-out configuration"
     },
     "motor_direction_inverted_hint": {
         "message": "Enable if the motor direction is reversed and the props are mounted in the opposite direction."
@@ -5592,4 +5592,4 @@
     "ezTuneNote": {
         "message": "<strong>Important</strong> Ez Tune is enabled. All settings on this tab are set and controlled by the Ez Tune. To use PID Tuning tab you have to disable Ez Tune. To do it, uncheck the <strong>Enabled</strong> checkbox on the Ez Tune tab."
     }
-}
+}
diff --git a/js/settings.js b/js/settings.js
@@ -61,6 +61,8 @@ var Settings = (function () {
                 if (input.prop('tagName') == 'SELECT' || s.setting.table) {
                     if (input.attr('type') == 'checkbox') {
                         input.prop('checked', s.value > 0);
+                    } else if (input.attr('type') == 'radio') {
+                        input.prop( 'checked', s.value == input.attr('value') );
                     } else {
                         input.empty();
                         let option = null;
@@ -515,6 +517,10 @@ var Settings = (function () {
         if (setting.table) {
             if (input.attr('type') == 'checkbox') {
                 value = input.prop('checked') ? 1 : 0;
+            } else if (input.attr('type') == 'radio') {
+                if (input.prop('checked')) {
+                    value = parseInt(input.val());
+                }
             } else {
                 value = parseInt(input.val());
             }

diff --git a/tabs/mixer.html b/tabs/mixer.html
@@ -15,11 +15,26 @@
                                 <span data-i18n="platformType"></span>
                             </label>
                         </div>
-                        <div class="checkbox">
-                            <input id="motor_direction_inverted" type="checkbox" class="toggle" data-setting="motor_direction_inverted" />
-                            <label for="motor_direction_inverted"><span data-i18n="motor_direction_inverted"></span></label>
+                        <div class="radio">
+                            <fieldset>
+                            <legend>Motor direction</legend>
+                            <label for="motor_direction_normal">
+                                <input id="motor_direction_normal" name="motor_direction_inverted" type="radio"
+                                        value="0" data-setting="motor_direction_inverted" class="left" />
+                                <span data-i18n="motor_direction_inverted"></span>
+                            </label><br class="clear-both"/>
+
+                            <label class="checkbox-inline">
+                                <input id="motor_direction_inverted" name="motor_direction_inverted" type="radio"
+                                        value="1" data-setting="motor_direction_inverted" class="left"/>
+                                <span data-i18n="motor_direction_isInverted"></span>
+                            </span></label>
+
                             <div class="helpicon cf_tip" data-i18n_title="motor_direction_inverted_hint"></div>
+                          </fieldset>
                         </div>
+
+
                         <div class="checkbox">
                             <input id="mixer_pid_profile_linking" type="checkbox" class="toggle" data-setting="mixer_pid_profile_linking" />
                             <label for="mixer_pid_profile_linking"><span data-i18n="mixer_pid_profile_linking"></span></label>

diff --git a/tabs/mixer.js b/tabs/mixer.js
@@ -641,25 +641,17 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
         });
 
         const updateMotorDirection = function () {
-            let motorDirectionCheckbox = $("#motor_direction_inverted");
-            const isReversed = motorDirectionCheckbox.is(":checked") && (MIXER_CONFIG.platformType == PLATFORM_MULTIROTOR || MIXER_CONFIG.platformType == PLATFORM_TRICOPTER);
+            let motorDirectionCheckbox = $('input[name=motor_direction_inverted]:checked');
+            const isReversed = motorDirectionCheckbox.val() == 1 && (MIXER_CONFIG.platformType == PLATFORM_MULTIROTOR || MIXER_CONFIG.platformType == PLATFORM_TRICOPTER);
 
             const path = './resources/motor_order/'
                 + currentMixerPreset.image + (isReversed ? "_reverse" : "") + '.svg';
             $('.mixerPreview img').attr('src', path);
 
-            if (MIXER_CONFIG.platformType == PLATFORM_MULTIROTOR || MIXER_CONFIG.platformType == PLATFORM_TRICOPTER) {
-                if (isReversed) {
-                    motorDirectionCheckbox.parent().find("label span").html(chrome.i18n.getMessage("motor_direction_isInverted"));
-                } else {
-                    motorDirectionCheckbox.parent().find("label span").html(chrome.i18n.getMessage("motor_direction_inverted"));
-                }
-            }
-
             renderServoOutputImage();
         };
 
-        $("#motor_direction_inverted").change(updateMotorDirection);
+        $("input[name=motor_direction_inverted]").change(updateMotorDirection);
 
         $platformSelect.find("*").remove();