From a76a79a413030ddbc78f7e8eb4722b850c110edf Mon Sep 17 00:00:00 2001
From: Theo Arends <11044339+arendst@users.noreply.github.com>
Date: Mon, 25 Nov 2019 15:20:44 +0100
Subject: [PATCH] Refactor sliders
---
tasmota/xdrv_01_webserver.ino | 97 ++++++++++++++++++++++-------------
tasmota/xdrv_04_light.ino | 18 ++++---
2 files changed, 72 insertions(+), 43 deletions(-)
diff --git a/tasmota/xdrv_01_webserver.ino b/tasmota/xdrv_01_webserver.ino
index 193f8fcf3..141543b5c 100644
--- a/tasmota/xdrv_01_webserver.ino
+++ b/tasmota/xdrv_01_webserver.ino
@@ -152,21 +152,13 @@ const char HTTP_SCRIPT_ROOT[] PROGMEM =
"}"
#endif // USE_SCRIPT_WEB_DISPLAY
-#ifdef USE_JAVASCRIPT_ES6
- "lb=(v,p)=>la(`&${v}=${p}`);"
- "lc=(v,i,p)=>la(`&${v}${i}=${p}`);"
-#else
- "function lb(v,p){"
- "la('&'+v+'='+p);"
- "}"
"function lc(v,i,p){"
+ "if(v=='h'||v=='d'){" // Hue or Brightness changed so change Saturation colors too
+ "var sl=eb('sl4').value;"
+ "eb('s').style.background='linear-gradient(to right,rgb('+sl+'%%,'+sl+'%%,'+sl+'%%),hsl('+eb('sl2').value+',100%%,50%%))';"
+ "}"
"la('&'+v+i+'='+p);"
"}"
-#endif // USE_JAVASCRIPT_ES6
- "function ld(v,p){"
- "eb('s').style.background='linear-gradient(to right,#fff,hsl('+p+',100%%,50%%))';"
- "la('&'+v+'='+p);"
- "}"
"wl(la);";
@@ -379,12 +371,9 @@ const char HTTP_HEAD_STYLE3[] PROGMEM =
"%s
";
const char HTTP_MSG_SLIDER_GRADIENT[] PROGMEM =
- "";
-const char HTTP_MSG_SLIDER_HUE[] PROGMEM =
- ""
- "
";
-const char HTTP_MSG_SLIDER_CHANNEL[] PROGMEM =
- "";
+ ""
+ ""
+ "
";
const char HTTP_MSG_SLIDER_SHUTTER[] PROGMEM =
"" D_CLOSE "" D_OPEN "
"
"";
@@ -962,8 +951,6 @@ void HandleWifiLogin(void)
WSContentStop();
}
-
-
void HandleRoot(void)
{
if (CaptivePortal()) { return; } // If captive portal redirect instead of displaying the page.
@@ -1012,26 +999,64 @@ void HandleRoot(void)
uint8_t light_subtype = light_type &7;
if (!Settings.flag3.pwm_multi_channels) { // SetOption68 0 - Enable multi-channels PWM instead of Color PWM
if ((LST_COLDWARM == light_subtype) || (LST_RGBWC == light_subtype)) {
- // Cold - Warm &t related to lb("t", value) and WebGetArg("t", tmp, sizeof(tmp));
- WSContentSend_P(HTTP_MSG_SLIDER_GRADIENT, "a", "#fff", "#ff0", 153, 500, LightGetColorTemp(), 't'); // White to Yellow
+
+ WSContentSend_P(HTTP_MSG_SLIDER_GRADIENT, // Cold Warm
+ "a", // a - Unique HTML id
+ "#fff", "#ff0", // White to Yellow
+ 1, // sl1
+ 153, 500, // Range color temperature
+ LightGetColorTemp(),
+ 't', 0); // t0 - Value id releated to lc("t0", value) and WebGetArg("t0", tmp, sizeof(tmp));
}
if (light_subtype > 2) {
uint16_t hue;
uint8_t sat;
- uint8_t bri;
- LightGetHSB(&hue, &sat, &bri);
- WSContentSend_P(HTTP_MSG_SLIDER_HUE, hue); // Hue
- snprintf_P(stemp, sizeof(stemp), PSTR("#%02X%02X%02X"), Settings.light_color[0], Settings.light_color[1], Settings.light_color[2]);
- // Saturation "s" related to eb('s').style.background='linear-gradient(to right,#fff,hsl('+p+',100%%,50%%))';
- WSContentSend_P(HTTP_MSG_SLIDER_GRADIENT, "s", "#fff", stemp, 1, 100, changeUIntScale(sat, 0, 255, 0, 100), 'n');
+ LightGetHSB(&hue, &sat, nullptr);
+
+ WSContentSend_P(HTTP_MSG_SLIDER_GRADIENT, // Hue
+ "b", // b - Unique HTML id
+ "#800", "#f00 5%,#ff0 20%,#0f0 35%,#0ff 50%,#00f 65%,#f0f 80%,#f00 95%,#800", // Hue colors
+ 2, // sl2 - Unique range HTML id - Used as source for Saturation end color
+ 1, 359, // Range valid Hue
+ hue,
+ 'h', 0); // h0 - Value id
+
+ uint8_t dcolor = changeUIntScale(Settings.light_dimmer, 0, 100, 0, 255);
+ char scolor[8];
+ snprintf_P(scolor, sizeof(scolor), PSTR("#%02X%02X%02X"), dcolor, dcolor, dcolor); // Saturation start color from Black to White
+ uint8_t red, green, blue;
+ LightHsToRgb(hue, 255, &red, &green, &blue);
+ snprintf_P(stemp, sizeof(stemp), PSTR("#%02X%02X%02X"), red, green, blue); // Saturation end color
+
+ WSContentSend_P(HTTP_MSG_SLIDER_GRADIENT, // Saturation
+ "s", // s - Unique HTML id related to eb('s').style.background='linear-gradient(to right,rgb('+sl+'%%,'+sl+'%%,'+sl+'%%),hsl('+eb('sl2').value+',100%%,50%%))';
+ scolor, stemp, // Brightness to max current color
+ 3, // sl3 - Unique range HTML id - Not used
+ 1, 100, // Range 1 to 100%
+ changeUIntScale(sat, 0, 255, 0, 100),
+ 'n', 0); // n0 - Value id
}
- // Dark - Bright &d related to lb("d", value) and WebGetArg("d", tmp, sizeof(tmp));
- WSContentSend_P(HTTP_MSG_SLIDER_GRADIENT, "b", "#000", "#fff", 1, 100, Settings.light_dimmer, 'd'); // Black to White
+
+ WSContentSend_P(HTTP_MSG_SLIDER_GRADIENT, // Brightness - Black to White
+ "c", // c - Unique HTML id
+ "#000", "#fff", // Black to White
+ 4, // sl4 - Unique range HTML id - Used as source for Saturation begin color
+ 1, 100, // Range 1 to 100%
+ Settings.light_dimmer,
+ 'd', 0); // d0 - Value id is related to lc("d0", value) and WebGetArg("d0", tmp, sizeof(tmp));
} else { // Settings.flag3.pwm_multi_channels - SetOption68 1 - Enable multi-channels PWM instead of Color PWM
uint32_t pwm_channels = light_subtype > LST_MAX ? LST_MAX : light_subtype;
+ stemp[0] = 'd'; stemp[1] = '0'; stemp[2] = '\0'; // d0
for (uint32_t i = 0; i < pwm_channels; i++) {
- uint8_t index = (pwm_channels < 3) ? i +3 : i;
- WSContentSend_P(HTTP_MSG_SLIDER_CHANNEL, "#fff", changeUIntScale(Settings.light_color[i], 0, 255, 0, 100), i+1); // Dark to Light
+ stemp[1]++; // d1 to d5 - Make unique ids
+
+ WSContentSend_P(HTTP_MSG_SLIDER_GRADIENT, // Channel brightness - Black to White
+ stemp, // d1 to d5 - Unique HTML id
+ "#000", "#fff", // Black to White
+ i+1, // sl1 to sl5 - Unique range HTML id - Not used
+ 1, 100, // Range 1 to 100%
+ changeUIntScale(Settings.light_color[i], 0, 255, 0, 100),
+ 'd', i+1); // d1 to d5 - Value id
}
} // Settings.flag3.pwm_multi_channels
}
@@ -1136,7 +1161,7 @@ bool HandleRootStatusRefresh(void)
}
#endif // USE_SONOFF_IFAN
}
- WebGetArg("d", tmp, sizeof(tmp)); // 0 - 100 Dimmer value
+ WebGetArg("d0", tmp, sizeof(tmp)); // 0 - 100 Dimmer value
if (strlen(tmp)) {
snprintf_P(svalue, sizeof(svalue), PSTR(D_CMND_DIMMER " %s"), tmp);
ExecuteWebCommand(svalue, SRC_WEBGUI);
@@ -1150,17 +1175,17 @@ bool HandleRootStatusRefresh(void)
ExecuteWebCommand(svalue, SRC_WEBGUI);
}
}
- WebGetArg("t", tmp, sizeof(tmp)); // 153 - 500 Color temperature
+ WebGetArg("t0", tmp, sizeof(tmp)); // 153 - 500 Color temperature
if (strlen(tmp)) {
snprintf_P(svalue, sizeof(svalue), PSTR(D_CMND_COLORTEMPERATURE " %s"), tmp);
ExecuteWebCommand(svalue, SRC_WEBGUI);
}
- WebGetArg("u", tmp, sizeof(tmp)); // 0 - 359 Hue value
+ WebGetArg("h0", tmp, sizeof(tmp)); // 0 - 359 Hue value
if (strlen(tmp)) {
snprintf_P(svalue, sizeof(svalue), PSTR(D_CMND_HSBCOLOR "1 %s"), tmp);
ExecuteWebCommand(svalue, SRC_WEBGUI);
}
- WebGetArg("n", tmp, sizeof(tmp)); // 0 - 99 Saturation value
+ WebGetArg("n0", tmp, sizeof(tmp)); // 0 - 99 Saturation value
if (strlen(tmp)) {
snprintf_P(svalue, sizeof(svalue), PSTR(D_CMND_HSBCOLOR "2 %s"), tmp);
ExecuteWebCommand(svalue, SRC_WEBGUI);
diff --git a/tasmota/xdrv_04_light.ino b/tasmota/xdrv_04_light.ino
index fcdf578c6..3e06446ec 100644
--- a/tasmota/xdrv_04_light.ino
+++ b/tasmota/xdrv_04_light.ino
@@ -1257,6 +1257,10 @@ uint32_t LightGetHSB(uint16_t *hue,uint8_t *sat, uint8_t *bri) {
light_state.getHSB(hue, sat, bri);
}
+void LightHsToRgb(uint16_t hue, uint8_t sat, uint8_t *r_r, uint8_t *r_g, uint8_t *r_b) {
+ light_state.HsToRgb(hue, sat, r_r, r_g, r_b);
+}
+
// If SetOption68 is set, get the brightness for a specific device
uint8_t LightGetBri(uint8_t device) {
uint8_t bri = 254; // default value if relay
@@ -1607,10 +1611,10 @@ void LightAnimate(void)
if (!Light.fade_running) {
sleep = Settings.sleep;
}
- } else {
- if (Settings.sleep > PWM_MAX_SLEEP) {
- sleep = PWM_MAX_SLEEP; // set a maxumum value of 50 milliseconds to ensure that animations are smooth
- } else {
+ } else {
+ if (Settings.sleep > PWM_MAX_SLEEP) {
+ sleep = PWM_MAX_SLEEP; // set a maxumum value of 50 milliseconds to ensure that animations are smooth
+ } else {
sleep = Settings.sleep; // or keep the current sleep if it's lower than 50
}
switch (Settings.light_scheme) {
@@ -1664,8 +1668,8 @@ void LightAnimate(void)
LightApplyPower(Light.new_color, Light.power);
// AddLog_P2(LOG_LEVEL_INFO, PSTR("last_color (%02X%02X%02X%02X%02X) new_color (%02X%02X%02X%02X%02X) power %d"),
- // Light.last_color[0], Light.last_color[1], Light.last_color[2], Light.last_color[3], Light.last_color[4],
- // Light.new_color[0], Light.new_color[1], Light.new_color[2], Light.new_color[3], Light.new_color[4],
+ // Light.last_color[0], Light.last_color[1], Light.last_color[2], Light.last_color[3], Light.last_color[4],
+ // Light.new_color[0], Light.new_color[1], Light.new_color[2], Light.new_color[3], Light.new_color[4],
// Light.power
// );
@@ -1997,7 +2001,7 @@ bool LightColorEntry(char *buffer, uint32_t buffer_length)
memset(&Light.entry_color, 0x00, sizeof(Light.entry_color));
// erase all channels except if the last character is '=', #6799
while ((buffer_length > 0) && ('=' == buffer[buffer_length - 1])) {
- buffer_length--; // remove all trailing '='
+ buffer_length--; // remove all trailing '='
memcpy(&Light.entry_color, &Light.current_color, sizeof(Light.entry_color));
}
if (strstr(buffer, ",") != nullptr) { // Decimal entry