In this post we’ll see how to control an LED connected to NODEMCU from a WebBrowser.
The WebBrowser is a CLIENT & the NodeMCU is the SERVER .
The Nodemcu has to be installed with Boards Manager Arduino core. Refer to the previous post on how to do this.
Connect the long pin of LED to D2 pin of NodeMCU , short pin to GND through a 470E resistor.
Connect the NodeMCU to USB port of PC & note the COM port allotted.Feed in this COM port number in IDE & select the board as NodeMcu v1.0 (ESP12E).
Upload the following code.
You can Download the code used in this post HERE
————————————-
#include <ESP8266WiFi.h>
#define LED D2
const char* ssid = “SARAVANA-ACT”;
const char* password = “str5412stk4141”;
unsigned char status_led=0;
WiFiServer server(80);
void setup() {
Serial.begin(115200);
pinMode(LED, OUTPUT);
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”);
server.begin();
Serial.println(“Server started”);
Serial.println(WiFi.localIP());
}
void loop() {
WiFiClient client = server.available();
if (!client) {
return;
}
Serial.println(“new client”);
while(!client.available())
{
delay(1);
}
String req = client.readStringUntil(‘\r’);
Serial.println(req);
client.flush();
if (req.indexOf(“/ledoff”) != -1)
{
status_led=0;
digitalWrite(LED,LOW);
Serial.println(“LED OFF”);
}
else if(req.indexOf(“/ledon”) != -1)
{
status_led=1;
digitalWrite(LED,HIGH);
Serial.println(“LED ON”);
}
String web = “HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n”;
web += “<html>\r\n”;
web += “<body>\r\n”;
web += “<h1>LED Status</h1>\r\n”;
web += “<p>\r\n”;
if(status_led==1)
web += “LED On\r\n”;
else
web += “LED Off\r\n”;
web += “</p>\r\n”;
web += “</p>\r\n”;
web += “<a href=\”/ledon\”>\r\n”;
web += “<button>LED On</button >\r\n”;
web += “</a>\r\n”;
web += “</p>\r\n”;
web += “<a href=\”/ledoff\”>\r\n”;
web += “<button>LED Off</button >\r\n”;
web += “</a>\r\n”;
web += “</body>\r\n”;
web += “</html>\r\n”;
client.print(web);
}
——————————————-
First of all, we include the ESP8266WiFi library, which will make available the functionality needed for the ESP8266 to connect to a WiFi network.Then we define the D2 pin as LED where an Led is connected.
#include <ESP8266WiFi.h>
#define LED D2
The SSID name & password are stored in char variables.
A WiFiserver object called “server “ is created & we pass the port 80 where the server will be listening ( 80 is the default port of HTTP)
WiFiServer server(80);
In the setup() function serial monitor is started at baud 115200 & the LED pin is declared as Output.
The begin() function of WiFi class is used with parameters ssid & password to start connection to WiFIi
WiFi.begin(ssid, password);
We wait till the WiFi.status() becomes WL_CONNECTED which indicates that connection is established .Until then we print a dot every 500msec.
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(“.”);
}
Once connection is established , an IP address is allotted to NodeMCU by your Router.We print the IP address using the localIP() function.
Serial.println(WiFi.localIP());
Inside the loop we create an object called client of class WiFiClient & assign the server.available() result (it returns true or false) to it.
WiFiClient client = server.available();
It waits for a client ( here a web browser is the client) to connect with.
Once a request is received , the client.readStringUntil (‘\r”) will read the request till it encounters a carriage return & assign it to a String variable req
String req = client.readStringUntil(‘\r’);
indexOf() function of String is used to find out ehether the request is ledoff or ledon.
if (req.indexOf(“/ledoff”) != -1)
The indexOf() function returns a –1 if no match found.
Accordingly the LED is made ON or OFF.
Now let us see how a HTML page is served to webbrowser when a client request is received
ode will be stored in strings that will be returned in the HTTP responses
we can declare it in a string and just return it when a HTTP request is performed on the desired URL.
String web = “HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n”;
web += “<html>\r\n”;
web += “<body>\r\n”;
web += “<h1>LED Status</h1>\r\n”;
First, we return the 200 HTTP code (OK code). Then, we need to make sure that we specify the return content as text/html, so the browser will know that it should be interpreted and rendered as such
Finally, we pass the string with the HTML/CSS code
The <html> element represents the root of an HTML document. All other elements must be descendants of this element .
The <body> tag specifies where the body of the document starts .
The <h1> tag specifies the Heading of Webpage
The <p> tag specifies a paragraph and thus we use it to indicate our description message.
web += “<a href=\”/ledon\”>\r\n”;
web += “<button>LED On</button >\r\n”;
The <a> tag allows us to create a hyperlink by specifying the URL of a page and the message of the hyperlink. So, in the href attribute we specify the URL we want the user to be redirected to, and between the two tags we specify the message of the hyperlink.
In this case, we are specifying a path in the current address, so we don’t need to put the IP and the port. So, when a user clicks the hyperlink, the browser knows it will need to redirect the user to
http://IP Port/[href value]
As we will see later, the paths we are specifying in the href will correspond to the paths where the NodeMcu will be programmed to return the corresponding code.
the <br> tag is just a simple line break between the hyperlinks.
One thing that is very important is that we are specifying the HTML code inside a string, and thus some details need to be taken in consideration.
First, in order to leave the code structured, we should split the declaration of the string in multiple lines. To do so, we need to put the double quotes in each line so the compiler will know that it should be considered as a single string. So, the outermost quotes of the previous code are not from the HTML but from the declaration of a string in multiple lines.
Finally, every quote that is part of the HTML code (for example, the quotes around the URLs in the <a> tag) needs to be escaped with the \ character. So, the \ characters we see before the quotes are also not part of the HTML code but rather the escaping mechanism.
The <button> tag allows for the definition of a clickable button. One of its functionalities allows us to specify a function that is executed when the button is clicked
web += “<button>LED Off</button >\r\n”;
Now upload the code & open the serial monitor
WiFi connection starts & displays IP if connection established.
Open your web browser & type in the IP you got from the serial monitor.
Once you click the Enter button , a CLIENT request is sent to NodeMCU.
Now the HTML page is served & buttons LED ON & LED OFF are displayed on the browser.
If you click LED ON button , the message string “ledon” is added to URL & sent to Nodemcu.
The string is read and accordingly the LED will be ON or OFF.
Here is another version of code where we use client.print() to serve the Webpage
———————————-
#include <ESP8266WiFi.h>
#define LED D2 // LED at GPIO4 D2
const char* ssid = “SARAVANA-ACT”;
const char* password = “str5412stk4141”;
unsigned char status_led=0;
WiFiServer server(80);
void setup() {
Serial.begin(115200);
pinMode(LED, OUTPUT);
digitalWrite(LED, LOW);
// Connect to 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”);
// Start the server
server.begin();
Serial.println(“Server started at…”);
Serial.println(WiFi.localIP());
}
void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.println(“new client”);
while (! client.available())
{
delay (1);
}
// Read the first line of the request
String req = client.readStringUntil(‘\r’);
Serial.println(req);
client.flush();
// Match the request
if (req.indexOf(“/ledoff”) != -1) {
status_led=0;
digitalWrite(LED, LOW);
Serial.println(“LED OFF”);
}
else if(req.indexOf(“/ledon”) != -1)
{
status_led=1;
digitalWrite(LED,HIGH);
Serial.println(“LED ON”);
}
// Return the response
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-Type: text/html”);
client.println(“Connection: close”);
client.println(“”);
client.println(“<!DOCTYPE HTML>”);
client.println(“<HTML>”);
client.println(“<H1> LED CONTROL </H1>”);
client.println(“<br />”);
client.println(“<a href=\”/ledon\”\”> <button style=’FONT-SIZE: 50px; HEIGHT: 200px;WIDTH: 300px; 126px; Z-INDEX: 0; TOP: 200px;’> LED ON </button> </a>”);
client.println(“<a href=\”/ledoff\”\”> <button style=’FONT-SIZE: 50px; HEIGHT: 200px; WIDTH: 300px; 126px; Z-INDEX: 0; TOP: 200px;’> LED OFF </button> </a>”);
client.println(“</html>”);
delay(1);
Serial.println(“Client disconnected”);
Serial.println(“”);
}
———————————–
Inside <button> tag we create a style to make big size buttons.
On clicking the respective buttons the LED is made ON or OFF.
VIDEO DEMO :
alselectro 
Exceptional how-to guide, truly one of the best I’ve read in researching the use of NodeMcu ESP8266 Dev Kit module with a Arduino sketch. Great job and thank you for your attention to detail and explanations in posting this how-to guide.
Vee