ESP32 Webserver Led Control

Controlling an LED using an ESP32 web server involves setting up the ESP32 to serve web pages and handle HTTP requests, which then control the state of the LED. Here’s a step-by-step outline of how you can achieve this:

Hardware Required:
ESP32 Development Board (like ESP32 DevKitC)
LED (with current-limiting resistor)
Breadboard and jumper wires

Software Required:
Arduino IDE with ESP32 board support installed
ESPAsyncWebServer library (for handling asynchronous web requests) Arduino IDE Serial Monitor (for debugging)

Step 1: Setting up Arduino IDE
Instal-l ESP32 Board: Follow these instructions to add ESP32 boards to your Arduino IDE.

Instal-2 ESPAsyncWebServer library: Go to Tools -> Manage Libraries…, then search for and install the ESPAsyncWebServer library.

Step 2: Circuit Setup:
Connect the positive leg of the LED to a GPIO pin on the ESP32 through a current-limiting resistor (typically 470 ohms).
Connect the negative leg of the LED to ground.

Upload: Copy and passte the below given code into Arduino.

#include <WiFi.h>
#include <ESPAsyncWebServer.h>

// Replace with your network credentials
const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// GPIO pin connected to LED
const int ledPin = 2; // GPIO2 (D4)

void setup()
{
// Serial port for debugging purposes
Serial.begin(115200);

// Initialize LED pin as an output
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, LOW);

// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");

// Print ESP32 Local IP Address
Serial.println(WiFi.localIP());

// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
{
request->send(200, "text/html", "<h1>ESP32 Web Server</h1><p><a href=\"/on\">Turn On LED</a></p><p><a href=\"/off\">Turn Off LED</a></p>");
});

// Route to control the LED ON
server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request)
{
digitalWrite(ledPin, HIGH); // Turn the LED on
request->send(200, "text/plain", "LED turned on");
});

// Route to control the LED OFF
server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request)
{
digitalWrite(ledPin, LOW); // Turn the LED off
request->send(200, "text/plain", "LED turned off");
});

// Start server
server.begin();
}

void loop()
{
// This is optional
}

Step 4: Uploading and Testing
Upload the Code: Connect your ESP32 board to your computer via USB, select the correct board and port in Arduino IDE, then upload the code.

Testing: After uploading successfully, open the Serial Monitor. It will show the ESP32 connecting to your Wi-Fi network. Once connected, note down the IP address printed in the Serial Monitor (this is your ESP32’s local IP address on the network).

Control LED via Web Browser: Open a web browser on a device connected to the same Wi-Fi network and enter the ESP32’s IP address (e.g., http://192.168.1.100). You should see a webpage with links to turn the LED on and off.

Notes:
Make sure your Wi-Fi credentials (ssid and password) are correctly entered in the code.
Ensure the GPIO pin number (ledPin) matches the pin connected to your LED.

The AsyncWebServer library allows handling HTTP requests asynchronously, which is suitable for responsive web applications.
Following these steps should enable you to create a basic web server on the ESP32 to control an LED remotely via a web browser. Adjustments can be made to the HTML content or server responses to suit your specific needs or to add more functionality.

Subramanian
Subramanian

Subramanian MK, currently serving as a workshop instructor at Sakthi Polytechnic College, Erode Tamil Nadu. With a career spanning 25 + years, Subramanian MK has dedicated himself to advancing knowledge in Electronics and Communication Engineering (ECE). His passion for exploring new technologies has led to the development of numerous projects, showcasing expertise in IoT and PCB design.

Articles: 509

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

×

Hi, How can I help you?

×