From 9bba95a7cc3fcb3eb21283f35cc7924e44d7bc16 Mon Sep 17 00:00:00 2001
From: Staars <Baars@gmx.de>
Date: Thu, 21 Nov 2019 18:02:58 +0100
Subject: [PATCH] responsive color update, fix scaling

---
 tasmota/xdrv_01_webserver.ino | 30 +++++++++++++++++++++---------
 tasmota/xdrv_04_light.ino     |  3 ++-
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/tasmota/xdrv_01_webserver.ino b/tasmota/xdrv_01_webserver.ino
index 1502a35d6..302bc775c 100644
--- a/tasmota/xdrv_01_webserver.ino
+++ b/tasmota/xdrv_01_webserver.ino
@@ -16,7 +16,7 @@
   You should have received a copy of the GNU General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-
+#define USE_COLORPICKER
 #ifdef USE_WEBSERVER
 /*********************************************************************************************\
  * Web server and WiFi Manager
@@ -162,6 +162,12 @@ const char HTTP_SCRIPT_ROOT[] PROGMEM =
   "function lc(v,i,p){"
     "la('&'+v+i+'='+p);"
   "}"
+#ifdef USE_COLORPICKER  
+  "function ld(v,p){"       //
+  "eb('s').style.backgroundImage='linear-gradient(to right,grey,hsl('+p+',100%%,50%%))';"
+  "la('&'+v+'='+p);"
+  "}"
+#endif  //USE_COLORPICKER
 #endif  // USE_JAVASCRIPT_ES6
 
   "wl(la);";
@@ -378,9 +384,12 @@ const char HTTP_MSG_SLIDER1[] PROGMEM =
 const char HTTP_MSG_SLIDER2[] PROGMEM =
   "<div><span class='p'>%s</span><span class='q'>%s</span></div>"
   "<div><input type='range' min='%d' max='%d' value='%d' onchange='lc(\"%c\", %d, value)'></div>";
-const char HTTP_MSG_SLIDER3[] PROGMEM = // HUE and SATURATION
-  "<br><div style='background-image:linear-gradient(to right, %s'><input type='range' min='%d' max='%d' value='%d' onchange='lb(\"%c\", value)'></div><br>";
-
+#ifdef USE_COLORPICKER
+const char HTTP_MSG_SLIDER3[] PROGMEM = // HUE
+  "<br><div style='background-image:linear-gradient(to right, %s'><input type='range' min='%d' max='%d' value='%d' onchange='ld(\"%c\", value)'></div><br>";
+const char HTTP_MSG_SLIDER4[] PROGMEM = // SATURATION
+  "<br><div id='s' style='background-image:linear-gradient(to right, %s'><input type='range' min='%d' max='%d' value='%d' onchange='lb(\"%c\", value)'></div><br>";
+#endif // USE_COLORPICKER
 const char HTTP_MSG_RSTRT[] PROGMEM =
   "<br><div style='text-align:center;'>" D_DEVICE_WILL_RESTART "</div><br>";
 
@@ -1017,18 +1026,19 @@ void HandleRoot(void)
             changeUIntScale(Settings.light_color[i], 0, 255, 0, 100), 'd', i+1);
         }
       }  // Settings.flag3.pwm_multi_channels
+#ifdef USE_COLORPICKER
         if (light_type > 3) { // TODO: check if this is the right way
           char hexColor[65];
-          snprintf_P(hexColor, sizeof(hexColor), PSTR("grey , #%02X%02X%02X );border-radius:0.3em;"), Settings.light_color[0],Settings.light_color[1],Settings.light_color[2]);
+          snprintf_P(hexColor, sizeof(hexColor), PSTR("grey,#%02X%02X%02X );border-radius:0.3em;"), Settings.light_color[0],Settings.light_color[1],Settings.light_color[2]);
           uint16_t hue;
           uint8_t sat;
           uint8_t bri;
           LightGetHSB(&hue, &sat, &bri);
-          AddLog_P2(LOG_LEVEL_INFO, PSTR("HSB: %u %u %u "), hue,sat,bri);
-
-          WSContentSend_P(HTTP_MSG_SLIDER3, F("red, orange, yellow, green, blue, indigo, violet);border-radius:0.3em;"), 1, 359, hue, 'u'); // hue
-          WSContentSend_P(HTTP_MSG_SLIDER3, hexColor, 1, 100, changeUIntScale(sat, 0, 255, 0, 100), 'n'); // saturation
+          // AddLog_P2(LOG_LEVEL_INFO, PSTR("HSB: %u %u %u "), hue,sat,bri);
+          WSContentSend_P(HTTP_MSG_SLIDER3, F("red,orange,yellow,green,blue,indigo,violet,red);border-radius:0.3em;"), 1, 359, hue, 'u'); // hue
+          WSContentSend_P(HTTP_MSG_SLIDER4, hexColor, 1, 100, changeUIntScale(sat, 0, 255, 0, 100), 'n'); // saturation
         }
+#endif // USE_COLORPICKER
     }
 #endif // USE_LIGHT
 #ifdef USE_SHUTTER
@@ -1151,6 +1161,7 @@ bool HandleRootStatusRefresh(void)
     snprintf_P(svalue, sizeof(svalue), PSTR(D_CMND_COLORTEMPERATURE " %s"), tmp);
     ExecuteWebCommand(svalue, SRC_WEBGUI);
   }
+#ifdef USE_COLORPICKER
   WebGetArg("u", tmp, sizeof(tmp));  // 0 - 359 Hue value
   if (strlen(tmp)) {
     snprintf_P(svalue, sizeof(svalue), PSTR(D_CMND_HSBCOLOR  "1 %s"), tmp);
@@ -1161,6 +1172,7 @@ bool HandleRootStatusRefresh(void)
     snprintf_P(svalue, sizeof(svalue), PSTR(D_CMND_HSBCOLOR  "2 %s"), tmp);
     ExecuteWebCommand(svalue, SRC_WEBGUI);
   }
+#endif //USE_COLORPICKER
 #ifdef USE_SHUTTER
   for (uint32_t j = 1; j <= shutters_present; j++) {
     snprintf_P(webindex, sizeof(webindex), PSTR("u%d"), j);
diff --git a/tasmota/xdrv_04_light.ino b/tasmota/xdrv_04_light.ino
index a51c98619..198e88e40 100644
--- a/tasmota/xdrv_04_light.ino
+++ b/tasmota/xdrv_04_light.ino
@@ -1240,10 +1240,11 @@ void LightUpdateColorMapping(void)
 void LightSetDimmer(uint8_t dimmer) {
   light_controller.changeDimmer(dimmer);
 }
-
+#ifdef USE_COLORPICKER
 uint32_t LightGetHSB(uint16_t *hue,uint8_t  *sat, uint8_t *bri) {
   light_state.getHSB(hue, sat, bri);
 }
+#endif // USE_COLORPICKER
 
 // If SetOption68 is set, get the brightness for a specific device
 uint8_t LightGetBri(uint8_t device) {