esp8266/esp8266-webserver

Chrome: ERR_CONTENT_LENGTH_MISMATCH

awwende opened this issue · 0 comments

When I run the following code, I'm getting the error "ERR_CONTENT_LENGTH_MISMATCH".

It happens after a few page refreshes, I get this error, and then it takes a minute for the ESP8266 to start serving the webpage again. I can save the html code to my computer and run the html file, without issue, so I doesn't appear to be a syntax issue.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer webserver(80);

String buildJavascript(){
  String javaScript;
  javaScript = "<script type='text/javascript'>";

  javaScript += "function getDate()";
  javaScript += "{";
  javaScript += "var d= new Date();";
  javaScript += "var month = d.getMonth()+1;";
  javaScript += "var day = d.getDate();";
  javaScript += "var year = d.getFullYear().toString().substr(2,2);";
  javaScript += "document.getElementById('inputFileNameToSaveAs').value=month+'-'+day+'-'+year;";
  javaScript += "}";

  javaScript += "function saveTextAsFile()";
  javaScript += "{";
  javaScript += "var textToWrite='Test';";
  javaScript += "var textFileAsBlob = new Blob([textToWrite], {type:'text/plain', endings:'native'});";
  javaScript += "var fileNameToSaveAs = document.getElementById('inputFileNameToSaveAs').value;";
  javaScript += "var downloadLink = document.createElement('a');";
  javaScript += "downloadLink.download = fileNameToSaveAs;";
  javaScript += "downloadLink.innerHTML = 'Download File';";
  javaScript += "if (window.webkitURL != null){";
  javaScript += "downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);";
  javaScript += "}";
  javaScript += "else{";
  javaScript += "downloadLink.href = window.URL.createObjectURL(textFileAsBlob);";
  javaScript += "downloadLink.onclick = destroyClickedElement;";
  javaScript += "downloadLink.style.display = 'none';";
  javaScript += "document.body.appendChild(downloadLink);";
  javaScript += "}";
  javaScript += "downloadLink.click();";
  javaScript += "}";

  javaScript += "function destroyClickedElement(event){";
  javaScript += "document.body.removeChild(event.target);";
  javaScript += "}";

  javaScript += "var defaultValues = '{\\";
  javaScript += "\"RR2\":0.943,\"TOL2p\":0.02,\"TOL2n\":0.02,\\";
  javaScript += "\"RR3\":0.493,\"TOL3p\":0.03,\"TOL3n\":0.03,\\";
  javaScript += "\"RR4\":0.100,\"TOL4p\":0.03,\"TOL4n\":0.01,\\";
  javaScript += "\"TARGET1\":170,\\";
  javaScript += "\"TARGET2\":130,\\";
  javaScript += "\"TARGET3\":87,\\";
  javaScript += "\"TARGET4\":48,\\";
  javaScript += "\"TARGET5\":5}';";

  javaScript += "var currentValues = '{\\";
  javaScript += "\"RR2\":0,\"TOL2p\":0,\"TOL2n\":0,\\";
  javaScript += "\"RR3\":0,\"TOL3p\":0,\"TOL3n\":0,\\";
  javaScript += "\"RR4\":0,\"TOL4p\":0,\"TOL4n\":0,\\";
  javaScript += "\"TARGET1\":0,\\";
  javaScript += "\"TARGET2\":0,\\";
  javaScript += "\"TARGET3\":0,\\";
  javaScript += "\"TARGET4\":0,\\";
  javaScript += "\"TARGET5\":0}';";

  javaScript += "function loadRelRefs(option){";
  javaScript += "if(option == 'DEFAULT'){";
  javaScript += "var obj = JSON.parse(defaultValues);";
  javaScript += "} else{";
  javaScript += "var obj = JSON.parse(currentValues);";
  javaScript += "}";
  javaScript += "document.getElementById('rr2').value = obj.RR2;";
  javaScript += "document.getElementById('tol_pos2').value = obj.TOL2p;";
  javaScript += "document.getElementById('tol_neg2').value = obj.TOL2n;";
  javaScript += "document.getElementById('rr3').value = obj.RR3;";
  javaScript += "document.getElementById('tol_pos3').value = obj.TOL3p;";
  javaScript += "document.getElementById('tol_neg3').value = obj.TOL3n;";
  javaScript += "document.getElementById('rr4').value = obj.RR4;";
  javaScript += "document.getElementById('tol_pos4').value = obj.TOL4p;";
  javaScript += "document.getElementById('tol_neg4').value = obj.TOL4n;";
  javaScript += "}";

  javaScript += "function loadTargets(option){";
  javaScript += "if(option == 'DEFAULT'){";
  javaScript += "var obj = JSON.parse(defaultValues);";
  javaScript += "} else{";
  javaScript += "var obj = JSON.parse(currentValues);";
  javaScript += "}";
  javaScript += "document.getElementById('tar1').value = obj.TARGET1;";
  javaScript += "document.getElementById('tar2').value = obj.TARGET2;";
  javaScript += "document.getElementById('tar3').value = obj.TARGET3;";
  javaScript += "document.getElementById('tar4').value = obj.TARGET4;";
  javaScript += "document.getElementById('tar5').value = obj.TARGET5;";
  javaScript += "}";

  javaScript += "function saveRelRefs(){";
  javaScript += "prompt('Enter Password:', 'Test Box Password');";
  javaScript += "}";

  javaScript += "function saveTargets(){";
  javaScript += "}";

  javaScript += "</script>";  
  return javaScript;
}

