https://circuits4you.com/2018/02/05/esp8266-arduino-wifi-web-server-led-on-off-control/

ESP8266 Arduino WiFi Web Server LED on off control

In this tutorial, I am going to tell you about controlling LED using web server over WiFiusing ESP8266 module or NodeMCU. So let’s start. In this tutorial we are using onboard LED of NodeMCU. If you are using different hardware you can connect led to GPIO2 or make changes in code as per your connection.

There are many ways to control LED over WiFi. We will go from basic to advance method of controlling LED using WiFi.

Method 1: ESP8266 NodeMCU as LED Web Server

In this method we create ESP8266 as WebServer to control on board LED through a web page. Read More on Creating Web Server with HTML in ESP8266.

In this we use two HTML link tags to turn on LED and Turn Off LED. For this we need three web locations on ESP i.e. we create server on three locations using serveron command.

First is to display the user interface, second and third to turn LED on and Off.

Arduino IDE code for ESP8266 WiFi LED on off

Make changes in WiFi configuration. Enter your WiFi router ssid and password. Program is well commented copy and paste it in Arduino IDE. To install ESP8266 NodeMCU board read this.

* ESP8266 NodeMCU LED Control over WiFi Demo

* https://circuits4you.com

#include <ESP8266WiFi.h>

#include <WiFiClient.h>

//ESP Web Server Library to host a web page

#include <ESP8266WebServer.h>

//---------------------------------------------------------------

//Our HTML webpage contents in program memory

const char MAIN_page[] PROGMEM = R"=====(

<!DOCTYPE html>

<html>

<body>

Ciclk to turn <a href="ledOn">LED ON</a><br>

Ciclk to turn <a href="ledOff">LED OFF</a><br>

<hr>

<a href="https://circuits4you.com">circuits4you.com</a>

</center>

</body>

</html>

)=====";

//---------------------------------------------------------------

//On board LED Connected to GPIO2

#define LED 2

//SSID and Password of your WiFi router

const char* ssid = "circuits4you.com";

const char* password = "123456789";

//Declare a global object variable from the ESP8266WebServer class.

ESP8266WebServer server(80); //Server on port 80

//===============================================================

// This routine is executed when you open its IP in browser

//===============================================================

void handleRoot() {

Serial.println("You called root page");

String s = MAIN_page; //Read HTML contents

server.send(200, "text/html", s); //Send web page

}

void handleLEDon() {

Serial.println("LED on page");

digitalWrite(LED,LOW); //LED is connected in reverse

server.send(200, "text/html", "LED is ON"); //Send ADC value only to client ajax request

}

void handleLEDoff() {

Serial.println("LED off page");

digitalWrite(LED,HIGH); //LED off

server.send(200, "text/html", "LED is OFF"); //Send ADC value only to client ajax request

}

//==============================================================

// SETUP

//==============================================================

void setup(void){

Serial.begin(115200);

WiFi.begin(ssid, password); //Connect to your WiFi router

Serial.println("");

//Onboard LED port Direction output

pinMode(LED,OUTPUT);

//Power on LED state off

digitalWrite(LED,HIGH);

// Wait for connection

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

delay(500);

Serial.print(".");

}

//If connection successful show IP address in serial monitor

Serial.println("");

Serial.print("Connected to ");

Serial.println(ssid);

Serial.print("IP address: ");

Serial.println(WiFi.localIP()); //IP address assigned to your ESP

server.on("/", handleRoot); //Which routine to handle at root location. This is display page

server.on("/ledOn", handleLEDon); //as Per <a href="ledOn">, Subroutine to be called

server.on("/ledOff", handleLEDoff);

server.begin(); //Start server

Serial.println("HTTP server started");

}

//==============================================================

// LOOP

//==============================================================

void loop(void){

server.handleClient(); //Handle client requests

}

Testing

Once the code is uploaded. open serial monitor and note down the IP address. Enter the same ip address in web browser to open web page. In this demo you will find that, you need to press back button. This can be avoided using iframe to open the link.

NodeMCU LED on off web server

ESP8266 LED control without page leaving and get status

In this code we use Iframe. that will open the led status page in a frame. without leaving main page.

* ESP8266 NodeMCU LED Control over WiFi Demo

* https://circuits4you.com

#include <ESP8266WiFi.h>

#include <WiFiClient.h>

//ESP Web Server Library to host a web page

#include <ESP8266WebServer.h>

//---------------------------------------------------------------

//Our HTML webpage contents in program memory

const char MAIN_page[] PROGMEM = R"=====(

<!DOCTYPE html>

<html>

<body>

Ciclk to turn <a href="ledOn" target="myIframe">LED ON</a><br>

Ciclk to turn <a href="ledOff" target="myIframe">LED OFF</a><br>

LED State:<iframe name="myIframe" width="100" height="25" frameBorder="0"><br>

<hr>

<a href="https://circuits4you.com">circuits4you.com</a>

</center>

</body>

</html>

)=====";

//---------------------------------------------------------------

//On board LED Connected to GPIO2

#define LED 2

//SSID and Password of your WiFi router

const char* ssid = "circuits4you.com";

const char* password = "123456789";

//Declare a global object variable from the ESP8266WebServer class.

ESP8266WebServer server(80); //Server on port 80

//===============================================================

// This routine is executed when you open its IP in browser

//===============================================================

void handleRoot() {

Serial.println("You called root page");

String s = MAIN_page; //Read HTML contents

server.send(200, "text/html", s); //Send web page

}

void handleLEDon() {

Serial.println("LED on page");

digitalWrite(LED,LOW); //LED is connected in reverse

server.send(200, "text/html", "ON"); //Send ADC value only to client ajax request

}

void handleLEDoff() {

Serial.println("LED off page");

digitalWrite(LED,HIGH); //LED off

server.send(200, "text/html", "OFF"); //Send ADC value only to client ajax request

}

//==============================================================

// SETUP

//==============================================================

void setup(void){

Serial.begin(115200);

WiFi.begin(ssid, password); //Connect to your WiFi router

Serial.println("");

//Onboard LED port Direction output

pinMode(LED,OUTPUT);

//Power on LED state off

digitalWrite(LED,HIGH);

// Wait for connection

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

delay(500);

Serial.print(".");

}

//If connection successful show IP address in serial monitor

Serial.println("");

Serial.print("Connected to ");

Serial.println(ssid);

Serial.print("IP address: ");

Serial.println(WiFi.localIP()); //IP address assigned to your ESP

server.on("/", handleRoot); //Which routine to handle at root location. This is display page

server.on("/ledOn", handleLEDon); //as Per <a href="ledOn">, Subroutine to be called

server.on("/ledOff", handleLEDoff);

server.begin(); //Start server

Serial.println("HTTP server started");

}

//==============================================================

// LOOP

//==============================================================

void loop(void){

server.handleClient(); //Handle client requests

}

ESP8266 Arduino WiFi Web Server LED on off control

Method 1: ESP8266 NodeMCU as LED Web Server

Arduino IDE code for ESP8266 WiFi LED on off

Testing

ESP8266 LED control without page leaving and get status

Results

Related Reading