Non working version with replace functions

firmware/config_html.h

@@ -1,8 +1,7 @@
 
 String getConfigHTML()
 {
-  String config_html = ""
+  String config_html = "<form class=\"pure-form pure-form-aligned\" action=\"/\" method=\"post\">"
-"<form class=\"pure-form pure-form-aligned\" action=\"/\" method=\"post\">"
 "<h3>Config</h3>"
 "<div class=\"pure-control-group\">"
 "<label for=\"startup\">"

firmware/firmware.ino

@@ -618,122 +618,15 @@ void init_webserver()
       ESP.reset();
     }
 
-    // Generate HTML page
+    // ***** Generate HTML page ***** //
-    String http_content = getIndexHTML();
 
-    http_content.replace("{{LIGHT_NAME}}", (String)light_name);
+    server.sendHeader("Content-Type", "text/html");
-
+    server.sendHeader("Connection", "close");
-    http_content.replace("{{LIGHT_COUNT}}", (String)LIGHTS_COUNT);
+    server.sendHeader("Access-Control-Allow-Origin", "*");
-
+    server.send(200);
-    int tc_val = EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS);
+    server.sendContent(replacePlaceholder(replaceLightsControl(getIndexHTMLTop())));
-    if (tc_val == TIMING_CONTROL_ENABLED)
+    server.sendContent(replacePlaceholder(getConfigHTML()));
-    {
+    server.sendContent(replacePlaceholder(getIndexHTMLBottom()));
-      http_content.replace("{{TC_LINK_PRIMARY_ON}}", "pure-button-primary");
-    } else {
-      http_content.replace("{{TC_LINK_PRIMARY_ON}}", "");
-    }
-    if (tc_val == TIMING_CONTROL_DISABLED)
-    {
-      http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "pure-button-primary");
-    } else {
-      http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "");
-    }
-
-    http_content.replace("{{TRANSITION_TIME}}", (String)default_transitiontime);
-
-    String light_content = "";
-    // Light control
-    for (uint8 light_num = 0; light_num < LIGHTS_COUNT; light_num++)
-    {
-      // Generate lights part of the HTML page
-      String tmp_light_content = getLightControlHTML();
-
-      // on/off buttons and slider
-      tmp_light_content.replace("{{LIGHT_NUMBER}}", (String)(light_num + 1));
-      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 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);
-    if (ls_val == LAST_STATE_STARTUP_LIGHT_LAST_STATE)
-    {
-      http_content.replace("{{STARTUP_SELECTED_LS_0}}", "selected=\"selected\"");
-    } else {
-      http_content.replace("{{STARTUP_SELECTED_LS_0}}", "");
-    }
-
-    if (ls_val == LAST_STATE_STARTUP_LIGHT_ON_STATE)
-    {
-      http_content.replace("{{STARTUP_SELECTED_ON_1}}", "selected=\"selected\"");
-    } else {
-      http_content.replace("{{STARTUP_SELECTED_ON_1}}", "");
-    }
-
-    if (ls_val == LAST_STATE_STARTUP_LIGHT_OFF_STATE)
-    {
-      http_content.replace("{{STARTUP_SELECTED_OFF_2}}", "selected=\"selected\"");
-    } else {
-      http_content.replace("{{STARTUP_SELECTED_OFF_2}}", "");
-    }
-
-    // scene
-    int sc_val = EEPROM.read(EEPROM_SCENE_ADDRESS);
-    if (sc_val == SCENE_RELEAX)
-    {
-      http_content.replace("{{SCENE_SELECTED_RELAX_0}}", "selected=\"selected\"");
-    } else {
-      http_content.replace("{{SCENE_SELECTED_RELAX_0}}", "");
-    }
-    if (sc_val == SCENE_BRIGHT)
-    {
-      http_content.replace("{{SCENE_SELECTED_BRIGHT_1}}", "selected=\"selected\"");
-    } else {
-      http_content.replace("{{SCENE_SELECTED_BRIGHT_1}}", "");
-    }
-    if (sc_val == SCENE_NIGHTLY)
-    {
-      http_content.replace("{{SCENE_SELECTED_NIGHT_2}}", "selected=\"selected\"");
-    } else {
-      http_content.replace("{{SCENE_SELECTED_NIGHT_2}}", "");
-    }
-
-    // Generate lights part of the HTML page
-    String config_content = getConfigHTML();
-
-    // Wifi settings
-    config_content.replace("{{WIFI_SSID}}", WiFi.SSID());
-
-    // Network settings
-    uint8_t dip = EEPROM.read(EEPROM_DYNAMIC_IP_ADDRESS);
-    if (dip)
-    {
-      config_content.replace("{{DIP_LINK_ON_PRIMARY}}", "pure-button-primary");
-      config_content.replace("{{DIP_LINK_OFF_PRIMARY}}", "");
-    } else {
-      config_content.replace("{{DIP_LINK_OFF_PRIMARY}}", "pure-button-primary");
-      config_content.replace("{{DIP_LINK_ON_PRIMARY}}", "");
-    }
-
-    // ip config
-    config_content.replace("{{WIFI_CFG_IP}}", WiFi.localIP().toString());
-    config_content.replace("{{WIFI_CFG_GW}}", WiFi.gatewayIP().toString());
-    config_content.replace("{{WIFI_CFG_NM}}", WiFi.subnetMask().toString());
-    config_content.replace("{{WIFI_CFG_DNS}}", WiFi.dnsIP().toString());
-
-    http_content.replace("{{CONFIG_PAGE}}", config_content);
-
-    http_content.replace("{{IP_ADDRESS}}", WiFi.localIP().toString());
-
-    // set the pwm values
-    http_content.replace("{{PWM_MIN}}", (String)PWM_MIN);
-    http_content.replace("{{PWM_MAX}}", (String)PWM_MAX);
-
-    server.send(200, "text/html", http_content);
   });
 
   server.on("/reset", []()
@@ -745,3 +638,127 @@ void init_webserver()
 
   server.onNotFound(handleNotFound);
 }
