Build. Learn.
Innovate.
Controlling a Relay via a Web Interface
Project Overview
This project allows students to control a relay connected to an ESP32 through a web interface. The interface is accessible over a local Wi-Fi network and provides a toggle switch to turn the relay ON or OFF. The relay can be used to control a light, pump, or any low-voltage device.
Educational Goals
- Understand how relays work and how to control them digitally
- Build an interactive web interface
- Practice combining front-end and embedded development
- Develop safe practices for switching circuits
Detailed Parts List
- 1x ESP32 Dev Board (36-pin)
- 1x 1-Channel Relay Module (5V compatible with 3.3V logic)
- Jumper wires
- Load (e.g., LED lamp or small water pump)
- Power source (USB or battery)
Circuit Diagram Description
- Relay IN pin → GPIO 27 on ESP32
- Relay VCC → 3.3V or 5V (based on module)
- Relay GND → ESP32 GND
- Relay output connected to load (e.g., NO to device, COM to power)
ESP32 GPIO27 —> IN (Relay)
ESP32 GND —> GND
ESP32 3.3V/5V —> VCC (Relay)
Software Functionality
- Hosts a web server with a UI toggle switch
- Listens for ON/OFF requests via JavaScript fetch calls
- Controls GPIO pin to switch relay state
- Updates UI to reflect relay status
Web Interface Features
- Toggle switch (styled with CSS)
- Real-time ON/OFF feedback
- Accessible via local IP on browser
Implementation Steps
- Wire relay module to ESP32 as described
- Flash MicroPython firmware to ESP32
- Upload “** containing the code below**
- Power and connect ESP32 to Wi-Fi
- Access IP in browser and toggle the relay
Extensions and Challenges
- Schedule timed ON/OFF cycles
- Add button feedback on OLED
- Trigger relay from sensor thresholds
- Expand to multiple relays and buttons
Troubleshooting Guide
- Relay doesn’t click: Check GPIO and VCC logic compatibility
- Web interface not loading: Confirm IP and ESP32 Wi-Fi connection
- Switch lag: Optimize polling or debounce logic
Project Code
from machine import Pin
import socket, network
# Wi-Fi credentials
ssid = 'YOUR_WIFI_SSID'
password = 'YOUR_WIFI_PASSWORD'
# Connect to Wi-Fi
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.connect(ssid, password)
while not wlan.isconnected():
pass
ip = wlan.ifconfig()[0]
print('Web server running on:', ip)
# Relay setup
relay = Pin(27, Pin.OUT)
relay.off()
# HTML + CSS + JS
html = """<!DOCTYPE html>
<html>
<head>
<title>Relay Control</title>
<style>
body { font-family: Arial; background: #111; color: white; text-align: center; padding-top: 50px; }
.switch { position: relative; display: inline-block; width: 80px; height: 34px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px;
background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #2196F3; }
input:checked + .slider:before { transform: translateX(46px); }
</style>
</head>
<body>
<h1>Relay Switch</h1>
<label class="switch">
<input type="checkbox" id="relayToggle" onchange="toggleRelay()">
<span class="slider"></span>
</label>
<script>
async function toggleRelay() {
const state = document.getElementById('relayToggle').checked ? 'on' : 'off';
await fetch('/relay?state=' + state);
}
</script>
</body>
</html>"""
# Web server
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.bind(addr)
s.listen(1)
while True:
cl, addr = s.accept()
request = cl.recv(1024).decode()
if '/relay?state=on' in request:
relay.on()
elif '/relay?state=off' in request:
relay.off()
if 'GET /' in request or 'GET /relay' in request:
cl.send('HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n')
cl.send(html)
cl.close()
STEM Benefits
- Science: Explore how circuits are opened and closed using relays.
- Technology: Understand web-based interfaces for physical control.
- Engineering: Design and implement remote control systems.
- Math: Apply digital logic and timing when triggering devices.
Project Code
Insights, Ideas
& How-Tos
Help, Support, and
Common Questions
What types of projects can I find on your website?
You can explore a wide range of microcontroller and electronics projects, including Arduino, ESP32, IoT, and more. Each project comes with downloadable code, detailed guides, and the necessary hardware list.
How do I download project files?
You can explore a wide range of microcontroller and electronics projects, including Arduino, ESP32, IoT, and more. Each project comes with downloadable code, detailed guides, and the necessary hardware list.
Can I buy the hardware required for the projects directly from the website?
You can explore a wide range of microcontroller and electronics projects, including Arduino, ESP32, IoT, and more. Each project comes with downloadable code, detailed guides, and the necessary hardware list.
Can I buy the hardware required for the projects directly from the website?
You can explore a wide range of microcontroller and electronics projects, including Arduino, ESP32, IoT, and more. Each project comes with downloadable code, detailed guides, and the necessary hardware list.