ESP32 html webserver

Hi, i have this code:

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include "myHTML.h"

const char* ssid = "ESP32-hotspot";
const char* password = "esp32hotspot";

String temperature = "20.0";

WebServer server(80);
WiFiClient client;

void setup() {
  Serial.begin(115200);
  WiFi.softAP(ssid, password);  
   
  Serial.println("");  
  Serial.println("WiFi AP is now running");  
  Serial.println("IP address: ");  
  Serial.println(WiFi.softAPIP());

  beginServer();
}

void loop(){
  server.handleClient();
}  

void beginServer(){
  server.on( "/", handleRoot);
  server.begin();
  Serial.println("HTTP server started");
}

void handleRoot(){ 
  if (server.hasArg("txt_box")) {
    handleSubmit();
  } else {
    server.send ( 200, "text/html", PAGE_MAIN);
  }  
}

void handleSubmit() {
  String temp = server.arg("txt_box");
  Serial.println(temp);
  server.send(200, "text/html", PAGE_MAIN);
}

and the file myHTML.h (that contains the code HTML):

const char PAGE_MAIN[] PROGMEM = R"=====(

<!DOCTYPE html>
<html lang="en" class="js-focus-visible">

<title>Web Page ESP32</title>

  <body style="background-color: #efefef">
    <form action='/' method='POST'>
    <p>Some data got from esp32 sensor: <p>
  </body>
</html>

)=====";

How can i send data to the HTML file when the page loads, like the "some data from esp32 sensor"? for example, i want to print in the HTML file the String test.
Thanks

Hi,
Look this site.

Hi, the problem is that in your link, the project just uses strings, so you add a simple + "something" + and you are ok, but with my type of code for HTML, i can't do this.

have a look at esp32-web-server-sent-events-sse

When I import:

#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

I get a lot of errors like that WiFi.h already exist. But if i create a sketch with only the code of the link it works perfectly...

BUT i found a solution, let me some hours and i will post it.

So, to fix this problem, without making so much stuff, i simply have done something like that (this is an example from my project):

