Assista no YouTube

How to Control an AC Bulb or Load Using an ESP32 over Wi-Fi with a Relay

This tutorial explains how to control a relay module using an ESP32 board over Wi-Fi. It enables you to switch ON or OFF devices like lamps or fans from any device—desktop, tablet, or smartphone—through a simple web interface. You’ll learn how to wire the circuit, configure the Arduino IDE for ESP32, and deploy the code to run a local web server hosted by the ESP32.

📥 The full source code is provided below this article.

🔌 Wiring Setup

• Relay IN pin → GPIO 12 of ESP32

• Relay VCC → 3.3V or 5V (depending on module)

• Relay GND → GND of ESP32

• LED (status) → GPIO 13

The relay controls an AC or DC load (like a bulb), and its switching is triggered via ESP32’s GPIO12.

🛠️ Arduino IDE Setup for ESP32

To program the ESP32:

1. Open Arduino IDE

2. Go to File > Preferences

3. Add the following board URL to the “Additional Boards Manager URLs”:

   arduinoCopyEdithttps://dl.espressif.com/dl/package_esp32_index.json
   
   

4. Go to Tools > Board > Board Manager, search for “ESP32”, and install it.

Then select your specific ESP32 board from Tools > Board before uploading the code.

💻 Code Explanation

Here’s a breakdown of the important elements in the code:

1. Pin Setup and Global Variables

cppCopyEditint relayPin = 12; // Pin for relay
String buttonTitle1 = "Light ON";
String buttonTitle2 = "Light OFF";
int relayStat = 1; // Relay starts ON
const int led = 13; // LED indicator

• relayPin: Controls the relay.

• relayStat: Stores relay state (1 = ON, 0 = OFF).

• buttonTitle1/2: Labels for the toggle button on the webpage.

2. Wi-Fi and Web Server Setup

cppCopyEditconst char *ssid = "YOUR_WIFI_SSID";
const char *password = "YOUR_WIFI_PASSWORD";
WebServer server(80);

• Connects to your Wi-Fi and starts a server on port 80.

3. Web Page HTML Generation

cppCopyEditvoid handleRoot() {
  ...
  if(relayStat){
    HTML += "<a href='/relay?do=off'>";
  } else {
    HTML += "<a href='/relay?do=on'>";
  }
  ...
}

• This function builds and serves the HTML page.

• Depending on the state, the button sends /relay?do=off or /relay?do=on to toggle the relay.

4. Relay Control Handler

cppCopyEditvoid relayControl() {
  if(server.arg("do") == "on") {
    relayStat = 1;
  } else {
    relayStat = 0;
  }
  handleRoot(); // Refresh the page
}

• Updates relayStat based on the URL parameter, and reloads the page with the updated state.

5. Main Loop

cppCopyEditvoid loop(void) {
  server.handleClient();
  if(relayStat) {
    digitalWrite(relayPin, LOW); // Relay ON (active low)
  } else {
    digitalWrite(relayPin, HIGH); // Relay OFF
  }
}

• Continuously handles HTTP requests.

• Updates the relay state based on relayStat.

📱 Demonstration

You can access the relay control page using your browser by entering the ESP32's local IP address, which is printed to the Serial Monitor after connecting. The same control interface works on desktop and mobile devices. You can even power the ESP32 from an external 5V USB adapter for standalone use.

📥 Download Section

The complete Arduino code and wiring diagram are available below. Use this project to remotely control household devices, automate lights, or integrate Wi-Fi relay control into larger smart systems.