Components Required
- ESP32 Development Board
- 2 × LEDs (any color)
- 2 × 220Ω resistors
- Breadboard & jumper wires
- USB cable for programming ESP32
Circuit Connection :
Connect LED1 anode (long leg) → 220ohm resistor → GPIO16.
Connect LED2 anode (long leg) → 220ohm resistor → GPIO17.
Both LED cathodes (short leg) → GND.
Step 1: Install Arduino IDE & ESP32 Board
Download and install the Arduino IDE from Arduino.cc
.
Add ESP32 board support:
Go to File > Preferences.
In Additional Board Manager URLs, add:
https://dl.espressif.com/dl/package_esp32_index.json
Go to Tools > Board > Board Manager, search ESP32, and install.
Step 2: Connect ESP32 and Select Board
Plug ESP32 into your computer with USB cable.
In Arduino IDE:
Go to Tools > Board → Select ESP32 Dev Module.
Select the correct Port.
Step 3: Full Arduino Code
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";
// GPIO pins
const int led1 = 16;
const int led2 = 17;
// Web server runs on port 80
WiFiServer server(80);
// Store HTTP request
String header;
// Current state of LEDs
String led1State = "off";
String led2State = "off";
void setup() {
Serial.begin(115200);
// Initialize the output variables as outputs
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
// Set both LEDs to off
digitalWrite(led1, LOW);
digitalWrite(led2, LOW);
// Connect to Wi-Fi
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// Start the server
server.begin();
}
void loop() {
WiFiClient client = server.available(); // Listen for incoming clients
if (client) {
Serial.println("New Client Connected.");
String currentLine = "";
header = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
// Send HTTP response
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// LED control
if (header.indexOf("GET /led1/on") >= 0) {
digitalWrite(led1, HIGH);
led1State = "on";
} else if (header.indexOf("GET /led1/off") >= 0) {
digitalWrite(led1, LOW);
led1State = "off";
} else if (header.indexOf("GET /led2/on") >= 0) {
digitalWrite(led2, HIGH);
led2State = "on";
} else if (header.indexOf("GET /led2/off") >= 0) {
digitalWrite(led2, LOW);
led2State = "off";
}
// HTML Page
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<style>");
client.println("body { font-family: Arial; text-align: center; }");
client.println(".button { padding: 15px 40px; font-size: 20px; margin: 10px; border: none; border-radius: 8px; }");
client.println(".on { background-color: green; color: white; }");
client.println(".off { background-color: red; color: white; }");
client.println("</style></head>");
client.println("<body><h2>ESP32 Web Server - LED Control</h2>");
// LED1 Buttons
client.println("<p>LED1 - State: " + led1State + "</p>");
if (led1State == "off") {
client.println("<a href=\"/led1/on\"><button class=\"button on\">ON</button></a>");
} else {
client.println("<a href=\"/led1/off\"><button class=\"button off\">OFF</button></a>");
}
// LED2 Buttons
client.println("<p>LED2 - State: " + led2State + "</p>");
if (led2State == "off") {
client.println("<a href=\"/led2/on\"><button class=\"button on\">ON</button></a>");
} else {
client.println("<a href=\"/led2/off\"><button class=\"button off\">OFF</button></a>");
}
client.println("</body></html>");
client.println();
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
}
}
// Close connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
Step 4: Upload the Code
Replace YOUR_WIFI_SSID and YOUR_WIFI_PASSWORD with your Wi-Fi details.
Click Upload in Arduino IDE.
Open Serial Monitor at 115200 baud.
Copy the ESP32 IP Address displayed.
Step 5: Control LEDs from Browser
Open a browser on your phone/PC.
Enter the IP address of ESP32 (e.g., http://192.168.1.45).
You’ll see a simple web page with ON/OFF buttons for LED1 and LED2.
Tap the buttons → LEDs will toggle ON/OFF instantly.
Comments
Post a Comment