Monday, 3 March 2025

ESP32 GPIO control using Webserver technique

I was on my way to understand the operation of the IOT gateways which bridge the gap between IOT sensors and cloud which led me to buy a IOT development board from Vajruino.

The IOT gateway had a ESP32 wifi module, SIMCOM LTE module with a ethernet port. But one drawback about the gateway was that it was necessary to code the ESP32 in order to configure the IOT gateway. But nowadays IOT gateways are smart enough with a remote configuration option through web browser.

This made me to understand the basic concept of remote access of IOT gateway through web browser. A simple google search led me to an experiment wherein it is possible to control the ESP32 GPIO using webserver technique from a web browser over a local network.

It basically requires a node mcu esp32 board available over any robotic e-commerce website. A little bit of coding on the Arduino IDE can help you to control the onboard GPIO connected LED from a mobile web browser connected on a local network.

I am appending the Arduino code as below 

#include <WiFi.h>

#include <ESPAsyncWebServer.h>


// WiFi credentials

#define WIFI_SSID "Redmi"

#define WIFI_PASSWORD "19521952"


// LED pin

#define LED_PIN 2


// Web server object

AsyncWebServer server(80);


// LED state

int LED_state = LOW;


// Function to generate the HTML and CSS code for the web page

String getHTML() {

String html = "<!DOCTYPE HTML>";

html += "<html>";

html += "<head>";

html += "<style>";

html += "body {background-color: #F0F0F0; font-family: Arial, Helvetica, sans-serif;}";

html += "h1 {color: #333333; text-align: center;}";

html += "button {width: 150px; height: 50px; font-size: 20px; margin: 10px;}";

html += "</style>";

html += "</head>";

html += "<body>";

html += "<h1>ESP32 Web Server</h1>";

html += "<p>LED state: <span style='color: red;'>";

if (LED_state == LOW) html += "OFF";

else html += "ON";

html += "</span></p>";

html += "<button onclick=\"window.location.href='/led/on'\">Turn ON</button>";

html += "<button onclick=\"window.location.href='/led/off'\">Turn OFF</button>";

html += "</body>";

html += "</html>";

return html;

}


// Function to connect to WiFi network

void connectWiFi() {

Serial.print("Connecting to WiFi...");

WiFi.begin(WIFI_SSID, WIFI_PASSWORD);

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

}

Serial.println();

Serial.println("WiFi connected");

Serial.println("IP address: ");

Serial.println(WiFi.localIP());

}


// Function to handle HTTP requests

void handleRequest(AsyncWebServerRequest *request) {

// Get the request path

String path = request->url();

// Check if the request is to turn the LED on

if (path == "/led/on") {

// Set the LED pin to HIGH

digitalWrite(LED_PIN, HIGH);

// Update the LED state

LED_state = HIGH;

// Send a confirmation message

request->send(200, "text/plain", "LED turned on");

}

// Check if the request is to turn the LED off

else if (path == "/led/off") {

// Set the LED pin to LOW

digitalWrite(LED_PIN, LOW);

// Update the LED state

LED_state = LOW;

// Send a confirmation message

request->send(200, "text/plain", "LED turned off");

}

// Otherwise, send the web page

else {

// Get the HTML and CSS code

String html = getHTML();

// Send the web page

request->send(200, "text/html", html);

}

}


void setup() {

// Initialize the serial monitor

Serial.begin(115200);


// Initialize the LED pin

pinMode(LED_PIN, OUTPUT);

digitalWrite(LED_PIN, LED_state);


// Connect to WiFi network

connectWiFi();


// Start the web server

server.onNotFound(handleRequest);

server.begin();

}


void loop() {

// Nothing to do here

}


Source: https://www.instructables.com/Led-Control-With-ESP-Webserver/


No comments:

Post a Comment