Merge pull request #1832 from iNavFlight/dzikuvx-colored-timer-outputs

Add colors to easilly distinguish between timer outputs

js/outputMapping.js

@@ -20,6 +20,16 @@ let OutputMappingCollection = function () {
     const OUTPUT_TYPE_MOTOR = 0;
     const OUTPUT_TYPE_SERVO = 1;
 
+    const outputColor = [
+        "#8ecae6",
+        "#2a9d8f",
+        "#e9c46a",
+        "#f4a261",
+        "#e76f51",
+        "#ef476f",
+        "#ffc300"
+    ];
+
     self.TIMER_OUTPUT_MODE_AUTO = 0;
     self.TIMER_OUTPUT_MODE_MOTORS = 1;
     self.TIMER_OUTPUT_MODE_SERVOS = 2;
@@ -36,6 +46,18 @@ let OutputMappingCollection = function () {
         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) {
         let used = {};
         let outputCount = self.getOutputCount();

tabs/mixer.html

@@ -27,7 +27,7 @@
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" data-i18n="timerOutputs"></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>

tabs/mixer.js

@@ -74,9 +74,13 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
 
         $outputRow.append('<th data-i18n="mappingTableOutput"></th>');
         $functionRow.append('<th data-i18n="mappingTableFunction"></th>');
-
+        
         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>');
         }
 
@@ -107,7 +111,7 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
         for (t of usedTimers) {
             var usageMode = OUTPUT_MAPPING.getTimerOverride(t);
             $container.append(
-                        '<div class="select">' +
+                        '<div class="select" style="padding: 5px; margin: 1px; background-color: ' + OUTPUT_MAPPING.getTimerColor(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_MOTORS + '' + (usageMode == OUTPUT_MAPPING.TIMER_OUTPUT_MODE_MOTORS ? ' selected' : '')+ '>MOTORS</option>'+