Web-Based GPIO Control with ESP8266
This project will teach you how to control the GPIO pins of an ESP8266 module (like the NodeMCU or ESP-01) through a web interface. You can toggle LEDs, motors, or other devices connected to the GPIO pins using a browser.
Requirements
Hardware:
- ESP8266 module (e.g., NodeMCU, ESP-01)
- LED (for demonstration)
- Resistor (220 ohms)
- Breadboard and jumper wires
- Micro-USB cable
Software:
- Arduino IDE
- ESP8266 Board Manager installed in the Arduino IDE
- Wi-Fi connection
Steps to Build the Project
Step 1: Circuit Setup
- Connect the LED to a GPIO pin of the ESP8266 (e.g., D1 on NodeMCU or GPIO2 on ESP-01).
- Connect the anode (long leg) of the LED to the GPIO pin via a 220-ohm resistor.
- Connect the cathode (short leg) to the GND pin.
Example:
- NodeMCU: GPIO5 (D1)
- ESP-01: GPIO2
Step 2: Write the Code
Use the following Arduino code to create a web server that allows controlling the GPIO pins.
#include <ESP8266WiFi.h>
// Wi-Fi credentials
const char* ssid = "Your_SSID";
const char* password = "Your_PASSWORD";
// GPIO pin for the LED
const int ledPin = D1; // Change to GPIO2 for ESP-01
WiFiServer server(80);
void setup() {
// Initialize serial communication
Serial.begin(115200);
// Set up the GPIO pin as an output
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, LOW);
// Connect to Wi-Fi
Serial.print("Connecting to Wi-Fi");
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\nConnected to Wi-Fi");
// Start the server
server.begin();
Serial.print("Server started. Access at: ");
Serial.println(WiFi.localIP());
}
void loop() {
WiFiClient client = server.available(); // Listen for incoming clients
if (!client) {
return;
}
// Wait until the client sends data
while (!client.available()) {
delay(1);
}
// Read the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Control the LED
if (request.indexOf("/LED=ON") != -1) {
digitalWrite(ledPin, HIGH);
} else if (request.indexOf("/LED=OFF") != -1) {
digitalWrite(ledPin, LOW);
}
// Send response to the client
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<h1>ESP8266 GPIO Control</h1>");
client.println("<a href=\"/LED=ON\">Turn LED ON</a><br>");
client.println("<a href=\"/LED=OFF\">Turn LED OFF</a>");
client.println("</html>");
// Close the connection
client.stop();
}
Step 3: Upload the Code
- Open the Arduino IDE and install the ESP8266 board package (via Tools > Board > Board Manager).
- Select the appropriate board and port (e.g., NodeMCU or Generic ESP8266 Module).
- Enter your Wi-Fi credentials in the code (
ssidandpassword). - Upload the code to your ESP8266.
Step 4: Access the Web Interface
- After uploading, open the Serial Monitor to find the IP address of the ESP8266.
- Enter the IP address in your browser (e.g.,
http://192.168.1.100). - Use the web page to toggle the LED by clicking the Turn LED ON and Turn LED OFF links.
