Merge pull request #1377 from elgansayer/feature/uiunits4.0.0-RC1

Add UI units to number inputs

9 files changed, 328 insertions, 67 deletions

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index bd42a611..1c1a3e9c 100755
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -12,7 +12,13 @@
     "options_improve_configurator": {
         "message": "Send anonymous usage data to the developer team"
     },
-
+    "options_unit_type": {
+        "message": "Set how the units render on the configurator only"
+    },
+    "options_render": {
+        "message": "Configurator rendering options"
+    },
+    
     "connect": {
         "message": "Connect"
     },
diff --git a/js/settings.js b/js/settings.js
index 84a0b25f..148eb003 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -10,6 +10,8 @@ var Settings = (function () {
         });
         return Promise.mapSeries(inputs, function (input, ii) {
             var settingName = input.data('setting');
+            var inputUnit = input.data('unit');
+
             return mspHelper.getSetting(settingName).then(function (s) {
                 // Check if the input declares a parent
                 // to be hidden in case of the setting not being available.
@@ -25,6 +27,7 @@ var Settings = (function () {
                     return;
                 }
                 parent.show();
+
                 if (input.prop('tagName') == 'SELECT' || s.setting.table) {
                     if (input.attr('type') == 'checkbox') {
                         input.prop('checked', s.value > 0);
@@ -67,11 +70,13 @@ var Settings = (function () {
                 } 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)));
                 }
+
+                // If data is defined, We want to convert this value into 
+                // something matching the units        
+                self.convertToUnitSetting(input, inputUnit);
+
                 input.data('setting-info', s.setting);
                 if (input.data('live')) {
                     input.change(function() {
@@ -82,6 +87,108 @@ var Settings = (function () {
         });
     };
 
+
+    /**
+     * 
+     * @param {JQuery Element} input 
+     * @param {String} inputUnit Unit from HTML Dom input
+     */
+    self.convertToUnitSetting = function (element, inputUnit) {
+
+        // One of the following;
+        // none, OSD, imperial, metric
+        const configUnitType = globalSettings.unitType;
+
+        // Small closure to grab the unit as described by either 
+        // the app settings or the app OSD settings, confused? yeah
+        const getUnitDisplayTypeValue = () => {
+            // Try and match the values 
+            switch (configUnitType) {
+                case UnitType.OSD: // Match the OSD value on the UI
+                    return globalSettings.osdUnits;
+                    break;
+                case UnitType.imperial:
+                    return 0; // Imperial OSD Value
+                    break;
+                case UnitType.metric:
+                    return 1; // Metric + MPH OSD Value
+                    break;
+                case UnitType.none:
+                default:
+                    // Something went wrong
+                    return -1;
+            }
+        }
+
+        // Sets the int value of the way we want to display the 
+        // units. We use the OSD unit values here for easy
+        const uiUnitValue = getUnitDisplayTypeValue();
+
+        const oldValue = element.val();
+
+        // Ensure we can do conversions
+        if (configUnitType === UnitType.none || uiUnitValue === -1 || !inputUnit || !oldValue || !element) {
+            return;
+        }
+
+        // Used to convert between a value and a value matching the int
+        // unit display value. Eg 1 = Metric 
+        // units. We use the OSD unit values here for easy
+        const conversionTable = {    
+            1: {
+                'cm':  { multiplier: 100, unitName: 'm' },
+                'cms': { multiplier: 27.77777777777778, unitName: 'Km/h' }
+            },
+            2: {
+                'cm':  { multiplier: 100, unitName: 'm' },
+            },          
+            4: {
+                'cms': { multiplier: 51.44444444444457, unitName: 'Kt' }
+            },
+            default: {
+                'cm':  { multiplier: 30.48, unitName: 'ft' },
+                'cms': { multiplier: 44.704, unitName: 'mph' },
+                'ms':  { multiplier: 1000, unitName: 'sec' }                
+            },
+        }
+
+        // Small closure to try and get the multiplier 
+        // needed from the conversion table
+        const getUnitMultiplier = () => {
+            if(conversionTable[uiUnitValue] && conversionTable[uiUnitValue][inputUnit]) {
+                return conversionTable[uiUnitValue][inputUnit];
+            }
+            
+            return conversionTable['default'][inputUnit];
+        }
+
+        // Get the default multi obj or the custom       
+        const multiObj = getUnitMultiplier();
+
+        if(!multiObj) {
+            return;
+        }
+
+        const multiplier = multiObj.multiplier;
+        const unitName = multiObj.unitName;
+
+        // Update the step, min, and max; as we have the multiplier here.
+        if (element.attr('type') == 'number') {
+            element.attr('step', ((multiplier != 1) ? '0.01' : '1'));
+            element.attr('min', (element.attr('min') / multiplier).toFixed(2));
+            element.attr('max', (element.attr('max') / multiplier).toFixed(2));
+        }
+
+        // Update the input with a new formatted unit
+        const convertedValue = Number((oldValue / multiplier).toFixed(2));
+        const newValue = Number.isInteger(convertedValue) ? Math.round(convertedValue) : convertedValue;
+        element.val(newValue);
+        element.data('setting-multiplier', multiplier);
+
+        // Now wrap the input in a display that shows the unit
+        element.wrap(`<div data-unit="${unitName}" class="unit_wrapper unit"></div>`);
+    }
+
     self.saveInput = function(input) {
         var settingName = input.data('setting');
         var setting = input.data('setting-info');
diff --git a/main.css b/main.css
index 80672514..8351cacf 100644
--- a/main.css
+++ b/main.css
@@ -516,6 +516,11 @@ input[type="number"]::-webkit-inner-spin-button {
     z-index: 10000;
 }
 
+/* options modified GUI BOX */
+#options-window .gui_box {
+    float: none;
+}
+
 .options_container__checkbox input {
     float: left;
     margin-top: 3px;
@@ -2198,4 +2203,37 @@ ol li {
 .red-background td,
 .red-background th {
     background-color: tomato !important;
-}
\ No newline at end of file
+}
+
+/* Wrapper for inputs with unit displays */
+.unit_wrapper {
+    display: inline-block;
+    position: relative;
+}
+
+/* Position the unit to the right of the wrapper */
+.unit_wrapper::after {
+    position: absolute;
+    top: 2px;
+    right: .7em;
+    transition: all .05s ease-in-out;
+}
+
+/* Move unit more to the left on hover or focus within
+     for arrow buttons will appear to the right of number inputs */
+.unit_wrapper:hover::after,
+.unit_wrapper:focus-within::after {
+    right: 1.3em;
+}
+
+/* Handle Firefox (arrows always shown) */
+@supports (-moz-appearance:none) {
+    .unit_wrapper::after {
+        right: 1.3em;
+    }
+}
+
+/* Set the unit abbreviation for each unit class */
+.unit::after {
+    content: attr(data-unit) ;
+}
diff --git a/main.js b/main.js
index 494ae10a..09407d5f 100644
--- a/main.js
+++ b/main.js
@@ -11,7 +11,20 @@ googleAnalyticsService.getConfig().addCallback(function (config) {
 
 chrome.storage = chrome.storage || {};
 
+// Set how the units render on the configurator only
+const UnitType = {
+    none: "none",
+    OSD: "OSD",
+    imperial: "imperial",
+    metric: "metric",
+}
+
 let globalSettings = {
+    // Configurator rendering options
+    // Used to depict how the units are displayed within the UI
+    unitType: null,
+    // Used to convert units within the UI
+    osdUnits: null,    
     mapProviderType: null,
     mapApiKey: null,
     proxyURL: null,
@@ -22,6 +35,12 @@ $(document).ready(function () {
     // translate to user-selected language
     localize();
 
+    chrome.storage.local.get('unit_type', function (result) {
+        if (!result.unit_type) {
+            result.unit_type = UnitType.none;
+        }
+        globalSettings.unitType = result.unit_type;        
+    });
     chrome.storage.local.get('map_provider_type', function (result) {
         if (typeof result.map_provider_type === 'undefined') {
             result.map_provider_type = 'osm';
@@ -46,6 +65,11 @@ $(document).ready(function () {
         }
         globalSettings.proxyLayer = result.proxylayer;
     });
+	
+    // Resets the OSD units used by the unit coversion when the FC is disconnected.
+    if (!CONFIGURATOR.connectionValid) {
+        globalSettings.osdUnits = null;
+    }
     
     // alternative - window.navigator.appVersion.match(/Chrome\/([0-9.]*)/)[1];
     GUI.log('Running - OS: <strong>' + GUI.operating_system + '</strong>, ' +
@@ -303,11 +327,31 @@ $(document).ready(function () {
                     googleAnalyticsConfig.setTrackingPermitted(check);
                 });
 
+                $('#ui-unit-type').val(globalSettings.unitType);
                 $('#map-provider-type').val(globalSettings.mapProviderType);
                 $('#map-api-key').val(globalSettings.mapApiKey);
                 $('#proxyurl').val(globalSettings.proxyURL);
-                $('#proxylayer').val(globalSettings.proxyLayer);
-                
+                $('#proxylayer').val(globalSettings.proxyLayer);        
+
+                // Set the value of the unit type
+                // none, OSD, imperial, metric
+                $('#ui-unit-type').change(function () {
+                    chrome.storage.local.set({
+                        'unit_type': $(this).val()
+                    });
+                    globalSettings.unitType = $(this).val();
+
+                    // Update the osd units in global settings
+                    // but only if we need it
+                    if (globalSettings.unitType === UnitType.OSD) {
+                        get_osd_settings();
+                    }
+
+                    // Horrible way to reload the tab
+                    const activeTab = $('#tabs li.active'); 
+                    activeTab.removeClass('active');  
+                    activeTab.find('a').click();            
+                });
                 $('#map-provider-type').change(function () {
                     chrome.storage.local.set({
                         'map_provider_type': $(this).val()
@@ -480,6 +524,24 @@ $(document).ready(function () {
     });
 });
 
+function get_osd_settings() {
+    if (globalSettings.osdUnits !== undefined && globalSettings.osdUnits !==  null) {
+        return;
+    }
+    
+    MSP.promise(MSPCodes.MSP2_INAV_OSD_PREFERENCES).then(function (resp) {
+        var prefs = resp.data;
+        prefs.readU8();
+        prefs.readU8();
+        prefs.readU8();
+        prefs.readU8();
+        prefs.readU8();
+        prefs.readU8();
+        prefs.readU8();
+        globalSettings.osdUnits = prefs.readU8();
+    });
+}
+
 function catch_startup_time(startTime) {
     var endTime = new Date().getTime(),
         timeSpent = endTime - startTime;
diff --git a/tabs/advanced_tuning.html b/tabs/advanced_tuning.html
index 841b62c3..f6034dc7 100644
--- a/tabs/advanced_tuning.html
+++ b/tabs/advanced_tuning.html
@@ -21,32 +21,32 @@
                             <div class="helpicon cf_tip" data-i18n_title="configurationLaunchMaxAngleHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="launchVelocity" data-setting="nav_fw_launch_velocity" data-setting-multiplier="1" step="1" min="1000" max="2000" />
+                            <input type="number" id="launchVelocity" data-unit="cms" data-setting="nav_fw_launch_velocity" data-setting-multiplier="1" step="1" min="100" max="10000" />
                             <label for="launchVelocity"><span data-i18n="configurationLaunchVelocity"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="configurationLaunchVelocityHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="launchAccel" data-setting="nav_fw_launch_accel" data-setting-multiplier="1" step="1" min="1000" max="2000" />
+                            <input type="number" id="launchAccel" data-setting="nav_fw_launch_accel" data-setting-multiplier="1" step="1" min="1000" max="20000" />
                             <label for="launchAccel"><span data-i18n="configurationLaunchAccel"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="configurationLaunchAccelHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="launchDetectTime" data-setting="nav_fw_launch_detect_time" data-setting-multiplier="1" step="1" min="10" max="1000" />
+                            <input type="number" id="launchDetectTime" data-unit="ms" data-setting="nav_fw_launch_detect_time" data-setting-multiplier="1" step="1" min="10" max="1000" />
                             <label for="launchDetectTime"><span data-i18n="configurationLaunchDetectTime"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="configurationLaunchDetectTimeHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="launchMotorDelay" data-setting="nav_fw_launch_motor_delay" data-setting-multiplier="1" step="1" min="0" max="5000" />
+                            <input type="number" id="launchMotorDelay" data-unit="ms" data-setting="nav_fw_launch_motor_delay" data-setting-multiplier="1" step="1" min="0" max="5000" />
                             <label for="launchMotorDelay"><span data-i18n="configurationLaunchMotorDelay"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="configurationLaunchMotorDelayHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="launchMinTime" data-setting="nav_fw_launch_min_time" data-setting-multiplier="1" step="1" min="0" max="60000" />
+                            <input type="number" id="launchMinTime" data-unit="ms" data-setting="nav_fw_launch_min_time" data-setting-multiplier="1" step="1" min="0" max="60000" />
                             <label for="launchMinTime"><span data-i18n="configurationLaunchMinTime"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="configurationLaunchMinTimeHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="launchSpinupTime" data-setting="nav_fw_launch_spinup_time" data-setting-multiplier="1" step="1" min="0" max="1000" />
+                            <input type="number" id="launchSpinupTime" data-unit="ms" data-setting="nav_fw_launch_spinup_time" data-setting-multiplier="1" step="1" min="0" max="1000" />
                             <label for="launchSpinupTime"><span data-i18n="configurationLaunchSpinupTime"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="configurationLaunchSpinupTimeHelp"></div>
                         </div>
@@ -56,22 +56,22 @@
                             <div class="helpicon cf_tip" data-i18n_title="configurationLaunchThrHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="launchClimbAngle" data-setting="nav_fw_launch_climb_angle" data-setting-multiplier="1" step="1" min="0" max="60000" />
+                            <input type="number" id="launchClimbAngle" data-setting="nav_fw_launch_climb_angle" data-setting-multiplier="1" step="1" min="0" max="45" />
                             <label for="launchClimbAngle"><span data-i18n="configurationLaunchClimbAngle"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="configurationLaunchClimbAngleHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="launchTimeout" data-setting="nav_fw_launch_timeout" data-setting-multiplier="1" step="1" min="0" max="60000" />
+                            <input type="number" id="launchTimeout" data-unit="ms" data-setting="nav_fw_launch_timeout" data-setting-multiplier="1" step="1" min="0" max="60000" />
                             <label for="launchTimeout"><span data-i18n="configurationLaunchTimeout"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="configurationLaunchTimeoutHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="launchMaxAltitude" data-setting="nav_fw_launch_max_altitude" data-setting-multiplier="1" step="1" min="0" max="60000" />
+                            <input type="number" id="launchMaxAltitude" data-unit="cm" data-setting="nav_fw_launch_max_altitude" data-setting-multiplier="1" step="1" min="0" max="60000" />
                             <label for="launchMaxAltitude"><span data-i18n="configurationLaunchMaxAltitude"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="configurationLaunchMaxAltitudeHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="launchEndTime" data-setting="nav_fw_launch_end_time" data-setting-multiplier="1" step="1" min="0" max="5000" />
+                            <input type="number" id="launchEndTime" data-unit="ms" data-setting="nav_fw_launch_end_time" data-setting-multiplier="1" step="1" min="0" max="5000" />
                             <label for="launchEndTime"><span data-i18n="configurationLaunchEndTime"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="configurationLaunchEndTimeHelp"></div>
                         </div>
@@ -84,22 +84,22 @@
                     </div>
                     <div class="spacer_box">
                         <div class="number">
-                            <input type="number" id="idlePower" data-setting="idle_power" data-setting-multiplier="1" step="1" min="0" max="5000" />
+                            <input type="number" id="idlePower" data-setting="idle_power" data-setting-multiplier="1" step="1" min="0" max="65535" />
                             <label for="idlePower"><span data-i18n="idlePower"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="idlePowerHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="cruisePower" data-setting="cruise_power" data-setting-multiplier="1" step="1" min="0" max="5000" />
+                            <input type="number" id="cruisePower" data-setting="cruise_power" data-setting-multiplier="1" step="1" min="0" max="4294967295" />
                             <label for="cruisePower"><span data-i18n="cruisePower"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="cruisePowerHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="cruiseSpeed" data-setting="nav_fw_cruise_speed" data-setting-multiplier="1" step="1" min="0" max="5000" />
+                            <input type="number" id="cruiseSpeed" data-unit="cms" data-setting="nav_fw_cruise_speed" data-setting-multiplier="1" step="1" min="0" max="65535" />
                             <label for="cruiseSpeed"><span data-i18n="cruiseSpeed"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="cruiseSpeedHelp"></div>
                         </div>
                         <div class="number">
-                            <input type="number" id="rthEnergyMargin" data-setting="rth_energy_margin" data-setting-multiplier="1" step="1" min="0" max="5000" />
+                            <input type="number" id="rthEnergyMargin" data-setting="rth_energy_margin" data-setting-multiplier="1" step="1" min="0" max="100" />
                             <label for="rthEnergyMargin"><span data-i18n="rthEnergyMargin"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="rthEnergyMarginHelp"></div>
                         </div>
@@ -179,7 +179,7 @@
                         </div>
 
                         <div class="number">
-                            <input id="loiterRadius" type="number" data-setting="nav_fw_loiter_radius" data-setting-multiplier="1" step="1" min="0" max="30000" />
+                            <input id="loiterRadius" type="number" data-unit="cm" data-setting="nav_fw_loiter_radius" data-setting-multiplier="1" step="1" min="0" max="30000" />
                             <label for="loiterRadius"><span data-i18n="loiterRadius"></span></label>
                         </div>
 
@@ -216,16 +216,16 @@
                             <label for="user-control-mode"><span data-i18n="userControlMode"></span></label>
                         </div>
                         <div class="number">
-                            <input id="default-auto-speed" type="number" data-setting="nav_auto_speed" data-setting-multiplier="1" step="1" min="10" max="2000" />
+                            <input id="default-auto-speed" type="number" data-unit="cms" data-setting="nav_auto_speed" data-setting-multiplier="1" step="1" min="10" max="2000" />
                             <label for="default-auto-speed"><span data-i18n="posholdDefaultSpeed"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="posholdDefaultSpeedHelp"></div>
                         </div>
                         <div class="number">
-                            <input id="max-auto-speed" type="number" data-setting="nav_max_auto_speed" data-setting-multiplier="1" step="1" min="10" max="2000" />
+                            <input id="max-auto-speed" type="number" data-unit="cms" data-setting="nav_max_auto_speed" data-setting-multiplier="1" step="1" min="10" max="2000" />
                             <label for="max-auto-speed"><span data-i18n="posholdMaxSpeed"></span></label>
                         </div>
                         <div class="number">
-                            <input id="max-manual-speed" type="number" data-setting="nav_manual_speed" data-setting-multiplier="1" step="1" min="10" max="2000" />
+                            <input id="max-manual-speed" data-unit="cms" type="number" data-setting="nav_manual_speed" data-setting-multiplier="1" step="1" min="10" max="2000" />
                             <label for="max-manual-speed"><span data-i18n="posholdMaxManualSpeed"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="posholdMaxManualSpeedHelp"></div>
                         </div>
@@ -259,19 +259,19 @@
                     <div class="spacer_box">
 
                         <div class="number">
-                            <input id="brakingSpeedThreshold" type="number" data-setting="nav_mc_braking_speed_threshold" data-setting-multiplier="1" step="1" min="0" max="1000" />
+                            <input id="brakingSpeedThreshold" type="number" data-unit="cms" data-setting="nav_mc_braking_speed_threshold" data-setting-multiplier="1" step="1" min="0" max="1000" />
                             <label for="brakingSpeedThreshold"><span data-i18n="brakingSpeedThreshold"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="brakingSpeedThresholdTip"></div>
                         </div>
 
                         <div class="number">
-                            <input id="brakingDisengageSpeed" type="number" data-setting="nav_mc_braking_disengage_speed" data-setting-multiplier="1" step="1" min="0" max="1000" />
+                            <input id="brakingDisengageSpeed" type="number" data-unit="cms" data-setting="nav_mc_braking_disengage_speed" data-setting-multiplier="1" step="1" min="0" max="1000" />
                             <label for="brakingDisengageSpeed"><span data-i18n="brakingDisengageSpeed"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="brakingDisengageSpeedTip"></div>
                         </div>
 
                         <div class="number">
-                            <input id="brakingTimeout" type="number" data-setting="nav_mc_braking_timeout" data-setting-multiplier="1" step="1" min="100" max="5000" />
+                            <input id="brakingTimeout" type="number" data-unit="ms" data-setting="nav_mc_braking_timeout" data-setting-multiplier="1" step="1" min="100" max="5000" />
                             <label for="brakingTimeout"><span data-i18n="brakingTimeout"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="brakingTimeoutTip"></div>
                         </div>
@@ -283,19 +283,19 @@
                         </div>
 
                         <div class="number">
-                            <input id="brakingBoostTimeout" type="number" data-setting="nav_mc_braking_boost_timeout" data-setting-multiplier="1" step="1" min="0" max="5000" />
+                            <input id="brakingBoostTimeout" type="number" data-unit="ms" data-setting="nav_mc_braking_boost_timeout" data-setting-multiplier="1" step="1" min="0" max="5000" />
                             <label for="brakingBoostTimeout"><span data-i18n="brakingBoostTimeout"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="brakingBoostTimeoutTip"></div>
                         </div>
 
                         <div class="number">
-                            <input id="brakingBoostSpeedThreshold" type="number" data-setting="nav_mc_braking_boost_speed_threshold" data-setting-multiplier="1" step="1" min="100" max="1000" />
+                            <input id="brakingBoostSpeedThreshold" type="number" data-unit="cms"data-setting="nav_mc_braking_boost_speed_threshold" data-setting-multiplier="1" step="1" min="100" max="1000" />
                             <label for="brakingBoostSpeedThreshold"><span data-i18n="brakingBoostSpeedThreshold"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="brakingBoostSpeedThresholdTip"></div>
                         </div>
 
                         <div class="number">
-                            <input id="brakingBoostDisengageSpeed" type="number" data-setting="nav_mc_braking_boost_disengage_speed" data-setting-multiplier="1" step="1" min="100" max="1000" />
+                            <input id="brakingBoostDisengageSpeed" type="number" data-unit="cms" data-setting="nav_mc_braking_boost_disengage_speed" data-setting-multiplier="1" step="1" min="100" max="1000" />
                             <label for="brakingBoostDisengageSpeed"><span data-i18n="brakingBoostDisengageSpeed"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="brakingBoostDisengageSpeedTip"></div>
                         </div>
@@ -330,13 +330,13 @@
                         </div>
 
                         <div class="number">
-                            <input type="number" id="rthAltitude" data-setting="nav_rth_altitude" data-setting-multiplier="1" step="1" min="0" max="65000" />
+                            <input type="number" id="rthAltitude" data-unit="cm" data-setting="nav_rth_altitude" data-setting-multiplier="1" step="1" min="0" max="65000" />
                             <label for="rthAltitude"><span data-i18n="rthAltitude"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="rthAltitudeHelp"></div>
                         </div>
 
                          <div class="number">
-                            <input type="number" id="rthHomeAltitude" data-setting="nav_rth_home_altitude" data-setting-multiplier="1" step="1" min="0" max="65000" />
+                            <input type="number" id="rthHomeAltitude" data-unit="cm" data-setting="nav_rth_home_altitude" data-setting-multiplier="1" step="1" min="0" max="65000" />
                             <label for="rthHomeAltitude"><span data-i18n="rthHomeAltitudeLabel"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="rthHomeAltitudeHelp"></div>
                         </div>
@@ -369,13 +369,13 @@
                         </div>
 
                         <div class="number">
-                            <input id="rth-min-distance" type="number" data-setting="nav_min_rth_distance" data-setting-multiplier="1" step="1" min="0" max="5000" />
+                            <input id="rth-min-distance" type="number" data-unit="cm" data-setting="nav_min_rth_distance" data-setting-multiplier="1" step="1" min="0" max="5000" />
                             <label for="rth-min-distance"><span data-i18n="minRthDistance"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="minRthDistanceHelp"></div>
                         </div>
 
                         <div class="number">
-                            <input id="rthAbortThreshold" type="number" data-setting="nav_rth_abort_threshold" data-setting-multiplier="1" step="1" min="0" max="65000" />
+                            <input id="rthAbortThreshold" type="number" data-unit="cm" data-setting="nav_rth_abort_threshold" data-setting-multiplier="1" step="1" min="0" max="65000" />
                             <label for="rthAbortThreshold"><span data-i18n="rthAbortThreshold"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="rthAbortThresholdHelp"></div>
                         </div>
@@ -393,13 +393,13 @@
                     </div>
                     <div class="spacer_box">
                         <div class="number">
-                            <input type="number" id="navManualClimbRate" data-setting="nav_manual_climb_rate" data-setting-multiplier="1" step="1" min="10" max="2000" />
+                            <input type="number" id="navManualClimbRate" data-unit="cms" data-setting="nav_manual_climb_rate" data-setting-multiplier="1" step="1" min="10" max="2000" />
                             <label for="navManualClimbRate"><span data-i18n="navManualClimbRate"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="navManualClimbRateHelp"></div>
                         </div>
 
                         <div class="number">
-                            <input type="number" id="navAutoClimbRate" data-setting="nav_auto_climb_rate" data-setting-multiplier="1" step="1" min="10" max="2000" />
+                            <input type="number" id="navAutoClimbRate" data-unit="cms" data-setting="nav_auto_climb_rate" data-setting-multiplier="1" step="1" min="10" max="2000" />
                             <label for="navAutoClimbRate"><span data-i18n="navAutoClimbRate"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="navAutoClimbRateHelp"></div>
                         </div>
@@ -413,13 +413,13 @@
                     <div class="spacer_box">
 
                         <div class="number">
-                            <input type="number" id="waypointRadius" data-setting="nav_wp_radius" data-setting-multiplier="1" step="1" min="10" max="10000" />
+                            <input type="number" id="waypointRadius" data-unit="cm" data-setting="nav_wp_radius" data-setting-multiplier="1" step="1" min="10" max="10000" />
                             <label for="waypointRadius"><span data-i18n="waypointRadius"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="waypointRadiusHelp"></div>
                         </div>
 
                         <div class="number">
-                            <input type="number" id="waypointSafeDistance" data-setting="nav_wp_safe_distance" data-setting-multiplier="1" step="1" min="0" max="65000" />
+                            <input type="number" id="waypointSafeDistance" data-unit="cm" data-setting="nav_wp_safe_distance" data-setting-multiplier="1" step="1" min="0" max="65000" />
                             <label for="waypointSafeDistance"><span data-i18n="waypointSafeDistance"></span></label>
                             <div class="helpicon cf_tip" data-i18n_title="waypointSafeDistanceHelp"></div>
                         </div>
@@ -457,7 +457,7 @@
                         </div>
 
                         <div class="number">
-                            <input id="emergencyDescentRate" type="number" data-setting="nav_emerg_landing_speed" data-setting-multiplier="1" step="1" min="10" max="2000" />
+                            <input id="emergencyDescentRate" type="number" data-unit="cms" data-setting="nav_emerg_landing_speed" data-setting-multiplier="1" step="1" min="100" max="2000" />
                             <label for="emergencyDescentRate"><span data-i18n="emergencyDescentRate"></span></label>
                         </div>
                     </div>
diff --git a/tabs/failsafe.html b/tabs/failsafe.html
index 4aacf70f..fac77ea0 100644
--- a/tabs/failsafe.html
+++ b/tabs/failsafe.html
@@ -7,7 +7,7 @@
             </div>
             <div class="spacer_box">
                 <div class="number">
-                    <label> <input type="number" name="failsafe_delay" min="0" max="2000" /> <span
+                    <label> <input type="number" name="failsafe_delay" min="0" max="200" /> <span
                             data-i18n="failsafeDelayItem"></span>
                     </label>
                     <div class="helpicon cf_tip" data-i18n_title="failsafeDelayHelp"></div>
@@ -30,7 +30,7 @@
                             </label>
                         </div>
                         <div class="number">
-                            <label> <input type="number" name="failsafe_off_delay" min="0" max="2000" /> <span
+                            <label> <input type="number" name="failsafe_off_delay" min="0" max="200" /> <span
                                     data-i18n="failsafeOffDelayItem"></span>
                             </label>
                             <div class="helpicon cf_tip" data-i18n_title="failsafeOffDelayHelp"></div>
diff --git a/tabs/options.html b/tabs/options.html
index c1ebf9c2..10a3eff1 100644
--- a/tabs/options.html
+++ b/tabs/options.html
@@ -1,26 +1,67 @@
-<div class="notifications options_container options_container__checkbox">
-    <label><input type="checkbox" /><span data-i18n="options_receive_app_notifications"></span></label>
-</div>
-<div class="statistics options_container options_container__checkbox">
-    <label><input type="checkbox" /><span data-i18n="options_improve_configurator"></span></label>
-</div>
-<div class="options_container">
-    <label for="map-provider-type" data-i18n="mapProvider"></label>
-    <select id="map-provider-type">
-        <option value="osm">OpenStreetMap</option>
-        <option value="bing">Bing Maps</option>
-        <option value="mapproxy">MapProxy</option>
-    </select>
-</div>
-<div class="options_container">
-    <label for="map-api-key" data-i18n="mapApiKey"></label>
-    <input type="password" id="map-api-key" style="border: solid 1px black"/>
-</div>
-<div class="options_container">
-    <label for="proxyurl" data-i18n="proxyURL"></label>
-    <input type="text" id="proxyurl" style="border: solid 1px black"/>
-</div>
-<div class="options_container">
-    <label for="proxylayer" data-i18n="proxyLayer"></label>
-    <input type="text" id="proxylayer" style="border: solid 1px black"/>
+<div class="content_wrapper">
+    <div class="tab_title"><span data-i18n="options_title"></span>
+    </div>
+
+    <div class="Wrapper">
+        <div class="options-section gui_box grey">
+
+            <div class="spacer_box settings">
+                <div class="checkbox notifications">
+                    <input id="notificationsOptions" type="checkbox" />
+                    <label for="notificationsOptions"><span
+                            data-i18n="options_receive_app_notifications"></span></label>
+                </div>
+
+                <div class="checkbox notifications">
+                    <input id="improveConfigurator" type="checkbox" />
+                    <label for="improveConfigurator"><span data-i18n="options_improve_configurator"></span></label>
+                </div>
+            </div>
+        </div>
+
+        <div class="options-section gui_box grey">
+
+            <div class="spacer_box settings">
+                <div class="select">                    
+                    <select id="map-provider-type">
+                        <option value="osm">OpenStreetMap</option>
+                        <option value="bing">Bing Maps</option>
+                        <option value="mapproxy">MapProxy</option>
+                    </select>       
+                    <label for="map-provider-type" data-i18n="mapProvider"></label>             
+                </div>
+
+                <div class="number">
+                    <input type="password" id="map-api-key" style="border: solid 1px black" />                
+                    <label for="map-api-key" data-i18n="mapApiKey"></label>                    
+                </div>
+
+                <div class="number">                    
+                    <input type="text" id="proxyurl" style="border: solid 1px black" />
+                    <label for="proxyurl" data-i18n="proxyURL"></label>
+                </div>
+                <div class="number">                    
+                    <input type="text" id="proxylayer" style="border: solid 1px black" />
+                    <label for="proxylayer" data-i18n="proxyLayer"></label>
+                </div>
+            </div>
+        </div>
+
+        <div class="options-section gui_box grey">
+            <div class="gui_box_titlebar">
+                <div class="spacer_box_title" data-i18n="options_render"></div>
+            </div>
+            <div class="spacer_box settings">
+                <div class="select">
+                    <select id="ui-unit-type">
+                        <option value="none">None</option>
+                        <option value="OSD">OSD</option>
+                        <option value="imperial">Imperial</option>
+                        <option value="metric">Metric</option>
+                    </select>
+                    <label for="ui-unit-type" data-i18n="options_unit_type"></label>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/tabs/osd.js b/tabs/osd.js
index cb205790..a6bb527c 100644
--- a/tabs/osd.js
+++ b/tabs/osd.js
@@ -2345,6 +2345,7 @@ OSD.GUI.updateUnits = function() {
     $unitMode.change(function (e) {
         var selected = $(this).find(':selected');
         OSD.data.preferences.units = selected.data('type');
+        globalSettings.osdUnits = OSD.data.preferences.units;
         OSD.GUI.saveConfig();
         updateUnitHelp();
     });
diff --git a/tabs/setup.js b/tabs/setup.js
index eb3ffc63..d982b97a 100755
--- a/tabs/setup.js
+++ b/tabs/setup.js
@@ -8,6 +8,12 @@ TABS.setup = {
 TABS.setup.initialize = function (callback) {
     var self = this;
 
+    // Update the osd units in global settings
+    // but only if we need it
+    if (globalSettings.unitType === UnitType.OSD) {
+        get_osd_settings();
+    }
+
     if (GUI.active_tab != 'setup') {
         GUI.active_tab = 'setup';
         googleAnalytics.sendAppView('Setup');