ESP8266IOT Projects

Nodemcu ESP8266 Web browser Programming and circuit diagram

Nodemcu ESP8266 Web Browser:

Nodemcu ESP8266 Web browser Programming and circuit diagram- So far I have been using Blynk IoT platform, Thingspeak, Ubidots, Arduino IoT cloud, and Telegram for controlling electrical devices and for monitoring different types of sensor over long distance using WiFi. Today, for the first time i am going to use Nodemcu ESP8266 with a Web Browser. Since, this is my first time; I am using a Web Browser with the ESP8266 so I will start with the very basics so that you can easily follow each and every step.

I am writing this article for the beginners. So, if this is your first time using Nodemcu ESP8266 with the Web Server then this article is for you. As I said earlier, I will start with the very basics, so in this project we will control an LED from a web browser. If you can control an LED it means you can control anything you want. All you need replace the led with a relay and start controlling high voltage and high ampere electrical devices.

For this project you only need the Nodemcu ESP8266 WiFi controller module and an LED. If you don’t have an LED then its fine you can use the Nodemcu ESP8266 onboard led.


Amazon Links:

Nodemcu ESP8266 WiFi Module:

Other Tools and Components:

Top Arduino Sensors:

Super Starter kit for Beginners

Digital Oscilloscopes

Variable Supply

Digital Multimeter

Soldering iron kits

PCB small portable drill machines

*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!



Circuit diagram:

 The schematic of this project is very simple which require only resistor and led. We will connect the led with the digital pin1 of the Nodemcu ESP8266. If you want you can use any other pin for the led or you can use the onboard led. Take a look at the Nodemcu ESP8266 Pinouts.

esp8266 web

This is IOT based project in which we will make the ESP8266 as web server and the mobile will be client. The client will send data to the server and the server will ON or OFF the led according to the data. WiFi will be used for the connectivity. So, first of all, we will turn ON the hotspot on the mobile and the ESP8266 module will connect with the module. Now open the browser in the mobile and put the IP address of the device. We will get the interface in which we have separate buttons for ON and OFF.

esp8266 web

When we press the ON button the led will turn ON and when we will press the OFF button the led will turn OFF. Separate buttons will be used for ON and OFF.


Project design:

Now to design the project, first of all, we will see that what is NodeMCU ESP8266 and how we design project with it.

NodeMCU ESP8266:

NodeMCU ESP8266 is an open source development board especially targeted for IOT based applications because it consists of ESP8266 chip. It supports I2C, UART, and SPI communication protocols. Now we will discuss several terminologies associated with the NodeMCU ESP8266.

Soft access point:

The device which creates the network is known as soft access point which provides WiFi to other devices. In simple language it is called hotspot.

Station:

The device which will be connected to the server or WiFi is called station.

Server:

The devices which provide resources, services or data programs to other devices over a network is known as server in our case the NodeMCU ESP8266 acts as the server.

Client:

The other device which can send some data and services to the server is known as client.

NodeMCU ESP8266 as Station:

Suppose we have a device which has turn on its WiFi which is the access point and this WiFi can either be connected to the internet or not. We can connect NodeMCU or laptop with this WiFi. To connect Nodemcu with it we will turn on the WiFi of the NodeMCU. So now in this case the laptop or NodeMCU will act as station.


NodeMCU ESP8266 as access point:

If we want NodeMCU ESP8266 as access point we will need to create network in the nodeMCU ESP8266 and turn on the Wifi so that laptop or mobile can connect with it. So, in this case, the NodeMCU ESP8266 will act as the access point while the other devices will act as station.

Interfacing the mobile device with NodeMCU:

In this project, we will be using mobile as access point by turning on its hotspot and turn on the NodeMCU Wi-Fi and will act as station. The NodeMCU will act as server and mobile phone will act as client. The client will send request to the server. We will put the IP address in the webpage in the mobile phone and the server will provide some information in return. In our case there will be two buttons on the webpage. By using these buttons we will turn on and off the led at the server side.

Nodemcu ESP8266 Web Server Complete Code:

#include <ESP8266WiFi.h>
const char* ssid = "Name of Hotspot";
const char* password = "Password";
WiFiServer server(80);

void setup() {
  pinMode(D1, OUTPUT);
  digitalWrite(D1, LOW);
  Serial.begin(9600);
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("NodeMCU is connected to WiFi");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
  delay(3000);
}

void loop() {
  WiFiClient client;
  client = server.available();

 if (client == 1) {
    String request = client.readStringUntil('\n');
    client.flush();
    Serial.println(request);
    if (request.indexOf("ledon") != -1)
    { digitalWrite(D1, HIGH);
      Serial.println("LED is ON");
    }

    if (request.indexOf("ledoff") != -1)
    { digitalWrite(D1, LOW);
      Serial.println("LED is OFF");
    }
 
    client.println("HTTP/1.1 200 OK");
    client.println("Content-Type: text/html");
    client.println(""); 
  
    client.println("<!DOCTYPE HTML>");
    client.println("<html>");
    client.println("<head>");
    client.println("<title> Controlling LED </title>");
    client.println("</head>");
    client.println("<body align= \"center\" >");
    client.println("<h1> <font size = \"25\" face = \"Cooper\" >  NodeMCU and Wifi Network  </font> </h1> ");
    client.println("<p> <a href=\"/ledon\">  <button style=\"height:60px; background-color: yellow; width:200px; cursor: pointer\"> ON  </button> <a> </font></p> ");
    client.println("<p> <a href=\"/ledoff\"> <button style=\"height:60px; background-color: yellow; width:200px; cursor: pointer\" > OFF </button> <a> </font></p> ");
    client.println("</body>");
    client.println("</html>");

    Serial.println("Client disonnected");
    Serial.println("------------------");
    Serial.println("                  ");
       
  }
}


