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(`
`); + } + 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: ' + GUI.operating_system + ', ' + @@ -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 @@
- +
- +
- +
- +
- +
- +
@@ -56,22 +56,22 @@
- +
- +
- +
- +
@@ -84,22 +84,22 @@
- +
- +
- +
- +
@@ -179,7 +179,7 @@
- +
@@ -216,16 +216,16 @@
- +
- +
- +
@@ -259,19 +259,19 @@
- +
- +
- +
@@ -283,19 +283,19 @@
- +
- +
- +
@@ -330,13 +330,13 @@
- +
- +
@@ -369,13 +369,13 @@
- +
- +
@@ -393,13 +393,13 @@
- +
- +
@@ -413,13 +413,13 @@
- +
- +
@@ -457,7 +457,7 @@
- +
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 @@
-
@@ -30,7 +30,7 @@
-
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 @@ -
- -
-
- -
-
- - -
-
- - -
-
- - -
-
- - +
+
+
+ +
+
+ +
+
+ + +
+ +
+ + +
+
+
+ +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+
+ +
+
+
+
+
+
+ + +
+
+
+
\ 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');