From 161a7e2a78bc84dcece930b475fe421baed301c0 Mon Sep 17 00:00:00 2001
From: Kai Lauterbach <klaute@gmx.de>
Date: Thu, 27 Apr 2023 19:26:06 +0200
Subject: [PATCH] Added logic to send slider changes to the controller.
 Comments updated.

---
 firmware/firmware.ino | 38 +++++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)
diff --git a/firmware/firmware.ino b/firmware/firmware.ino
index 9e2d623..55169d1 100644
--- a/firmware/firmware.ino
+++ b/firmware/firmware.ino
@@ -332,6 +332,7 @@ void init_webserver() {
     DynamicJsonDocument root(1024);
     root["on"] = light_state[light];
     root["bri"] = bri[light];
+    root["bricur"] = (int)current_bri[light];
     String output;
     serializeJson(root, output);
     server.send(200, "text/plain", output);
@@ -446,7 +447,9 @@ void init_webserver() {
 
       if (server.hasArg("bri" + (String)light)) {
         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]);
       }
 
@@ -508,6 +511,7 @@ void init_webserver() {
     String http_content = "<!doctype html>";
     http_content += "<html>";
     http_content += "<head>";
+    http_content += "<style></style>";
     http_content += "<meta charset=\"utf-8\">";
     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
@@ -527,11 +531,31 @@ void init_webserver() {
     http_content += "</div>";
 
     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
     http_content += "<br><table border=0><tr><td>";
     // 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 += "<div class=\"pure-control-group\">";
       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 += "</div>";
 
+      // slider for brightness
       http_content += "<div class=\"pure-control-group\">";
       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 += "<script>";
       http_content += "var slider" + (String)light_num + " = document.getElementById(\"bri" + (String)light_num + "\");";
@@ -554,9 +579,10 @@ void init_webserver() {
       http_content += "}";
       http_content += "</script>";
       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 += "<div id=\"plot_chart\"></div>";
     http_content += "</td></tr></table><br>";
@@ -577,6 +603,7 @@ void init_webserver() {
     http_content += "</select>";
     http_content += "</div>";
 
+    // scene
     http_content += "<div class=\"pure-control-group\">";
     http_content += "<label for=\"scene\"><strong>Scene</strong></label>";
     http_content += "<select onchange = \"this.form.submit()\" id=\"scene\" name=\"scene\">";
@@ -593,8 +620,9 @@ void init_webserver() {
     http_content += "</select>";
     http_content += "</div>";
 
+    // timing control button
     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);
     http_content += "<a class=\"pure-button";
     if (tc_val == TIMING_CONTROL_ENABLED) http_content += "  pure-button-primary";
