Add support for editing more OSD settings from the OSD tab

- Voltage decimals
- Crosshairs style
- Sidebar scroll for left and right
- Sidebar scrolling arrows

_locales/en/messages.json

@@ -2593,6 +2593,9 @@
     "osdElement_MC_POS_XYZ_P_OUTPUTS": {
         "message": "MC Position XYZ P controllers outputs"
     },
+    "osdSettingMainVoltageDecimals": {
+        "message": "Main Voltage Decimals"
+    },
     "portColumnSensors": {
         "message": "Sensors"
     },
@@ -2689,6 +2692,9 @@
     "mixerApplyDescription": {
         "message": "This action overrides all current mixer settings and replaces them with default values. There is no 'Undo' option!"
     },
+    "settings": {
+        "message": "Settings"
+    },
     "motorMixer": {
         "message": "Motor Mixer"
     },
@@ -2724,5 +2730,23 @@
     },
     "mappingTableTitle": {
         "message": "Output Mapping"
+    },
+    "NONE": {
+        "message": "None"
+    },
+    "DEFAULT": {
+        "message": "Default"
+    },
+    "AIRCRAFT": {
+        "message": "Aircraft"
+    },
+    "ALTITUDE": {
+        "message": "Altitude"
+    },
+    "GROUND_SPEED": {
+        "message": "Ground Speed"
+    },
+    "HOME_DISTANCE": {
+        "message": "Distance to Home"
     }
 }

gulpfile.js

@@ -83,6 +83,7 @@ sources.js = [
     './js/serial.js',
     './js/servoMixRule.js',
     './js/motorMixRule.js',
+    './js/settings.js',
     './js/outputMapping.js',
     './js/model.js',
     './js/serial_backend.js',

js/msp/MSPHelper.js

@@ -2983,9 +2983,6 @@ var mspHelper = (function (gui) {
                     default:
                         throw "Unknown setting type " + setting.type;
                 }
-                if (setting.table) {
-                    value = setting.table.values[value];
-                }
                 return {setting: setting, value: value};
             });
         });
