Controlling LED from http webpage via WiFi using NodeMCU having ESP8266

This blog will talk about controlling of a LED from http webpage via WiFi which is connected to NodeMCU module having ESP8266 on it. This can be extended for home Automation at a large level.(How ūüėõ :P)

Before going further, I assume that you already have a NodeMCU module with you and

1. you know how to use it with Arduino IDE (Click here to learn: Using NodeMCU Module with Arduino IDE)

2. you know how to run a simple http web server on ESP8266 (Click here to learn: HTTP web server using NodeMCU)

Below program will explain controlling of LED from http webpage using WiFi running on ESP8266.

Program on Arduino Software

//Program starts here

/*
* Demonstrate using an http server and an HTML form to control an LED.
* The http server runs on the ESP8266.
*
* Connect to “http://”
* to bring up an HTML form to control the LED connected to GPIO#4.
*/

#include
#include
#include
#include

// Fill in your WiFi router SSID and password
const char* ssid = “puru”;
const char* password = “purushottam”;
MDNSResponder mdns;

ESP8266WebServer server(80);

const char INDEX_HTML[] =
“”
“” “”
“”
“ESP8266 Web Form Demo”


” “”

ESP8266 Web Form Demo – Using LED On/Off through On/Off Buttons



“”
“LED

“Make it Off

“Make it On

” ”



” “”;

 

#define LEDPIN 4 // I have connected LDEPIN at D2 wich is GPIO 4 for NodeMCU

void handleRoot()
{
if (server.hasArg(“LED”)) {
handleSubmit();
}
else {
server.send(200, “text/html”, INDEX_HTML);
}
}

void returnFail(String msg)
{
server.sendHeader(“Connection”, “close”);
server.sendHeader(“Access-Control-Allow-Origin”, “*”);
server.send(500, “text/plain”, msg + “\r\n”);
}

void handleSubmit()
{
String LEDvalue;

if (!server.hasArg(“LED”)) return returnFail(“BAD ARGS”);
LEDvalue = server.arg(“LED”);
if (LEDvalue == “1”) {
writeLED(true);
server.send(200, “text/html”, INDEX_HTML);
}
else if (LEDvalue == “0”) {
writeLED(false);
server.send(200, “text/html”, INDEX_HTML);
}
else {
returnFail(“Bad LED value”);
}
}

void handleNotFound()
{
String message = “File Not Found\n\n”;
message += “URI: “;
message += server.uri();
message += “\nMethod: “;
message += (server.method() == HTTP_GET)?”GET”:”POST”;
message += “\nArguments: “;
message += server.args();
message += “\n”;
for (uint8_t i=0; i<server.args(); i++){
message += ” ” + server.argName(i) + “: ” + server.arg(i) + “\n”;
}
server.send(404, “text/plain”, message);
}

void writeLED(bool LEDon)
{
if (LEDon)
digitalWrite(LEDPIN, 0);
else
digitalWrite(LEDPIN, 1);
}

void setup(void)
{
pinMode(LEDPIN, OUTPUT);
writeLED(false);

Serial.begin(115200);
WiFi.begin(ssid, password);
Serial.println(“”);

// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(“.”);
}
Serial.println(“”);
Serial.print(“Connected to “);
Serial.println(ssid);
Serial.print(“IP address: “);
Serial.println(WiFi.localIP());

if (mdns.begin(“esp8266WebForm”, WiFi.localIP())) {
Serial.println(“MDNS responder started”);
}

server.on(“/”, handleRoot);
server.onNotFound(handleNotFound);

server.begin();
Serial.print(“Connect to http://&#8221;);
Serial.println(WiFi.localIP());
}

void loop(void)
{
server.handleClient();
}

//Program ends here

Explanation of Program

If you have gone through the earlier two blogs (Using NodeMCU Module with Arduino IDE and HTTP web server using NodeMCU) then most of the functions and libraries you might have already understood.

I am explaining few more things which is new in this blog.

#define LEDPIN 4  // Pin mapping of NodeMCU is different from Arduino Board

p.s. LEDPIN is at connected at D2 wich is GPIO 4 for NodeMCU

We are defining a const char INDEX_HTML[] which is basically the HTML form which will be appearing on the browser when the given IP address is typed on any web browser.

If you look at INDEX_HTML[] in detail, we are putting header, body etc. We are putting two radio buttons in the HTML form and their name is defined as LED and value is defined as 1 (Make it Off) or 0 (Make it On). Whenever we click on submit button. This value of 1 or 0 will be send to server by a method called POST.

Inside the handleRoot() function, it has one if statement which checks for the argument of “LED” from the server, if it gets that argument of “LED” from the server¬†(means if the Radio button were clicked), it calls a function called handleSubmit().

Inside handleSubmit() function, value of LED = 0 or 1 is stored in a new variable named LEDvalue and is checked. if the value = 0, then connected LED at GPIO 4 is switched Off and whole HTML Form is sent to server, if the value = 1 then connected LED at GPIO 4 is switched on and whole HTML Form is sent to server.

New function named writeLED(bool) is defined which is self explanatory and depending on the argument it receives, it either switches LED On or Off.

Demo of the Program

Here is the snapshot of the http form which gets displayed on the browser at given IP address

http

Please look at the whole demonstration on Youtube.

-Signing Off, Arduino Novice

Please do follow my Blog and subscribe to my Youtube Channel for more demos and videos related to Arduino.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s