From 43a61b3e249dbea13eebe10c94fb2651921040e0 Mon Sep 17 00:00:00 2001
From: Theo Arends <11044339+arendst@users.noreply.github.com>
Date: Sat, 6 Apr 2019 18:25:26 +0200
Subject: [PATCH] 6.5.0.5 Add compile time GUI color options

6.5.0.5 20190406
 * Add compile time GUI color options (#5586)
---
 sonoff/_changelog.ino        |  5 ++-
 sonoff/my_user_config.h      | 26 +++++++++++++++
 sonoff/sonoff_version.h      |  2 +-
 sonoff/xdrv_01_webserver.ino | 65 ++++++++++++++++++++++++++++--------
 sonoff/xdrv_09_timers.ino    | 19 +++++++++--
 5 files changed, 98 insertions(+), 19 deletions(-)

diff --git a/sonoff/_changelog.ino b/sonoff/_changelog.ino
index e21c7409a..95d065ccb 100644
--- a/sonoff/_changelog.ino
+++ b/sonoff/_changelog.ino
@@ -1,4 +1,7 @@
-/* 6.5.0.4 20190402
+/* 6.5.0.5 20190406
+ * Add compile time GUI color options (#5586)
+ *
+ * 6.5.0.4 20190402
  * Fix Configure Timer Web GUI (#5568)
  * Add validation check when loading settings from flash
  * Fixed Display Bug in KNX webmenu for Physical Address
diff --git a/sonoff/my_user_config.h b/sonoff/my_user_config.h
index 407a25c13..97a43836f 100644
--- a/sonoff/my_user_config.h
+++ b/sonoff/my_user_config.h
@@ -257,6 +257,32 @@
   #define WEB_USERNAME         "admin"           // Web server Admin mode user name
   #define USE_EMULATION                          // Enable Belkin WeMo and Hue Bridge emulation for Alexa (+16k code, +2k mem)
 
+// Black text on white/greyish background (default)
+  #define COLOR_TEXT "#000"                      // Global text color - Black
+  #define COLOR_BACKGROUND "#fff"                // Global background color - White
+  #define COLOR_FORM "#f2f2f2"                   // Form background color - Greyish
+
+// White text on black/greyish background (alternative)
+//  #define COLOR_TEXT "#fff"                      // Global text color - White
+//  #define COLOR_BACKGROUND "#000"                // Global background color - Black
+//  #define COLOR_FORM "#4f4f4f"                   // Form background color - Greyish
+
+  #define COLOR_TEXT_WARNING "red"               // Warning text color - Red
+  #define COLOR_TEXT_SUCCESS "green"             // Success text color - Green
+
+  #define COLOR_BUTTON_TEXT "#fff"               // Button text color - White
+  #define COLOR_BUTTON "#1fa3ec"                 // Button color - Blueish
+  #define COLOR_BUTTON_HOVER "#0e70a4"           // Button color when hovered over - Darker blueish
+  #define COLOR_BUTTON_RESET "#d43535"           // Restart/Reset/Delete button color - Redish
+  #define COLOR_BUTTON_RESET_HOVER "#931f1f"     // Restart/Reset/Delete button color when hovered over - Darker redish
+  #define COLOR_BUTTON_SAVE "#47c266"            // Save button color - Greenish
+  #define COLOR_BUTTON_SAVE_HOVER "#5aaf6f"      // Save button color when hovered over - Darker greenish
+
+  #define COLOR_TIMER_TAB_TEXT "#fff"            // Config timer tab text color - White
+  #define COLOR_TIMER_TAB_BACKGROUND "#999"      // Config timer tab background color - Light grey
+  #define COLOR_TIMER_ACTIVE_TAB_TEXT "#000"     // Config timer active tab text color - Black
+  #define COLOR_TIMER_ACTIVE_TAB_BG "transparent"  // Config timer active tab text color - Transparent (= COLOR_FORM)
+
 // -- mDNS ----------------------------------------
 #define USE_DISCOVERY                            // Enable mDNS for the following services (+8k code, +0.3k mem)
   #define WEBSERVER_ADVERTISE                    // Provide access to webserver by name <Hostname>.local/
diff --git a/sonoff/sonoff_version.h b/sonoff/sonoff_version.h
index 3a8dc0eb8..c43d2d6d3 100644
--- a/sonoff/sonoff_version.h
+++ b/sonoff/sonoff_version.h
@@ -20,6 +20,6 @@
 #ifndef _SONOFF_VERSION_H_
 #define _SONOFF_VERSION_H_
 
-const uint32_t VERSION = 0x06050004;
+const uint32_t VERSION = 0x06050005;
 
 #endif  // _SONOFF_VERSION_H_
diff --git a/sonoff/xdrv_01_webserver.ino b/sonoff/xdrv_01_webserver.ino
index 33391287f..ff5672093 100644
--- a/sonoff/xdrv_01_webserver.ino
+++ b/sonoff/xdrv_01_webserver.ino
@@ -31,6 +31,43 @@
 #define WIFI_SOFT_AP_CHANNEL                  1          // Soft Access Point Channel number between 1 and 11 as used by SmartConfig web GUI
 #endif
 
+#ifndef COLOR_TEXT_WARNING
+#define COLOR_TEXT_WARNING                    "red"      // Warning text color - Red
+#endif
+#ifndef COLOR_TEXT_SUCCESS
+#define COLOR_TEXT_SUCCESS                    "green"    // Success text color - Green
+#endif
+#ifndef COLOR_TEXT
+#define COLOR_TEXT                            "#000"     // Global text color - Black
+#endif
+#ifndef COLOR_BACKGROUND
+#define COLOR_BACKGROUND                      "#fff"     // Global background color - White
+#endif
+#ifndef COLOR_FORM
+#define COLOR_FORM                            "#f2f2f2"  // Form background color - Greyish
+#endif
+#ifndef COLOR_BUTTON_TEXT
+#define COLOR_BUTTON_TEXT                     "#fff"     // Button text color - White
+#endif
+#ifndef COLOR_BUTTON
+#define COLOR_BUTTON                          "#1fa3ec"  // Button color - Blueish
+#endif
+#ifndef COLOR_BUTTON_HOVER
+#define COLOR_BUTTON_HOVER                    "#0e70a4"  // Button color when hovered over - Darker blueish
+#endif
+#ifndef COLOR_BUTTON_RESET
+#define COLOR_BUTTON_RESET                    "#d43535"  // Restart/Reset/Delete button color - Redish
+#endif
+#ifndef COLOR_BUTTON_RESET_HOVER
+#define COLOR_BUTTON_RESET_HOVER              "#931f1f"  // Restart/Reset/Delete button color when hovered over - Darker redish
+#endif
+#ifndef COLOR_BUTTON_SAVE
+#define COLOR_BUTTON_SAVE                     "#47c266"  // Save button color - Greenish
+#endif
+#ifndef COLOR_BUTTON_SAVE_HOVER
+#define COLOR_BUTTON_SAVE_HOVER               "#5aaf6f"  // Save button color when hovered over - Darker greenish
+#endif
+
 const uint16_t CHUNKED_BUFFER_SIZE = 400;                // Chunk buffer size (should be smaller than half mqtt_date size)
 
 const uint16_t HTTP_REFRESH_TIME = 2345;                 // milliseconds
@@ -239,21 +276,21 @@ const char HTTP_HEAD_STYLE1[] PROGMEM =
 
   "<style>"
   "div,fieldset,input,select{padding:5px;font-size:1em;}"
-  "fieldset{background-color:#f2f2f2;}"  // Also update HTTP_TIMER_STYLE
+  "fieldset{background-color:" COLOR_FORM ";}"  // Also update HTTP_TIMER_STYLE
   "p{margin:0.5em 0;}"
   "input{width:100%%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}"
   "input[type=checkbox],input[type=radio]{width:1em;margin-right:6px;vertical-align:-1px;}"
   "select{width:100%%;}"
   "textarea{resize:none;width:98%%;height:318px;padding:5px;overflow:auto;}"
-  "body{text-align:center;font-family:verdana;}"
+  "body{text-align:center;font-family:verdana;background-color:" COLOR_BACKGROUND ";}"
   "td{padding:0px;}";
 const char HTTP_HEAD_STYLE2[] PROGMEM =
-  "button{border:0;border-radius:0.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%%;-webkit-transition-duration:0.4s;transition-duration:0.4s;cursor:pointer;}"
-  "button:hover{background-color:#0e70a4;}"
-  ".bred{background-color:#d43535;}"
-  ".bred:hover{background-color:#931f1f;}"
-  ".bgrn{background-color:#47c266;}"
-  ".bgrn:hover{background-color:#5aaf6f;}"
+  "button{border:0;border-radius:0.3rem;background-color:" COLOR_BUTTON ";color:" COLOR_BUTTON_TEXT ";line-height:2.4rem;font-size:1.2rem;width:100%%;-webkit-transition-duration:0.4s;transition-duration:0.4s;cursor:pointer;}"
+  "button:hover{background-color:" COLOR_BUTTON_HOVER ";}"
+  ".bred{background-color:" COLOR_BUTTON_RESET ";}"
+  ".bred:hover{background-color:" COLOR_BUTTON_RESET_HOVER ";}"
+  ".bgrn{background-color:" COLOR_BUTTON_SAVE ";}"
+  ".bgrn:hover{background-color:" COLOR_BUTTON_SAVE_HOVER ";}"
   "a{text-decoration:none;}"
   ".p{float:left;text-align:left;}"
   ".q{float:right;text-align:right;}";
@@ -262,9 +299,9 @@ const char HTTP_HEAD_STYLE3[] PROGMEM =
 
   "</head>"
   "<body>"
-  "<div style='text-align:left;display:inline-block;min-width:340px;'>"
+  "<div style='text-align:left;display:inline-block;color:" COLOR_TEXT ";min-width:340px;'>"
 #ifdef FIRMWARE_MINIMAL
-  "<div style='text-align:center;color:red;'><h3>" D_MINIMAL_FIRMWARE_PLEASE_UPGRADE "</h3></div>"
+  "<div style='text-align:center;color:" COLOR_TEXT_WARNING ";'><h3>" D_MINIMAL_FIRMWARE_PLEASE_UPGRADE "</h3></div>"
 #endif
   "<div style='text-align:center;'><noscript>" D_NOSCRIPT "<br/></noscript>"
 #ifdef LANGUAGE_MODULE_NAME
@@ -1096,7 +1133,7 @@ void HandleTemplateConfiguration(void)
     if ((i < 6) || ((i > 8) && (i != 11))) {          // Ignore flash pins GPIO06, 7, 8 and 11
       bool esp8285 = ((9==i)||(10==i));
       WSContentSend_P(PSTR("<tr><td><b>%s" D_GPIO "%d%s</b></td><td%s><select id='g%d' name='g%d'></select></td></tr>"),
-        (esp8285) ? "<font color='red'>" : "", i, (esp8285) ? "</font>" : "", (0==i) ? " style='width:200px'" : "", i, i);
+        (esp8285) ? "<font color='" COLOR_TEXT_WARNING "'>" : "", i, (esp8285) ? "</font>" : "", (0==i) ? " style='width:200px'" : "", i, i);
     }
   }
   WSContentSend_P(PSTR("</table>"));
@@ -1202,7 +1239,7 @@ void HandleModuleConfiguration(void)
     if (ValidGPIO(i, cmodule.io[i])) {
       snprintf_P(stemp, 3, PINS_WEMOS +i*2);
       WSContentSend_P(PSTR("<tr><td style='width:190px'>%s <b>" D_GPIO "%d</b> %s</td><td style='width:176px'><select id='g%d' name='g%d'></select></td></tr>"),
-        (WEMOS==my_module_type)?stemp:"", i, (0==i)? D_SENSOR_BUTTON "1":(1==i)? D_SERIAL_OUT :(3==i)? D_SERIAL_IN :((9==i)||(10==i))? "<font color='red'>ESP8285</font>" :(12==i)? D_SENSOR_RELAY "1":(13==i)? D_SENSOR_LED "1i":(14==i)? D_SENSOR :"", i, i);
+        (WEMOS==my_module_type)?stemp:"", i, (0==i)? D_SENSOR_BUTTON "1":(1==i)? D_SERIAL_OUT :(3==i)? D_SERIAL_IN :((9==i)||(10==i))? "<font color='" COLOR_TEXT_WARNING "'>ESP8285</font>" :(12==i)? D_SENSOR_RELAY "1":(13==i)? D_SENSOR_LED "1i":(14==i)? D_SENSOR :"", i, i);
     }
   }
   WSContentSend_P(PSTR("</table>"));
@@ -1771,7 +1808,7 @@ void HandleUploadDone(void)
   WSContentSendStyle();
   WSContentSend_P(PSTR("<div style='text-align:center;'><b>" D_UPLOAD " <font color='"));
   if (upload_error) {
-    WSContentSend_P(PSTR("red'>" D_FAILED "</font></b><br/><br/>"));
+    WSContentSend_P(PSTR(COLOR_TEXT_WARNING "'>" D_FAILED "</font></b><br/><br/>"));
 #ifdef USE_RF_FLASH
     if (upload_error < 14) {
 #else
@@ -1785,7 +1822,7 @@ void HandleUploadDone(void)
     AddLog_P2(LOG_LEVEL_DEBUG, PSTR(D_UPLOAD ": %s"), error);
     stop_flash_rotate = Settings.flag.stop_flash_rotate;
   } else {
-    WSContentSend_P(PSTR("green'>" D_SUCCESSFUL "</font></b><br/>"));
+    WSContentSend_P(PSTR(COLOR_TEXT_SUCCESS "'>" D_SUCCESSFUL "</font></b><br/>"));
     WSContentSend_P(HTTP_MSG_RSTRT);
     ShowWebSource(SRC_WEBGUI);
     restart_flag = 2;  // Always restart to re-enable disabled features during update
diff --git a/sonoff/xdrv_09_timers.ino b/sonoff/xdrv_09_timers.ino
index 36941b9f1..2755f5a40 100644
--- a/sonoff/xdrv_09_timers.ino
+++ b/sonoff/xdrv_09_timers.ino
@@ -512,6 +512,19 @@ bool TimerCommand(void)
 #ifdef USE_WEBSERVER
 #ifdef USE_TIMERS_WEB
 
+#ifndef COLOR_TIMER_TAB_TEXT
+#define COLOR_TIMER_TAB_TEXT        "#fff"         // Config timer tab text color - White
+#endif
+#ifndef COLOR_TIMER_TAB_BACKGROUND
+#define COLOR_TIMER_TAB_BACKGROUND  "#999"         // Config timer tab background color - Light grey
+#endif
+#ifndef COLOR_TIMER_ACTIVE_TAB_TEXT
+#define COLOR_TIMER_ACTIVE_TAB_TEXT "#000"         // Config timer active tab text color - Black
+#endif
+#ifndef COLOR_TIMER_ACTIVE_TAB_BG
+#define COLOR_TIMER_ACTIVE_TAB_BG   "transparent"  // Config timer active tab text color - Transparent (= COLOR_FORM)
+#endif
+
 #define WEB_HANDLE_TIMER "tm"
 
 const char S_CONFIGURE_TIMER[] PROGMEM = D_CONFIGURE_TIMER;
@@ -596,8 +609,8 @@ const char HTTP_TIMER_SCRIPT4[] PROGMEM =
     "if(ct<99){st();}"                                            // Save changes
     "ct=t;"
     "o=document.getElementsByClassName('tl');"                    // Restore style to all tabs/buttons
-    "for(i=0;i<o.length;i++){o[i].style.cssText=\"background-color:#999;color:#fff;font-weight:normal;\"}"
-    "e.style.cssText=\"background-color:transparent;color:#000;font-weight:bold;\";"  // Change style to tab/button used to open content
+    "for(i=0;i<o.length;i++){o[i].style.cssText=\"background-color:" COLOR_TIMER_TAB_BACKGROUND ";color:" COLOR_TIMER_TAB_TEXT ";font-weight:normal;\"}"
+    "e.style.cssText=\"background-color:" COLOR_TIMER_ACTIVE_TAB_BG ";color:" COLOR_TIMER_ACTIVE_TAB_TEXT ";font-weight:bold;\";"  // Change style to tab/button used to open content
     "s=pt[ct];"                                                   // Get parameters from array
 #ifdef USE_SUNRISE
     "p=(s>>29)&3;eb('b'+p).checked=1;"                            // Set mode
@@ -653,7 +666,7 @@ const char HTTP_TIMER_SCRIPT6[] PROGMEM =
   "}"
   "window.onload=it;";
 const char HTTP_TIMER_STYLE[] PROGMEM =
-  ".tl{float:left;border-radius:0;border:1px solid #f2f2f2;padding:1px;width:6.25%%;}";  // Border color needs to be the same as Fieldset background color from HTTP_HEAD_STYLE1 (transparent won't work)
+  ".tl{float:left;border-radius:0;border:1px solid " COLOR_FORM ";padding:1px;width:6.25%%;}";  // Border color needs to be the same as Fieldset background color from HTTP_HEAD_STYLE1 (transparent won't work)
 const char HTTP_FORM_TIMER1[] PROGMEM =
   "<fieldset style='min-width:470px;text-align:center;'>"
   "<legend style='text-align:left;'><b>&nbsp;" D_TIMER_PARAMETERS "&nbsp;</b></legend>"