Html code:

We will design html page which will consists of two buttons which we can turn ON and turn OFF. We used note pad for the html code.

<!DOCTYPE HTML>
<html>
<head>
<title> Controlling LED </title>
</head>
<body align= \"center\" >
<h1><font size = \"25\" face = \"Cooper\" >NodeMCU and Wifi Network  </font></h1>
<p><a href=\"/ledon\"><button style=\"height:60px; background-color: yellow; width:200px; cursor: pointer\"> ON  </button><a></font></p>
<p><a href=\"/ledoff\"><button style=\"height:60px; background-color: yellow; width:200px; cursor: pointer\" > OFF </button><a></font></p>
</body>
</html>

esp8266 web



Code Explanation:

The main part of this project is its coding. In the coding section if the esp8266 library is not installed, then we will first install the esp8266 library. Now to install the esp8266 in the Arduino IDE you need to go to the file preferences.

esp8266 web

After clicking on the preferences a dialog box will appear down in the additional boards manager you need to type in copy or paste the following link.

http://arduino.esp8266.com/stable/package_esp8266com_index.json

esp8266 web

When this process is completed, we come over to our board manager.

esp8266 web


It will take a few seconds and you just need to find this one here esp8266 by esp8266 community, click on more info and we are going to install the latest version.

esp8266 web

Now we will select the module NodeMCU module.

esp8266 web

Now after selecting the nodeMCU module we will write the code for the project.

We simply started off by adding the header file.

#include <ESP8266WiFi.h>

Now to access the Wi-Fi of the mobile we will write the name and password of the hotspot of the mobile

const char* ssid = "Name of Hotspot";

const char* password = "Password";


The server always check the client request from the port 80.

WiFiServer server(80);

Now we define the pins which will be used in the project.

void setup() {

The D1 pin will be used to connect the led and initially the led is off.

pinMode(D1, OUTPUT);

digitalWrite(D1, LOW);

Now we will serial interface the device and all the information will be display on the serial monitor

Serial.begin(9600);

Serial.print("Connecting to ");

Serial.println(ssid);

The device will be act as station so we will write the command

WiFi.mode(WIFI_STA);

Then we will connect with the WiFi

WiFi.begin(ssid, password);

Then we will check the status of the wifi whether it is connected or not

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

delay(500);

Serial.print(".");

  }

If our device is connected with the WiFi then we will display the information on the serial monitor and the IP address of the WiFi will be displayed

Serial.println("");

Serial.println("NodeMCU is connected to WiFi");

Serial.print("IP address: ");

Serial.println(WiFi.localIP());


Now we will connect the device with the server

server.begin();

delay(3000);

}

In the loop we will the request from the client if there is any request from the client or not.

void loop() {

WiFiClient client;

client = server.available();

if (client == 1) {

If we receive any request from the client we will save it in a variable

String request = client.readStringUntil('\n');

Then we will flush the buffer from where we have received the request and display the request on the serial monitor.

client.flush();

Serial.println(request);

If the request consists of led ON information then we will ON the LED and also we will display it on the serial monitor.

if (request.indexOf("ledon") != -1)

{ digitalWrite(D1, HIGH);

Serial.println("LED is ON");

    }

If the request consists of led OFF information then we will turn OFF the LED and also we will display it on the serial monitor.

if (request.indexOf("ledoff") != -1)

{ digitalWrite(D1, LOW);

Serial.println("LED is OFF");

    }



This code is for the creating buttons on the webpage. We will simply paste the html code and will write the client.println before every line and every line should be kept in double quotes and this will be applied on the whole html code.

client.println("HTTP/1.1 200 OK");

client.println("Content-Type: text/html");

client.println("");

client.println("<!DOCTYPE HTML>");

client.println("<html>");

client.println("<head>");

client.println("<title> Controlling LED </title>");

client.println("</head>");

client.println("<body align= \"center\" >");

client.println("<h1><font size = \"25\" face = \"Cooper\" >NodeMCU and Wifi Network  </font></h1> ");

client.println("<p><a href=\"/ledon\"><button style=\"height:60px; background-color: yellow; width:200px; cursor: pointer\"> ON  </button><a></font></p> ");

client.println("<p><a href=\"/ledoff\"><button style=\"height:60px; background-color: yellow; width:200px; cursor: pointer\" > OFF </button><a></font></p> ");

client.println("</body>");

client.println("</html>");

Serial.println("Client disonnected");

Serial.println("------------------");

Serial.println("                  ");

  }

}

 

Engr Fahad

My name is Shahzada Fahad and I am an Electrical Engineer. I have been doing Job in UAE as a site engineer in an Electrical Construction Company. Currently, I am running my own YouTube channel "Electronic Clinic", and managing this Website. My Hobbies are * Watching Movies * Music * Martial Arts * Photography * Travelling * Make Sketches and so on...

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button