Last Updated on March 2, 2025
We know ESP32 can be used as Web Server and it is most suitable for IoT and real time data handling projects. Here we are going to experiment Sensor Value Web Server using ESP32 to Display real time sensor value on web page and updating it without reloading the page using AJAX request handling.
Here we taken LDR (Light Dependent Resistor or Photoresistor) as a Sensor to detect light Intensity. Any sensor can be used (Maximum output voltage should not exceed 3.3V, otherwise use voltage divider or bidirectional logic converter) remember to edit the code accordingly. To convert this Analog output value from LDR, we need ADC (Analog to Digital Converter) thankfully ESP32 comes with Internal ADC.
Two 12 bit SAR ADCs (ADC1 and ADC2) with 18 Channels that is analog to digital enabled pins available in ESP32 chip, some development boards may have different pin counts, like ESP32 devkit V1 have 15 ADC pins. So check the board datasheet and pinouts before connecting sensors with GPIO pins.
Circuit Diagram
A sensor (LDR) connected with ESP32 ADC Enabled GPIO(32) pin.
Components Required
- ESP32 Development board (here ESP32 Devkit V1)
- LDR
- Resistor 10KΩ
- Connecting wires & Breadboard
- Computer with Arduino IDE
- WiFi
Working Video
Construction & Working
Connect LDR with 10KΩ Resistor and form a voltage divider setup, connect 3.3V from ESP32 board to LDR and GND to another terminal of 10KΩ Resistor. Now connect GPIO 32 (ADC1_4) pin to the junction point of LDR and 10KΩ Resistor.
When there is high intensity light falls, LDR gives low Resistance to 3.3V and conducts it to GPIO 32 pin, if there is full darkness LDR gives high Resistance to 3.3V and allow only few millivolts to GPIO 32 pin. These changes in voltage level detected by internal ADC and converts as 0 to 4095 (12 bit resolution) values. This value, Voltage and corresponding light intensity levels are served through html page from the ESP32 web server setup. Then real time data gets updated dynamically without refreshing the page using AJAX.
What is AJAX?
Asynchronous Java script And Xml is shortly called as AJAX. It is used to transport data, by AJAX we can read data from a web server after a web page has loaded and update that page without reloading the page. It sends data to the web server in the background. By declaring AJAX handle request in the web server code we can make it happen.
ESP32 – Sensor Value Webserver Code
/* Code from theoryCIRCUIT.com */
#include <WiFi.h>
// Wi-Fi credentials
const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";
// Web server on port 80
WiFiServer server(80);
// LDR pin
const int ldrPin = 32;
void setup() {
Serial.begin(115200);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\nConnected to Wi-Fi");
Serial.println(WiFi.localIP());
// Start the server
server.begin();
}
void loop() {
WiFiClient client = server.available(); // Check for incoming clients
if (client) {
String request = client.readStringUntil('\r');
client.flush();
// Read LDR value
int analogValue = analogRead(ldrPin);
float voltage = analogValue * (3.3 / 4095.0);
float lightIntensity = (analogValue / 4095.0) * 100; // Simple percentage mapping
// Handle AJAX request
if (request.indexOf("/data") != -1) {
String json = "{\"analog\":" + String(analogValue) + ",";
json += "\"voltage\":" + String(voltage, 2) + ",";
json += "\"light\":" + String(lightIntensity, 2) + "}";
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: application/json");
client.println("Connection: close");
client.println();
client.println(json);
} else {
// Serve the HTML page
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head><title>ESP32 LDR Monitor</title>");
client.println("<style>");
client.println("body { font-family: Arial, sans-serif; text-align: center; }");
client.println("meter { width: 50%; height: 20px; }");
client.println("</style>");
client.println("</head>");
client.println("<body>");
client.println("<h1>LDR Sensor Data</h1>");
client.println("<p>Analog Value: <span id='analog'>0</span></p>");
client.println("<p>Voltage: <span id='voltage'>0</span> V</p>");
client.println("<p>Light Intensity: <span id='light'>0</span> %</p>");
client.println("<meter id='lightMeter' min='0' max='100' value='0'></meter>");
client.println("<script>");
client.println("function updateData() {");
client.println(" fetch('/data')");
client.println(" .then(response => response.json())");
client.println(" .then(data => {");
client.println(" document.getElementById('analog').innerText = data.analog;");
client.println(" document.getElementById('voltage').innerText = data.voltage;");
client.println(" document.getElementById('light').innerText = data.light;");
client.println(" document.getElementById('lightMeter').value = data.light;");
client.println(" });");
client.println("}");
client.println("setInterval(updateData, 1000);"); // Update every 1 second
client.println("updateData();"); // Initial call
client.println("</script>");
client.println("</body></html>");
}
delay(1);
client.stop(); // Close the connection
}
}
This code makes the following operations, from Connecting ESP32 to WiFi network using the provided SSID and Password, After successful uploading Serial monitor of Arduino IDE will print connected IP address. If not showing then press the EN button on the ESP32 board.
Reads the LDR Value using analogRead() function, LDR Value (0–4095), Voltage level and Light intensity approximated as a percentage.
After that Web Server Code serves HTML page with placeholders for sensor data and an meter element in the root URL that is (/) ip address. For the /data URL, it returns a JSON object with the sensor values. JavaScript’s fetch API retrieves data every second via AJAX and updates the page without refreshing or reloading.