Index
Introduction
In this project, we will use ESP32 as a web server to control an LED via a smartphone browser. The ESP32 will host a webpage that allows you to toggle the LED ON and OFF from your phone over Wi-Fi.
Required Components
- ESP32 Board
- LED
- 220Ω Resistor
- Breadboard
- Jumper Wires
- Smartphone with Wi-Fi
Circuit Diagram
- ESP32 GPIO 2 → 220Ω Resistor → LED (Anode +)
- ESP32 GND → LED (Cathode -)
Arduino Code
Before you proceed with uploading the sketch, you must make some changes to ensure that it works for you. To connect ESP32 to an existing network, you must modify the following two variables with your network credentials.
Once you are done, go ahead and try this sketch
#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "your_SSID"; // SSID OF YOUR HOME/OFFICE ROUTER
const char* password = "your_PASSWORD";
WebServer server(80);
const int ledPin = 2; // GPIO pin where the LED is connected
bool ledState = LOW;
void handleRoot() {
String html = "<!DOCTYPE html><html>";
html += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
html += "<style>body {font-family: Arial, sans-serif; text-align: center; padding: 50px;}";
html += ".button {display: inline-block; padding: 15px 25px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999;}";
html += ".button:hover {background-color: #3e8e41}";
html += ".button:active {background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px);}";
html += ".button-off {background-color: #f44336;}";
html += ".button-off:hover {background-color: #da190b}";
html += ".button-off:active {background-color: #da190b; box-shadow: 0 5px #666; transform: translateY(4px);}";
html += ".bulb {width: 100px; height: 100px; margin-top: 20px; border-radius: 50%; display: inline-block;}";
html += ".bulb-on {background-color: yellow;}";
html += ".bulb-off {background-color: gray;}";
html += "</style></head><body>";
html += "<h1>ESP32 Web Server</h1>";
html += "<p><a href=\"/LED_ON\"><button class=\"button\">Turn On LED</button></a></p>";
html += "<p><a href=\"/LED_OFF\"><button class=\"button button-off\">Turn Off LED</button></a></p>";
html += "<div class=\"bulb " + String(ledState ? "bulb-on" : "bulb-off") + "\"></div>";
html += "</body></html>";
server.send(200, "text/html", html);
}
void handleLEDOn() {
ledState = HIGH;
digitalWrite(ledPin, HIGH);
handleRoot(); // Refresh the page to update the bulb status
}
void handleLEDOff() {
ledState = LOW;
digitalWrite(ledPin, LOW);
handleRoot(); // Refresh the page to update the bulb status
}
void setup() {
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, LOW);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the IP address
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.on("/LED_ON", handleLEDOn);
server.on("/LED_OFF", handleLEDOff);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
}
After uploading the sketch, open the Serial Monitor at 115200 baud and press the RESET button on the ESP32. If everything is fine, it will show the IP Address 192.168.1.41( it can be different in your case ) & “HTTP server started” message.
After connecting ESP32 to your home network, open a browser and navigate to 192.168.43.1. The ESP32 should return a web page displaying the current status of the LEDs , buttons and a nice bulb that represent the state of LED . you can press button to change the state of LED.
Here is the LED ON state
Explanation
- ESP32 connects to Wi-Fi and hosts a webpage.
- Phone accesses the ESP32 webpage using its IP address.
- Clicking ON/OFF buttons sends a request to ESP32 to control LED state.
Troubleshooting
- Not connecting to Wi-Fi? Double-check SSID & Password.
- ESP32 IP not showing? Restart the ESP32 and check the Serial Monitor.
- Webpage not loading? Ensure your phone and ESP32 are on the same network.
