In this tutorial, I am going to tell you about controlling LED using web server over WiFi using 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>
<center>
<h1>WiFi LED on off demo: 1</h1><br>
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.
<iframe name=”myIframe” width=”100″ height=”25″ frameBorder=”0″><br>
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>
<center>
<h1>WiFi LED on off demo: 1</h1><br>
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
}
Results
Related Reading
How to control multiple LEDs? Read here
In this example you can find same logic can be applied to multiple relay control. that makes a home automation system.
How to read ESP8266 ADC data and display it in web page without refresh? Read here
This is little advanced application uses javascript ajax to update and control LED.
How to upload ADC Sensor data to a real IoT Cloud Web Server? Read here
In this example we upload adc data to things speak server.
Create Advance Cool IoT Widgets Like analog dial shown below. Read more here
