Auto refresh html in void loop()

Using Arduino Programming Questions
1

this might be a fruently asked question, but i stll can't figure out a way to refresh my web server in void loop()
here's the code



#include <dummy.h>

#include <ArduinoJson.h>
#include "FS.h"
#include <LittleFS.h>
/*------------------*/
#include <ESP8266WiFi.h>
#include <WiFiClient.h> 
#include <ESP8266WebServer.h>

#include <ESP8266HTTPClient.h>

#ifndef APSSID
#define APSSID "******"
#define APPSK  "*****"
#endif

/* Set these to your desired credentials. */
const char *ssid = APSSID;
const char *password = APPSK;
const char* PARAM_INPUT_1 = "input1";

String Tsetarduino;
String Tsetarduino2;
String Tsetarduino3;

const int pingPin = 5; //D1 trig
int inPin = 4; //D2 echo

int relay_in = 16; //D3
int relay_in14 = 14; //D4
int counter = 0;
boolean LED1_State = false;
boolean LED1_State_out = false;
boolean State_out = false;

static unsigned long ledCameOn = 0;
static unsigned long ledCameOut = 0;
//int counterValue;
#define MAX_STRING_LENGTH  7
 
ESP8266WebServer server(80); // establishing server at port 80 (HTTP protocol's default port)

// Writing a simple HTML page.
char HTML[] = "<html><body>"
"<style> body { height: 100%; background-color: #efefef; font-family: Arial, Helvetica, Sans-Serif; }"
"input[type=text] {  font-size:18px; padding:10px 10px 10px 5px;display:block; width:300px; border:none;border-bottom:1px solid #757575;}"
" input[type=submit]{ background-color: #4CAF50; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer;}"
"#screenFiller {     width: 100vw; height: 100vh;}"

"#dotRed {"
 " height: 35px;"
 " width: 35px;"
 " background-color: #bbb;"
 " border-radius: 50%;"
  "display: inline-block;}"
"</style>"
"<div id=\"screenFiller\" style=\" width: 960px;\">"
"<form METHOD=\"post\" action=\"/getva\" target=\"hidden-form\"> "
"<label>Time ON(s) :</label> <input type=\"text\" name=\"tON\" ><br> "
"<label> Time OFF(s) : </label><input type=\"text\" name=\"tOFF\" ><br>"
"<label> Distance(cm) : </label><input type=\"text\" name=\"dd\" ><br>"
"<input type=\"submit\" value=\"Submit\" > </form> "
 " <span id=\"dotRed\"></span>"
 "</div>"
"</body></html>"; // --> Simple HTML page

/*------------------------------------*/
/*------------------------------------*/
// This function will be called whenever anyone requests 192.168.4.1 within the local area connection of this ESP module.
void handleRoot() 
{
 
  server.send(200, "text/html",HTML);

}

// This function will be called whenever anyone requests 192.168.4.1/toggle within the local area connection of this ESP module.


void handlePostForm()
{

    Tsetarduino = server.arg(0);
    Tsetarduino2 = server.arg(1);
    Tsetarduino3 = server.arg(2);
     


 server.send(200,"text/html",HTML);

}


void setup() {

  Serial.begin(115200);
  Serial.println();

  Serial.print("Configuring access point...");
  /* You can remove the password parameter if you want the AP to be open. */
  WiFi.softAP(ssid, password); // --> This line will create a WiFi hotspot.

  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  server.on("/", handleRoot);
  server.on("/getva", handlePostForm);
  
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  server.handleClient();

if (Tsetarduino > "100")
{
  // change background color of span in html and refresh the page
  
}
}}


`Blockquote`

is there any way i can change color of in void loop() section

2

the server does not have access to the web page, it reacts to HTTP requests coming from the web browser. Those requests are served by the handlers you've defined

  server.on("/", handleRoot);
  server.on("/getva", handlePostForm);

:arrow_right:︎ if the request is for the root of the web site, then handleRoot() is called
:arrow_right:︎ if the request is for /getva, then handlePostForm() is called

that's the only moment HTML is sent to the connected client (and then the client disconnects).

So if you want to change the color of something, you need to do that upon the next request and have the necessary code in the handlers.

if you want this to happen somewhat automagically, you could have some javascript in the HTML that asks the page for an auto-refresh every 15 seconds for example. This way the page gets refreshed often and you can serve a new page with the new color.

there are other technics, but based on your question, that would probably be the easiest answer to get.

3

I believe a request for refresh must come from the client browser. You might try AJAX.

EDIT:
AJAX is a little more complex than just updating the whole page. But, it has the advantage of being able to update only the fields desired.

4 
<head>
  <meta http-equiv="refresh" content="30">
</head>
1 Like
5

do you want:

  1. shut down server and start him again
  2. save new copy of .html file in File system
  3. force the loaded to browser page to reload
    ???
6

well thanks for the answers. but i don't think using

<head>
  <meta http-equiv="refresh" content="30">
</head>

is a good solution because i need to see changes in browser instantly.
is there any example of using AJAX in client browser?? and how to implement it my code?

7

Depending on which browsers you are using I recommend you search for FetchAPI (not Ajax).

bascially you will need three steps:

  • a HTML page using span tags to mark the positions where you want to update data
  • a fetch API which will fetch new data from a resource (the websever) and inserts this data with JavaScript into the loaded HTML page (it will repleace the content of the span tags). You can host this JavaScript as separate resource on your ESP webserver - and you can include it into your HTML code. So it will be loaded if the HTML gets loaded
  • a resource on your ESP Webserver which provides updated information as JSON to the browser. I use a flat JSON because on long term it's easier to add or remove values as the project grows.

all three parts must work hand in hand.
I don't have it yet in English, but if you want to see code examples, you can have a look on my page (its in German)

8

Ajax will work in the same way, your browser will request a refresh but will not get the whole page, just some data in the format you want (json, text,…) and a javascript will inject that data in the DOM of your page so that data will appear to refresh in place. If you need fast update you’ll need to change the frequency of the auto refresh.

9

thanks a lot everyone your answers help me to get a solution.
the answer was definitely AJAX.

10

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