Index
Introduction
Controlling LEDs with sliders through a web browser? Yes, it’s possible — and super fun — using ESP32 and WebSockets! In this beginner-friendly guide, we’ll show you how to create a responsive web interface with multiple sliders to control the brightness of LEDs using PWM (Pulse Width Modulation).
What You’ll Need
- ESP32 Dev Board
- 3 LEDs (Red, Green, Blue or any)
- 3 Resistors (220Ω recommended)
- Jumper Wires
- Breadboard
- USB cable for programming
Circuit Diagram
- Connect the red LED anode to GPIO 13 (via a 220-ohm resistor) and cathode to GND.
- Connect the green LED anode to GPIO 12 (via a 220-ohm resistor) and cathode to GND.
- Connect the green LED anode to GPIO 14 (via a 220-ohm resistor) and cathode to GND.
Code / Programming
Please ensure that the ESP32 board package version 2.0.17 is installed in the Arduino IDE. Using an older or incompatible version may result in compilation errors or unexpected behavior in the code.
#include <WiFi.h>
#include <WebServer.h>
// WiFi credentials
const char* ssid = "Your_SSID";
const char* password = "Your_PASSWORD";
// LED pins (PWM capable)
const int ledPins[] = {12, 13, 14}; // GPIOs for 3 LEDs
const int numLEDs = 3;
int brightness[] = {0, 0, 0}; // Store brightness values (0-255)
WebServer server(80);
// HTML + CSS + JavaScript (embedded)
const char* htmlContent = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP32 LED Control</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
.slider-container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
h1 {
color: #2c3e50;
text-align: center;
}
.slider {
width: 100%;
margin: 15px 0;
}
.value {
display: inline-block;
width: 50px;
text-align: center;
font-weight: bold;
}
.led-label {
font-size: 18px;
color: #3498db;
}
</style>
</head>
<body>
<h1>ESP32 LED Brightness Control</h1>
<div class="slider-container">
<p class="led-label">LED 1: <span id="value1" class="value">0</span>%</p>
<input type="range" min="0" max="100" value="0" class="slider" id="slider1" oninput="updateSlider(1)">
</div>
<div class="slider-container">
<p class="led-label">LED 2: <span id="value2" class="value">0</span>%</p>
<input type="range" min="0" max="100" value="0" class="slider" id="slider2" oninput="updateSlider(2)">
</div>
<div class="slider-container">
<p class="led-label">LED 3: <span id="value3" class="value">0</span>%</p>
<input type="range" min="0" max="100" value="0" class="slider" id="slider3" oninput="updateSlider(3)">
</div>
<script>
function updateSlider(ledNum) {
const slider = document.getElementById("slider" + ledNum);
const valueSpan = document.getElementById("value" + ledNum);
const brightness = slider.value;
valueSpan.textContent = brightness;
// Send AJAX request to ESP32
const xhr = new XMLHttpRequest();
xhr.open("GET", "/setLED?led=" + ledNum + "&brightness=" + brightness, true);
xhr.send();
}
</script>
</body>
</html>
)rawliteral";
void setup() {
Serial.begin(115200);
// Initialize LEDs
for (int i = 0; i < numLEDs; i++) {
pinMode(ledPins[i], OUTPUT);
ledcSetup(i, 5000, 8); // Channel, freq, resolution
ledcAttachPin(ledPins[i], i);
}
// Connect to WiFi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\nConnected to WiFi");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// Web server routes
server.on("/", []() {
server.send(200, "text/html", htmlContent);
});
server.on("/setLED", []() {
int led = server.arg("led").toInt() - 1; // Convert to 0-based index
brightness[led] = map(server.arg("brightness").toInt(), 0, 100, 0, 255);
ledcWrite(led, brightness[led]);
server.send(200, "text/plain", "OK");
});
server.begin();
}
void loop() {
server.handleClient();
}
Accessing the Web Server
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 display the dynamic IP address.
Open a browser and enter the IP address shown in the Serial Monitor to access the LED control interface.
Explanation
- ESP32 connects to Wi-Fi and starts a web server.
- The IP address is displayed in the Serial Monitor after connection.
- Users can control the onboard LED by accessing the web page through this IP.
Troubleshooting
- If the IP doesn’t show, check Wi-Fi credentials and Serial Monitor baud rate.
- Make sure you’re connected to the same network as the ESP32.
- If the webpage doesn’t load, verify the board is still powered and connected.
