ESP32 ArduinoCore Project – WiFi Web Server LED Blink

This article is a continuation of the series on the ESP32 ArduinoCore Project using the ESP32 Dev board and carries the discussion on WiFi Web Server LED Blink. This series aims to provide easy and practical examples that anyone can understand. In our previous tutorial, we saw how to use the inbuilt code to toggle the onboard LED. This is the ESP32 LED Blinky in Wifi Webserver In this tutorial

A simple web server that lets you blink an LED via the web.

Wifi Web Server Info

• This code will print the IP address of your WiFi Module (ESP32) (once connected) to the Serial monitor.
• From that IP Address, you can open that address in a web browser to turn on and off the LED on pin-5.
• If the IP address of your ESP32 is 192.168.1.143:
  • http://192.168.1.143/H turns the LED on
  • http://192.168.1.143/L turns it off
• This example is written for a network using WPA encryption.
• For WEP or WPA, change the Wifi.begin() call accordingly.

Required Hardware and Software

• PC
• Arduino IDE (Arduino Core for ESP32 )
• ESP-WROOM-32 Development Kit
• LED
• Wires

Connection Diagram for LED Blink

• LED attached to pin 5

Code for WiFi Web Server LED Blink

Note: You can use Arduino example code instead of the below code because both are the same  (File > Example > WiFi> WiFiScan)

/* https://aruneworld.com/Embedded/ESPressif/ESP32/Arduino_Core_ESP32
 * Tested By  : Arun(20170429)
 * Example Name : AEW_WiFi_Scan.ino
 * ESP32 ArduinoCore Project - WiFi Web Server LED Blink
 * /
#include "WiFi.h"


#include <WiFi.h>

const char* ssid     = "Arun";
const char* password = "ArunEworld";

WiFiServer server(80);

void setup()
{
    Serial.begin(115200);
    pinMode(26, OUTPUT);      // set the LED pin mode

    delay(10);

    // We start by connecting to a WiFi network

    Serial.println();
    Serial.println();
    Serial.print("Connecting to ");
    Serial.println(ssid);

    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }

    Serial.println("");
    Serial.println("WiFi connected");
    Serial.println("IP address: ");
    Serial.println(WiFi.localIP());
    
    server.begin();

}

int value = 0;

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

  if (client) {                             // if you get a client,
    Serial.println("new client");           // print a message out the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        if (c == '\n') {                    // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            client.print("Click <a href=\"/H\">here</a> turn the LED on pin 5 on<br>");
            client.print("Click <a href=\"/L\">here</a> turn the LED on pin 5 off<br>");

            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          } else {    // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /H")) {
          digitalWrite(26, HIGH);               // GET /H turns the LED on
        }
        if (currentLine.endsWith("GET /L")) {
          digitalWrite(26, LOW);                // GET /L turns the LED off
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("client disonnected");
  }
}

Uses WiFi Web Server LED Blink

This can be used for various applications where remote control or monitoring of a device is needed. Some common use cases include:

1. Home Automation:
   • Control and monitor smart devices or appliances in your home remotely.
   • Create a web interface to turn on/off lights, fans, or other devices.
2. IoT Projects:
   • Build Internet of Things (IoT) projects with a web-based control interface.
   • Monitor and control sensors or actuators from a web browser.
3. Learning and Prototyping:
   • Use the example as a starting point for learning about web servers and IoT.
   • Prototype and experiment with different sensors and actuators.
4. Educational Projects:
   • Integrate this example into educational projects to teach students about microcontrollers, WiFi communication, and web interfaces.
5. Demonstrations:
   • Showcase the capabilities of ESP8266 by creating a demonstration project.
   • Use it as a hands-on example in workshops or presentations.
6. Remote Monitoring:
   • Implement remote monitoring systems where sensor data can be accessed through a web browser.
   • Monitor environmental conditions, such as temperature or humidity, remotely.
7. Smart Home Integration:
   • Integrate the web server with home automation platforms like Home Assistant or OpenHAB.
   • Use MQTT for communication to enable integration with other smart home devices.

NEXT