@@ -2993,7 +2990,7 @@ var mspHelper = (function (gui) {
 
     self.encodeSetting = function (name, value) {
         return this._getSetting(name).then(function (setting) {
-            if (setting.table) {
+            if (setting.table && !Number.isInteger(value)) {
                 var found = false;
                 for (var ii = 0; ii < setting.table.values.length; ii++) {
                     if (setting.table.values[ii] == value) {
@@ -3039,35 +3036,6 @@ var mspHelper = (function (gui) {
         });
     };
 
-    self.configureSettingInputs = function() {
-        var inputs = [];
-        $('input[data-setting!=""][data-setting]').each(function() {
-            inputs.push($(this));
-        });
-        return Promise.mapSeries(inputs, function (input, ii) {
-            var settingName = input.data("setting");
-            return self.getSetting(settingName).then(function (s) {
-                var multiplier = parseFloat(input.data('setting-multiplier') || 1);
-                input.attr("step", 1 / multiplier);
-                input.attr("min", s.setting.min / multiplier);
-                input.attr("max", s.setting.max / multiplier);
-                input.val((s.value / multiplier).toFixed(Math.log10(multiplier)));
-            });
-        });
-    };
-
-    self.saveSettingsInputs = function() {
-        var inputs = [];
-        $('input[data-setting!=""][data-setting]').each(function() {
-            inputs.push($(this));
-        });
-        return Promise.mapSeries(inputs, function (input, ii) {
-            var settingName = input.data("setting");
-            var multiplier = parseFloat(input.data('setting-multiplier') || 1);
-            return self.setSetting(settingName, parseFloat(input.val()) * multiplier);
-        });
-    };
-
     self.getRTC = function (callback) {
         if (semver.gt(CONFIG.flightControllerVersion, "1.7.3")) {
             MSP.send_message(MSPCodes.MSP_RTC, false, false, function (resp) {
@@ -3193,11 +3161,5 @@ var mspHelper = (function (gui) {
         }
     };
 
-    self.processHtml = function(callback) {
-        return function() {
-            self.configureSettingInputs().then(callback);
-        };
-    }
-
     return self;
 })(GUI);

js/settings.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var Settings = (function () {
+    let self = {};
+
+    self.configureInputs = function() {
+        var inputs = [];
+        $('[data-setting!=""][data-setting]').each(function() {
+            inputs.push($(this));
+        });
+        return Promise.mapSeries(inputs, function (input, ii) {
+            var settingName = input.data('setting');
+            return mspHelper.getSetting(settingName).then(function (s) {
+                if (input.prop('tagName') == 'SELECT' || s.setting.table) {
+                    if (input.attr('type') == 'checkbox') {
+                        input.prop('checked', s.value > 0);
+                    } else {
+                        input.empty();
+                        for (var ii = s.setting.min; ii <= s.setting.max; ii++) {
+                            var name = (s.setting.table ? s.setting.table.values[ii] : null);
+                            if (name) {
+                                var localizedName = chrome.i18n.getMessage(name);
+                                if (localizedName) {
+                                    name = localizedName;
+                                }
+                            } else {
+                                // Fallback to the number itself
+                                name = ii;
+                            }
+                            var option = $('<option/>').attr('value', ii).text(name);
+                            if (ii == s.value) {
+                                option.prop('selected', true);
+                            }
+                            option.appendTo(input);
+                        }
+                    }
+                } else if (s.setting.type == 'string') {
+                    input.val(s.value);
+                } else {
+                    var multiplier = parseFloat(input.data('setting-multiplier') || 1);
+                    input.attr('type', 'number');
+                    input.attr('step', 1 / multiplier);
+                    input.attr('min', s.setting.min / multiplier);
+                    input.attr('max', s.setting.max / multiplier);
+                    input.val((s.value / multiplier).toFixed(Math.log10(multiplier)));
+                }
+                input.data('setting-info', s.setting);
+                if (input.data('live')) {
+                    input.change(function() {
+                        self.saveInput(input);
+                    });
+                }
+            });
+        });
+    };
+
+    self.saveInput = function(input) {
+        var settingName = input.data('setting');
+        var setting = input.data('setting-info');
+        var value;
+        if (setting.table) {
+            if (input.attr('type') == 'checkbox') {
+                value = input.prop('checked') ? 1 : 0;
+            } else {
+                value = parseInt(input.val());
+            }
+        } else if(setting.type == 'string') {
+            value = input.val();
+        } else {
+            var multiplier = parseFloat(input.data('setting-multiplier') || 1);
+            value = parseFloat(input.val()) * multiplier;
+        }
+        return mspHelper.setSetting(settingName, value);
+    };
+
+    self.saveInputs = function() {
+        var inputs = [];
+        $('[data-setting!=""][data-setting]').each(function() {
+            inputs.push($(this));
+        });
+        return Promise.mapSeries(inputs, function (input, ii) {
+            return self.saveInput(input);
+        });
+    };
+
+    self.processHtml = function(callback) {
+        return function() {
+            self.configureInputs().then(callback);
+        };
+    };
+
+    self.getInputValue = function(settingName) {
+        return $('[data-setting="' + settingName + '"]').val();
+    };
+
+    return self;
+})();

src/css/tabs/osd.css

@@ -421,7 +421,7 @@ button {
     border-bottom-right-radius: 3px;
 }
 
-.tab-osd .alarms label {
+.tab-osd .settings label {
     display: block;
     width: 100%;
     border-bottom: 1px solid #ddd;
@@ -429,12 +429,12 @@ button {
     padding-bottom: 5px
 }
 
-.tab-osd .alarms label:last-child {
+.tab-osd .settings label:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }
 
-.tab-osd .alarms input {
+.tab-osd .settings input {
     width: 55px;
     padding-left: 3px;
     height: 18px;
@@ -447,6 +447,15 @@ button {
     font-weight: normal;
 }
 
+.tab-osd .settings select {
+    width: 61px;
+    margin-right: 11px;
+}
+
+.tab-osd .settings .switchery {
+    margin-right: 25px;
+}
+
 @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
     .tab-osd .content_wrapper {
         height: calc(100% - 30px);

tabs/osd.html

@@ -54,15 +54,32 @@
                             <div class="video-types"></div>
                         </div>
                     </div>
-                    <div class="gui_box grey units-container" style="display:none;">
+                    <div class="gui_box grey settings-container">
                         <div class="gui_box_titlebar">
-                            <div class="spacer_box_title">Units
+                            <div class="spacer_box_title" data-i18n="settings">
                             </div>
                         </div>
                         <div class="spacer_box">
-                            <div class="units">
+                            <div class="settings">
-                                <div class="helpicon cf_tip"></div>
+                                <label class="units">
-                                <select name="unit_mode"></select>
+                                    <select id="unit_mode" name="unit_mode"></select> Units
+                                    <div class="helpicon cf_tip" style="margin-top: 2px"></div>
+                                </label>
+                                <label>
+                                    <select class="update_preview" data-setting="osd_main_voltage_decimals" data-live="true"></select> Voltage Decimals
+                                </label>
+                                <label>
+                                    <select class="update_preview" data-setting="osd_crosshairs_style" data-live="true"></select> Crosshairs Style
+                                </label>
+                                <label>
+                                    <select class="update_preview" data-setting="osd_left_sidebar_scroll" data-live="true"></select> Left Sidebar Scroll
+                                </label>
+                                <label>
+                                    <select class="update_preview" data-setting="osd_right_sidebar_scroll" data-live="true"></select> Right Sidebar Scroll
+                                </label>
+                                <label>
+                                    <input type="checkbox" class="toggle update_preview" data-setting="osd_sidebar_scroll_arrows" data-live="true"> Sidebar Scroll Arrows
+                                </label>
                             </div>
                         </div>
                     </div>
@@ -73,26 +90,7 @@
                             </div>
                         </div>
                         <div class="spacer_box">
-                            <div class="alarms"></div>
+                            <div class="settings"></div>
-                        </div>
-                    </div>
-                    <div class="gui_box grey" style="display:none;">
-                        <div class="gui_box_titlebar">
-                            <div class="spacer_box_title">VTX
-                                Settings
-                            </div>
-                        </div>
-                        <div class="spacer_box">
-                            <div class="vtx-settings"></div>
-                        </div>
-                    </div>
-                    <div class="gui_box grey" style="display:none;">
-                        <div class="gui_box_titlebar">
-                            <div class="spacer_box_title">Craft Name
-                            </div>
-                        </div>
-                        <div class="spacer_box">
-                            <div class="callsign"></div>
                         </div>
                     </div>
                 </div>

tabs/osd.js

@@ -59,6 +59,11 @@ SYM.FT_S = 153;
 SYM.CLOCK = 0xBC;
 SYM.ZERO_HALF_TRAILING_DOT = 192;
 SYM.ZERO_HALF_LEADING_DOT = 208;
+SYM.AH_AIRCRAFT0 = 218;
+SYM.AH_AIRCRAFT1 = 219;
+SYM.AH_AIRCRAFT2 = 220;
+SYM.AH_AIRCRAFT3 = 221;
+SYM.AH_AIRCRAFT4 = 222;
 SYM.ROLL_LEFT = 0xCC;
 SYM.ROLL_LEVEL = 0xCD;
 SYM.ROLL_RIGHT = 0xCE;
@@ -309,6 +314,15 @@ function altitude_alarm_display_function(fn) {
     }
 }
 
+function osdMainBatteryPreview() {
+    var s = '16.8';
+    if (Settings.getInputValue('osd_main_voltage_decimals') == 2) {
+        s += '3';
+    }
+    s += 'V';
+    return FONT.symbol(SYM.VOLT) + FONT.embed_dot(s);
+}
+
 // parsed fc output and output to fc, used by to OSD.msp.encode
 OSD.initData = function () {
     OSD.data = {
@@ -440,13 +454,13 @@ OSD.constants = {
                 {
                     name: 'MAIN_BATT_VOLTAGE',
                     id: 1,
-                    preview: FONT.symbol(SYM.VOLT) + FONT.embed_dot('16.8V')
+                    preview: osdMainBatteryPreview,
                 },
                 {
                     name: 'SAG_COMP_MAIN_BATT_VOLTAGE',
                     id: 53,
                     min_version: '2.0.0',
-                    preview: FONT.symbol(SYM.VOLT) + FONT.embed_dot('16.8V')
+                    preview: osdMainBatteryPreview,
                 },
                 {
                     name: 'MAIN_BATT_CELL_VOLTAGE',
@@ -648,13 +662,17 @@ OSD.constants = {
                     name: 'PITCH_ANGLE',
                     id: 41,
                     min_version: '2.0.0',
-                    preview: FONT.symbol(SYM.PITCH_UP) + ' 2'
+                    preview: function () {
+                        return FONT.symbol(SYM.PITCH_UP) + FONT.embed_dot(' 1.5');
+                    },
                 },
                 {
                     name: 'ROLL_ANGLE',
                     id: 42,
                     min_version: '2.0.0',
-                    preview: FONT.symbol(SYM.ROLL_LEFT) + ' 5'
+                    preview: function () {
+                        return FONT.symbol(SYM.ROLL_LEFT) + FONT.embed_dot('31.4');
+                    },
                 },
             ]
         },
@@ -1462,11 +1480,9 @@ OSD.GUI.updateVideoMode = function() {
 
 OSD.GUI.updateUnits = function() {
     // units
-    var $unitMode = $('.units select').empty();
+    var $unitMode = $('#unit_mode').empty();
-
-    $('.units-container').show();
-    $unitMode.empty();
     var $unitTip = $('.units .cf_tip');
+
     for (var i = 0; i < OSD.constants.UNIT_TYPES.length; i++) {
         var unitType = OSD.constants.UNIT_TYPES[i];
         if (unitType.min_version && semver.lt(CONFIG.flightControllerVersion, unitType.min_version)) {
@@ -1476,32 +1492,37 @@ OSD.GUI.updateUnits = function() {
         var $option = $('<option>' + name + '</option>');
         $option.attr('value', name);
         $option.data('type', unitType.value);
-        var tip = null;
+        if (OSD.data.preferences.units === unitType.value) {
+            $option.prop('selected', true);
+        }
+        $unitMode.append($option);
+    }
+    function updateUnitHelp() {
+        var unitType = OSD.constants.UNIT_TYPES[OSD.data.preferences.units];
+        var tip;
         if (unitType.tip) {
             tip = chrome.i18n.getMessage(unitType.tip);
         }
-        if (OSD.data.preferences.units === unitType.value) {
+        if (tip) {
-            $option.prop('selected', true);
+            $unitTip.attr('title', tip);
-            if (unitType.tip) {
-                $unitTip.attr('title', chrome.i18n.getMessage(unitType.tip));
             $unitTip.fadeIn();
         } else {
             $unitTip.fadeOut();
         }
     }
-        $unitMode.append($option);
+    updateUnitHelp();
-    }
     $unitMode.change(function (e) {
         var selected = $(this).find(':selected');
         OSD.data.preferences.units = selected.data('type');
         OSD.GUI.saveConfig();
+        updateUnitHelp();
     });
 };
 
 OSD.GUI.updateAlarms = function() {
     // alarms
     $('.alarms-container').show();
-    var $alarms = $('.alarms').empty();
+    var $alarms = $('.alarms-container .settings').empty();
     for (var kk = 0; kk < OSD.constants.ALL_ALARMS.length; kk++) {
         var alarm = OSD.constants.ALL_ALARMS[kk];
         var value = OSD.data.alarms[alarm.field];
@@ -1785,10 +1806,20 @@ OSD.GUI.updatePreviews = function() {
 
     // crosshairs
     if ($('input[name="CROSSHAIRS"]').prop('checked')) {
+        if (Settings.getInputValue('osd_crosshairs_style') == 1) {
+            // AIRCRAFT style
+            OSD.GUI.checkAndProcessSymbolPosition(centerishPosition - 2, SYM.AH_AIRCRAFT0);
+            OSD.GUI.checkAndProcessSymbolPosition(centerishPosition - 1, SYM.AH_AIRCRAFT1);
+            OSD.GUI.checkAndProcessSymbolPosition(centerishPosition, SYM.AH_AIRCRAFT2);
+            OSD.GUI.checkAndProcessSymbolPosition(centerishPosition + 1, SYM.AH_AIRCRAFT3);
+            OSD.GUI.checkAndProcessSymbolPosition(centerishPosition + 2, SYM.AH_AIRCRAFT4);
+        } else {
+            // DEFAULT or unknown style
             OSD.GUI.checkAndProcessSymbolPosition(centerishPosition - 1, SYM.AH_CENTER_LINE);
             OSD.GUI.checkAndProcessSymbolPosition(centerishPosition + 1, SYM.AH_CENTER_LINE_RIGHT);
             OSD.GUI.checkAndProcessSymbolPosition(centerishPosition, SYM.AH_CENTER);
         }
+    }
 
     // sidebars
     if ($('input[name="HORIZON_SIDEBARS"]').prop('checked')) {
@@ -1905,7 +1936,7 @@ TABS.osd.initialize = function (callback) {
         GUI.active_tab = 'osd';
     }
 
-    $('#content').load("./tabs/osd.html", function () {
+    $('#content').load("./tabs/osd.html", Settings.processHtml(function () {
         // translate to user-selected language
         localize();
 
@@ -2033,12 +2064,25 @@ TABS.osd.initialize = function (callback) {
             }
         });
 
+        $('.update_preview').on('change', function () {
+            if (OSD.data) {
+                // Force an OSD redraw by saving any element
+                // with a small delay, to make sure the setting
+                // change is performance before the OSD starts
+                // the full redraw.
+                // This will also update all previews
+                setTimeout(function() {
+                    OSD.GUI.saveItem({id: 0});
+                }, 100);
+            }
+        });
+
         // Update SENSOR_CONFIG, used to detect
         // OSD_AIR_SPEED
         mspHelper.loadSensorConfig(function () {
             GUI.content_ready(callback);
         });
-    });
+    }));
 };
 
 TABS.osd.cleanup = function (callback) {

tabs/pid_tuning.js

@@ -33,7 +33,7 @@ TABS.pid_tuning.initialize = function (callback) {
     }
 
     function load_html() {
-        $('#content').load("./tabs/pid_tuning.html", mspHelper.processHtml(process_html));
+        $('#content').load("./tabs/pid_tuning.html", Settings.processHtml(process_html));
     }
 
     function pid_and_rc_to_form() {
@@ -247,7 +247,7 @@ TABS.pid_tuning.initialize = function (callback) {
             }
 
             function saveSettings() {
-                mspHelper.saveSettingsInputs().then(save_to_eeprom);
+                Settings.saveInputs().then(save_to_eeprom);
             }
 
             function save_to_eeprom() {