If you've ever wanted to turn off the living room light without getting up from the couch, or monitor a fan from your phone, know that it's simpler than it sounds. With an ESP32 and a bit of code, you can build a control panel accessible from any browser on your home network. No paid apps, no third-party cloud. Just you, the device, and your local network. I'll explain everything from the beginning, keeping in mind people who have never done this before. --- ## What Is the ESP32 and Why Is It Perfect for This? The ESP32 is a tiny board (fits in the palm of your hand) with built-in Wi-Fi and Bluetooth. It's basically a miniature computer you program to do specific tasks. The cool part is that it has physical pins (called GPIOs) that you connect to other components, like relays, LEDs, sensors, and so on. The price is another plus: you can find one for around $5 to $10 on sites like AliExpress or Amazon. --- ## How Does the Whole Idea Work? When the ESP32 boots up, it connects to your Wi-Fi network and starts an internal web server. From that point on, any device on the same network (phone, laptop, tablet) can open the ESP32's IP address in a browser and see a page with buttons. When you press a button on that page, it sends a command to the ESP32, which triggers the corresponding pin. That pin, in turn, activates a relay. The relay is the component that bridges the ESP32 and high-voltage appliances, like lamps and fans. Here's the flow in plain terms: > **You press the button on your phone → page sends command → ESP32 receives it → pin changes state → relay turns the appliance on/off** --- ## What You Will Need - 1x ESP32 (any version works to start, the ESP32 DevKit is the most common) - 1x 5V relay module (to safely control larger appliances) - Jumper wires for connections - Arduino IDE installed on your computer - The `ESPAsyncWebServer` library (more on that below) --- ## Why Use ESPAsyncWebServer Instead of the Standard WebServer? The original post used the `WebServer.h` library, which works but has one limitation: it blocks the microcontroller while waiting for requests. That means if you have other tasks running (reading sensors, triggering timers), you can run into conflicts. `ESPAsyncWebServer` solves this with asynchronous requests. It does not block the ESP32. It also supports WebSockets natively, which lets you update the page in real time without reloading it. To install it, open Arduino IDE, go to **Sketch > Include Library > Manage Libraries**, and search for `ESPAsyncWebServer`. Also install its dependency `AsyncTCP`. --- ## The Full, Commented Code ```cpp #include <WiFi.h> #include <ESPAsyncWebServer.h> // Enter your Wi-Fi name and password here const char* ssid = "YourWiFiName"; const char* password = "YourPassword"; // The relay is connected to pin 2 of the ESP32 const int RELAY_PIN = 2; // Create the server on port 80 (standard HTTP port) AsyncWebServer server(80); // HTML page with a simple, responsive interface const char page[] PROGMEM = R"rawliteral( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home Control</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', sans-serif; background: #f0f4f8; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .card { background: white; border-radius: 16px; padding: 32px; width: 90%; max-width: 400px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); text-align: center; } h1 { font-size: 1.5rem; color: #1a202c; margin-bottom: 8px; } p.desc { color: #718096; margin-bottom: 24px; font-size: 0.9rem; } .status { display: inline-block; padding: 6px 16px; border-radius: 999px; font-weight: bold; margin-bottom: 24px; font-size: 0.9rem; } .status.on { background: #c6f6d5; color: #276749; } .status.off { background: #fed7d7; color: #9b2c2c; } .buttons { display: flex; gap: 12px; justify-content: center; } button { flex: 1; padding: 14px; border: none; border-radius: 10px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: opacity 0.2s; } button:hover { opacity: 0.85; } .btn-on { background: #48bb78; color: white; } .btn-off { background: #fc8181; color: white; } </style> </head> <body> <div class="card"> <h1>Living Room Light</h1> <p class="desc">Control from any browser, on any device.</p> <div id="status" class="status off">OFF</div> <div class="buttons"> <button class="btn-on" onclick="control('on')">Turn On</button> <button class="btn-off" onclick="control('off')">Turn Off</button> </div> </div> <script> // Fetch current state when the page loads fetch('/state') .then(r => r.text()) .then(state => updateStatus(state)); function control(action) { fetch('/control?action=' + action) .then(r => r.text()) .then(state => updateStatus(state)); } function updateStatus(state) { const el = document.getElementById('status'); if (state === 'on') { el.textContent = 'ON'; el.className = 'status on'; } else { el.textContent = 'OFF'; el.className = 'status off'; } } </script> </body> </html> )rawliteral"; void setup() { Serial.begin(115200); pinMode(RELAY_PIN, OUTPUT); digitalWrite(RELAY_PIN, LOW); // Connect to Wi-Fi WiFi.begin(ssid, password); Serial.print("Connecting to Wi-Fi"); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println("\nConnected! Open: http://" + WiFi.localIP().toString()); // Main route: serves the HTML page server.on("/", HTTP_GET, [](AsyncWebServerRequest* req) { req->send_P(200, "text/html", page); }); // Route to check the current relay state server.on("/state", HTTP_GET, [](AsyncWebServerRequest* req) { String state = digitalRead(RELAY_PIN) ? "on" : "off"; req->send(200, "text/plain", state); }); // Route to turn on or off server.on("/control", HTTP_GET, [](AsyncWebServerRequest* req) { if (req->hasParam("action")) { String action = req->getParam("action")->value(); if (action == "on") digitalWrite(RELAY_PIN, HIGH); if (action == "off") digitalWrite(RELAY_PIN, LOW); } String state = digitalRead(RELAY_PIN) ? "on" : "off"; req->send(200, "text/plain", state); }); server.begin(); } void loop() { // With ESPAsyncWebServer, the loop stays free for other tasks } ``` --- ## What This Code Does, in Plain Language - On boot, the ESP32 connects to Wi-Fi and prints its IP address in the Serial Monitor - You open your browser, type that IP (something like `192.168.1.105`), and see the interface - The "Turn On" and "Turn Off" buttons send a request to the ESP32 - The ESP32 responds by triggering the pin and returning the current state - The page updates the status on screen **without reloading**, because we use `fetch()` in JavaScript --- ## Security: The Minimum You Need to Know The code above is great for learning, but it has no protection. Anyone on your network can open the panel. If you want to go one step further on security, consider adding basic authentication with just a few lines: ```cpp server.on("/", HTTP_GET, [](AsyncWebServerRequest* req) { if (!req->authenticate("admin", "yourpassword")) { return req->requestAuthentication(); } req->send_P(200, "text/html", page); }); ``` This blocks unwanted access with a login popup right in the browser. --- ## What If I Want to Control More Than One Device? Simple: add more pins and expand the interface. You can have one pin for the living room light, another for the fan, another for a bedroom outlet. Each button on the page sends a different parameter to the `/control` route, and the ESP32 decides which pin to trigger. --- ## An Important Warning About Electricity Relays let the ESP32 control appliances running on 110V or 220V. That involves real risk if done incorrectly. If you have never worked with electrical wiring, ask someone experienced to help with that part, or use ready-made smart plugs (like ones running Tasmota firmware) until you feel more confident. The code can be perfect, but a short circuit does not forgive mistakes. --- ## Natural Next Steps Once this is working, the next level looks like: - **Adding a temperature sensor** (DHT22 or DS18B20) and showing the reading on the same interface - **Creating schedules** with the `ESP32Time` library to turn things on and off at set times - **Exposing the panel outside your home network** via a tunnel like Cloudflare Tunnel (with care) - **Integrating with Home Assistant**, a very popular open source home automation platform The most important thing is to take the first step. Wire up the circuit, upload the code, open your browser, and watch the light turn on from your phone. That first time has an effect that explains why so many people fall in love with electronics and embedded programming.
Great write-up! Quick question: what happens if the ESP32 loses Wi-Fi connection while a relay is active? Does the pin hold its last state, or does it reset? Asking because I'd hate to have a light stuck on (or worse, a heater) with no way to turn it off remotely until the connection comes back.