I want to transfer sensor data to visualize them on my browser just like we do with the Arduino IDE serial monitor. I use ESP32 with wifi connectivity. I use the code below adapted from RNT for testing but it don't completly work.
The code generate a random number every second (named : Stone) and publish the value as a string at expected IP address. The value showed in my browser but this only work once after which the data don't refresh. I need to press the browser refresh button every time to "ask" for new data from the ESP. What can I do to have a constant stream without hitting the refresh button?
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Load Wi-Fi library
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "ESP32-Access-Point";
const char* password = "123456789";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
float randFloat=0.001;
String Stone ="";
long randNumber = 0;
void setup() {
Serial.begin(115200);
// Connect to Wi-Fi network with SSID and password
Serial.print("Setting AP (Access Point)…");
// Remove the password parameter, if you want the AP (Access Point) to be open
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
//if (client) { // If a new client connects,
// Serial.println("New Client."); // print a message out in the serial port
// String currentLine = ""; // make a String to hold incoming data from the client
randNumber = random(300);
randFloat = randNumber + 0.012;
Stone = String(randFloat,3);
// Display the HTML web page
client.println("<!DOCTYPE html>"+Stone+"<html>");
// The HTTP response ends with another blank line
client.println();
// }
delay(1000);
Serial.println(Stone);
Serial.println("loop");
}
There is a serie of step to go from the long type random number to float (what i really will and want to publish) to string (the only data type I was able to publish so far!). Not my issu for now!
I am not interested in solution using a home router, cloud server or the like. I really just want the data from the esp to go straigth to my laptop when connected on a dedicated wifi host on the esp.
Take a look at this. I don't know where I got it from originally and how much I changed it, but it should give you some ideas. The refresh period is coded into the HTML as '1'
I spend the whole morning playing around with the code and as you suggest, this line did the trick (I could even reach a refresh rate of 0.5sec which is fine for me.
The working code:
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Load Wi-Fi library
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "ESP32-Access-Point";
const char* password = "123456789";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
float randFloat = 0.001;
String Stone = "";
long randNumber = 0;
void setup() {
Serial.begin(115200);
// Connect to Wi-Fi network with SSID and password
Serial.print("Setting AP (Access Point)…");
// Remove the password parameter, if you want the AP (Access Point) to be open
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
server.begin();
}
void loop() {
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String clienttalk = "";
String currentLine = "refresh"; // make a String to hold incoming data from the client
while (client.connected()) {
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (clienttalk.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
randNumber = random(300); //generate a number
randFloat = randNumber + 0.012; // transform into float
Stone = String(randFloat, 3); // transform into string to publish
// HTML code here :
client.print("<!DOCTYPE html><html>");
client.print("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.print("<head><meta http-equiv=" + currentLine + " content=" + 0.5 + " >");
client.print("<link rel=\"icon\" href=\"data:,\">");
client.print("<style>html { font-family: Helvetica; display: inline-block; margin: 2px auto; text-align: left;}");
client.print("</style></head><body><h4>" + Stone + "</h4></body></html>");
client.println();
break;
} else {
clienttalk = "";
}
} else if (c != '\r') {
clienttalk += c;
}
}
}
Serial.println(Stone); // output to monitor for validation
Serial.println("loop"); // tell the monitor you did a loop
header = ""; // clear the client receive characters
client.stop();
delay(500);
}
}
It is far from optimal because at every refresh, the ESP server resend the whole HTML code instead of just updating the particular line were data are updated. There is obviously better way to do this but this a good start.