Merge pull request #1954 from sensei-hacker/motor_direction_ui

mixer: Make props in / props out UI more clear

_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."
     }
-}
+}

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());
             }

tabs/mixer.html

@@ -15,11 +15,26 @@
                                 <span data-i18n="platformType"></span>
                             </label>
                         </div>
-                        <div class="checkbox">
+                        <div class="radio">
-                            <input id="motor_direction_inverted" type="checkbox" class="toggle" data-setting="motor_direction_inverted" />
+                            <fieldset>
-                            <label for="motor_direction_inverted"><span data-i18n="motor_direction_inverted"></span></label>
+                            <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>

tabs/mixer.js

@@ -641,25 +641,17 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
         });
 
         const updateMotorDirection = function () {
-            let motorDirectionCheckbox = $("#motor_direction_inverted");
+            let motorDirectionCheckbox = $('input[name=motor_direction_inverted]:checked');
-            const isReversed = motorDirectionCheckbox.is(":checked") && (MIXER_CONFIG.platformType == PLATFORM_MULTIROTOR || MIXER_CONFIG.platformType == PLATFORM_TRICOPTER);
+            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();