From 637acdd15da82c76b8ecc41c44da155ab090505f Mon Sep 17 00:00:00 2001
From: "Pawel Spychalski (DzikuVx)" <pspychalski@outlook.com>
Date: Fri, 29 Sep 2023 13:16:35 +0200
Subject: [PATCH] Add colors to easilly distinguish between timer outputs

---
 js/outputMapping.js | 22 ++++++++++++++++++++++
 tabs/mixer.html     |  2 +-
 tabs/mixer.js       | 10 +++++++---
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/js/outputMapping.js b/js/outputMapping.js
index 748804b33..c6f502ac1 100644
--- a/js/outputMapping.js
+++ b/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();
diff --git a/tabs/mixer.html b/tabs/mixer.html
index ef3c29a16..ddfad9a76 100644
--- a/tabs/mixer.html
+++ b/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>
diff --git a/tabs/mixer.js b/tabs/mixer.js
index 87639e94f..b2dce3761 100644
--- a/tabs/mixer.js
+++ b/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>'+