Non working version with replace functions

This commit is contained in:
Kai Lauterbach 2023-05-02 09:04:21 +02:00
parent 3cbdf20e79
commit 55821b8282
5 changed files with 147 additions and 129 deletions

View file

@ -1,8 +1,7 @@
String getConfigHTML() 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>" "<h3>Config</h3>"
"<div class=\"pure-control-group\">" "<div class=\"pure-control-group\">"
"<label for=\"startup\">" "<label for=\"startup\">"

View file

@ -618,8 +618,30 @@ void init_webserver()
ESP.reset(); ESP.reset();
} }
// Generate HTML page // ***** Generate HTML page ***** //
String http_content = getIndexHTML();
server.sendHeader("Content-Type", "text/html");
server.sendHeader("Connection", "close");
server.sendHeader("Access-Control-Allow-Origin", "*");
server.send(200);
server.sendContent(replacePlaceholder(replaceLightsControl(getIndexHTMLTop())));
server.sendContent(replacePlaceholder(getConfigHTML()));
server.sendContent(replacePlaceholder(getIndexHTMLBottom()));
});
server.on("/reset", []()
{ // trigger manual reset
server.send(200, "text/html", "reset");
delay(1000);
ESP.restart();
});
server.onNotFound(handleNotFound);
}
String replacePlaceholder(String in)
{
String http_content = in;
http_content.replace("{{LIGHT_NAME}}", (String)light_name); http_content.replace("{{LIGHT_NAME}}", (String)light_name);
@ -641,24 +663,6 @@ void init_webserver()
http_content.replace("{{TRANSITION_TIME}}", (String)default_transitiontime); 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); int ls_val = EEPROM.read(EEPROM_LAST_STATE_STARTUP_ADDRESS);
if (ls_val == LAST_STATE_STARTUP_LIGHT_LAST_STATE) if (ls_val == LAST_STATE_STARTUP_LIGHT_LAST_STATE)
{ {
@ -733,15 +737,28 @@ void init_webserver()
http_content.replace("{{PWM_MIN}}", (String)PWM_MIN); http_content.replace("{{PWM_MIN}}", (String)PWM_MIN);
http_content.replace("{{PWM_MAX}}", (String)PWM_MAX); http_content.replace("{{PWM_MAX}}", (String)PWM_MAX);
server.send(200, "text/html", http_content); return http_content;
}); }
server.on("/reset", []() String replaceLightsControl(String in)
{ // trigger manual reset {
server.send(200, "text/html", "reset"); String light_content = "";
delay(1000); // Light control
ESP.restart(); for (uint8 light_num = 0; light_num < LIGHTS_COUNT; light_num++)
}); {
// Generate lights part of the HTML page
server.onNotFound(handleNotFound); 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;
} }

View file

@ -1,14 +1,14 @@
String getIndexHTML()
String getIndexHTMLTop()
{ {
String index_html = "" String index_html = "<!doctype html>"
"<!doctype html>"
"<html>" "<html>"
"<head>" "<head>"
"<style></style>" "<style></style>"
"<meta charset=\"utf-8\">" "<meta charset=\"utf-8\">"
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">" "<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://code.jquery.com/jquery-3.6.0.min.js\"></script>"
"<script src=\"https://cdn.plot.ly/plotly-latest.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>" "<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>" "<div id=\"plot_chart\"></div>"
"</td>" "</td>"
"</tr>" "</tr>"
"</table>" "</table>";
"{{CONFIG_PAGE}}" return index_html;
"<script>" }
String getIndexHTMLBottom()
{
const char index_html[] = "<script>"
"function loadGraphData() {" "function loadGraphData() {"
"console.log('----> generate graph <----');" "console.log('----> generate graph <----');"
"$.getJSON('/tc_data_blocks', function(data) {" "$.getJSON('/tc_data_blocks', function(data) {"
@ -275,5 +279,5 @@ String getIndexHTML()
"</fieldset>" "</fieldset>"
"</body>" "</body>"
"</html>"; "</html>";
return index_html; return String(index_html);
} }

View file

@ -4,7 +4,7 @@
<style></style> <style></style>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.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> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
@ -90,7 +90,6 @@
<tr> <tr>
<td> <td>
{{LIGHTS_CONTROL}} {{LIGHTS_CONTROL}}
</td> </td>
<td> <td>
<div id="plot_chart"></div> <div id="plot_chart"></div>

View file

@ -1,8 +1,7 @@
String getLightControlHTML() 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\">" "<div class=\"pure-control-group\">"
"<label for=\"power\">" "<label for=\"power\">"
"<strong>Power</strong>" "<strong>Power</strong>"