Post topics, source code that relate to the Arduino Platform
User avatar
By mib2347
#74874 I'm trying to make a page display a shopping list that I can add items to via Google Assistant and IFTTT and have that list update without a browser refresh.

I have almost everything working except when a new item is added it is on the same line as the previous item. If I try to add HTML code to the String with the list item data the page won't update automatically. If I refresh the page the list displays in the format I want, however. This is what I have so far

Code: Select all#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(1066);

const char* ssid = "";
const char* password = "";

String Website, data, XML, Javascript;

void javascriptContent(){
  Javascript = "<SCRIPT>\n";
  //Javascript += "alert('hello');\n";
  Javascript += "var xmlHttp=createXmlHttpObject();\n";
  Javascript += "function createXmlHttpObject(){\n";
  Javascript += "if(window.XMLHttpRequest){\n";
  Javascript += "xmlHttp=new XMLHttpRequest();\n";
  Javascript += "}else{\n";
  Javascript += "xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');\n";
  Javascript += "}\n";
  Javascript += "return xmlHttp;\n";
  Javascript += "}\n";
  Javascript += "\n";
  Javascript += "function response(){\n";
  Javascript += "xmlResponse=xmlHttp.responseXML;\n";
  Javascript += "xmldoc = xmlResponse.getElementsByTagName('data');\n";
  Javascript += "message = xmldoc[0].firstChild.nodeValue;\n";
  Javascript += "document.getElementById('div1').innerHTML=message;\n";
 
  Javascript += "}\n";

  Javascript += "function process(){\n";
  Javascript += "xmlHttp.open('PUT','xml','true');\n";
  Javascript += "xmlHttp.onreadystatechange=response;\n";
  Javascript += "xmlHttp.send(null);\n";
  Javascript += "setTimeout('process()',500);\n";
  Javascript += "}\n";
 
  Javascript += "</SCRIPT>\n";
}

void WebsiteContent(){
  javascriptContent();
  Website = "<html>\n";
  Website += "<body onload ='process()'>";
  Website += "<div id='div1'>"+data+"</div></body></html>";
  Website += Javascript;
  server.send(200, "text/html", Website);
}

void XMLcontent(){
  XML = "<?xml version = '1.0'?>";
  XML += "<data>";
  XML += data;
  XML += "</data>";

  server.send (200, "text/xml", XML);
 
}

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid,password);
  while(WiFi.status() != WL_CONNECTED) delay(500);
  WiFi.mode(WIFI_STA);
  Serial.print(WiFi.localIP());
  server.on("/", WebsiteContent);
  server.on("/xml", XMLcontent);
  server.on("/text", textArg);
  server.begin();
 
}

void textArg(){
 
  data += server.arg("text");
  Website = "<html>"+data+"</html>";
  Serial.println(data);
  server.send(200, "text/plain", Website);

}

void loop() {
  server.handleClient();
}
User avatar
By mib2347
#74924 Alright so I figured it out and got it working. The issue was that adding the <br> tag to the "data" String within the textArg function would cause the browser to process it incorrectly (I don't know why though). My solution was to add "temp" after each list item instead of the <br> tag and then use Javascript to replace all instances of "temp" with "<br>". This works just as I wanted.

I also added a function to clear the list without having to reset the device and I'm going to see if I can figure out a way of deleting just the most recent item in case it adds something unintentional.

Here's the updated code in case anyone is interested in it

Code: Select all#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(1066);

const char* ssid = "";
const char* password = "";


String Website, data, XML, Javascript, CSS;

void javascriptContent(){
  Javascript = "<SCRIPT>\n";
  //Javascript += "alert('hello');\n";
  Javascript += "var xmlHttp=createXmlHttpObject();\n";
  Javascript += "function createXmlHttpObject(){\n";
  Javascript += "if(window.XMLHttpRequest){\n";
  Javascript += "xmlHttp=new XMLHttpRequest();\n";
  Javascript += "}else{\n";
  Javascript += "xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');\n";
  Javascript += "}\n";
  Javascript += "return xmlHttp;\n";
  Javascript += "}\n";
  Javascript += "\n";
  Javascript += "function response(){\n";
  Javascript += "xmlResponse=xmlHttp.responseXML;\n";
  Javascript += "xmldoc = xmlResponse.getElementsByTagName('data');\n";
  Javascript += "message = xmldoc[0].firstChild.nodeValue;\n";
  Javascript += "var message1 = message.replace(/temp/g, '<br>');\n";
  Javascript += "document.getElementById('div1').innerHTML=message1;\n";
  Javascript += "}\n";
  Javascript += "function process(){\n";
  Javascript += "xmlHttp.open('PUT','xml','true');\n";
  Javascript += "xmlHttp.onreadystatechange=response;\n";
  Javascript += "xmlHttp.send(null);\n";
  Javascript += "setTimeout('process()',500);\n";
  Javascript += "}\n";
 
  Javascript += "</SCRIPT>\n";

  CSS = "<style> body {font-family: 'Indie Flower'; color:white; font-size:50px; text-transform:capitalize;} h1 {text-align:center; font-size:90px; margin-bottom:10%; font-family:'Dancing Script';}</style>";
}



void WebsiteContent(){
  javascriptContent();
  Website = "<link href='https://fonts.googleapis.com/css?family=Dancing+Script|Indie+Flower|Lobster|Pacifico' rel='stylesheet'>";
  Website += "<html>\n";
  Website += "<body onload ='process()' style = 'background:black' >";
  Website += "<h1>Shopping List</h1>";
  Website += "<div id='div1'>"+data+"</div></body></html>";
  Website += Javascript;
  Website += CSS;
  server.send(200, "text/html", Website);
}

void XMLcontent(){
  XML = "<?xml version = '1.0'?>";
  XML += "<data>";
  XML += data;
  XML += "</data>";

  server.send (200, "text/xml", XML);
 
}

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid,password);
  while(WiFi.status() != WL_CONNECTED) delay(500);
  WiFi.mode(WIFI_STA);
  Serial.print(WiFi.localIP());
  server.on("/", WebsiteContent);
  server.on("/xml", XMLcontent);
  server.on("/text", textArg);
  server.on("/reset", resetArg);
  server.begin();
 
}

void textArg(){
  data += server.arg("text");
  data += "temp";
  Serial.println(data);
  Website = "<html>"+data+"</html>";
  server.send(200, "text/html", Website);

}

void resetArg(){
  data = "\n";
  Website = "<html>"+data+"</html>";
  server.send(200, "text/html", Website);
}

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