+
+String replacePlaceholder(String in)
+{
+  String http_content = in;
+
+  http_content.replace("{{LIGHT_NAME}}", (String)light_name);
+
+  http_content.replace("{{LIGHT_COUNT}}", (String)LIGHTS_COUNT);
+
+  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");
+  } else {
+    http_content.replace("{{TC_LINK_PRIMARY_ON}}", "");
+  }
+  if (tc_val == TIMING_CONTROL_DISABLED)
+  {
+    http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "pure-button-primary");
+  } else {
+    http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "");
+  }
+
+  http_content.replace("{{TRANSITION_TIME}}", (String)default_transitiontime);
+
+  int ls_val = EEPROM.read(EEPROM_LAST_STATE_STARTUP_ADDRESS);
+  if (ls_val == LAST_STATE_STARTUP_LIGHT_LAST_STATE)
+  {
+    http_content.replace("{{STARTUP_SELECTED_LS_0}}", "selected=\"selected\"");
+  } else {
+    http_content.replace("{{STARTUP_SELECTED_LS_0}}", "");
+  }
+
+  if (ls_val == LAST_STATE_STARTUP_LIGHT_ON_STATE)
+  {
+    http_content.replace("{{STARTUP_SELECTED_ON_1}}", "selected=\"selected\"");
+  } else {
+    http_content.replace("{{STARTUP_SELECTED_ON_1}}", "");
+  }
+
+  if (ls_val == LAST_STATE_STARTUP_LIGHT_OFF_STATE)
+  {
+    http_content.replace("{{STARTUP_SELECTED_OFF_2}}", "selected=\"selected\"");
+  } else {
+    http_content.replace("{{STARTUP_SELECTED_OFF_2}}", "");
+  }
+
+  // scene
+  int sc_val = EEPROM.read(EEPROM_SCENE_ADDRESS);
+  if (sc_val == SCENE_RELEAX)
+  {
+    http_content.replace("{{SCENE_SELECTED_RELAX_0}}", "selected=\"selected\"");
+  } else {
+    http_content.replace("{{SCENE_SELECTED_RELAX_0}}", "");
+  }
+  if (sc_val == SCENE_BRIGHT)
+  {
+    http_content.replace("{{SCENE_SELECTED_BRIGHT_1}}", "selected=\"selected\"");
+  } else {
+    http_content.replace("{{SCENE_SELECTED_BRIGHT_1}}", "");
+  }
+  if (sc_val == SCENE_NIGHTLY)
+  {
+    http_content.replace("{{SCENE_SELECTED_NIGHT_2}}", "selected=\"selected\"");
+  } else {
+    http_content.replace("{{SCENE_SELECTED_NIGHT_2}}", "");
+  }
+
+  // Generate lights part of the HTML page
+  String config_content = getConfigHTML();
+
+  // Wifi settings
+  config_content.replace("{{WIFI_SSID}}", WiFi.SSID());
+
+  // Network settings
+  uint8_t dip = EEPROM.read(EEPROM_DYNAMIC_IP_ADDRESS);
+  if (dip)
+  {
+    config_content.replace("{{DIP_LINK_ON_PRIMARY}}", "pure-button-primary");
+    config_content.replace("{{DIP_LINK_OFF_PRIMARY}}", "");
+  } else {
+    config_content.replace("{{DIP_LINK_OFF_PRIMARY}}", "pure-button-primary");
+    config_content.replace("{{DIP_LINK_ON_PRIMARY}}", "");
+  }
+
+  // ip config
+  config_content.replace("{{WIFI_CFG_IP}}", WiFi.localIP().toString());
+  config_content.replace("{{WIFI_CFG_GW}}", WiFi.gatewayIP().toString());
+  config_content.replace("{{WIFI_CFG_NM}}", WiFi.subnetMask().toString());
+  config_content.replace("{{WIFI_CFG_DNS}}", WiFi.dnsIP().toString());
+
+  http_content.replace("{{CONFIG_PAGE}}", config_content);
+
+  http_content.replace("{{IP_ADDRESS}}", WiFi.localIP().toString());
+  
+  // set the pwm values
+  http_content.replace("{{PWM_MIN}}", (String)PWM_MIN);
+  http_content.replace("{{PWM_MAX}}", (String)PWM_MAX);
+
+  return http_content;
+}
+
+String replaceLightsControl(String in)
+{
+  String light_content = "";
+  // Light control
+  for (uint8 light_num = 0; light_num < LIGHTS_COUNT; light_num++)
+  {
+    // Generate lights part of the HTML page
+    String tmp_light_content = getLightControlHTML();
+
+    // on/off buttons and slider
+    tmp_light_content.replace("{{LIGHT_NUMBER}}", (String)(light_num + 1));
+    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 created lights control code to the html output
+  in.replace("{{LIGHTS_CONTROL}}", light_content);
+
+  return in;
+}

firmware/index_html.h

@@ -1,14 +1,14 @@
 
-String getIndexHTML()
+
+String getIndexHTMLTop()
 {
-  String index_html = ""
+  String index_html = "<!doctype html>"
-"<!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 - {{LIGHT_NAME}}</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>"
@@ -99,9 +99,13 @@ String getIndexHTML()
 "<div id=\"plot_chart\"></div>"
 "</td>"
 "</tr>"
-"</table>"
+"</table>";
-"{{CONFIG_PAGE}}"
+  return index_html;
-"<script>"
+}
+
+String getIndexHTMLBottom()
+{
+  const char index_html[] = "<script>"
 "function loadGraphData() {"
 "console.log('----> generate graph <----');"
 "$.getJSON('/tc_data_blocks', function(data) {"
@@ -275,5 +279,5 @@ String getIndexHTML()
 "</fieldset>"
 "</body>"
 "</html>";
-  return index_html;
+  return String(index_html);
 }

firmware/index_html.html

@@ -4,7 +4,7 @@
     <style></style>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Light setup</title>
+    <title>Light setup - {{LIGHT_NAME}}</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>
@@ -90,7 +90,6 @@
                 <tr>
                     <td>
 {{LIGHTS_CONTROL}}
-
                     </td>
                     <td>
                         <div id="plot_chart"></div>

firmware/light_control_html.h

@@ -1,8 +1,7 @@
 
 String getLightControlHTML()
 {
-  String light_control_html = ""
+  String light_control_html = "<h4>Light {{LIGHT_NUMBER}}</h4>"
-"<h4>Light {{LIGHT_NUMBER}}</h4>"
 "<div class=\"pure-control-group\">"
 "<label for=\"power\">"
 "<strong>Power</strong>"