ESP32 Webserver: HTML code in string incomplete

Question

I'm desperately trying to write HTML code in a string since I can't use the filesystem on ESP32. (info: The server has no internet access (AP-mode) and I cannot load any files on ESP32. So I need a string as workaround).

A server and a homepage are running on my ESP32.

Inside the script tag there's missing code in my string (watched it in browser developer mode).

If I comment some lines of code above the script tag, the code inside the script tag is complete again. The code after the script-tag is never missing and always complete (see comments).

Does anyone have an idea?

Besides, the script code doesn't do what I wanted I to do. The div doesn't update its content, it's static. I already tried several options but I'm new to HTML and Javascript.

I'm glad about any hint.

Here is the code of the HTML-String:

String html_document() {
  sHTML = "<!doctype html>";
  sHTML +="<html>";
  sHTML +="<html lang=\"de\">";
/***************** head ****************/
  sHTML +="<head>";
    /****** avoid favicon requests ** <link rel=\"icon\" href=\"data:;base64,iVBORw0KGgo=\">  ** <link rel=\"shortcut icon\" href=\"data:image/x-icon;,\" type=\"image/x-icon\"> **/
    sHTML +="<link rel=\"icon\" href=\"data:;base64,iVBORw0KGgo=\"> ";
    sHTML +="<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";    //Anpassung an Viewport für unterschiedliche Devices
/***************** title ***************/
    sHTML +="<title>LetsgoING IoT</title>";
    sHTML +="<style>h1{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
    sHTML +="<style>h1{ color: green;}</style>";
    sHTML +="<style>h2{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
    sHTML +="<style>h2{ color: blue;}</style>";
    sHTML +="<style>h5{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
    sHTML +="<style>p{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 3%;} </style>";
    sHTML +="<style>p1{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style>";
    sHTML +="<style>p2{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style>";

  sHTML +="</head>";
/***************** body ****************/
sHTML+= "<body>";

sHTML += " <script type=\"text/javascript\">";
sHTML += " var interVar;";
sHTML += " </script>";

  sHTML+= "<h1>LetsgoING</h1>";
  sHTML+= "<h2>Internet der Dinge</h2>";

  sHTML+= "<p1><a style=\"width:38%;\"></a><a style=\"width:20%;color: green\">LED ein</a> <a style=\"width:15%;\" href=\"LEDON\"><button> EIN </button></a> </a><a style=\"width:27%;\"> </a></p1>";
  sHTML+= "<p><a style=\"width:38%;\"></a><a style=\"width:20%;color: red\"  >LED aus</a> <a style=\"width:15%\"; href=\"LEDOFF\"><button>AUS</button></a><a style=\"width:27%;\"> </a></p>";

  sHTML+= "<h5>RGB-LED PWM-Werte</h5>";
  sHTML+= "<form><p2>";
  sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: red\"> Rot</a>  <a style=\"width:15%;\" ><input name=\"rot\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\" ></a><a style=\"width:27%;\"> </a>";
  sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: green\">Grün</a><a style=\"width:15%;\" ><input name=\"gruen\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\"></a><a style=\"width:27%;\"> </a>";
  sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: blue\">Blau</a> <a style=\"width:15%;\" ><input name=\"blau\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\"></a><a style=\"width:27%;\"> </a>";
  sHTML+= "</p2>";
  sHTML+= "<p><a style=\"width:38%;\"></a> <a style=\"width:20%;\">         </a>   <label style=\"width:15%;\" ><input type=\"submit\" value=\"senden\"></label><a style=\"width:27%;\"></a></p>";
  sHTML+= "</form>";

  sHTML+= "<form><p2><a style=\"width:38%;\"></a> <a style=\"width:20%;color: blue\">analoger Schwellwert</a> <a style=\"width:15%;\" ><input name=\"schwell\" type=\"number\" min=\"0\" max=\"1024\" step=\"10\" value=\"300\"></a><a style=\"width:27%;\"> </a></p2>";
  sHTML+= "<p><a style=\"width:38%;\"></a> <a style=\"width:20%;\">         </a>   <label style=\"width:15%;\" ><input type=\"submit\" value=\"senden\"></label><a style=\"width:27%;\"></a></p>";
  sHTML+= "</form>";

  sHTML+="<p><a style=\"width:50%;\">Analoger Output 1:  </a><div id=\"an1\"; style=\"width:25%;\"></div> <a style=\"width:25%;\"></a></p>";
  sHTML+="<p><label style=\"width:50%;\" for=\"analog\">Analoger Output 2:  </label><div id=\"an2\"; style=\"width:25%;\">Analoger Wert2</div> <a style=\"width:25%;\"></a></p>";

  sHTML += "<script type=\"text/javascript\">";
    sHTML += "function updateDiv () { ";
    sHTML += "document.getElementById(\"an1\").innerHTML(\""; //setText
    sHTML += analog1;
    sHTML += "\"); ";
    sHTML += "document.getElementById(\"an2\").textContent(\"";
    sHTML += analog2;
    sHTML += "\"); ";
    sHTML += "}";

//from here code is missing...

    sHTML += " function laDn(){";
    sHTML += "interVar = window.setInterval(updateDiv, 10000);}";
//up to here.

  sHTML += "</script>";

sHTML+= "</body>";
sHTML+= "</html>";

return sHTML;
}

