Control Multiple LEDs from Web Interface using ESP32

What is Web-Based LED Control with ESP32?

ESP32 can act as a Wi-Fi-based web server that hosts a web page allowing users to control hardware components like LEDs from any device connected to the same network. By using HTML buttons, users can control multiple LEDs simultaneously with real-time response.

Working Principle of Multiple LED Control via Web

The ESP32 connects to a Wi-Fi network and starts a web server. HTML buttons are served to the client browser. When a button is clicked, it sends an HTTP GET request to the ESP32, which then toggles the state of the corresponding LED connected to a specific GPIO pin.

Connect multiple LEDs to ESP32 GPIO pins with current-limiting resistors.
Connect ESP32 to a Wi-Fi network.
Serve a web page with HTML buttons via ESP32.
Handle incoming HTTP requests to toggle LEDs.
Update LED states in real-time based on user interaction.

Formula: N/A

Components Required

ESP32 development board
3x LEDs (Red, Green, Blue or any color)
3x 220Ω resistors
Breadboard and jumper wires
Micro USB cable
Wi-Fi-enabled laptop or smartphone

Pin Configuration

GPIO 16: Connected to LED 1 (Red)
GPIO 17: Connected to LED 2 (Green)
GPIO 18: Connected to LED 3 (Blue)

Make sure to use current-limiting resistors with LEDs to prevent damage to the ESP32 or LEDs.

Wiring Connections

Anode of LED 1 -> GPIO 16 via 220Ω resistor
Anode of LED 2 -> GPIO 17 via 220Ω resistor
Anode of LED 3 -> GPIO 18 via 220Ω resistor
Cathodes of all LEDs -> GND

Arduino Code to Control Multiple LEDs via Web Page

1#include <WiFi.h>
2#include <WebServer.h>
3
4const char* ssid = "YOUR_SSID";
5const char* password = "YOUR_PASSWORD";
6
7WebServer server(80);
8
9#define LED1 16
10#define LED2 17
11#define LED3 18
12
13void handleRoot() {
14  String html = "<!DOCTYPE html><html><head><title>ESP32 LED Control</title><style>button{padding:15px;margin:10px;font-size:20px;}</style></head><body><h1>Control LEDs</h1>";
15  html += "<button onclick=\"location.href='/led1/on'\">LED 1 ON</button>";
16  html += "<button onclick=\"location.href='/led1/off'\">LED 1 OFF</button><br>";
17  html += "<button onclick=\"location.href='/led2/on'\">LED 2 ON</button>";
18  html += "<button onclick=\"location.href='/led2/off'\">LED 2 OFF</button><br>";
19  html += "<button onclick=\"location.href='/led3/on'\">LED 3 ON</button>";
20  html += "<button onclick=\"location.href='/led3/off'\">LED 3 OFF</button>";
21  html += "</body></html>";
22  server.send(200, "text/html", html);
23}
24
25void setup() {
26  Serial.begin(115200);
27  pinMode(LED1, OUTPUT);
28  pinMode(LED2, OUTPUT);
29  pinMode(LED3, OUTPUT);
30
31  WiFi.begin(ssid, password);
32  while (WiFi.status() != WL_CONNECTED) {
33    delay(1000);
34    Serial.println("Connecting to WiFi...");
35  }
36  Serial.println("Connected to WiFi. IP: ");
37  Serial.println(WiFi.localIP());
38
39  server.on("/", handleRoot);
40
41  server.on("/led1/on", []() { digitalWrite(LED1, HIGH); server.sendHeader("Location", "/"); server.send(303); });
42  server.on("/led1/off", []() { digitalWrite(LED1, LOW); server.sendHeader("Location", "/"); server.send(303); });
43  server.on("/led2/on", []() { digitalWrite(LED2, HIGH); server.sendHeader("Location", "/"); server.send(303); });
44  server.on("/led2/off", []() { digitalWrite(LED2, LOW); server.sendHeader("Location", "/"); server.send(303); });
45  server.on("/led3/on", []() { digitalWrite(LED3, HIGH); server.sendHeader("Location", "/"); server.send(303); });
46  server.on("/led3/off", []() { digitalWrite(LED3, LOW); server.sendHeader("Location", "/"); server.send(303); });
47
48  server.begin();
49}
50
51void loop() {
52  server.handleClient();
53}

Code Explanation (Line-by-Line)

#include <WiFi.h>: Includes the Wi-Fi library for network connection.
#include <WebServer.h>: Provides functions to create a simple web server.
#define LED1 16 ...: Defines GPIO pins connected to LEDs.
server.on("/led1/on", ...);: Handles HTTP request to turn LED 1 ON.
server.sendHeader("Location", "/"); server.send(303);: Redirects user back to the main page after LED toggle.
handleRoot(): Serves an HTML page with ON/OFF buttons for each LED.
digitalWrite(LED1, HIGH);: Turns ON the corresponding LED.

Applications

IoT-based lighting systems
Smart home automation interfaces
Remote LED testing tools
Educational IoT web control projects
Multi-device control via browser

Conclusion

Controlling multiple LEDs via a web interface with ESP32 provides a hands-on way to learn about IoT and server-client communication. With just a few lines of HTML and Arduino code, you can create smart lighting systems or use it as a base for more complex home automation projects.

ESP Experiments