It uses Ajax: AJAX is a technique for creating fast and dynamic web pages.
We could send random numbers automatically, also send increased numbers, ... but we will send the text that we write in the Serial Monitor.
Here the code in file ESP32_realtime.ino
/*
* ESP32 AJAX Demo
* Updates and Gets data from webpage without page refresh
* https://circuits4you.com
*/
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include "index.h" //Web page header file
WebServer server(80);
//Enter your SSID and PASSWORD
const char* ssid = "YOUR_NETWORK";
const char* password = "YOUR_PASSWORD";
char caracter = '0';
String texto = "";
String texto_send = "";
//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void handleRoot() {
String s = MAIN_page; //Read HTML contents
server.send(200, "text/html", s); //Send web page
}
void handleADC() {
// int a = 0;
// a = analogRead(A0); // ORIGINAL CODE
// a = random(1,1023); // RANDOM NUMBER
// a = a + 1; // INCREASE
// if (a >= 1024){a = 0;}
// String adcValue = String(a);
String adcValue = texto_send; // SEND TEXT FROM SERIAL MONITOR.
server.send(200, "text/plane", adcValue); //Send ADC value only to client ajax request
}
//===============================================================
// Setup
//===============================================================
void setup(void){
Serial.begin(115200);
Serial.println();
Serial.println("Booting Sketch...");
/*
//ESP32 As access point
WiFi.mode(WIFI_AP); //Access Point mode
WiFi.softAP(ssid, password);
*/
//ESP32 connects to your wifi -----------------------------------
WiFi.mode(WIFI_STA); //Connectto your wifi
WiFi.begin(ssid, password);
Serial.println("Connecting to ");
Serial.print(ssid);
//Wait for WiFi to connect
while(WiFi.waitForConnectResult() != WL_CONNECTED){
Serial.print(".");
}
//If connection successful show IP address in serial monitor
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP()); //IP address assigned to your ESP
//----------------------------------------------------------------
server.on("/", handleRoot); //This is display page
server.on("/readADC", handleADC);//To get update of ADC Value only
server.begin(); //Start server
Serial.println("HTTP server started");
}
//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void loop(void){
server.handleClient();
//////////////// TEXT FROM SERIAL MONITOR ////////////
if (Serial.available() > 0) { // ¿Hay algún caracter?
caracter = Serial.read(); // Toma el caracter
texto += caracter;
if (caracter == '\n') {
texto_send = texto;
Serial.println("Write a text in Serial Monitor and 'Send'");
Serial.print(texto);
texto = "";
}
}
/////////////////////////////////////////////////////
}
The code also needs to include another file: index.h
To create the dynamic graphic that scrolls to the left, we will use this extension:
Here the code in file ESP32_realtime_2.ino
/*
* ESP32 AJAX Demo
* Updates and Gets data from webpage without page refresh
* https://circuits4you.com
*/
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include "index.h" //Web page header file
WebServer server(80);
//Enter your SSID and PASSWORD
const char* ssid = "Red_Wifi";
const char* password = "Contraseña";
char caracter = '0';
String texto = "";
String texto_send = "";
int a = 0;
//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void handleRoot() {
String s = MAIN_page; //Read HTML contents
server.send(200, "text/html", s); //Send web page
}
void handleADC() {
// a = analogRead(A0); // ORIGINAL CODE
// a = random(1,1023); // RANDOM NUMBER
a = a + 100; // INCREASE
if (a >= 1024){a = 0;}
String adcValue = String(a);
// String adcValue = texto_send; // SEND TEXT FROM SERIAL MONITOR.
server.send(200, "text/plane", adcValue); //Send ADC value only to client ajax request
}
//===============================================================
// Setup
//===============================================================
void setup(void){
Serial.begin(115200);
Serial.println();
Serial.println("Booting Sketch...");
/*
//ESP32 As access point
WiFi.mode(WIFI_AP); //Access Point mode
WiFi.softAP(ssid, password);
*/
//ESP32 connects to your wifi -----------------------------------
WiFi.mode(WIFI_STA); //Connectto your wifi
WiFi.begin(ssid, password);
Serial.println("Connecting to ");
Serial.print(ssid);
//Wait for WiFi to connect
while(WiFi.waitForConnectResult() != WL_CONNECTED){
Serial.print(".");
}
//If connection successful show IP address in serial monitor
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP()); //IP address assigned to your ESP
//----------------------------------------------------------------
server.on("/", handleRoot); //This is display page
server.on("/readADC", handleADC);//To get update of ADC Value only
server.begin(); //Start server
Serial.println("HTTP server started");
}
//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void loop(void){
server.handleClient();
//////////////// TEXT FROM SERIAL MONITOR ////////////
if (Serial.available() > 0) { // ¿Hay algún caracter?
caracter = Serial.read(); // Toma el caracter
texto += caracter;
if (caracter == '\n') {
texto_send = texto;
Serial.println("Write a text in Serial Monitor and 'Send'");
Serial.print(texto);
texto = "";
}
}
/////////////////////////////////////////////////////
}
In the index.h file we change the delay to 1000.
}, 1000); //1000mSeconds update rate // HERE DELAY
Thanks for the great tutorial.
may I know how to forward the local_IP address to the MIT APP, just like the 'texto' sent in your code please?
Best
Adam
I mean the ESP32 send IP address like: 192.168.1.12 - the four group numbers to MIT APP phone screen just like the " 45.78 " sent and received by screen.
if (Serial.available() > 0) { // ¿Hay algún caracter?
caracter = Serial.read(); // Toma el caracter
texto += caracter;
if (caracter == '\n') {
texto_send = texto;
Serial.println("Write a text in Serial Monitor and 'Send'");
Serial.println(WiFi.localIP()); //IP address assigned to your ESP
Serial.print(texto);
texto = "";
}
}
and it prints the IP address (192.168.4.320) to the serial monitor window on the pc instead of the phone screen.
when I typed in: 192.168.4.3 esp32 does send that to phone screen.
if (caracter == '\n') {
texto_send = texto;
Serial.println("Write a text in Serial Monitor and 'Send'");
Serial.println(WiFi.localIP()); //IP address assigned to your ESP
//Serial.print(texto);
texto = "";
I wont to know how I can use with out side a local area net work, like somewhere far from the location of the ESP.
Could you please tell me some options for it?