void handleWebsite(){
  String htmlDoc;
  htmlDoc = "<!DOCTYPE html>";
  htmlDoc += "<html>";
  htmlDoc += "<head><title>BTACS Options</title>";
  htmlDoc += "<meta charset=\"UTF-8\">";
  htmlDoc += "</head>";
  htmlDoc += buildJavascript();
  htmlDoc += "<body onLoad=\"getDate()\"><h3>BTACS Settings and Data Download</h3>";
  htmlDoc += "<style type=\"text/css\">.fieldset-auto-width{display:inline-block;}</style><div><fieldset class=\"fieldset-auto-width\"><style type=\"text/css\">";
  htmlDoc += ".tg  {border-collapse:collapse;border-spacing:0;}";
  htmlDoc += ".tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}";
  htmlDoc += ".tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}";
  htmlDoc += ".tg .tg-0ord{text-align:right}";
  htmlDoc += ".tg .tg-s6z2{text-align:center}";
  htmlDoc += "</style>";
  htmlDoc += "<table class=\"tg\">";
  htmlDoc += "<tr>";
  htmlDoc += "<th class=\"tg-s6z2\" colspan=\"4\">Relative Reflectance<br>Values</th>";
  htmlDoc += "<th class=\"tg-s6z2\" colspan=\"2\">Target Servo<br>Positions</th>";
  htmlDoc += "</tr>";
  htmlDoc += "<tr>";
  htmlDoc += "<td class=\"tg-031e\" colspan=\"2\" rowspan=\"2\"></td>";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"2\">Tolerances</td>";
  htmlDoc += "<td class=\"tg-031e\"></td>";
  htmlDoc += "<td class=\"tg-031e\"></td>";
  htmlDoc += "</tr>";
  htmlDoc += "<tr>";
  htmlDoc += "<td class=\"tg-s6z2\">+</td>";
  htmlDoc += "<td class=\"tg-s6z2\">-</td>";
  htmlDoc += "<td class=\"tg-031e\"></td>";
  htmlDoc += "<td class=\"tg-031e\"></td>";
  htmlDoc += "</tr>";
  htmlDoc += "<tr>";
  htmlDoc += "<td class=\"tg-0ord\">RR2:</td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"rr2\" style=\"width: 5em\"></td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_pos2\" style=\"width: 5em\"></td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_neg2\" style=\"width: 5em\"></td>";
  htmlDoc += "<td class=\"tg-0ord\">Target 1:</td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar1\" style=\"width: 3em\"></td>";
  htmlDoc += "</tr>";
  htmlDoc += "<tr>";
  htmlDoc += "<td class=\"tg-0ord\">RR3:</td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"rr3\" style=\"width: 5em\"></td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_pos3\" style=\"width: 5em\"></td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_neg3\" style=\"width: 5em\"></td>";
  htmlDoc += "<td class=\"tg-0ord\">Target 2:</td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar2\" style=\"width: 3em\"></td>";
  htmlDoc += "</tr>";
  htmlDoc += "<tr>";
  htmlDoc += "<td class=\"tg-0ord\">RR4</td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"rr4\" style=\"width: 5em\"></td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_pos4\" style=\"width: 5em\"></td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_neg4\" style=\"width: 5em\"></td>";
  htmlDoc += "<td class=\"tg-0ord\">Target 3:</td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar3\" style=\"width: 3em\"></td>";
  htmlDoc += "</tr>";
  htmlDoc += "<tr>";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"></td>";
  htmlDoc += "<td class=\"tg-0ord\">Target 4:</td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar4\" style=\"width: 3em\"></td>";
  htmlDoc += "</tr>";
  htmlDoc += "<tr>";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"></td>";
  htmlDoc += "<td class=\"tg-0ord\">Target 5:</td>";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar5\" style=\"width: 3em\"></td>";
  htmlDoc += "</tr>";
  htmlDoc += "<tr>";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"><input type=button onclick=loadRelRefs(\"DEFAULT\") value=\"Default Values\" style=\"width:100%;height:100\"></td>";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"2\"><input type=button onclick=loadTargets(\"DEFAULT\") value=\"Default Values\" style=\"width:100%;height:100\"></td>";
  htmlDoc += "</tr>";
  htmlDoc += "<tr>";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"><input type=button onclick=loadRelRefs(\"CURRENT\") value=\"Read From Test Box\" style=\"width:100%;height:100\"></td>";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"2\"><input type=button onclick=loadTargets(\"CURRENT\") value=\"Read From Test Box\" style=\"width:100%;height:100\"></td>";
  htmlDoc += "</tr>";
  htmlDoc += "<tr>";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"><input type=button onclick=saveRelRefs() value=\"Update Parameters\" style=\"width:100%;height:100\"></td>";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"2\"><input type=button onclick=saveTargets() value=\"Update Parameters\" style=\"width:100%;height:100\"></td>";
  htmlDoc += "</tr>";
  htmlDoc += "</table></fieldset></div>";

  htmlDoc += "<h4>Download Data</h4>";
  htmlDoc += "<p>To save data:<ul><li>Keep the name as today's date, or<br>";
  htmlDoc += "enter a name for the file in the spot below.</li>";
  htmlDoc += "<li>Press \"Download Data\" to download and save test data.</li></ul></p>";
  htmlDoc += "<p>Save As:<input id=\"inputFileNameToSaveAs\"></input>";
  htmlDoc += "<button onclick=\"saveTextAsFile()\">Download Data</button></p>";

  htmlDoc += "</body></html>";
  webserver.send(200,"text/html",htmlDoc);
}

void handleNotFound() {
  webserver.send(404, "text/plain", "Page not found ...");
}

void setup(){
  WiFi.mode(WIFI_AP);

  uint8_t mac[WL_MAC_ADDR_LENGTH];
  WiFi.softAPmacAddress(mac);
  String macID = String(mac[WL_MAC_ADDR_LENGTH - 2], HEX) +
                 String(mac[WL_MAC_ADDR_LENGTH - 1], HEX);
  macID.toUpperCase();
  String AP_NameString = "ESP8266 " + macID;

  char AP_NameChar[AP_NameString.length() + 1];
  memset(AP_NameChar, 0, AP_NameString.length() + 1);

  for (int i=0; i<AP_NameString.length(); i++)
    AP_NameChar[i] = AP_NameString.charAt(i);
  WiFi.softAP(AP_NameChar, "password");
  webserver.on("/", handleWebsite);
  webserver.onNotFound(handleNotFound);
  webserver.begin();
}

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

My strings are pretty long, but running ESP.getFreeHeap() at the end of my webpage, shows I still have 10k of available memory.