Skip to content

Commit 389e292

Browse files
DzikuVxDzikuVx
authored
Merge pull request #1377 from elgansayer/feature/uiunits
Add UI units to number inputs
2 parents 9272151 + 29e3de2 commit 389e292

File tree

9 files changed

+328
-67
lines changed

9 files changed

+328
-67
lines changed

‎_locales/en/messages.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,13 @@
1212
"options_improve_configurator": {
1313
"message": "Send anonymous usage data to the developer team"
1414
},
15-
15+
"options_unit_type": {
16+
"message": "Set how the units render on the configurator only"
17+
},
18+
"options_render": {
19+
"message": "Configurator rendering options"
20+
},
21+
1622
"connect": {
1723
"message": "Connect"
1824
},

‎js/settings.js‎

Lines changed: 110 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ var Settings = (function () {
1010
});
1111
return Promise.mapSeries(inputs, function (input, ii) {
1212
var settingName = input.data('setting');
13+
var inputUnit = input.data('unit');
14+
1315
return mspHelper.getSetting(settingName).then(function (s) {
1416
// Check if the input declares a parent
1517
// to be hidden in case of the setting not being available.
@@ -25,6 +27,7 @@ var Settings = (function () {
2527
return;
2628
}
2729
parent.show();
30+
2831
if (input.prop('tagName') == 'SELECT' || s.setting.table) {
2932
if (input.attr('type') == 'checkbox') {
3033
input.prop('checked', s.value > 0);
@@ -67,11 +70,13 @@ var Settings = (function () {
6770
} else {
6871
var multiplier = parseFloat(input.data('setting-multiplier') || 1);
6972
input.attr('type', 'number');
70-
input.attr('step', 1 / multiplier);
71-
input.attr('min', s.setting.min / multiplier);
72-
input.attr('max', s.setting.max / multiplier);
7373
input.val((s.value / multiplier).toFixed(Math.log10(multiplier)));
7474
}
75+
76+
// If data is defined, We want to convert this value into
77+
// something matching the units
78+
self.convertToUnitSetting(input, inputUnit);
79+
7580
input.data('setting-info', s.setting);
7681
if (input.data('live')) {
7782
input.change(function() {
@@ -82,6 +87,108 @@ var Settings = (function () {
8287
});
8388
};
8489

90+
91+
/**
92+
*
93+
* @param {JQuery Element} input
94+
* @param {String} inputUnit Unit from HTML Dom input
95+
*/
96+
self.convertToUnitSetting = function (element, inputUnit) {
97+
98+
// One of the following;
99+
// none, OSD, imperial, metric
100+
const configUnitType = globalSettings.unitType;
101+
102+
// Small closure to grab the unit as described by either
103+
// the app settings or the app OSD settings, confused? yeah
104+
const getUnitDisplayTypeValue = () => {
105+
// Try and match the values
106+
switch (configUnitType) {
107+
case UnitType.OSD: // Match the OSD value on the UI
108+
return globalSettings.osdUnits;
109+
break;
110+
case UnitType.imperial:
111+
return 0; // Imperial OSD Value
112+
break;
113+
case UnitType.metric:
114+
return 1; // Metric + MPH OSD Value
115+
break;
116+
case UnitType.none:
117+
default:
118+
// Something went wrong
119+
return -1;
120+
}
121+
}
122+
123+
// Sets the int value of the way we want to display the
124+
// units. We use the OSD unit values here for easy
125+
const uiUnitValue = getUnitDisplayTypeValue();
126+
127+
const oldValue = element.val();
128+
129+
// Ensure we can do conversions
130+
if (configUnitType === UnitType.none || uiUnitValue === -1 || !inputUnit || !oldValue || !element) {
131+
return;
132+
}
133+
134+
// Used to convert between a value and a value matching the int
135+
// unit display value. Eg 1 = Metric
136+
// units. We use the OSD unit values here for easy
137+
const conversionTable = {
138+
1: {
139+
'cm': { multiplier: 100, unitName: 'm' },
140+
'cms': { multiplier: 27.77777777777778, unitName: 'Km/h' }
141+
},
142+
2: {
143+
'cm': { multiplier: 100, unitName: 'm' },
144+
},
145+
4: {
146+
'cms': { multiplier: 51.44444444444457, unitName: 'Kt' }
147+
},
148+
default: {
149+
'cm': { multiplier: 30.48, unitName: 'ft' },
150+
'cms': { multiplier: 44.704, unitName: 'mph' },
151+
'ms': { multiplier: 1000, unitName: 'sec' }
152+
},
153+
}
154+
155+
// Small closure to try and get the multiplier
156+
// needed from the conversion table
157+
const getUnitMultiplier = () => {
158+
if(conversionTable[uiUnitValue] && conversionTable[uiUnitValue][inputUnit]) {
159+
return conversionTable[uiUnitValue][inputUnit];
160+
}
161+
162+
return conversionTable['default'][inputUnit];
163+
}
164+
165+
// Get the default multi obj or the custom
166+
const multiObj = getUnitMultiplier();
167+
168+
if(!multiObj) {
169+
return;
170+
}
171+
172+
const multiplier = multiObj.multiplier;
173+
const unitName = multiObj.unitName;
174+
175+
// Update the step, min, and max; as we have the multiplier here.
176+
if (element.attr('type') == 'number') {
177+
element.attr('step', ((multiplier != 1) ? '0.01' : '1'));
178+
element.attr('min', (element.attr('min') / multiplier).toFixed(2));
179+
element.attr('max', (element.attr('max') / multiplier).toFixed(2));
180+
}
181+
182+
// Update the input with a new formatted unit
183+
const convertedValue = Number((oldValue / multiplier).toFixed(2));
184+
const newValue = Number.isInteger(convertedValue) ? Math.round(convertedValue) : convertedValue;
185+
element.val(newValue);
186+
element.data('setting-multiplier', multiplier);
187+
188+
// Now wrap the input in a display that shows the unit
189+
element.wrap(`<div data-unit="${unitName}" class="unit_wrapper unit"></div>`);
190+
}
191+
85192
self.saveInput = function(input) {
86193
var settingName = input.data('setting');
87194
var setting = input.data('setting-info');

‎main.css‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -516,6 +516,11 @@ input[type="number"]::-webkit-inner-spin-button {
516516
z-index: 10000;
517517
}
518518

519+
/* options modified GUI BOX */
520+
#options-window .gui_box {
521+
float: none;
522+
}
523+
519524
.options_container__checkbox input {
520525
float: left;
521526
margin-top: 3px;
@@ -2198,4 +2203,37 @@ ol li {
21982203
.red-background td,
21992204
.red-background th {
22002205
background-color: tomato !important;
2201-
}
2206+
}
2207+
2208+
/* Wrapper for inputs with unit displays */
2209+
.unit_wrapper {
2210+
display: inline-block;
2211+
position: relative;
2212+
}
2213+
2214+
/* Position the unit to the right of the wrapper */
2215+
.unit_wrapper::after {
2216+
position: absolute;
2217+
top: 2px;
2218+
right: .7em;
2219+
transition: all .05s ease-in-out;
2220+
}
2221+
2222+
/* Move unit more to the left on hover or focus within
2223+
for arrow buttons will appear to the right of number inputs */
2224+
.unit_wrapper:hover::after,
2225+
.unit_wrapper:focus-within::after {
2226+
right: 1.3em;
2227+
}
2228+
2229+
/* Handle Firefox (arrows always shown) */
2230+
@supports (-moz-appearance:none) {
2231+
.unit_wrapper::after {
2232+
right: 1.3em;
2233+
}
2234+
}
2235+
2236+
/* Set the unit abbreviation for each unit class */
2237+
.unit::after {
2238+
content: attr(data-unit) ;
2239+
}

‎main.js‎

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,20 @@ googleAnalyticsService.getConfig().addCallback(function (config) {
1111

1212
chrome.storage = chrome.storage || {};
1313

14+
// Set how the units render on the configurator only
15+
const UnitType = {
16+
none: "none",
17+
OSD: "OSD",
18+
imperial: "imperial",
19+
metric: "metric",
20+
}
21+
1422
let globalSettings = {
23+
// Configurator rendering options
24+
// Used to depict how the units are displayed within the UI
25+
unitType: null,
26+
// Used to convert units within the UI
27+
osdUnits: null,
1528
mapProviderType: null,
1629
mapApiKey: null,
1730
proxyURL: null,
@@ -22,6 +35,12 @@ $(document).ready(function () {
2235
// translate to user-selected language
2336
localize();
2437

38+
chrome.storage.local.get('unit_type', function (result) {
39+
if (!result.unit_type) {
40+
result.unit_type = UnitType.none;
41+
}
42+
globalSettings.unitType = result.unit_type;
43+
});
2544
chrome.storage.local.get('map_provider_type', function (result) {
2645
if (typeof result.map_provider_type === 'undefined') {
2746
result.map_provider_type = 'osm';
@@ -46,6 +65,11 @@ $(document).ready(function () {
4665
}
4766
globalSettings.proxyLayer = result.proxylayer;
4867
});
68+
69+
// Resets the OSD units used by the unit coversion when the FC is disconnected.
70+
if (!CONFIGURATOR.connectionValid) {
71+
globalSettings.osdUnits = null;
72+
}
4973

5074
// alternative - window.navigator.appVersion.match(/Chrome\/([0-9.]*)/)[1];
5175
GUI.log('Running - OS: <strong>' + GUI.operating_system + '</strong>, ' +
@@ -303,11 +327,31 @@ $(document).ready(function () {
303327
googleAnalyticsConfig.setTrackingPermitted(check);
304328
});
305329

330+
$('#ui-unit-type').val(globalSettings.unitType);
306331
$('#map-provider-type').val(globalSettings.mapProviderType);
307332
$('#map-api-key').val(globalSettings.mapApiKey);
308333
$('#proxyurl').val(globalSettings.proxyURL);
309-
$('#proxylayer').val(globalSettings.proxyLayer);
310-
334+
$('#proxylayer').val(globalSettings.proxyLayer);
335+
336+
// Set the value of the unit type
337+
// none, OSD, imperial, metric
338+
$('#ui-unit-type').change(function () {
339+
chrome.storage.local.set({
340+
'unit_type': $(this).val()
341+
});
342+
globalSettings.unitType = $(this).val();
343+
344+
// Update the osd units in global settings
345+
// but only if we need it
346+
if (globalSettings.unitType === UnitType.OSD) {
347+
get_osd_settings();
348+
}
349+
350+
// Horrible way to reload the tab
351+
const activeTab = $('#tabs li.active');
352+
activeTab.removeClass('active');
353+
activeTab.find('a').click();
354+
});
311355
$('#map-provider-type').change(function () {
312356
chrome.storage.local.set({
313357
'map_provider_type': $(this).val()
@@ -480,6 +524,24 @@ $(document).ready(function () {
480524
});
481525
});
482526

527+
function get_osd_settings() {
528+
if (globalSettings.osdUnits !== undefined && globalSettings.osdUnits !== null) {
529+
return;
530+
}
531+
532+
MSP.promise(MSPCodes.MSP2_INAV_OSD_PREFERENCES).then(function (resp) {
533+
var prefs = resp.data;
534+
prefs.readU8();
535+
prefs.readU8();
536+
prefs.readU8();
537+
prefs.readU8();
538+
prefs.readU8();
539+
prefs.readU8();
540+
prefs.readU8();
541+
globalSettings.osdUnits = prefs.readU8();
542+
});
543+
}
544+
483545
function catch_startup_time(startTime) {
484546
var endTime = new Date().getTime(),
485547
timeSpent = endTime - startTime;

0 commit comments

Comments
 (0)