Mirror/inav-configurator
1
0
Fork 0
mirror of https://github.com/iNavFlight/inav-configurator.git synced 2025-07-25 17:25:14 +03:00
Code Wiki Activity

Add colors to easilly distinguish between timer outputs

Browse source
This commit is contained in:
Pawel Spychalski (DzikuVx) 2023-09-29 13:16:35 +02:00
parent 55046e53bd
commit 637acdd15d
3 changed files with 30 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

22
js/outputMapping.js
View file

@ -20,6 +20,16 @@ let OutputMappingCollection = function () {
const OUTPUT_TYPE_MOTOR = 0; const OUTPUT_TYPE_MOTOR = 0;
const OUTPUT_TYPE_SERVO = 1; const OUTPUT_TYPE_SERVO = 1;
const outputColor = [
"#8ecae6",
"#2a9d8f",
"#e9c46a",
"#f4a261",
"#e76f51",
"#ef476f",
"#ffc300"
];
self.TIMER_OUTPUT_MODE_AUTO = 0; self.TIMER_OUTPUT_MODE_AUTO = 0;
self.TIMER_OUTPUT_MODE_MOTORS = 1; self.TIMER_OUTPUT_MODE_MOTORS = 1;
self.TIMER_OUTPUT_MODE_SERVOS = 2; self.TIMER_OUTPUT_MODE_SERVOS = 2;
@ -36,6 +46,18 @@ let OutputMappingCollection = function () {
return timerOverrides[timer]; return timerOverrides[timer];
} }
self.getTimerColor = function (timer) {
let timerIndex = OUTPUT_MAPPING.getUsedTimerIds().indexOf(String(timer));
return outputColor[timerIndex % outputColor.length];
}
self.getOutputTimerColor = function (output) {
let timerId = OUTPUT_MAPPING.getTimerId(output);
return self.getTimerColor(timerId);
}
self.getUsedTimerIds = function (timer) { self.getUsedTimerIds = function (timer) {
let used = {}; let used = {};
let outputCount = self.getOutputCount(); let outputCount = self.getOutputCount();

2
tabs/mixer.html
View file

@ -27,7 +27,7 @@
<div class="gui_box_titlebar"> <div class="gui_box_titlebar">
<div class="spacer_box_title" data-i18n="timerOutputs"></div> <div class="spacer_box_title" data-i18n="timerOutputs"></div>
</div> </div>
<div class="spacer_box" id="timerOutputsList"></div> <div class="spacer_box" id="timerOutputsList" style="padding: 0; width: calc(100% - 12px)"></div>
</div> </div>
</div> </div>

10
tabs/mixer.js
View file

@ -74,9 +74,13 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
$outputRow.append('<th data-i18n="mappingTableOutput"></th>'); $outputRow.append('<th data-i18n="mappingTableOutput"></th>');
$functionRow.append('<th data-i18n="mappingTableFunction"></th>'); $functionRow.append('<th data-i18n="mappingTableFunction"></th>');
for (let i = 1; i <= outputCount; i++) { for (let i = 1; i <= outputCount; i++) {
$outputRow.append('<td>S' + i + ' (T' + (OUTPUT_MAPPING.getTimerId(i -1)) + ')</td>');
let timerId = OUTPUT_MAPPING.getTimerId(i - 1);
let color = OUTPUT_MAPPING.getOutputTimerColor(i - 1);
$outputRow.append('<td style="background-color: ' + color + '">S' + i + ' (T' + (timerId) + ')</td>');
$functionRow.append('<td id="function-' + i +'">-</td>'); $functionRow.append('<td id="function-' + i +'">-</td>');
} }
@ -107,7 +111,7 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
for (t of usedTimers) { for (t of usedTimers) {
var usageMode = OUTPUT_MAPPING.getTimerOverride(t); var usageMode = OUTPUT_MAPPING.getTimerOverride(t);
$container.append( $container.append(
'<div class="select">' + '<div class="select" style="padding: 5px; margin: 1px; background-color: ' + OUTPUT_MAPPING.getTimerColor(t) + '">' +
'<select id="timer-output-' + t + '">' + '<select id="timer-output-' + t + '">' +
'<option value=' + OUTPUT_MAPPING.TIMER_OUTPUT_MODE_AUTO + '' + (usageMode == OUTPUT_MAPPING.TIMER_OUTPUT_MODE_AUTO ? ' selected' : '')+ '>AUTO</option>'+ '<option value=' + OUTPUT_MAPPING.TIMER_OUTPUT_MODE_AUTO + '' + (usageMode == OUTPUT_MAPPING.TIMER_OUTPUT_MODE_AUTO ? ' selected' : '')+ '>AUTO</option>'+
'<option value=' + OUTPUT_MAPPING.TIMER_OUTPUT_MODE_MOTORS + '' + (usageMode == OUTPUT_MAPPING.TIMER_OUTPUT_MODE_MOTORS ? ' selected' : '')+ '>MOTORS</option>'+ '<option value=' + OUTPUT_MAPPING.TIMER_OUTPUT_MODE_MOTORS + '' + (usageMode == OUTPUT_MAPPING.TIMER_OUTPUT_MODE_MOTORS ? ' selected' : '')+ '>MOTORS</option>'+