Remote LED Control Using a Web Server: A Beginner's Guide

 Remote LED Control Using a Web Server And

 ESP32 Or ESP8266



A Beginner's Guide


Join Our WhatsApp Community To Get Updated With The Latest Ideas Click to join


In this project, you'll learn how to control an LED remotely using a web server. We'll guide you step-by-step through the process of creating a simple web interface to turn an LED on and off using a WiFi-enabled microcontroller, such as the Arduino with an ESP8266 module or NodeMCU. This is a perfect beginner's project for those interested in IoT (Internet of Things) and exploring how to connect everyday devices to the web. By the end of this tutorial, you'll be able to control an LED from anywhere using just a web browser!



Using ESP32: 

#include <WiFi.h>

// Replace with your network credentials
const char* ssid = "ssid";      // Your WiFi SSID
const char* password = "password"; // Your WiFi Password

WiFiServer server(80); // Create a web server object on port 80

// Define the built-in LED pin
const int relaypin = 2; // connected relay pin

void setup() {
  Serial.begin(115200); // Initialize serial communication
  pinMode(relaypin, OUTPUT); // Set the relay pin as output

  // Connect to WiFi
  Serial.println("Connecting to WiFi...");
  WiFi.begin(ssid, password);

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }

  Serial.println("\nWiFi connected.");
  Serial.print("ESP32 IP Address: ");
  Serial.println(WiFi.localIP());

  // Start the server
  server.begin();
}

void loop() {
  WiFiClient client = server.available(); // Check for incoming clients

  if (client) { // If a client connects
    String request = client.readStringUntil('\r'); // Read the client's request
    client.flush(); // Clear the request

    // Control the LED based on the request
    if (request.indexOf("/led/on") != -1) {
      digitalWrite(relaypin, HIGH); // Turn the LED on
    } else if (request.indexOf("/led/off") != -1) {
      digitalWrite(relaypin, LOW); // Turn the LED off
    }

    // Create a professional web page
    client.println("HTTP/1.1 200 OK");
    client.println("Content-type:text/html");
    client.println();
    client.println("<!DOCTYPE HTML>");
    client.println("<html>");
    client.println("<head>");
    client.println("<title>AyuRoboHacks LED Control</title>");
    client.println("<style>");
    client.println("body { font-family: Arial, sans-serif; text-align: center; background-color: #f4f4f4; }");
    client.println("h1 { color: #333; }");
    client.println("button { font-size: 18px; padding: 10px 20px; margin: 20px; border: none; border-radius: 5px; cursor: pointer; }");
    client.println(".on { background-color: #4CAF50; color: white; }");
    client.println(".off { background-color: #f44336; color: white; }");
    client.println(".container { margin-top: 50px; }");
    client.println("</style>");
    client.println("</head>");
    client.println("<body>");
    client.println("<div class='container'>");
    client.println("<h1>AyuRoboHacks - LED Control</h1>");
    client.println("<h1>Please Subscribe ! :)</h1>");
    client.println("<p><a href=\"/led/on\"><button class='on'>Turn LED OFF</button></a></p>");
    client.println("<p><a href=\"/led/off\"><button class='off'>Turn LED ON</button></a></p>");
    client.println("</div>");
    client.println("</body>");
    client.println("</html>");

    delay(1);
    client.stop(); // Close the connection
  }
}


Using ESP8266:



#include <ESP8266WiFi.h>  // Include ESP8266 WiFi library

// Replace with your network credentials
const char* ssid = "ssid";      // Your WiFi SSID
const char* password = "password"; // Your WiFi Password

WiFiServer server(80); // Create a web server object on port 80

// Define the built-in LED pin
const int relaypin = 2; // connected relay pin

void setup() {
  Serial.begin(115200); // Initialize serial communication
  pinMode(relaypin, OUTPUT); // Set the relay pin as output

  // Connect to WiFi
  Serial.println("Connecting to WiFi...");
  WiFi.begin(ssid, password);

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }

  Serial.println("\nWiFi connected.");
  Serial.print("ESP8266 IP Address: ");
  Serial.println(WiFi.localIP());

  // Start the server
  server.begin();
}

void loop() {
  WiFiClient client = server.available(); // Check for incoming clients

  if (client) { // If a client connects
    String request = client.readStringUntil('\r'); // Read the client's request
    client.flush(); // Clear the request

    // Control the relay based on the request
    if (request.indexOf("/led/on") != -1) {
      digitalWrite(relaypin, HIGH); // Turn the relay on
    } else if (request.indexOf("/led/off") != -1) {
      digitalWrite(relaypin, LOW); // Turn the relay off
    }

    // Create a professional web page
    client.println("HTTP/1.1 200 OK");
    client.println("Content-type:text/html");
    client.println();
    client.println("<!DOCTYPE HTML>");
    client.println("<html>");
    client.println("<head>");
    client.println("<title>AyuRoboHacks LED Control</title>");
    client.println("<style>");
    client.println("body { font-family: Arial, sans-serif; text-align: center; background-color: #f4f4f4; }");
    client.println("h1 { color: #333; }");
    client.println("button { font-size: 18px; padding: 10px 20px; margin: 20px; border: none; border-radius: 5px; cursor: pointer; }");
    client.println(".on { background-color: #4CAF50; color: white; }");
    client.println(".off { background-color: #f44336; color: white; }");
    client.println(".container { margin-top: 50px; }");
    client.println("</style>");
    client.println("</head>");
    client.println("<body>");
    client.println("<div class='container'>");
    client.println("<h1>AyuRoboHacks - LED Control</h1>");
    client.println("<h1>Please Subscribe ! :)</h1>");
    client.println("<p><a href=\"/led/on\"><button class='on'>Turn LED ON</button></a></p>");
    client.println("<p><a href=\"/led/off\"><button class='off'>Turn LED OFF</button></a></p>");
    client.println("</div>");
    client.println("</body>");
    client.println("</html>");

    delay(1);
    client.stop(); // Close the connection
  }
}



 

Tags:

Post a Comment

0 Comments