Merge branch 'master' of https://github.com/iNavFlight/inav-configurator into Geozones

README.md

@@ -130,6 +130,13 @@ INAV Configurator is shipped **WITHOUT** API key for Bing Maps. That means: ever
 
 ### How to get the Bing Maps API key
 
+> On May 21, 2024 Microsoft announced that Bing Maps for Enterprise is deprecated and will be retired. Starting from that date
+> new users are unable to get api keys in Bing Maps Dev Center. 
+> 
+> Enterprise account customers can continue to use Bing Maps for Enterprise services until **June 30th, 2028**.
+> 
+> Free (Basic) account customers can continue to use Bing Maps for Enterprise services until **June 30th, 2025**.
+
 1. Go to the Bing Maps Dev Center at [https://www.bingmapsportal.com/](https://www.bingmapsportal.com/).
     * If you have a Bing Maps account, sign in with the Microsoft account that you used to create the account or create a new one. For new accounts, follow the instructions in [Creating a Bing Maps Account](https://msdn.microsoft.com/library/gg650598.aspx).
 1. Select **My keys** under **My Account**.

js/configurator_main.js

@@ -532,7 +532,7 @@ $(function() {
         mixerprofile_e.on('change', function () {
             var mixerprofile = parseInt($(this).val());
             MSP.send_message(MSPCodes.MSP2_INAV_SELECT_MIXER_PROFILE, [mixerprofile], false, function () {
-                GUI.log(i18n.getMessage('loadedMixerProfile', [mixerprofile + 1]));
+                GUI.log(i18n.getMessage('setMixerProfile', [mixerprofile + 1]));
                 MSP.send_message(MSPCodes.MSP_SET_REBOOT, false, false, function () {
                     GUI.log(i18n.getMessage('deviceRebooting'));
                     GUI.handleReconnect();
@@ -545,7 +545,7 @@ $(function() {
         profile_e.on('change', function () {
             var profile = parseInt($(this).val());
             MSP.send_message(MSPCodes.MSP_SELECT_SETTING, [profile], false, function () {
-                GUI.log(i18n.getMessage('pidTuning_LoadedProfile', [profile + 1]));
+                GUI.log(i18n.getMessage('setControlProfile', [profile + 1]));
             });
         });
 
@@ -554,7 +554,7 @@ $(function() {
         batteryprofile_e.on('change', function () {
             var batteryprofile = parseInt($(this).val());
             MSP.send_message(MSPCodes.MSP2_INAV_SELECT_BATTERY_PROFILE, [batteryprofile], false, function () {
-                GUI.log(i18n.getMessage('loadedBatteryProfile', [batteryprofile + 1]));
+                GUI.log(i18n.getMessage('setBatteryProfile', [batteryprofile + 1]));
             });
         });
 

js/defaults_dialog.js

@@ -163,6 +163,7 @@ var defaultsDialog = (function () {
     };
 
     privateScope.reboot = function () {
+        periodicStatusUpdater.resume();
 
         GUI.tab_switch_cleanup(function () {
             MSP.send_message(MSPCodes.MSP_SET_REBOOT, false, false, function () {
@@ -177,7 +178,6 @@ var defaultsDialog = (function () {
     };
 
     privateScope.finalize = function (selectedDefaultPreset) {
-
         if (selectedDefaultPreset.wizardPages) {
             privateScope.wizard(selectedDefaultPreset, 0);
         } else {
@@ -221,9 +221,10 @@ var defaultsDialog = (function () {
             });
         });
 
-        
+        // Set control and battery parameters on all 3 profiles
+        for (let profileIdx = 0; profileIdx < 3; profileIdx++){
             chain.push(function (callback) {
-            MSP.send_message(MSPCodes.MSP_SELECT_SETTING, [0], false, callback);
+                MSP.send_message(MSPCodes.MSP_SELECT_SETTING, [profileIdx], false, callback);
             });
             controlProfileSettings.forEach(input => {
                 chain.push(function (callback) {
@@ -232,49 +233,14 @@ var defaultsDialog = (function () {
             });
 
             chain.push(function (callback) {
-            MSP.send_message(MSPCodes.MSP_SELECT_SETTING, [1], false, callback);
+                MSP.send_message(MSPCodes.MSP2_INAV_SELECT_BATTERY_PROFILE, [profileIdx], false, callback);
-        });
-        controlProfileSettings.forEach(input => {
-            chain.push(function (callback) {
-                mspHelper.setSetting(input.key, input.value, callback);
-            });
-        });
-
-        chain.push(function (callback) {
-            MSP.send_message(MSPCodes.MSP_SELECT_SETTING, [2], false, callback);
-        });
-        controlProfileSettings.forEach(input => {
-            chain.push(function (callback) {
-                mspHelper.setSetting(input.key, input.value, callback);
-            });
-        });    
-
-        chain.push(function (callback) {
-            MSP.send_message(MSPCodes.MSP2_INAV_SELECT_BATTERY_PROFILE, [0], false, callback);
-        });
-        batterySettings.forEach(input => {
-            chain.push(function (callback) {
-                mspHelper.setSetting(input.key, input.value, callback);
-            });
-        });
-
-        chain.push(function (callback) {
-            MSP.send_message(MSPCodes.MSP2_INAV_SELECT_BATTERY_PROFILE, [1], false, callback);
-        });
-        batterySettings.forEach(input => {
-            chain.push(function (callback) {
-                mspHelper.setSetting(input.key, input.value, callback);
-            });
-        });
-
-        chain.push(function (callback) {
-            MSP.send_message(MSPCodes.MSP2_INAV_SELECT_BATTERY_PROFILE, [2], false, callback);
             });
             batterySettings.forEach(input => {
                 chain.push(function (callback) {
                     mspHelper.setSetting(input.key, input.value, callback);
                 });
             });
+        }
         
         // Set Mixers
         if (selectedDefaultPreset.mixerToApply) {

js/fc.js

@@ -602,7 +602,7 @@ var FC = {
         this.GEOZONES = new GeozoneCollection();
 
         this.OSD_CUSTOM_ELEMENTS = {
-           settings: {customElementsCount: 0, customElementTextSize: 0},
+           settings: {customElementsCount: 0, customElementTextSize: 0, customElementParts: 0},
            items: [],
         };
 

js/gui.js

@@ -1,7 +1,6 @@
 'use strict';
 const { dialog } = require("@electron/remote");
 
-
 const CONFIGURATOR = require('./data_storage');
 const Switchery = require('./libraries/switchery/switchery')
 const MSP = require('./msp');
@@ -55,6 +54,12 @@ var GUI_control = function () {
     ];
     this.allowedTabs = this.defaultAllowedTabsWhenDisconnected;
 
+    this.PROFILES_CHANGED = {
+        'CONTROL' : 1,
+        'BATTERY' : 2,
+        'MIXER'   : 4
+    };
+
     // check which operating system is user running
     if (navigator.appVersion.indexOf("Win") != -1)          this.operating_system = "Windows";
     else if (navigator.appVersion.indexOf("Mac") != -1)     this.operating_system = "MacOS";
@@ -263,10 +268,16 @@ GUI_control.prototype.updateProfileChange = function(refresh) {
     $('#mixerprofilechange').val(FC.CONFIG.mixer_profile);
     $('#profilechange').val(FC.CONFIG.profile);
     $('#batteryprofilechange').val(FC.CONFIG.battery_profile);
-    if (refresh) {
+    if (refresh > 0) {
-        GUI.log(i18n.getMessage('loadedMixerProfile', [FC.CONFIG.mixer_profile + 1]));
+        if (refresh & GUI.PROFILES_CHANGED.CONTROL) {
             GUI.log(i18n.getMessage('pidTuning_LoadedProfile', [FC.CONFIG.profile + 1]));
+        }
+        if (refresh & GUI.PROFILES_CHANGED.MIXER) {
+            GUI.log(i18n.getMessage('loadedMixerProfile', [FC.CONFIG.mixer_profile + 1]));
+        }
+        if (refresh & GUI.PROFILES_CHANGED.BATTERY) {
             GUI.log(i18n.getMessage('loadedBatteryProfile', [FC.CONFIG.battery_profile + 1]));
+        }
         GUI.updateActivatedTab();
     }
 };

js/localization.js

@@ -10,7 +10,7 @@ const i18nextXHRBackend = require('i18next-xhr-backend');
 const Store = require('electron-store');
 const store = new Store();
 
-const availableLanguages = ['en'];
+const availableLanguages = ['en', 'uk'];
 
 const i18n = {};
   

js/msp/MSPCodes.js

@@ -238,7 +238,8 @@ var MSPCodes = {
     MSP2_ADSB_VEHICLE_LIST:             0x2090,
 
     MSP2_INAV_CUSTOM_OSD_ELEMENTS:      0x2100,
-    MSP2_INAV_SET_CUSTOM_OSD_ELEMENTS:  0x2101,
+    MSP2_INAV_CUSTOM_OSD_ELEMENT:       0x2101,
+    MSP2_INAV_SET_CUSTOM_OSD_ELEMENTS:  0x2102,
 
     MSP2_INAV_SERVO_CONFIG:             0x2200,
     MSP2_INAV_SET_SERVO_CONFIG:         0x2201,

js/msp/MSPHelper.js

@@ -74,7 +74,7 @@ var mspHelper = (function () {
             color;
         if (!dataHandler.unsupported || dataHandler.unsupported) switch (dataHandler.code) {
             case MSPCodes.MSPV2_INAV_STATUS:
-                let profile_changed = false;
+                let profile_changed = 0;
                 FC.CONFIG.cycleTime = data.getUint16(offset, true);
                 offset += 2;
                 FC.CONFIG.i2cError = data.getUint16(offset, true);
@@ -86,11 +86,15 @@ var mspHelper = (function () {
 
                 let profile_byte = data.getUint8(offset++)
                 let profile = profile_byte & 0x0F;
-                profile_changed |= (profile !== FC.CONFIG.profile) && (FC.CONFIG.profile !==-1);
+                if (profile !== FC.CONFIG.profile) {
+                    profile_changed |= GUI.PROFILES_CHANGED.CONTROL;
+                }
                 FC.CONFIG.profile = profile;
 
                 let battery_profile = (profile_byte & 0xF0) >> 4;
-                profile_changed |= (battery_profile !== FC.CONFIG.battery_profile) && (FC.CONFIG.battery_profile !==-1);
+                if (battery_profile !== FC.CONFIG.battery_profile) {
+                    profile_changed |= GUI.PROFILES_CHANGED.BATTERY;
+                }
                 FC.CONFIG.battery_profile = battery_profile;
 
                 FC.CONFIG.armingFlags = data.getUint32(offset, true);
@@ -100,11 +104,14 @@ var mspHelper = (function () {
                 //read mixer profile as the last byte in the the message
                 profile_byte = data.getUint8(dataHandler.message_length_expected - 1);
                 let mixer_profile = profile_byte & 0x0F;
-                profile_changed |= (mixer_profile !== FC.CONFIG.mixer_profile) && (FC.CONFIG.mixer_profile !==-1);
+                if (mixer_profile !== FC.CONFIG.mixer_profile) {
+                    profile_changed |= GUI.PROFILES_CHANGED.MIXER;
+                }
                 FC.CONFIG.mixer_profile = mixer_profile;
-
                 GUI.updateStatusBar();
+                if (profile_changed > 0) {
                     GUI.updateProfileChange(profile_changed);
+                }
                 break;
 
             case MSPCodes.MSP_ACTIVEBOXES:
@@ -1547,25 +1554,29 @@ var mspHelper = (function () {
             case MSPCodes.MSP2_INAV_CUSTOM_OSD_ELEMENTS:
                 FC.OSD_CUSTOM_ELEMENTS.items = [];
 
-                var index = 0;
+                let settingsIdx = 0;
 
                 if(data.byteLength == 0) {
                     FC.OSD_CUSTOM_ELEMENTS.settings.customElementsCount = 0;
                     FC.OSD_CUSTOM_ELEMENTS.settings.customElementTextSize = 0;
+                    FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts = 0;
                     return;
                 }
 
-                FC.OSD_CUSTOM_ELEMENTS .settings.customElementsCount = data.getUint8(index++);
+                FC.OSD_CUSTOM_ELEMENTS.settings.customElementsCount = data.getUint8(settingsIdx++);
-                FC.OSD_CUSTOM_ELEMENTS .settings.customElementTextSize = data.getUint8(index++);
+                FC.OSD_CUSTOM_ELEMENTS.settings.customElementTextSize = data.getUint8(settingsIdx++);
-
+                FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts = data.getUint8(settingsIdx++);
-                for (i = 0; i < FC.OSD_CUSTOM_ELEMENTS .settings.customElementsCount; i++){
+                break;
+            case MSPCodes.MSP2_INAV_CUSTOM_OSD_ELEMENT:        
                 var customElement = {
                     customElementItems: [],
                     customElementVisibility: {type: 0, value: 0},
                     customElementText: [],
                 };
 
-                    for (let ii = 0; ii < FC.OSD_CUSTOM_ELEMENTS .settings.customElementsCount; ii++){
+                let index = 0;
+
+                for (let ii = 0; ii < FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts; ii++) {
                     var customElementPart = {type: 0,  value: 0,};
                     customElementPart.type = data.getUint8(index++);
                     customElementPart.value = data.getUint16(index, true);
@@ -1588,8 +1599,7 @@ var mspHelper = (function () {
 
                 customElement.customElementText = String.fromCharCode(...customElement.customElementText);
 
-                    FC.OSD_CUSTOM_ELEMENTS .items.push(customElement)
+                FC.OSD_CUSTOM_ELEMENTS.items.push(customElement);
-                }
                 break;
 
             case MSPCodes.MSP2_INAV_GPS_UBLOX_COMMAND:
@@ -2529,7 +2539,17 @@ var mspHelper = (function () {
     };
 
     self.loadOsdCustomElements = function (callback) {
-        MSP.send_message(MSPCodes.MSP2_INAV_CUSTOM_OSD_ELEMENTS, false, false, callback);
+        MSP.send_message(MSPCodes.MSP2_INAV_CUSTOM_OSD_ELEMENTS, false, false, nextCustomOSDElement);
+
+        var cosdeIdx = 0;
+
+        function nextCustomOSDElement() {
+            if (cosdeIdx < FC.OSD_CUSTOM_ELEMENTS .settings.customElementsCount - 1) {
+                MSP.send_message(MSPCodes.MSP2_INAV_CUSTOM_OSD_ELEMENT, [cosdeIdx++], false, nextCustomOSDElement);
+            } else {
+                MSP.send_message(MSPCodes.MSP2_INAV_CUSTOM_OSD_ELEMENT, [cosdeIdx++], false, callback);
+            }
+        }
     }
 
     self.sendModeRanges = function (onCompleteCallback) {

js/periodicStatusUpdater.js

@@ -118,6 +118,10 @@ const mspQueue = require('./serial_queue');
         stoppped = true;
     }
 
+    publicScope.resume = function() {
+        stoppped = false;
+    }
+
     return publicScope;
 })();
 

js/serial_backend.js

@@ -97,7 +97,6 @@ var SerialBackend = (function () {
 
                 }, 7000);
             } else {
-
                 timeout.add('waiting_for_bootup', function waiting_for_bootup() {
                     MSP.send_message(MSPCodes.MSPV2_INAV_STATUS, false, false, function () {
                         //noinspection JSUnresolvedVariable

locale/en/messages.json

@@ -10,6 +10,10 @@
         "message": "English",
         "_comment": "Don't translate!"
     },
+    "language_uk": {
+        "message": "українська",
+        "_comment": "Don't translate!"
+    },
     "language": {
         "message": "Language"
     },
@@ -1706,6 +1710,15 @@
     "loadedBatteryProfile": {
         "message": "Loaded Battery Profile: <strong style=\"color: #37a8db\">$1</strong>"
     },
+    "setControlProfile" : {
+        "message": "Set Control Profile: <strong style=\"color: #37a8db\">$1</strong>"
+    },
+    "setMixerProfile": {
+        "message": "Setting Mixer Profile: <strong style=\"color: #37a8db\">$1</strong>"
+    },
+    "setBatteryProfile": {
+        "message": "Setting Battery Profile: <strong style=\"color: #37a8db\">$1</strong>"
+    },
     "pidTuningDataRefreshed": {
         "message": "PID data <strong>refreshed</strong>"
     },
@@ -3580,6 +3593,12 @@
     "osd_main_voltage_decimals": {
         "message": "Voltage Decimals"
     },
+    "osd_decimals_altitude": {
+        "message": "Altitude Decimals"
+    },
+    "osd_decimals_distance": {
+        "message": "Distance Decimals"
+    },
     "osd_mah_precision": {
         "message": "mAh Precision"
     },
@@ -3628,6 +3647,9 @@
     "osd_custom_element_settings": {
         "message": "Custom OSD elements"
     },
+    "osd_custom_element_settings_HELP": {
+        "message": "You can find the icon numbers by clicking this help button."
+    },
     "custom_element": {
         "message": "Custom element"
     },
@@ -3666,7 +3688,7 @@
         "message": "Camera uptilt"
     },
     "osd_camera_uptilt_help": {
-        "message": "Set the camera uptilt for the FPV camera in degres, positive is up, negative is down, relative to the horizontal. Used for correct display of HUD items and AHI (when enabled)."
+        "message": "Set the camera uptilt for the FPV camera in degrees, positive is up, negative is down, relative to the horizontal. Used for correct display of HUD items and AHI (when enabled with osd_ahi_camera_uptilt_comp=ON)."
     },
     "osd_camera_fov_h": {
         "message": "Camera Horizontal FOV"
@@ -4243,6 +4265,9 @@
     "osdPanServoOffcentreWarning_HELP": {
         "message": "Degrees either side of the pan servo centre; where it is assumed camera is wanted to be facing forwards, but isn't at 0. If in this range and not 0 for longer than 10 seconds, the pan servo offset OSD element will blink. 0 means the warning is disabled."
     },
+    "osdGroupOSDCustomElements": {
+        "message": "OSD Custom Elements"
+    },
     "osdGroupGVars": {
         "message": "Global Variables"
     },
@@ -4342,6 +4367,9 @@
     "osd_switch_indicator_settings": {
         "message": "Switch Indicator Settings"
     },
+    "osd_switch_indicator_settings_HELP": {
+        "message": "It is recommended to use the Custom OSD Elements as a replacemtent for switch indicators. They are much more powerful. Click to see an example."
+    },
     "osd_switch_indicators_align_left": {
         "message": "Align switch names to left of switches"
     },
@@ -4903,6 +4931,9 @@
     "settings": {
         "message": "Settings"
     },
+    "decimals": {
+        "message": "Decimals"
+    },
     "motorMixer": {
         "message": "Motor Mixer"
     },

src/css/main.css

@@ -277,7 +277,7 @@ input[type="number"]::-webkit-inner-spin-button {
 #sensor-status li {
     float: left;
     height: 67px;
-    width: 33px;
+    min-width: 33px;
     line-height: 18px;
     text-align: center;
     border: 1px solid #373737;
@@ -289,6 +289,17 @@ input[type="number"]::-webkit-inner-spin-button {
     text-shadow: 0 1px rgba(0, 0, 0, 1.0);
 }
 
+#sensor-status li .gyroicon,
+#sensor-status li .accicon,
+#sensor-status li .magicon,
+#sensor-status li .baroicon,
+#sensor-status li .gpsicon,
+#sensor-status li .opflowicon,
+#sensor-status li .sonaricon,
+#sensor-status li .airspeedicon {
+    background-position-x: center;
+}
+
 .gyroicon {
     background: url("./../../images/icons/sensor_gyro_off.png") no-repeat top;
     background-size: 43px;

tabs/configuration.html

@@ -1,18 +1,19 @@
 <div class="tab-configuration toolbar_fixed_bottom">
     <div class="content_wrapper">
         <div class="tab_title" data-i18n="tabConfiguration">Configuration</div>
-        <div class="note" style="margin-bottom: 20px;">
+        
-            <div class="note_spacer">
+        <div class="require-support">
-                <p data-i18n="configurationFeaturesHelp"></p>
+            <div class="note spacebottom">
+                <div class="note_spacer"><p data-i18n="configurationFeaturesHelp"></p></div>
             </div>
         </div>
+
         <div class="leftWrapper">
             <div class="config-section sensors gui_box grey">
                 <div class="gui_box_titlebar">
                     <div class="spacer_box_title" data-i18n="configurationSensors"></div>
                 </div>
                 <div class="spacer_box">
-
                     <div class="select">
                         <select id="sensor-acc" data-setting="acc_hardware"></select>
                         <label for="sensor-acc"> <span data-i18n="sensorAccelerometer"></span></label>
@@ -167,7 +168,7 @@
                         </label>
                     </div>
                     <div class="select">
-                        <select class="batteryProfileHighlight" id="battery_capacity_unit">
+                        <select id="battery_capacity_unit">
                             <option value="mAh">mAh</option>
                             <option value="mWh">mWh</option>
                         </select>
@@ -296,10 +297,9 @@
             </div>
         </div>
 
-        </div>
-
         <div class="clear-both"></div>
     </div>
+
     <div class="content_toolbar">
         <div class="btn save_btn">
             <a class="save" href="#" data-i18n="configurationButtonSave"></a>

tabs/osd.html

@@ -97,33 +97,6 @@
                                 <span data-i18n="osd_units"></span>
                                 <div for="unit_mode" 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>
-                                <span data-i18n="osd_main_voltage_decimals"></span>
-                            </label>
-                            <label>
-                                <select class="update_preview" data-setting="osd_mah_precision" data-live="true"></select>
-                                <span data-i18n="osd_mah_precision"></span>
-                            </label>
-                            <label>
-                                <select class="update_preview" data-setting="osd_coordinate_digits" data-live="true"></select>
-                                <span data-i18n="osd_coordinate_digits"></span>
-                            </label>
-                            <div for="plusCodeDigits" class="helpicon cf_tip" data-i18n_title="osdSettingPLUS_CODE_DIGITS_HELP"></div>
-                            <label>
-                                <select id="plusCodeDigits" class="update_preview" data-setting="osd_plus_code_digits" data-live="true"></select>
-                                <span data-i18n="osd_plus_code_digits"></span>
-                            </label>
-                            <div for="plusCodeShort" class="helpicon cf_tip" data-i18n_title="osdSettingPLUS_CODE_SHORT_HELP"></div>
-                            <label>
-                                <select id="plusCodeShort" class="update_preview" data-setting="osd_plus_code_short" data-live="true"></select>
-                                <span data-i18n="osd_plus_code_short"></span>
-                            </label>
-                            <div for="rpmPrecision" class="helpicon cf_tip osd_use_esc_telemetry" data-i18n_title="osd_esc_rpm_precision_help"></div>
-                            <label class="osd_use_esc_telemetry">
-                                <select id="rpmPrecision" class="update_preview" data-setting="osd_esc_rpm_precision" data-live="true"></select>
-                                <span data-i18n="osd_esc_rpm_precision"></span>
-                            </label>
                             <label>
                                 <select class="update_preview" data-setting="osd_crosshairs_style" data-live="true"></select>
                                 <span data-i18n="osd_crosshairs_style"></span>
@@ -152,6 +125,50 @@
                         </div>
                     </div>
                 </div>
+                <div class="gui_box grey decimals-container">
+                    <div class="gui_box_titlebar">
+                        <div class="spacer_box_title" data-i18n="decimals"></div>
+                    </div>
+                    <div class="spacer_box">
+                        <div class="settings">
+                            <label>
+                                <select class="update_preview" data-setting="osd_main_voltage_decimals" data-live="true"></select>
+                                <span data-i18n="osd_main_voltage_decimals"></span>
+                            </label>
+                            <label>
+                                <select class="update_preview" data-setting="osd_decimals_altitude" data-live="true"></select>
+                                <span data-i18n="osd_decimals_altitude"></span>
+                            </label>
+                            <label>
+                                <select class="update_preview" data-setting="osd_decimals_distance" data-live="true"></select>
+                                <span data-i18n="osd_decimals_distance"></span>
+                            </label>
+                            <label>
+                                <select class="update_preview" data-setting="osd_mah_precision" data-live="true"></select>
+                                <span data-i18n="osd_mah_precision"></span>
+                            </label>
+                            <label>
+                                <select class="update_preview" data-setting="osd_coordinate_digits" data-live="true"></select>
+                                <span data-i18n="osd_coordinate_digits"></span>
+                            </label>
+                            <div for="plusCodeDigits" class="helpicon cf_tip" data-i18n_title="osdSettingPLUS_CODE_DIGITS_HELP"></div>
+                            <label>
+                                <select id="plusCodeDigits" class="update_preview" data-setting="osd_plus_code_digits" data-live="true"></select>
+                                <span data-i18n="osd_plus_code_digits"></span>
+                            </label>
+                            <div for="plusCodeShort" class="helpicon cf_tip" data-i18n_title="osdSettingPLUS_CODE_SHORT_HELP"></div>
+                            <label>
+                                <select id="plusCodeShort" class="update_preview" data-setting="osd_plus_code_short" data-live="true"></select>
+                                <span data-i18n="osd_plus_code_short"></span>
+                            </label>
+                            <div for="rpmPrecision" class="helpicon cf_tip osd_use_esc_telemetry" data-i18n_title="osd_esc_rpm_precision_help"></div>
+                            <label class="osd_use_esc_telemetry">
+                                <select id="rpmPrecision" class="update_preview" data-setting="osd_esc_rpm_precision" data-live="true"></select>
+                                <span data-i18n="osd_esc_rpm_precision"></span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
                 <div class="gui_box grey alarms-container">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" data-i18n="osd_alarms"></div>
@@ -251,16 +268,17 @@
                             <input id="osd_gforce_axis_alarm_max" data-setting="osd_gforce_axis_alarm_max" data-setting-multiplier="1" type="number" data-step="0.1" />
                             <span data-i18n="osd_gforce_axis_alarm_max"></span>
                         </label>
-                        <div for="adsb_distance_warning" class="helpicon cf_tip" data-i18n_title="osdAlarmADSB_MAX_DISTANCE_WARNING"></div>
+        
-                        <label for="adsb_distance_warning">
-                            <input id="adsb_distance_warning" data-setting="osd_adsb_distance_warning" data-unit="m" data-setting-multiplier="1" type="number" data-step="1" />
-                            <span data-i18n="osd_adsb_distance_warning"></span>
-                        </label>
                         <div for="adsb_distance_alert" class="helpicon cf_tip" data-i18n_title="osdAlarmADSB_MAX_DISTANCE_ALERT"></div>
                         <label for="adsb_distance_alert">
                             <input id="adsb_distance_alert" data-setting="osd_adsb_distance_alert" data-unit="m" data-setting-multiplier="1" type="number" data-step="1" />
                             <span data-i18n="osd_adsb_distance_alert"></span>
                         </label>
+                        <div for="adsb_distance_warning" class="helpicon cf_tip" data-i18n_title="osdAlarmADSB_MAX_DISTANCE_WARNING"></div>
+                        <label for="adsb_distance_warning">
+                            <input id="adsb_distance_warning" data-setting="osd_adsb_distance_warning" data-unit="m" data-setting-multiplier="1" type="number" data-step="1" />
+                            <span data-i18n="osd_adsb_distance_warning"></span>
+                        </label>
                     </div>
                 </div>
                 <div class="gui_box grey dji-hd-container" id="dji_settings">
@@ -301,8 +319,10 @@
                         </label>
                     </div>
                 </div>
+
                 <div class="gui_box grey switch-indicator-container">
                     <div class="gui_box_titlebar">
+                        <a href="https://github.com/iNavFlight/inav/wiki/OSD-custom-messages" target="_blank"></a><div for="osd_switch_indicator_settings" class="helpicon cf_tip" data-i18n_title="osd_switch_indicator_settings_HELP"></div></a>
                         <div class="spacer_box_title" data-i18n="osd_switch_indicator_settings"></div>
                     </div>
                     <div class="spacer_box settings">
@@ -336,9 +356,9 @@
                     </div>
                 </div>
 
-
                 <div class="gui_box grey custom-element-container">
                     <div class="gui_box_titlebar">
+                        <a href="https://github.com/iNavFlight/inav-configurator/resources/osd/INAV%20Character%20Map.md" target="_blank"><div for="osd_custom_element_settings" class="helpicon cf_tip" data-i18n_title="osd_custom_element_settings_HELP"></div></a>
                         <div class="spacer_box_title" data-i18n="osd_custom_element_settings"></div>
                     </div>
                     <div class="spacer_box settings" id="osdCustomElements"></div>
@@ -389,39 +409,39 @@
                             </label>
                             <div for="osd_hud_wp_disp" class="helpicon cf_tip" data-i18n_title="osd_hud_wp_disp_help"></div>
                             <label>
-                                <input type="number" data-step="1" data-setting-multiplier="1" data-setting="osd_hud_wp_disp" class="toggle update_preview" data-live="true">
+                                <input type="number" data-step="1" data-setting-multiplier="1" data-setting="osd_hud_wp_disp" class="update_preview" data-live="true">
                                 <span data-i18n="osd_hud_wp_disp"></span>
                             </label>
                             <div for="osd_hud_radar_disp" class="helpicon cf_tip" data-i18n_title="osd_hud_radar_disp_help"></div>
                             <label>
-                                <input type="number" data-step="1" data-setting-multiplier="1" data-setting="osd_hud_radar_disp" class="toggle update_preview" data-live="true">
+                                <input type="number" data-step="1" data-setting-multiplier="1" data-setting="osd_hud_radar_disp" class="update_preview" data-live="true">
                                 <span data-i18n="osd_hud_radar_disp"></span>
                             </label>
 
                             <div for="osd_hud_radar_range_min" class="helpicon cf_tip" data-i18n_title="osd_hud_radar_range_min_help"></div>
                             <label>
-                                <input type="number" data-step="1" data-unit="m" data-setting-multiplier="1" data-setting="osd_hud_radar_range_min" class="toggle update_preview" data-live="true">
+                                <input type="number" data-step="1" data-unit="m" data-setting-multiplier="1" data-setting="osd_hud_radar_range_min" class="update_preview" data-live="true">
                                 <span data-i18n="osd_hud_radar_range_min"></span>
                             </label>
                             <div for="osd_hud_radar_range_max" class="helpicon cf_tip" data-i18n_title="osd_hud_radar_range_max_help"></div>
                             <label>
-                                <input type="number" data-step="1" data-unit="m" data-setting-multiplier="1" data-setting="osd_hud_radar_range_max" class="toggle update_preview" data-live="true">
+                                <input type="number" data-step="1" data-unit="m" data-setting-multiplier="1" data-setting="osd_hud_radar_range_max" class="update_preview" data-live="true">
                                 <span data-i18n="osd_hud_radar_range_max"></span>
                             </label>
 
                             <div for="osd_camera_fov_h" class="helpicon cf_tip" data-i18n_title="osd_camera_fov_h_help"></div>
                             <label>
-                                <input type="number" data-step="1" data-setting-multiplier="1" data-setting="osd_camera_fov_h" class="toggle update_preview" data-live="true">
+                                <input type="number" data-step="1" data-setting-multiplier="1" data-setting="osd_camera_fov_h" class="update_preview" data-live="true">
                                 <span data-i18n="osd_camera_fov_h"></span>
                             </label>
                             <div for="osd_camera_fov_v" class="helpicon cf_tip" data-i18n_title="osd_camera_fov_v_help"></div>
                             <label>
-                                <input type="number" data-step="1" data-setting-multiplier="1" data-setting="osd_camera_fov_v" class="toggle update_preview" data-live="true">
+                                <input type="number" data-step="1" data-setting-multiplier="1" data-setting="osd_camera_fov_v" class="update_preview" data-live="true">
                                 <span data-i18n="osd_camera_fov_v"></span>
                             </label>
                             <div for="osd_camera_uptilt" class="helpicon cf_tip" data-i18n_title="osd_camera_uptilt_help"></div>
                             <label>
-                                <input type="number" data-step="1" data-setting-multiplier="1" data-setting="osd_camera_uptilt" class="toggle update_preview" data-live="true">
+                                <input type="number" data-step="1" data-setting-multiplier="1" data-setting="osd_camera_uptilt" class="update_preview" data-live="true">
                                 <span data-i18n="osd_camera_uptilt"></span>
                             </label>
                         </div>

tabs/osd.js

@@ -19,6 +19,7 @@ const { globalSettings } = require('./../js/globalSettings');
 const { PortHandler } = require('./../js/port_handler');
 const i18n = require('./../js/localization');
 const jBox = require('./../js/libraries/jBox/jBox.min');
+const { Console } = require('console');
 
 
 var SYM = SYM || {};
@@ -136,7 +137,8 @@ SYM.ALERT = 0xDD;
 SYM.CROSS_TRACK_ERROR = 0xFC;
 SYM.ADSB = 0xFD;
 SYM.PAN_SERVO_IS_OFFSET_L = 0x1C7;
-SYM.ODOMETER = 0X168;
+SYM.ODOMETER = 0x168;
+SYM.BLACKBOX = 0xFE;
 SYM.PILOT_LOGO_SML_L = 0x1D5;
 SYM.PILOT_LOGO_SML_C = 0x1D6;
 SYM.PILOT_LOGO_SML_R = 0x1D7;
@@ -450,7 +452,7 @@ function altitude_alarm_display_function(fn) {
     }
 }
 
-function osdMainBatteryPreview() {
+function osdDecimalsMainBatteryPreview() {
     var s = '16.8';
     if (Settings.getInputValue('osd_main_voltage_decimals') == 2) {
         s += '3';
@@ -460,6 +462,61 @@ function osdMainBatteryPreview() {
     return FONT.symbol(SYM.BATT) + FONT.embed_dot(s);
 }
 
+function osdDecimalsAltitudePreview() {
+    var s = ' 114';
+    if (Settings.getInputValue('osd_decimals_altitude') == 4) {
+        s += '3';
+    } if (Settings.getInputValue('osd_decimals_altitude') == 5) {
+        s += '38';
+    }
+
+    switch (OSD.data.preferences.units) {
+        case 0: // Imperial
+        case 3: // UK
+        case 4: // GA
+            s += FONT.symbol(SYM.ALT_FT);
+        default: // Metric
+            s += FONT.symbol(SYM.ALT_M);
+    }
+
+    return s;
+}
+
+function osdDecimalsRemainingFlightDistancePreview() {
+    return osdDecimalsDistancePreview(SYM.FLIGHT_DIST_REMAINING);
+}
+
+function osdDecimalsHomeDistancePreview() {
+    return osdDecimalsDistancePreview(SYM.HOME);
+}
+
+function osdDecimalsTripDistancePreview() {
+    return osdDecimalsDistancePreview(SYM.TRIP_DIST);
+}
+
+function osdDecimalsDistancePreview(prependedSymbol) {
+    var s = '11.5';
+    if (Settings.getInputValue('osd_decimals_distance') == 4) {
+        s+= '3';
+    } if (Settings.getInputValue('osd_decimals_distance') == 5) {
+        s = '1' + s + '7';
+    }
+
+    switch (OSD.data.preferences.units) {
+        case 0: // Imperial
+        case 3: // UK
+            s += FONT.symbol(SYM.DIST_MI);
+        case 4: // GA
+            s += FONT.symbol(SYM.DIST_NM);
+        default: // Metric
+            s += FONT.symbol(SYM.DIST_KM);
+    }
+
+    s = FONT.symbol(prependedSymbol) + s;
+
+    return s;
+}
+
 function osdmAhPrecisionPreview() {
     let precision = Settings.getInputValue('osd_mah_precision');
     let rnd = (Math.floor(10000000000000 + Math.random() * 90000000000000)).toString();
@@ -554,6 +611,7 @@ OSD.DjiElements =  {
         "VTX",
         "CRSF",
         "SwitchIndicators",
+        "OSDCustomElements",
         "GVars",
         "PIDs",
         "PIDOutputs",
@@ -846,12 +904,12 @@ OSD.constants = {
                 {
                     name: 'MAIN_BATT_VOLTAGE',
                     id: 1,
-                    preview: osdMainBatteryPreview,
+                    preview: osdDecimalsMainBatteryPreview,
                 },
                 {
                     name: 'SAG_COMP_MAIN_BATT_VOLTAGE',
                     id: 53,
-                    preview: osdMainBatteryPreview,
+                    preview: osdDecimalsMainBatteryPreview,
                 },
                 {
                     name: 'MAIN_BATT_CELL_VOLTAGE',
@@ -881,17 +939,7 @@ OSD.constants = {
                 {
                     name: 'REMAINING_FLIGHT_DISTANCE',
                     id: 49,
-                    preview: function(osd_data) {
+                    preview: osdDecimalsRemainingFlightDistancePreview,
-                        switch (OSD.data.preferences.units) {
-                            case 0: // Imperial
-                            case 3: // UK
-                                return FONT.symbol(SYM.FLIGHT_DIST_REMAINING) + FONT.embed_dot('0.98') + FONT.symbol(SYM.DIST_MI);
-                            case 4: // GA
-                                return FONT.symbol(SYM.FLIGHT_DIST_REMAINING) + FONT.embed_dot('0.85') + FONT.symbol(SYM.DIST_NM);
-                            default: // Metric
-                                return FONT.symbol(SYM.FLIGHT_DIST_REMAINING) + FONT.embed_dot('1.73') + FONT.symbol(SYM.DIST_KM);
-                        }
-                    }
                 },
                 {
                     name: 'THROTTLE_POSITION',
@@ -1064,7 +1112,15 @@ OSD.constants = {
                     id: 144,
                     min_version: '6.0.0',
                     preview: '0 WARNINGS'
+                },
+                {
+                    name: 'BLACKBOX',
+                    id: 152,
+                    min_version: '8.0.0',
+                    preview: function(osd_data) {
+                        return FONT.symbol(SYM.BLACKBOX) + FONT.embed_dot('000123');
                     }
+                },
             ]
         },
         {
@@ -1221,16 +1277,7 @@ OSD.constants = {
                 {
                     name: 'ALTITUDE',
                     id: 15,
-                    preview: function () {
+                    preview: osdDecimalsAltitudePreview,
-                        switch (OSD.data.preferences.units) {
-                            case 0: // Imperial
-                            case 3: // UK
-                            case 4: // GA
-                                return ' 375' + FONT.symbol(SYM.ALT_FT);
-                            default: // Metric
-                                return ' 114' + FONT.symbol(SYM.ALT_M);
-                        }
-                    }
                 },
                 {
                     name: 'VARIO',
@@ -1595,33 +1642,13 @@ OSD.constants = {
                 {
                     name: 'DISTANCE_TO_HOME',
                     id: 23,
-                    preview: function(osd_data) {
+                    preview: osdDecimalsHomeDistancePreview,
-                        switch (OSD.data.preferences.units) {
-                            case 0: // Imperial
-                            case 3: // UK
-                                return FONT.symbol(SYM.HOME) + FONT.embed_dot('0.98') + FONT.symbol(SYM.DIST_MI);
-                            case 4: // GA
-                                return FONT.symbol(SYM.HOME) + FONT.embed_dot('0.85') + FONT.symbol(SYM.DIST_NM);
-                            default: // Metric
-                                return FONT.symbol(SYM.HOME) + FONT.embed_dot('1.57') + FONT.symbol(SYM.DIST_KM);
-                        }
-                    }
                 },
                 {
                     name: 'TRIP_DIST',
                     id: 40,
                     min_version: '1.9.1',
-                    preview: function(osd_data) {
+                    preview: osdDecimalsTripDistancePreview,
-                        switch (OSD.data.preferences.units) {
-                            case 0: // Imperial
-                            case 3: // UK
-                                return FONT.symbol(SYM.TRIP_DIST) + FONT.embed_dot('0.98') + FONT.symbol(SYM.DIST_MI);
-                            case 4: // GA
-                                return FONT.symbol(SYM.TRIP_DIST) + FONT.embed_dot('0.85') + FONT.symbol(SYM.DIST_NM);
-                            default: // Metric
-                                return FONT.symbol(SYM.TRIP_DIST) + FONT.embed_dot('1.57') + FONT.symbol(SYM.DIST_KM);
-                        }
-                    }
                 },
                 {
                     name: 'ODOMETER',
@@ -1921,6 +1948,67 @@ OSD.constants = {
                 }
             ]
         },
+        {
+            name: 'osdGroupOSDCustomElements',
+            items: [
+                {
+                    name: 'CUSTOM_ELEMENT_1',
+                    id: 147,
+                    min_version: '7.1.0',
+                    positionable: true,
+                    preview: "CE_1",
+                },
+                {
+                    name: 'CUSTOM_ELEMENT_2',
+                    id: 148,
+                    min_version: '7.1.0',
+                    positionable: true,
+                    preview: "CE_2",
+                },
+                {
+                    name: 'CUSTOM_ELEMENT_3',
+                    id: 149,
+                    min_version: '7.1.0',
+                    positionable: true,
+                    preview: "CE_3",
+                },
+                {
+                    name: 'CUSTOM_ELEMENT_4',
+                    id: 154,
+                    min_version: '8.0.0',
+                    positionable: true,
+                    preview: "CE_4",
+                },
+                {
+                    name: 'CUSTOM_ELEMENT_5',
+                    id: 155,
+                    min_version: '8.0.0',
+                    positionable: true,
+                    preview: "CE_5",
+                },
+                {
+                    name: 'CUSTOM_ELEMENT_6',
+                    id: 156,
+                    min_version: '8.0.0',
+                    positionable: true,
+                    preview: "CE_6",
+                },
+                {
+                    name: 'CUSTOM_ELEMENT_7',
+                    id: 157,
+                    min_version: '8.0.0',
+                    positionable: true,
+                    preview: "CE_7",
+                },
+                {
+                    name: 'CUSTOM_ELEMENT_8',
+                    id: 158,
+                    min_version: '8.0.0',
+                    positionable: true,
+                    preview: "CE_8",
+                },
+            ]
+        },
         {
             name: 'osdGroupGVars',
             items: [
@@ -1947,27 +2035,6 @@ OSD.constants = {
                     id: 116,
                     positionable: true,
                     preview: 'G3:30126'
-                },
-                {
-                    name: 'CUSTOM ELEMENT 1',
-                    id: 147,
-                    min_version: '7.1.0',
-                    positionable: true,
-                    preview: "CE_1",
-                },
-                {
-                    name: 'CUSTOM ELEMENT 2',
-                    id: 148,
-                    min_version: '7.1.0',
-                    positionable: true,
-                    preview: "CE_2",
-                },
-                {
-                    name: 'CUSTOM ELEMENT 3',
-                    id: 149,
-                    min_version: '7.1.0',
-                    positionable: true,
-                    preview: "CE_3",
                 }
             ]
         },
@@ -2952,6 +3019,15 @@ OSD.GUI.updateDjiView = function(on) {
             }
         });
 
+        var settings = $('.decimals-container').find('.settings').children();
+        settings.each(function(index, element) {
+            var name = $(element).attr('class');
+            if (!OSD.DjiElements.supportedSettings.includes(name)) {
+                $(element).hide();
+            }
+        });
+
+
         var alarms = $('.alarms-container').find('.settings').children();
         alarms.each(function(index, element) {
             var name = $(element).attr('for');
@@ -2970,7 +3046,7 @@ OSD.GUI.updateDjiView = function(on) {
             .show()
             .removeClass('no-bottom');
 
-        $('.settings-container, .alarms-container').find('.settings').children()
+        $('.settings-container, .decimals-container, .alarms-container').find('.settings').children()
             .show()
             .removeClass('no-bottom');
 
@@ -2997,6 +3073,7 @@ OSD.GUI.updatePreviews = function() {
     // buffer the preview;
     OSD.data.preview = [];
 
+    if (OSD.data.display_size != undefined) {
         // clear the buffer
         for (let i = 0; i < OSD.data.display_size.total; i++) {
             OSD.data.preview.push([null, ' '.charCodeAt(0)]);
@@ -3169,6 +3246,7 @@ OSD.GUI.updatePreviews = function() {
                 $row = $('<div class="row"/>');
             }
         }
+    }
 };
 
 OSD.GUI.updateAll = function() {
@@ -3204,22 +3282,26 @@ OSD.GUI.updateAll = function() {
             }
         });
 
-        paste.on('click', function() {
+        paste.on('click',  async function() {
             if(layout_clipboard.filled == true){
 
                 var oldLayout = JSON.parse(JSON.stringify(OSD.data.layouts[OSD.data.selected_layout]))
                 OSD.data.layouts[OSD.data.selected_layout] = JSON.parse(JSON.stringify(layout_clipboard.layout));
                 layouts.trigger('change');
-                OSD.data.layouts[OSD.data.selected_layout].forEach(function(item, index){
+
+                for(var index in OSD.data.layouts[OSD.data.selected_layout])
+                {
+                    var item = OSD.data.layouts[OSD.data.selected_layout][index];
                     if(!(item.isVisible === false && oldLayout[index].isVisible === false) && (oldLayout[index].x !== item.x || oldLayout[index].y !== item.y || oldLayout[index].position !== item.position || oldLayout[index].isVisible !== item.isVisible)){
-                        OSD.saveItem({id: index});
+                        await OSD.saveItem({id: index});
                     }
-                });
+                }
+
                 GUI.log(i18n.getMessage('osdLayoutPasteFromClipboard'));
             }
         });
 
-        clear.on('click', function() {
+        clear.on('click', async function() {
             var oldLayout = JSON.parse(JSON.stringify(OSD.data.layouts[OSD.data.selected_layout]));
 
             var clearedLayout = [];
@@ -3231,12 +3313,15 @@ OSD.GUI.updateAll = function() {
 
             OSD.data.layouts[OSD.data.selected_layout] = clearedLayout;
             layouts.trigger('change');
-            OSD.data.layouts[OSD.data.selected_layout].forEach(function(item, index){
+
+            for(var index in OSD.data.layouts[OSD.data.selected_layout]) {
+                var item = OSD.data.layouts[OSD.data.selected_layout][index];
                 if(oldLayout[index].isVisible === true){
-                    OSD.saveItem({id: index});
+                    await OSD.saveItem({id: index});
                 }
-            });
+            }
-            GUI.log(chrome.i18n.getMessage('osdClearLayout'));
+
+            GUI.log(i18n.getMessage('osdClearLayout'));
         });
 
 
@@ -3334,6 +3419,7 @@ TABS.osd = {};
 TABS.osd.initialize = function (callback) {
 
     mspHelper.loadServoMixRules();
+    mspHelper.loadLogicConditions();
 
     if (GUI.active_tab != 'osd') {
         GUI.active_tab = 'osd';
@@ -3382,7 +3468,7 @@ TABS.osd.initialize = function (callback) {
                 let testExp = new RegExp('^[A-Za-z0-9]');
                 let testText = $(this).val();
                 if (testExp.test(testText.slice(-1))) {
-                    $(this).val(testText.toUpperCase());
+                    $(this).val(testText.toUpperCase().slice(0, 4));
                 } else {
                     $(this).val(testText.slice(0, -1));
                 }
@@ -3532,6 +3618,7 @@ function createCustomElements(){
     }
 
     var customElementsContainer = $('#osdCustomElements');
+    var init = true;
 
     for(var i = 0; i < FC.OSD_CUSTOM_ELEMENTS.settings.customElementsCount; i++){
         var label = $('<label>');
@@ -3539,30 +3626,49 @@ function createCustomElements(){
         var customElementTable = $('<table>').addClass('osdCustomElement_main_table');
         var customElementRowType = $('<tr>').data('row', i);
         var customElementRowValue = $('<tr>').data('row', i);
+        
         var customElementLabel = $('<tr>');
+        customElementLabel.append($('<td>').attr('colspan', 2).append($('<span>').html(i18n.getMessage("custom_element") + ' ' + (i + 1))));
 
-        for(var ii = 0; ii < 3; ii++){
+        for(var ii = 0; ii < FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts; ii++){
-
             var select = $('<select>').addClass('osdCustomElement-' + i + '-part-' + ii + '-type').data('valueCellClass', 'osdCustomElement-' + i + '-part-' + ii + '-value').html(`
                         <option value="0">none</option>
                         <option data-value="text" value="1">Text</option>
                         <option data-value="ico" value="2">Icon Static</option>
-                        <option data-value="ico_gv" value="3">Icon Global Variable</option>
+                        <option data-value="ico_gv" value="3">Icon from Global Variable</option>
-                        <option data-value="gv" value="4">Global Variable 00000</option>
+                        <option data-value="ico_lc" value="4">Icon from Logic Condition</option>
-                        <option data-value="gv" value="5">Global Variable 000.00</option>
+                        <option data-value="gv" value="5">Global Variable 0</option>
-                        <option data-value="gv" value="6">Global Variable 000</option>
+                        <option data-value="gv" value="6">Global Variable 00</option>
-                        <option data-value="gv" value="7">Global Variable 0.0</option>
+                        <option data-value="gv" value="7">Global Variable 000</option>
+                        <option data-value="gv" value="8">Global Variable 0000</option>
+                        <option data-value="gv" value="9">Global Variable 00000</option>
+                        <option data-value="gv" value="10">Global Variable 0.0</option>
+                        <option data-value="gv" value="11">Global Variable 00.0</option>
+                        <option data-value="gv" value="12">Global Variable 00.00</option>
+                        <option data-value="gv" value="13">Global Variable 000.0</option>
+                        <option data-value="gv" value="14">Global Variable 000.00</option>
+                        <option data-value="gv" value="15">Global Variable 0000.0</option>
+                        <option data-value="lc" value="16">Logic Condition 0</option>
+                        <option data-value="lc" value="17">Logic Condition 00</option>
+                        <option data-value="lc" value="18">Logic Condition 000</option>
+                        <option data-value="lc" value="19">Logic Condition 0000</option>
+                        <option data-value="lc" value="20">Logic Condition 00000</option>
+                        <option data-value="lc" value="21">Logic Condition 0.0</option>
+                        <option data-value="lc" value="22">Logic Condition 00.0</option>
+                        <option data-value="lc" value="23">Logic Condition 00.00</option>
+                        <option data-value="lc" value="24">Logic Condition 000.0</option>
+                        <option data-value="lc" value="25">Logic Condition 000.00</option>
+                        <option data-value="lc" value="26">Logic Condition 0000.0</option>
                         `);
 
             customElementRowType.append($('<td>').append(select));
             customElementRowValue.append($('<td>').addClass('osdCustomElement-' + i + '-part-' + ii + '-value').append(
-                $('<input>').addClass('value').addClass('text').attr('type', 'text').attr('maxlength', FC.OSD_CUSTOM_ELEMENTS.settings.customElementTextSize).hide()
+                $('<input>').addClass('value').addClass('text').attr('type', 'text').attr('maxlength', FC.OSD_CUSTOM_ELEMENTS.settings.customElementTextSize).hide()).append(
-            ).append(
+                $('<input>').addClass('value').addClass('ico').attr('min', 1).attr('max', 255).hide()).append(
-                $('<input>').addClass('value').addClass('ico').attr('min', 1).attr('max', 255).hide()
+                $('<select>').addClass('value').addClass('ico_gv').html(getGVoptions()).hide()).append(
-            ).append(
+                $('<select>').addClass('value').addClass('ico_lc').html(getLCoptions()).hide()).append(
-                $('<select>').addClass('value').addClass('ico_gv').html(getGVoptions()).hide()
+                $('<select>').addClass('value').addClass('gv').html(getGVoptions()).hide()).append(
-            ).append(
+                $('<select>').addClass('value').addClass('lc').html(getLCoptions()).hide()
-                $('<select>').addClass('value').addClass('gv').html(getGVoptions()).hide()
             ));
 
             select.change(function(){
@@ -3570,6 +3676,9 @@ function createCustomElements(){
                 var valueBlock = $('.' + $(this).data('valueCellClass'))
                 valueBlock.find('.value').hide();
                 valueBlock.find('.' + dataValue).show();
+                if(!init){
+                    updateOSDCustomElementsDisplay();
+                }
             });
         }
 
@@ -3592,20 +3701,114 @@ function createCustomElements(){
             valueBlock.find('.' + dataValue).show();
         });
 
-        customElementLabel.append($('<td>').attr('colspan', 2).append($('<span>').html(i18n.getMessage("custom_element") + ' ' + (i + 1))));
+        customElementTable.append(customElementLabel).append(customElementRowType).append(customElementRowValue);
-
-        customElementTable.append(customElementRowType).append(customElementRowValue).append(customElementLabel);
         label.append(customElementTable);
         customElementsContainer.append(label);
     }
 
     fillCustomElementsValues();
     customElementsInitCallback();
+    init = false;
+}
+
+function updateOSDCustomElementsDisplay() {
+    let foundOSDCustomElements = 0;
+    let generalGroup = OSD.constants.ALL_DISPLAY_GROUPS.filter(function(e) {
+        return e.name == "osdGroupOSDCustomElements";
+    })[0];
+
+    for (var i = 0; i < FC.OSD_CUSTOM_ELEMENTS.settings.customElementsCount; i++) {
+        if ($('.osdCustomElement-' + i + '-part-0-type').val() != undefined) {
+            for (let si = 0; si < generalGroup.items.length; si++) {
+                if (generalGroup.items[si].name == "CUSTOM_ELEMENT_" + (i + 1)) {
+                    let preview = "";
+                    foundOSDCustomElements++;
+
+                    for (let ii = 0; ii < FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts; ii++) {
+                        var typeCell = $('.osdCustomElement-' + i + '-part-' + ii + '-type');
+                        var valueCell = $('.osdCustomElement-' + i + '-part-' + ii + '-value');
+
+                        switch (parseInt(typeCell.val())) {
+                            case 1:
+                                preview += valueCell.find('.text').val();
+                                break;
+                            case 2:
+                                preview += FONT.symbol("0x" + parseInt(valueCell.find('.ico').val()).toString(16).toUpperCase());
+                                break;
+                            case 3:
+                                preview += FONT.symbol(SYM.HOME);
+                                break;
+                            case 4:
+                                preview += FONT.symbol(SYM.HOME);
+                                break;
+                            case 5:
+                            case 16:
+                                preview += " 2";
+                                break;
+                            case 6:
+                            case 17:
+                                preview += " 57";
+                                break;
+                            case 7:
+                            case 18:
+                                preview += " 316";
+                                break;
+                            case 8:
+                            case 19:
+                                preview += " 6926";
+                                break;
+                            case 9:
+                            case 20:
+                                preview += " 36520";
+                                break;
+                            case 10:
+                            case 21:
+                                preview += " " + FONT.embed_dot("1.6");
+                                break;
+                            case 11:
+                            case 22:
+                                preview += " " + FONT.embed_dot("21.4");
+                                break;
+                            case 12:
+                            case 23:
+                                preview += " " + FONT.embed_dot("34.26");
+                                break;
+                            case 13:
+                            case 24:
+                                preview += " " + FONT.embed_dot("315.7");
+                                break;
+                            case 14:
+                            case 25:
+                                preview += " " + FONT.embed_dot("562.46");
+                                break;
+                            case 15:
+                            case 26:
+                                preview += " " + FONT.embed_dot("4629.1");
+                                break;
+                        }
+                    }
+
+                    preview = preview.trim();
+
+                    if (preview == "") {
+                        preview = "CE_" + (i + 1);
+                    }
+
+                    generalGroup.items[si].preview = preview;
+                }
+            }
+        }
+
+        if (foundOSDCustomElements >= FC.OSD_CUSTOM_ELEMENTS.settings.customElementsCount) {
+            break;
+        }
+    }
+    OSD.GUI.updatePreviews();
 }
 
 function fillCustomElementsValues() {
     for (var i = 0; i < FC.OSD_CUSTOM_ELEMENTS.settings.customElementsCount; i++) {
-        for (var ii = 0; ii < 3; ii++) {
+        for (var ii = 0; ii < FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts; ii++) {
             $('.osdCustomElement-' + i + '-part-' + ii + '-type').val(FC.OSD_CUSTOM_ELEMENTS.items[i].customElementItems[ii].type).trigger('change');
 
             var valueCell = $('.osdCustomElement-' + i + '-part-' + ii + '-value');
@@ -3620,11 +3823,34 @@ function fillCustomElementsValues() {
                     valueCell.find('.ico_gv').val(FC.OSD_CUSTOM_ELEMENTS.items[i].customElementItems[ii].value).trigger('change');
                     break;
                 case 4:
+                    valueCell.find('.ico_lc').val(FC.OSD_CUSTOM_ELEMENTS.items[i].customElementItems[ii].value).trigger('change');
+                    break;
                 case 5:
                 case 6:
                 case 7:
+                case 8:
+                case 9:
+                case 10:
+                case 11:
+                case 12:
+                case 13:
+                case 14:
+                case 15:
                     valueCell.find('.gv').val(FC.OSD_CUSTOM_ELEMENTS.items[i].customElementItems[ii].value).trigger('change');
                     break;
+                case 16:
+                case 17:
+                case 18:
+                case 19:
+                case 20:
+                case 21:
+                case 22:
+                case 23:
+                case 24:
+                case 25:
+                case 26:
+                    valueCell.find('.lc').val(FC.OSD_CUSTOM_ELEMENTS.items[i].customElementItems[ii].value).trigger('change');
+                    break;
             }
         }
 
@@ -3661,7 +3887,7 @@ function customElementsInitCallback() {
 }
 
 function customElementNormaliseRow(row){
-    for(var i = 0; i < 3; i++){
+    for(var i = 0; i < FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts; i++){
         var elementType = $('.osdCustomElement-' + row + '-part-' + i + '-type');
         var valueCell = $('.' + elementType.data('valueCellClass'));
 
@@ -3672,15 +3898,15 @@ function customElementNormaliseRow(row){
                 break;
             case 2:
                 valueCell.find('.ico').val(valueCell.find('.ico').val() > 255 ? 255 : valueCell.find('.ico').val());
-                valueCell.find('.ico').val(valueCell.find('.ico').val() < 1 ? 1 : valueCell.find('.ico').val());
+                valueCell.find('.ico').val((valueCell.find('.ico').val() != '' && valueCell.find('.ico').val() < 1 )? 1 : valueCell.find('.ico').val());
         }
     }
+    updateOSDCustomElementsDisplay();
 }
 
 function customElementDisableNonValidOptionsRow(row) {
-
     var selectedTextIndex = false;
-    for(let i = 0; i < 3; i++){
+    for(let i = 0; i < FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts; i++){
         let elementType = $('.osdCustomElement-' + row + '-part-' + i + '-type');
 
         if(parseInt(elementType.val()) === 1)
@@ -3690,7 +3916,7 @@ function customElementDisableNonValidOptionsRow(row){
         }
     }
 
-    for(let i = 0; i < 3; i++){
+    for(let i = 0; i < FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts; i++){
         let elementType = $('.osdCustomElement-' + row + '-part-' + i + '-type');
         if(i !== selectedTextIndex && selectedTextIndex !== false){
             elementType.find('option[value="1"]').attr('disabled', 'disabled');
@@ -3701,13 +3927,12 @@ function customElementDisableNonValidOptionsRow(row){
 }
 
 function customElementGetDataForRow(row){
-
     var data = [];
     data.push8(row);
 
     var text = "";
 
-    for(var ii = 0; ii < 3; ii++){
+    for(var ii = 0; ii < FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts; ii++){
         var elementType = $('.osdCustomElement-' + row + '-part-' + ii + '-type');
         var valueCell = $('.' + elementType.data('valueCellClass'));
         var partValue = 0;
@@ -3723,11 +3948,34 @@ function customElementGetDataForRow(row){
                 partValue = parseInt(valueCell.find('.ico_gv').find(':selected').val());
                 break;
             case 4:
+                partValue = parseInt(valueCell.find('.ico_lc').find(':selected').val());
+                break;
             case 5:
             case 6:
             case 7:
+            case 8:
+            case 9:
+            case 10:
+            case 11:
+            case 12:
+            case 13:
+            case 14:
+            case 15:
                 partValue = parseInt(valueCell.find('.gv').find(':selected').val());
                 break;
+            case 16:
+            case 17:
+            case 18:
+            case 19:
+            case 20:
+            case 21:
+            case 22:
+            case 23:
+            case 24:
+            case 25:
+            case 26:
+                partValue = parseInt(valueCell.find('.lc').find(':selected').val());
+                break;
         }
 
         data.push8(parseInt(elementType.val()));
@@ -3749,6 +3997,8 @@ function customElementGetDataForRow(row){
     data.push8(parseInt(elementVisibilityType.val()));
     data.push16(visibilityValue);
 
+    console.log("Saving osd custom data for number " + row + " | data: " + data);
+
     for(var i = 0; i < FC.OSD_CUSTOM_ELEMENTS.settings.customElementTextSize; i++){
         if(i < text.length){
             data.push8(text.charCodeAt(i))
@@ -3770,13 +4020,14 @@ function getGVoptions(){
 
 function getLCoptions(){
     var result = '';
-    for(var i = 0; i < 64; i++){
+    for(var i = 0; i < FC.LOGIC_CONDITIONS.getMaxLogicConditionCount(); i++) {
+        if (FC.LOGIC_CONDITIONS.isEnabled(i)) {
             result += `<option value="` + i + `">LC ` + i + `</option>`;
         }
+    }
     return result;
 }
 
-
 function refreshOSDSwitchIndicators() {
     let group = OSD.constants.ALL_DISPLAY_GROUPS.filter(function(e) {
         return e.name == "osdGroupSwitchIndicators";