Added logic to send slider changes to the controller. Comments updated.

This commit is contained in:
Kai Lauterbach 2023-04-27 19:26:06 +02:00
parent fb98d1c28b
commit 161a7e2a78

View file

@ -332,6 +332,7 @@ void init_webserver() {
DynamicJsonDocument root(1024); DynamicJsonDocument root(1024);
root["on"] = light_state[light]; root["on"] = light_state[light];
root["bri"] = bri[light]; root["bri"] = bri[light];
root["bricur"] = (int)current_bri[light];
String output; String output;
serializeJson(root, output); serializeJson(root, output);
server.send(200, "text/plain", output); server.send(200, "text/plain", output);
@ -446,7 +447,9 @@ void init_webserver() {
if (server.hasArg("bri" + (String)light)) { if (server.hasArg("bri" + (String)light)) {
bri[light] = (int)server.arg("bri" + (String)light).toInt(); bri[light] = (int)server.arg("bri" + (String)light).toInt();
Serial.print("Brightness set to "); Serial.print("Brightness ");
Serial.print(light);
Serial.print(" set to ");
Serial.println(bri[light]); Serial.println(bri[light]);
} }
@ -508,6 +511,7 @@ void init_webserver() {
String http_content = "<!doctype html>"; String http_content = "<!doctype html>";
http_content += "<html>"; http_content += "<html>";
http_content += "<head>"; http_content += "<head>";
http_content += "<style></style>";
http_content += "<meta charset=\"utf-8\">"; http_content += "<meta charset=\"utf-8\">";
http_content += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"; http_content += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";
//http_content += "<meta http-equiv=\"refresh\" content=\"15\">"; // Reload the page every 15 seconds automatically //http_content += "<meta http-equiv=\"refresh\" content=\"15\">"; // Reload the page every 15 seconds automatically
@ -527,11 +531,31 @@ void init_webserver() {
http_content += "</div>"; http_content += "</div>";
http_content += "<form class=\"pure-form pure-form-aligned\" action=\"/\" method=\"post\">"; http_content += "<form class=\"pure-form pure-form-aligned\" action=\"/\" method=\"post\">";
http_content += "<script>"
"let timeoutId;"
"function sendSliderValue(x) {"
"x = x - 1;"
"clearTimeout(timeoutId);"
"timeoutId = setTimeout(() => {"
"var value = document.getElementById(`bri${x}`).value;"
"var url = `http://192.168.0.26/?bri${x}=${value}`;"
"fetch(url).then(response => {"
"if (!response.ok) {"
"throw new Error(`HTTP error! status: ${response.status}`);"
"}"
"console.log(`Sent slider value ${value} to ${url}`);"
"}).catch(error => {"
"console.error(`Error sending slider value to ${url}: ${error}`);"
"});"
"}, 500);"
"}</script>";
#ifndef DISABLE_WEB_CONTROL #ifndef DISABLE_WEB_CONTROL
http_content += "<br><table border=0><tr><td>"; http_content += "<br><table border=0><tr><td>";
// Light control // Light control
for (uint8 light_num = 0; light_num < LIGHTS_COUNT; light_num++) { for (uint8 light_num = 0; light_num < LIGHTS_COUNT; light_num++)
{
// on/off buttons
http_content += "<h4>Light " + (String)(light_num + 1) + "</h4>"; http_content += "<h4>Light " + (String)(light_num + 1) + "</h4>";
http_content += "<div class=\"pure-control-group\">"; http_content += "<div class=\"pure-control-group\">";
http_content += "<label for=\"power\"><strong>Power</strong></label>"; http_content += "<label for=\"power\"><strong>Power</strong></label>";
@ -541,9 +565,10 @@ void init_webserver() {
http_content += "\" href=\"/?on" + (String)light_num + "=false\">OFF</a>"; http_content += "\" href=\"/?on" + (String)light_num + "=false\">OFF</a>";
http_content += "</div>"; http_content += "</div>";
// slider for brightness
http_content += "<div class=\"pure-control-group\">"; http_content += "<div class=\"pure-control-group\">";
http_content += "<label for=\"bri\"" + (String)light_num + ">Bri</label>"; http_content += "<label for=\"bri\"" + (String)light_num + ">Bri</label>";
http_content += "<input id=\"bri" + (String)light_num + "\" name=\"bri" + (String)light_num + "\" type=\"range\" min=\"0\" max=\"255\" value=\"" + (String)bri[light_num] + "\">"; http_content += "<input id=\"bri" + (String)light_num + "\" onchange=\"sendSliderValue(" + (String)(light_num+1) + ")\" name=\"bri" + (String)light_num + "\" type=\"range\" min=\"0\" max=\"255\" value=\"" + (String)bri[light_num] + "\">";
http_content += "<label id=\"bri" + (String)light_num + "_val\" name=\"bri" + (String)light_num + "\">" + (String)(int)(bri[light_num] * 100.0 / 255.0) + "</label>%"; http_content += "<label id=\"bri" + (String)light_num + "_val\" name=\"bri" + (String)light_num + "\">" + (String)(int)(bri[light_num] * 100.0 / 255.0) + "</label>%";
http_content += "<script>"; http_content += "<script>";
http_content += "var slider" + (String)light_num + " = document.getElementById(\"bri" + (String)light_num + "\");"; http_content += "var slider" + (String)light_num + " = document.getElementById(\"bri" + (String)light_num + "\");";
@ -554,9 +579,10 @@ void init_webserver() {
http_content += "}"; http_content += "}";
http_content += "</script>"; http_content += "</script>";
http_content += "</div>"; http_content += "</div>";
} }
// timer data processing, startup state and scene for all of the lights // startup state and scene for all of the lights
http_content += "</td><td>"; http_content += "</td><td>";
http_content += "<div id=\"plot_chart\"></div>"; http_content += "<div id=\"plot_chart\"></div>";
http_content += "</td></tr></table><br>"; http_content += "</td></tr></table><br>";
@ -577,6 +603,7 @@ void init_webserver() {
http_content += "</select>"; http_content += "</select>";
http_content += "</div>"; http_content += "</div>";
// scene
http_content += "<div class=\"pure-control-group\">"; http_content += "<div class=\"pure-control-group\">";
http_content += "<label for=\"scene\"><strong>Scene</strong></label>"; http_content += "<label for=\"scene\"><strong>Scene</strong></label>";
http_content += "<select onchange = \"this.form.submit()\" id=\"scene\" name=\"scene\">"; http_content += "<select onchange = \"this.form.submit()\" id=\"scene\" name=\"scene\">";
@ -593,8 +620,9 @@ void init_webserver() {
http_content += "</select>"; http_content += "</select>";
http_content += "</div>"; http_content += "</div>";
// timing control button
http_content += "<div class=\"pure-control-group\">"; http_content += "<div class=\"pure-control-group\">";
http_content += "<label for=\"power\"><strong>Timing control</strong></label>"; http_content += "<label for=\"tc\"><strong>Timing control</strong></label>";
int tc_val = EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS); int tc_val = EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS);
http_content += "<a class=\"pure-button"; http_content += "<a class=\"pure-button";
if (tc_val == TIMING_CONTROL_ENABLED) http_content += " pure-button-primary"; if (tc_val == TIMING_CONTROL_ENABLED) http_content += " pure-button-primary";