This is the part where the string is cut (output, raw HTML):

 <script type="text/javascript">function updateDiv () {
document.getElementById("an1").innerHTML("4095"); 
document.getElementById("an2").textContent("27"); } 
function laDn(</script>

EDIT: In between, I found a way to make the whole thing work (see my comments). If anyone is interested in the code, leave a comment.

I found a syntax error. Instead of:

 sHTML += "document.getElementById(\"an2\").textContent(\"";
        sHTML += analog2;
        sHTML += "\"); ";

It must be:

sHTML += "document.getElementById(\"an2\").textContent = \"";
    sHTML += analog2;
    sHTML += "\"; ";

(no brackets () but '=' )

Here is my new code with some changes:

String html_document(){
  sHTML = "<!doctype html>";
  sHTML +="<html>";
  sHTML +="<html lang=\"de\">";
/***************** head ****************/
  sHTML +="<head>";
    /****** avoid favicon requests ** <link rel=\"icon\" href=\"data:;base64,iVBORw0KGgo=\">  ** <link rel=\"shortcut icon\" href=\"data:image/x-icon;,\" type=\"image/x-icon\"> **/
    sHTML +="<link rel=\"icon\" href=\"data:;base64,iVBORw0KGgo=\"> ";
    sHTML +="<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";    //Anpassung an Viewport für unterschiedliche Devices
/***************** title ***************/
    sHTML +="<title>LetsgoING IoT</title>";
    sHTML +="<style>h1{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
    sHTML +="<style>h1{ color: green;}</style>";
    sHTML +="<style>h2{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
    sHTML +="<style>h2{ color: blue;}</style>";
    sHTML +="<style>h5{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
    sHTML +="<style>p{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 3%;} </style>";
    sHTML +="<style>p1{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style>";
    sHTML +="<style>p2{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style>";
  sHTML +="</head>";

/***************** body ****************/
sHTML+= "<body>";   //onload=\"window.setInterval(updateDiv, 15000);\"

  sHTML+= "<h1>LetsgoING</h1>";
  sHTML+= "<h2>Internet der Dinge</h2>";

  sHTML+= "<p1><a style=\"width:38%;\"></a><a style=\"width:20%;color: green\">LED ein</a> <a style=\"width:15%;\" href=\"LEDON\"><button> EIN </button></a> </a><a style=\"width:27%;\"> </a></p1>";
  sHTML+= "<p><a style=\"width:38%;\"></a><a style=\"width:20%;color: red\"  >LED aus</a> <a style=\"width:15%\"; href=\"LEDOFF\"><button>AUS</button></a><a style=\"width:27%;\"> </a></p>";

  sHTML+= "<h5>RGB-LED PWM-Werte</h5>";
  sHTML+= "<form><p2>";
  sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: red\"> Rot</a>  <a style=\"width:15%;\" ><input name=\"rot\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\" ></a><a style=\"width:27%;\"> </a>";
  sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: green\">Grün</a><a style=\"width:15%;\" ><input name=\"gruen\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\"></a><a style=\"width:27%;\"> </a>";
  sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: blue\">Blau</a> <a style=\"width:15%;\" ><input name=\"blau\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\"></a><a style=\"width:27%;\"> </a>";
  sHTML+= "</p2>";
  sHTML+= "<p><a style=\"width:38%;\"></a> <a style=\"width:20%;\">         </a>   <label style=\"width:15%;\" ><input type=\"submit\" value=\"senden\"></label><a style=\"width:27%;\"></a></p>";
  sHTML+= "</form>";

  sHTML+= "<form><p2><a style=\"width:28%;\"></a> <a style=\"width:30%;color: blue\">analoger Schwellwert</a> <a style=\"width:15%;\" ><input name=\"schwell\" type=\"number\" min=\"0\" max=\"1024\" step=\"10\" value=\"300\"></a><a style=\"width:27%;\"> </a></p2>";
  sHTML+= "<p><a style=\"width:28%;\"></a> <a style=\"width:30%;\">         </a>   <label style=\"width:15%;\" ><input type=\"submit\" value=\"senden\"></label><a style=\"width:27%;\"></a></p>";
  sHTML+= "</form>";

  sHTML+="<p><a style=\"width:20%;\"></a> <a style=\"width:38%;\">Analoger Wert 1:  </a><p3 id=\"an1\"; style=\"width:22%;\">Messwert 1 </p3><a style=\"width:20%;\"></a></p>";
  sHTML+="<p><a style=\"width:20%;\"></a> <a style=\"width:38%;\">Analoger Wert 2:  </a><p3 id=\"an2\"; style=\"width:22%;\">Messwert 2 </p3><a style=\"width:20%;\"></a></p>";
  sHTML+="<p><a style=\"width:20%;\"></a> <a style=\"width:38%;\">Digitaler Zustand:</a><p3 id=\"dig\"; style=\"width:22%;\">Digitaler Zustand</p3><a style=\"width:20%;\"></a></p>";

  sHTML += "<script>";
    sHTML += "setInterval(updateDiv, 2000);";
    sHTML += "function updateDiv () { ";
    sHTML += "document.getElementById(\"an1\").innerHTML = \""; //setText
    sHTML += analog1;
    sHTML += "\"; ";
    sHTML += "document.getElementById(\"an2\").innerHTML = \"";  
    sHTML += analog2;
    sHTML += "\"; ";
    sHTML += "document.getElementById(\"dig\").innerHTML = \""; 
    sHTML += DigiOut;
    sHTML += "\"; ";
    sHTML += "}";
  sHTML += "</script>";
sHTML+= "</body>";
sHTML+= "</html>";
return sHTML;
}

This is my loop:

void loop() {
  if (millis() - startTime >= 2000) {
    startTime = millis();
    /* Check if a client has connected */
    client = server.available();
    if (!client){
      return;
    }

   /*Wait for the client to send data */
    Serial.println("neuer Client verbunden------------------------------");
    /*Count requests: */
    request_counter ++;
    unsigned long clTimeout = millis()+250;
    while(!client.available() && (millis()<clTimeout) ){
      delay(1);
    }

  /***  publish Homepage ***/
    client.print(html_document());
  //  client.print(stHTML());

  /* Read the first line of the clients request string "sHTML" until carriage return \r */
    sHTMLRequest = client.readStringUntil('\r');
      #ifdef DEBUGMODE
        Serial.println("Antwort: ");
        Serial.println(sHTMLRequest);
      #endif
    client.flush();
   /* stop client, if request is empty */
    if(sHTMLRequest==""){
      Serial.println("Leere Anfrage! - client gestoppt");
      client.stop();
      return;
      }
        #ifdef DEBUGMODE
          Serial.println("Antwort2: ");
          Serial.println(sHTMLRequest);
          Serial.println ("---------");
          Serial.print("DEBUG: Remote IP - Address : ");
          for (int i = 0; i < 3; i++) {
            Serial.print( client.remoteIP()[i]);
            Serial.print(".");
            }
          Serial.println(client.remoteIP()[3]);
          Serial.print("Seitenaufrufe: ");
          Serial.println(request_counter);
          Serial.println ("---------");
        #endif
  /**** call event handler **********/
    eventHandler();
      #ifdef DEBUGMODE
        Serial.println("Zugewiesene PWM-Werte");
        Serial.print("rot: ");
        Serial.println(rot);
        Serial.print("gruen: ");
        Serial.println(gruen);
        Serial.print("blau: ");
        Serial.println(blau);
      #endif
  /* write PWM values for colors to channels*/
  ledcWrite(1, rot);
  ledcWrite(2, gruen);
  ledcWrite(3, blau);
  Serial.println(analog1);
  }

MESShandler();
}

This method reads values from pins:

void MESShandler(){
  analog1 = analogRead(pinAnalog1);
  analog2 = analogRead(pinAnalog2);
  DigiOut = digitalRead(5);
}

This is the whole(!) output from the browser (since it's HTML from string there are no line breaks...).

<!doctype html><html><html lang="de"><head><link rel="icon" href="data:;base64,iVBORw0KGgo="> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>LetsgoING IoT</title><style>h1{display: flex; flex-flow: row wrap; justify-content: center;} </style><style>h1{ color: green;}</style><style>h2{display: flex; flex-flow: row wrap; justify-content: center;} </style><style>h2{ color: blue;}</style><style>h5{display: flex; flex-flow: row wrap; justify-content: center;} </style><style>p{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 3%;} </style><style>p1{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style><style>p2{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style></head><body><h1>LetsgoING</h1><h2>Internet der Dinge</h2><p1><a style="width:38%;"></a><a style="width:20%;color: green">LED ein</a> <a style="width:15%;" href="LEDON"><button> EIN </button></a> </a><a style="width:27%;"> </a></p1><p><a style="width:38%;"></a><a style="width:20%;color: red"  >LED aus</a> <a style="width:15%"; href="LEDOFF"><button>AUS</button></a><a style="width:27%;"> </a></p><h5>RGB-LED PWM-Werte</h5><form><p2><a style="width:38%;"></a> <a style="width:20%;color: red"> Rot</a>  <a style="width:15%;" ><input name="rot" type="number" min="0" max="255" step="1" value="80" ></a><a style="width:27%;"> </a><a style="width:38%;"></a> <a style="width:20%;color: green">Grün</a><a style="width:15%;" ><input name="gruen" type="number" min="0" max="255" step="1" value="80"></a><a style="width:27%;"> </a><a style="width:38%;"></a> <a style="width:20%;color: blue">Blau</a> <a style="width:15%;" ><input name="blau" type="number" min="0" max="255" step="1" value="80"></a><a style="width:27%;"> </a></p2><p><a style="width:38%;"></a> <a style="width:20%;">         </a>   <label style="width:15%;" ><input type="submit" value="senden"></label><a style="width:27%;"></a></p></form><form><p2><a style="width:28%;"></a> <a style="width:30%;color: blue">analoger Schwellwert</a> <a style="width:15%;" ><input name="schwell" type="number" min="0" max="1024" step="10" value="300"></a><a style="width:27%;"> </a></p2><p><a style="width:28%;"></a> <a style="width:30%;">         </a>   <label style="width:15%;" ><input type="submit" value="senden"></label><a style="width:27%;"></a></p></form><p><a style="width:20%;"></a> <a style="width:38%;">Analoger Wert 1:  </a><p3 id="an1"; style="width:22%;">Messwert 1 </p3><a style="width:20%;"></a></p><p><a style="width:20%;"></a> <a style="width:38%;">Analoger Wert 2:  </a><p3 id="an2"; style="width:22%;">Messwert 2 </p3><a style="width:20%;"></a></p><p><a style="width:20%;"></a> <a style="width:38%;">Digitaler Zustand:</a><p3 id="dig"; style="width:22%;">Digitaler Zustand</p3><a style="width:20%;"></a></p><script>setInterva

Can you post the output of the string? The raw html? That will help identify where the error is (probably missing angle bracket or unescaped quote). — styfle, Jun 14 '17 at 20:42
Maybe I wasn't clear. You have a `html_document()` function that returns a string. Does this function actually return a string without breaking? If so, can you add that string to your question? The whole thing. — styfle, Jun 16 '17 at 12:39
The function returns a string and it worked well before i added the script-part. — carousally, Jun 16 '17 at 14:55
I found another solution inbetween and everything works. In my C-code i have now another client.print() method that adds another string to my Site which contains only the script-part. I got some errors again (the first string broke up, means same as before. Some parts just didn't appear in the html-document in the browser. But i wasn't able to reproduce the error. Just tried some changes and it worked. I'm sorry this cannot be an example for other users having similar problems... — carousally, Jun 16 '17 at 15:01
Styfle, I'm still curious about why this string is breakng up. So heres again my code (edit above) with some corrections of errors i found. I put everything of the string in one method again [ HTML_document() ] and the string is breaking up again. (if i have two methos making two strings and each string goes seperately in a client.print-method this error does not occure! — carousally, Jun 16 '17 at 16:13
It looks like the HTML output is correct now. The reason why its not updating the data is because the values are hardcoded in the HTML. The `updateDiv` function always assigns the same value. You probably want to make an ajax call back to the server to get the new values ever 2 seconds. — styfle, Jun 16 '17 at 16:22
the new values are updated correctly I think, I put that code now above. This happens in another loop in my c-program. Variables are global. Just if i put all html-code in one string, the string still breaks up... (It only works well by using two client.print-methods with 2 seperat strings). I would prefer to not use ajax. — carousally, Jun 16 '17 at 16:29
I see now what you mean. updateDiv only reads the values once when the string is composed, since it cannot "access" what happens in my c program. Can I use Ajax to access a value of a VARIABLE in my c-file? I cannot use file system an therefore not load files. — carousally, Jun 24 '17 at 12:56
Can you create another string that's acts as another page? For example /index is one page and /api is another page? — styfle, Jun 24 '17 at 14:11
I'm not shure wether I understand what you mean. I'd like to display the values on the same page. Or is it possible to have sth like a page inside a page? — carousally, Jun 26 '17 at 13:06
I asked a new question since it is not related to the original topic anymore: https://stackoverflow.com/q/44809589/4577163 — carousally, Jun 28 '17 at 18:02

ESP32 Webserver: HTML code in string incomplete

0 Answers0