Some improvements.

firmware/config.h

@@ -14,7 +14,7 @@
 #define EEPROM_LAST_STATE_ADDRESS              4 // the first "last state" information for the first light
 #define EEPROM_TIMING_DATA_ADDRESS             (EEPROM_LAST_STATE_ADDRESS + LIGHTS_COUNT) // Stored data date per light ELE_USED; HH; MM; CH1; CH2; CH3; CH4; 
 
-#define BRI_MOD_STEPS_PER_SEC                5.0
+#define BRI_MOD_STEPS_PER_SEC               25.0
 
 #define TIME_CHECK_INTERVAL_MS         (60000UL) // 60 second interval
 #define TIME_LIGHTENGINE_INTERVAL_MS    (1000UL / BRI_MOD_STEPS_PER_SEC) // BRI_MOD_STEPS_PER_SEC steps per second to in-/decrease the brightness

firmware/config_html.h

@@ -1,4 +1,5 @@
-const String config_html = R"=====(
+const String config_html = "";
+const String config_html2 = R"=====(
         <form class="pure-form pure-form-aligned" action="/" method="post">
             <h3>Config</h3>
             <div class="pure-control-group">

firmware/firmware.ino

@@ -9,6 +9,10 @@
 
 #include "config.h"
 
+#include "index_html.h"
+#include "light_control_html.h"
+#include "config_html.h"
+
 //********* Config block *********//
 // blue, warmwhite, purple, white&red&green
 // blau, schwarz, rot, weiß
@@ -600,7 +604,8 @@ void init_webserver()
       ESP.reset();
     }
 
-    if (server.hasArg("reset")) {
+    if (server.hasArg("reset"))
+    {
       ESP.reset();
     }
 
@@ -612,31 +617,35 @@ void init_webserver()
     int tc_val = EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS);
     if (tc_val == TIMING_CONTROL_ENABLED)
     {
-      http_content.replace("{{TC_LINK_PRIMARY_ON]]", "pure-button-primary");
+      http_content.replace("{{TC_LINK_PRIMARY_ON}}", "pure-button-primary");
     } else {
-      http_content.replace("{{TC_LINK_PRIMARY_ON]]", "");
+      http_content.replace("{{TC_LINK_PRIMARY_ON}}", "");
     }
     if (tc_val == TIMING_CONTROL_DISABLED)
     {
-      http_content.replace("{{TC_LINK_PRIMARY_OFF]]", "pure-button-primary");
+      http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "pure-button-primary");
     } else {
-      http_content.replace("{{TC_LINK_PRIMARY_OFF]]", "");
+      http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "");
     }
 
     http_content.replace("{{TRANSITION_TIME}}", (String)default_transitiontime);
 
-    // Generate lights part of the HTML page
+    String light_content = "";
-    String light_content = light_html;
-
     // Light control
     for (uint8 light_num = 0; light_num < LIGHTS_COUNT; light_num++)
     {
+      // Generate lights part of the HTML page
+      String tmp_light_content = light_html;
+
       // on/off buttons and slider
-      light_content.replace("{{LIGHT_NUMBER}}", (String)(light_num + 1));
+      tmp_light_content.replace("{{LIGHT_NUMBER}}", (String)(light_num + 1));
-      light_content.replace("{{LIGHT_NUMBER_DEC}}", (String)light_num);
+      tmp_light_content.replace("{{LIGHT_NUMBER_DEC}}", (String)light_num);
+
+      // add the lights code to the html output string
+      light_content += tmp_light_content;
     }
 
-    // add the lights code to the html output string
+    // add the created lights control code to the html output
     http_content.replace("{{LIGHTS_CONTROL}}", light_content);
 
     int ls_val = EEPROM.read(EEPROM_LAST_STATE_STARTUP_ADDRESS);
@@ -665,21 +674,21 @@ void init_webserver()
     int sc_val = EEPROM.read(EEPROM_SCENE_ADDRESS);
     if (sc_val == SCENE_RELEAX)
     {
-      http_content.replace("SCENE_SELECTED_RELAX_0", "selected=\"selected\"");
+      http_content.replace("{{SCENE_SELECTED_RELAX_0}}", "selected=\"selected\"");
     } else {
-      http_content.replace("SCENE_SELECTED_RELAX_0", "");
+      http_content.replace("{{SCENE_SELECTED_RELAX_0}}", "");
     }
     if (sc_val == SCENE_BRIGHT)
     {
-      http_content.replace("SCENE_SELECTED_BRIGHT_1", "selected=\"selected\"");
+      http_content.replace("{{SCENE_SELECTED_BRIGHT_1}}", "selected=\"selected\"");
     } else {
-      http_content.replace("SCENE_SELECTED_BRIGHT_1", "");
+      http_content.replace("{{SCENE_SELECTED_BRIGHT_1}}", "");
     }
     if (sc_val == SCENE_NIGHTLY)
     {
-      http_content.replace("SCENE_SELECTED_NIGHT_2", "selected=\"selected\"");
+      http_content.replace("{{SCENE_SELECTED_NIGHT_2}}", "selected=\"selected\"");
     } else {
-      http_content.replace("SCENE_SELECTED_NIGHT_2", "");
+      http_content.replace("{{SCENE_SELECTED_NIGHT_2}}", "");
     }
 
     // Generate lights part of the HTML page
@@ -710,6 +719,7 @@ void init_webserver()
 
     http_content.replace("{{CONFIG_PAGE}}", config_content);
 
+    // set the pwm values
     http_content.replace("{{PWM_MIN}}", (String)PWM_MIN);
     http_content.replace("{{PWM_MAX}}", (String)PWM_MAX);
 

firmware/index_html.h

@@ -1,11 +1,11 @@
-const String index_html = R"=====(
+const String index_html = "";
-<!doctype html>
+const String index_html2 = R"=====(<!doctype html>
 <html>
 <head>
     <style></style>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Light Setup</title>
+    <title>Light setup</title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
@@ -272,5 +272,4 @@ const String index_html = R"=====(
         </div>
     </fieldset>
 </body>
-</html>
+</html>)=====";
-)=====";

firmware/light_control_html.h

@@ -1,4 +1,5 @@
-const String light_html = R"=====(
+const String light_html = "";
+const String light_html2 = R"=====(
                         <h4>Light {{LIGHT_NUMBER}}</h4>
                         <div class="pure-control-group">
                             <label for="power">