Team,
I am trying to build webserver using nodemcu 12e and used AsyncWebServerRequest for building dynamic html page. it is working fine, when i access first time. later if i refresh multiple times, it loading garbage page intermittently.
Actual page
Error page
arduino code for html page:
#include <RTClib.h>
extern RTC_DS3231 rtc;
extern String daily_job_list[10][14];
String home_page(){
//parse_json();
char buf[] = "DD-MM-YY:hh:mm:ss";
DateTime now = rtc.now();
String current_time=String(now.toString(buf));
String html = R"(<html><head><title>ESP Web Server</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="data:,"><style>html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}h1{color: #0F3376; padding: 2vh;}p{font-size: 1.5rem;}.button{display: inline-block;background-color: #e7bd3b; border: none;border-radius: 4px; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}.button2{background-color: #4286f4;}</style></head><body><h1>ESP Web Server</h1><h2> Daily Jobs</h2>)";
html += "<h2> Server time :"+current_time+"</h2>";
html += "<h2><a href=\"/soil_props\">Click here for Soil Sensor setup</a></h2>";
html += "<h2> Allowed Channels 2(D4),13(D7),12(D6),14(D5)</h2>";
html += R"(<table style="border:1px solid black;margin-left:auto;margin-right:auto;"><tr><th>Job_id</th><th>Job_Name </th><th>Start_time</th><th>duration</th><th>channel</th><th>Channel_Status</th><th>Job_Status</th><th>Auto Irrigation</th></tr>)";
int daily_jobs_arry_size = sizeof (daily_job_list) / sizeof (daily_job_list[0]);
for (int i = 0; i< daily_jobs_arry_size; i++){
int channel = daily_job_list[i][0].toInt();
String pin_status = "stopped";
if (digitalRead(channel) == 0) {
pin_status = "running";
}
html += "<tr>";
html += R"(<form id="survey-form1" action="/update_daily" method="get">)";
html += "<td><input type=\"number\" name=\"job_id\" readonly value="+ String(daily_job_list[i][4]) + " size=\"5\" /></td>";
html += "<td><input type=\"text\" name=\"Job_Name\" value="+ String(daily_job_list[i][2]) + " /></td>";
html += "<td><input type=\"time\" name=\"Start_time\" value="+ String(daily_job_list[i][1]) + " /></td>";
html += "<td><input type=\"number\" name=\"duration\" value="+ String(daily_job_list[i][3]) + " /></td>";
html += "<td><input type=\"number\" name=\"channel\" value="+ String(channel) + " /></td>";
html += "<td><input type=\"text\" name=\"pin_status\" readonly value="+ String(pin_status) + " /></td>";
html += "<td><input type=\"text\" name=\"job_status\" value="+ String(daily_job_list[i][5]) + " /></td>";
html += R"(<td><input type="submit" value="Save" /></td>)";
html += R"(</form>)";
html += R"(</tr>)";
Serial.println(i);
}
html += R"(</table></body></html>)";
return html;
}
String soil_home_page(){
//parse_json();
char buf[] = "DD-MM-YY:hh:mm:ss";
DateTime now = rtc.now();
String current_time=String(now.toString(buf));
String html = R"(<html><head><title>ESP Web Server</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="data:,"><style>html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}h1{color: #0F3376; padding: 2vh;}p{font-size: 1.5rem;}.button{display: inline-block;background-color: #e7bd3b; border: none;border-radius: 4px; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}.button2{background-color: #4286f4;}</style></head><body><h1>ESP Web Server</h1><h2> Soil Sensor for Daily Jobs</h2>)";
html += "<h2> Server time :"+current_time+"</h2>";
//html += "<h2> Click here for Soil Sensor setup<a href=/soil_props</h2>";
html += "<h2><a href=\"/\">Home Page</a></h2>";
int daily_jobs_arry_size = sizeof (daily_job_list) / sizeof (daily_job_list[0]);
html += R"(</table><h2> Soil Sensor trigger values </h2><table style="border:1px solid black;margin-left:auto;margin-right:auto;"><tr><th>Job_id</th><th>Job_Name </th><th>channel</th><th>Auto Irrigation</th><th>Soil upper value</th><th>Soil lower value</th><th>soil_air_value</th><th>soil_water_value</th><th>Slave deep Mode</th><th>Soil Host</th><th>Soil Pin</th></tr>)";
for (int i = 0; i< daily_jobs_arry_size; i++){
int channel = daily_job_list[i][0].toInt();
html += "<tr>";
html += R"(<form id="survey-form1" action="/update_daily_soil_trigger" method="get">)";
html += "<td><input type=\"number\" name=\"job_id\" readonly value="+ daily_job_list[i][4] + " size=\"5\" /></td>";
html += "<td><input type=\"text\" name=\"Job_Name\" value="+ daily_job_list[i][2] + " /></td>";
html += "<td><input type=\"number\" name=\"channel\" value="+ String(channel) + " /></td>";
html += "<td><input type=\"text\" name=\"is_auto_irr_enable\" value="+ String(daily_job_list[i][6]) + " /></td>";
html += "<td><input type=\"text\" name=\"soil_up_value\" value="+ String(daily_job_list[i][7]) + " /></td>";
html += "<td><input type=\"text\" name=\"soil_low_value\" value="+ String(daily_job_list[i][8]) + " /></td>";
html += "<td><input type=\"text\" name=\"soil_air_value\" value="+ String(daily_job_list[i][12]) + " /></td>";
html += "<td><input type=\"text\" name=\"soil_water_value\" value="+ String(daily_job_list[i][13]) + " /></td>";
html += "<td><input type=\"text\" name=\"deep_sleep_mode\" value="+ String(daily_job_list[i][9]) + " /></td>";
html += "<td><input type=\"text\" name=\"soil_sensor_host\" value="+ String(daily_job_list[i][10]) + " /></td>";
html += "<td><input type=\"text\" name=\"soil_pin\" value="+ String(daily_job_list[i][11]) + " /></td>";
html += R"(<td><input type="submit" value="Save" /></td>)";
html += R"(</form>)";
html += R"(</tr>)";
}
html += R"(</table></body></html>)";
return html;
}
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", home_page());
});
server.on("/soil_props", HTTP_GET, [](AsyncWebServerRequest *request){
String html_page = soil_home_page();
html_page.trim();
//const char html_page[] PROGMEM = "this is test";
//const char string_0[] PROGMEM = "String 0";
//Serial.println("soil props out is");
//Serial.println(html_page);
request->send(200, "text/html",html_page);
});