String WebPage(){
  String index = "";
  
  index += "<!DOCTYPE html>";
  index += "<html lang='en' class='js-focus-visible'>";
  index += "";
  index += "<title>ESP32 WebView</title>";
  index += "";
    index += "<style>";
      index += ".resizedTextbox {";
        index += "position: relative;";
        index += "width: 400px;";
        index += "height: 30px;";
        index += "top: -5px;";
      index += "}";
      index += "table {";
        index += "position: relative;";
        index += "width:100%;";
        index += "border-spacing: 0px;";
      index += "}";
      index += "tr {";
        index += "border: 1px solid white;";
        index += "font-family: 'Verdana', 'Arial', sans-serif;";
        index += "font-size: 20px;";
      index += "}";
      index += "th {";
        index += "height: 20px;";
        index += "padding: 3px 15px;";
        index += "background-color: #343a40;";
        index += "color: #FFFFFF !important;";
      index += "}";
      index += "td {";
        index += "height: 20px;";
        index += "padding: 3px 15px;";
      index += "}";
      index += ".tabledata {";
        index += "font-size: 24px;";
        index += "position: relative;";
        index += "padding-left: 5px;";
        index += "padding-top: 5px;";
         index += "height:   25px;";
        index += "border-radius: 5px;";
        index += "color: #FFFFFF;";
        index += "line-height: 20px;";
        index += "transition: all 200ms ease-in-out;";
        index += "background-color: #00AA00;";
      index += "}";
      index += ".fanrpmslider {";
        index += "width: 30%;";
        index += "height: 55px;";
        index += "outline: none;";
        index += "height: 25px;";
      index += "}";
      index += ".bodytext {";
        index += "font-family: 'Verdana', 'Arial', sans-serif;";
        index += "font-size: 24px;";
        index += "text-align: left;";
        index += "font-weight: light;";
        index += "border-radius: 5px;";
        index += "display:inline;";
      index += "}";
      index += ".navbar {";
        index += "width: 100%;";
        index += "height: 50px;";
        index += "margin: 0;";
        index += "padding: 10px 0px;";
        index += "background-color: #FFF;";
        index += "color: #000000;";
        index += "border-bottom: 5px solid #293578;";
      index += "}";
      index += ".fixed-top {";
        index += "position: fixed;";
        index += "top: 0;";
        index += "right: 0;";
        index += "left: 0;";
        index += "z-index: 1030;";
      index += "}";
      index += ".navtitle {";
        index += "float: left;";
        index += "height: 50px;";
        index += "font-family: 'Verdana', 'Arial', sans-serif;";
        index += "font-size: 50px;";
        index += "font-weight: bold;";
        index += "line-height: 50px;";
        index += "padding-left: 20px;";
      index += "}";
     index += ".navheading {";
       index += "position: fixed;";
       index += "left: 60%;";
       index += "height: 50px;";
       index += "font-family: 'Verdana', 'Arial', sans-serif;";
       index += "font-size: 20px;";
       index += "font-weight: bold;";
       index += "line-height: 20px;";
       index += "padding-right: 20px;";
     index += "}";
     index += ".navdata {";
        index += "justify-content: flex-end;";
        index += "position: fixed;";
        index += "left: 70%;";
        index += "height: 50px;";
        index += "font-family: 'Verdana', 'Arial', sans-serif;";
        index += "font-size: 20px;";
        index += "font-weight: bold;";
        index += "line-height: 20px;";
        index += "padding-right: 20px;";
     index += "}";
      index += ".category {";
        index += "font-family: 'Verdana', 'Arial', sans-serif;";
        index += "font-weight: bold;";
        index += "font-size: 32px;";
        index += "line-height: 50px;";
        index += "padding: 20px 10px 0px 10px;";
        index += "color: #000000;";
      index += "}";
      index += ".heading {";
        index += "font-family: 'Verdana', 'Arial', sans-serif;";
        index += "font-weight: normal;";
        index += "font-size: 28px;";
        index += "text-align: left;";
      index += "}";
    
      index += ".btn {";
        index += "background-color: #444444;";
        index += "border: none;";
        index += "color: white;";
        index += "padding: 10px 20px;";
        index += "text-align: center;";
        index += "text-decoration: none;";
        index += "display: inline-block;";
        index += "font-size: 16px;";
        index += "margin: 4px 2px;";
        index += "cursor: pointer;";
      index += "}";
      index += ".foot {";
        index += "font-family: 'Verdana', 'Arial', sans-serif;";
        index += "font-size: 20px;";
        index += "position: relative;";
        index += "height:   30px;";
        index += "text-align: center;   ";
        index += "color: #AAAAAA;";
        index += "line-height: 20px;";
      index += "}";
      index += ".container {";
        index += "max-width: 1800px;";
        index += "margin: 0 auto;";
      index += "}";
      index += "table tr:first-child th:first-child {";
        index += "border-top-left-radius: 5px;";
      index += "}";
      index += "table tr:first-child th:last-child {";
        index += "border-top-right-radius: 5px;";
      index += "}";
      index += "table tr:last-child td:first-child {";
        index += "border-bottom-left-radius: 5px;";
      index += "}";
      index += "table tr:last-child td:last-child {";
        index += "border-bottom-right-radius: 5px;";
      index += "}";
      index += ".button {";
        index += "background-color: #4CAF50;";
        index += "border: none;";
        index += "color: white;";
        index += "padding: 15px 32px;";
        index += "text-align: center;";
        index += "text-decoration: none;";
        index += "display: inline-block;";
        index += "font-size: 16px;";
      index += "}";
    index += "</style>";
    
    index += "<body style='background-color: #efefef' onload='process()'>";
    index += "<form action='/' method='POST'>";
      index += "<header>";
        index += "<div class='navbar fixed-top'>";
            index += "<div class='container'>";
              index += "<div class='navtitle'>ESP32 WebView</div>";
              index += "<div class='navdata' id = 'date'>mm/dd/yyyy</div>";
              index += "<div class='navheading'>DATE</div><br>";
              index += "<div class='navdata' id = 'time'>00:00:00</div>";
              index += "<div class='navheading'>TIME</div>";
            index += "</div>";
        index += "</div>";
      index += "</header>";
    
      index += "<main class='container' style='margin-top:70px'>";
        index += "<div class='category'>Sensor Readings</div>";
        index += "<div style='border-radius: 10px !important;'>";
        index += "<table style='width:50%'>";
        index += "<colgroup>";
          index += "<col span='1' style='background-color:rgb(230,230,230); width: 20%; color:#000000 ;'>";
          index += "<col span='1' style='background-color:rgb(200,200,200); width: 15%; color:#000000 ;'>";
          index += "<col span='1' style='background-color:rgb(180,180,180); width: 15%; color:#000000 ;'>";
        index += "</colgroup>";
        index += "<col span='2'style='background-color:rgb(0,0,0); color:#FFFFFF'>";
        index += "<col span='2'style='background-color:rgb(0,0,0); color:#FFFFFF'>";
        index += "<col span='2'style='background-color:rgb(0,0,0); color:#FFFFFF'>";
        index += "<tr>";
          index += "<th colspan='1'><div class='heading'>BME280</div></th>";
          index += "<th colspan='1'><div class='heading'>Last Value</div></th>";
        index += "</tr>";
        index += "<tr>";
          index += "<td><div class='bodytext'>Temperature (C)</div></td>";
          index += "<td><div class='tabledata'>";
          index += String(data.t);
          index += "</div></td>";
        index += "</tr>";
        index += "<tr>";
          index += "<td><div class='bodytext'>Pressure (hPa)</div></td>";
          index += "<td><div class='tabledata'>";
          index += String(data.p);
          index += "</div></td>";
        index += "</tr>";
          index += "<tr>";
          index += "<td><div class='bodytext'>Humidity (%)</div></td>";
          index += "<td><div class='tabledata'>";
          index += String(data.h);
          index += "</div></td>";
        index += "</tr>";
        index += "</table>";
      index += "</div>";
      index += "<br>";
        index += "<div class='category'>General Settings</div>";
        index += "<table style='width:50%'>";
          index += "<colgroup>";
            index += "<col span='1' style='background-color:rgb(230,230,230); width: 20%; color:#000000 ;'>";
            index += "<col span='1' style='background-color:rgb(200,200,200); width: 15%; color:#000000 ;'>";
            index += "<col span='1' style='background-color:rgb(180,180,180); width: 15%; color:#000000 ;'>";
          index += "</colgroup>";
            index += "<col span='2'style='background-color:rgb(0,0,0); color:#FFFFFF'>";
            index += "<col span='2'style='background-color:rgb(0,0,0); color:#FFFFFF'>";
            index += "<col span='2'style='background-color:rgb(0,0,0); color:#FFFFFF'>";
          index += "<tr>";
          index += "<th colspan='1'><div class='heading'>Setting</div></th>";
          index += "<th colspan='1'><div class='heading'>New Value</div></th>";
        index += "</tr>";
        index += "<tr>";
          index += "<td><div class='bodytext'>Set Background color (ex 0x0000)</div></td>";
          index += "<td><div class='tabledata2'><INPUT type='textbox' name='txt_back' value='' class='resizedTextbox'></div></td>";
        index += "</tr>";
        index += "<tr>";
          index += "<td><div class='bodytext'>Set Font color (ex 0x0000)</div></td>";
          index += "<td><div class='tabledata2'><INPUT type='textbox' name='txt_font' value='' class='resizedTextbox'></div></td>";
        index += "</tr>";
          index += "<tr>";
          index += "<td><div class='bodytext'>Set Time (dd/mm/yy/hh/min/ss)</div></td>";
          index += "<td><div class='tabledata2'><INPUT type='textbox' name='txt_time' value='' class='resizedTextbox'></div></td>";
        index += "</tr>";
        index += "</table> <br> <br> <br> <br>";
        index += "<INPUT class='button' type='submit' value='Save Changes'>";
    index += "</main>";
  
    index += "</body>";
  
    index += "<script type = 'text/javascript'>";
      // global variable visible to all java functions
      index += "var xmlHttp=createXmlHttpObject();";
  
      // function to create XML object
      index += "function createXmlHttpObject(){";
        index += "if(window.XMLHttpRequest){";
          index += "xmlHttp=new XMLHttpRequest();";
        index += "}";
        index += "else{";
          index += "xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');";
        index += "}";
        index += "return xmlHttp;";
      index += "}";
  
      index += "function response(){";
        index += "var dt = new Date();";
      
        // get host date and time
        index += "document.getElementById('time').innerHTML = dt.toLocaleTimeString();";
        index += "document.getElementById('date').innerHTML = dt.toLocaleDateString();";
      
        index += "document.getElementById('b0').innerHTML='WebPage';";
      index += "}";
       
      index += "function process(){";
       index += "if(xmlHttp.readyState==0 || xmlHttp.readyState==4) {";
          index += "xmlHttp.open('PUT','xml',true);";
          index += "xmlHttp.onreadystatechange=response;";
          index += "xmlHttp.send(null);";
        index += "} ";
       index += "setTimeout('process()',100);";
      index += "}";
    index += "</script>";
  index += "</html>";
  return index;
}

The logic is make your own code like how i posted in the first post, AFTER have finished the code, you will need to add to this string line by line the code, and were you need, add, like in my project, the variable that you needed (like me with the data.t etc...).

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.