HTML class Attribute

In recent years, the ESP8266 has risen to prominence in IoT and WiFi-related projects. It’s a low-cost WiFi module that, with a little extra effort, can be programmed to run a standalone web server. What a cool thing!

What exactly is a Web server and how does it work?

A web server is a place where web pages are stored, processed, and served to web clients. A web client is just a web browser that we use on our computers and phones. A web client and a web server communicate using a special protocol known as Hypertext Transfer Protocol (HTTP).

In this protocol, a client starts a conversation by sending an HTTP request for a specific web page. The server then sends back the content of that web page or an error message if it can’t find it (like the famous 404 Error).

ESP8266 Operating Modes

One of the most useful features of the ESP8266 is its ability to not only connect to an existing WiFi network and act as a Web Server, but also to create its own network, allowing other devices to connect directly to it and access web pages.

This is possible because the ESP8266 can operate in three modes: Station (STA) mode, Soft Access Point (AP) mode, and both simultaneously.

Station (STA) Mode

In Station (STA) mode, the ESP8266 connects to an existing WiFi network (the one created by your wireless router).

In STA mode, the ESP8266 obtains an IP address from the wireless router to which it is connected. With this IP address, it can set up a web server and serve web pages to all connected devices on the existing WiFi network.

Soft Access Point (AP) Mode

In Access Point (AP) mode, the ESP8266 sets up its own WiFi network and acts as a hub (just like a WiFi router) for one or more stations.

However, unlike a WiFi router, it does not have an interface to a wired network. So, this mode of operation is called Soft Access Point (soft-AP). Also, no more than five stations can connect to it at the same time.

In AP mode, the ESP8266 creates a new WiFi network and assigns it an SSID (the network’s name) and an IP address. With this IP address, it can serve web pages to all connected devices.

Wiring LEDs to an ESP8266

Now that we understand the fundamentals of how a web server works and the modes in which the ESP8266 can create one, it’s time to connect some LEDs to the ESP8266 that we want to control via WiFi.

Begin by placing the NodeMCU on your breadboard, making sure that each side of the board is on a different side of the breadboard. Next, connect two LEDs to digital GPIO D6 and D7 using a 220Ω current limiting resistor.

When you are finished, you should have something that looks like the image below.

The Idea Behind Using an ESP8266 Web Server to Control Things

So you might be wondering, “How do I control things from a web server that only processes and serves web pages?”.

It’s extremely simple. We’re going to control things by visiting a specific URL.

When you enter a URL into a web browser, it sends an HTTP request (also known as a GET request) to a web server. It is the web server’s responsibility to handle this request.

Assume you entered a URL like http://192.168.1.1/ledon into a browser. The browser then sends an HTTP request to the ESP8266. When the ESP8266 receives this request, it recognizes that the user wishes to turn on the LED. As a result, it turns on the LED and sends a dynamic webpage to a browser that displays the LED’s status as “on.” Quite simple, right?

Configuring the ESP8266 Web Server in Access Point (AP) mode

Let’s get to the interesting stuff now!

This example, as the title suggests, shows how to configure the ESP8266 Web Server in Access Point (AP) mode and serve web pages to any connected client. To begin, connect your ESP8266 to your computer and run the sketch. Then we will look at it in more detail.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

/* Put your SSID & Password */
const char* ssid = "NodeMCU";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

ESP8266WebServer server(80);

uint8_t LED1pin = D7;
bool LED1status = LOW;

uint8_t LED2pin = D6;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);

  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);
  
  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);
  
  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO7 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO7 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO6 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #1abc9c;}\n";
  ptr +=".button-on:active {background-color: #16a085;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP8266 Web Server</h1>\n";
  ptr +="<h3>Using Access Point(AP) Mode</h3>\n";
  
   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

Accessing the Web Server in AP mode

After uploading the sketch, open the Serial Monitor at 115200 baud and press the RESET button on the ESP8266. If everything is fine, it will show the “HTTP server started” message.

Now, get a phone, laptop, or other device that can connect to a WiFi network, and look for a network called “NodeMCU”. Connect to the network using the password 12345678.

After connecting to your NodeMCU AP network, open a browser and navigate to 192.168.1.1. The ESP8266 should return a web page displaying the current status of the LEDs and buttons. At the same time, you can check the serial monitor to see the status of the ESP8266’s GPIO pins.

Now, while keeping an eye on the URL, click the button to turn LED1 ON. Once you click the button, the ESP8266 receives a request for the /led1on URL. It then turns on LED1 and serves a web page with the LED status updated. It also prints the GPIO pin status on the serial monitor.

You can test the LED2 button to see if it works similarly.

Let’s take a closer look at the code to see how it works so you can modify it to suit your needs.

Detailed Code Explanation

The sketch begins by including the ESP8266WiFi.h library. This library contains ESP8266-specific methods that we use to connect to the network. Following that, we include the ESP8266WebServer.h library, which contains some methods that will assist us in configuring a server and handling incoming HTTP requests without having to worry about low-level implementation details.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

Because we are configuring the ESP8266 web server in Access Point (AP) mode, it will create its own WiFi network. So, we need to set the SSID, password, IP address, IP subnet mask, and IP gateway.

/* Put your SSID & Password */
const char* ssid = "NodeMCU";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

Following that, we create an object of the ESP8266WebServer library so that we can access its functions. The constructor of this object accepts as a parameter the port to which the server will be listening. Since HTTP uses port 80 by default, we’ll use this value. This allows us to connect to the server without specifying the port in the URL.

// declare an object of ESP8266WebServer library
ESP8266WebServer server(80);

Next, we declare the NodeMCU’s GPIO pins to which LEDs are connected, as well as their initial state.

uint8_t LED1pin = D7;
bool LED1status = LOW;

uint8_t LED2pin = D6;
bool LED2status = LOW;

Inside Setup() Function

In the setup function, we configure our HTTP server. First, we establish a serial connection for debugging purposes and configure the GPIO pins to behave as an OUTPUT.

Serial.begin(115200);
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);

Then, we configure a soft access point to create a Wi-Fi network by providing an SSID, password, IP address, IP subnet mask, and IP gateway.

WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
delay(100);

To handle incoming HTTP requests, we must specify which code should be executed when a specific URL is accessed. For this, we use the .on() method. This method accepts two parameters: a relative URL path and the name of the function to be executed when that URL is visited.

The first line of the code snippet below, for example, indicates that when a server receives an HTTP request on the root (/) path, it will call the handle_OnConnect() function. It is important to note that the URL specified is a relative path.

Similarly, we must specify four more URLs to handle the two states of two LEDs.

server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);

We haven’t specified what the server should serve if the client requests a URL that isn’t specified with server.on(). It should give a 404 error (Page Not Found) as a response. To accomplish this, we use the server.onNotFound() method.

server.onNotFound(handle_NotFound);

Now, to start the server, we call the server object’s begin() method.

server.begin();
Serial.println("HTTP server started");

Inside Loop() Function

Actual incoming HTTP requests are handled in the loop function. For this, we use the server object’s handleClient() method. We also change the state of LEDs based on the request.

void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

Now we must write the handle_OnConnect() function, which we previously attached to the root (/) URL with server.on. We begin this function by setting the status of both LEDs to LOW (initial state of LEDs) and printing it on the serial monitor.

We use the send method to respond to an HTTP request. Although the method can be called with a number of different arguments, the simplest form requires the HTTP response code, the content type, and the content.

The first parameter we pass to the send method is the code 200 (one of the HTTP status codes), which corresponds to the OK response. Then we specify the content type as “text/html,” and finally we pass the SendHTML() custom function, which generates a dynamic HTML page with the LED status.

void handle_OnConnect() 
{
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

Similarly, we write five more functions to handle LED ON/OFF requests and the 404 Error page.

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO7 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO7 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO6 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

Displaying the HTML Web Page

Whenever the ESP8266 web server receives a request from a web client, the sendHTML() function generates a web page. It simply concatenates HTML code into a long string and returns to the server.send() function we discussed earlier. The function uses the status of the LEDs as a parameter to generate HTML content dynamically.

The first text you should always send is the <!DOCTYPE> declaration, which indicates that we’re sending HTML code.

String SendHTML(uint8_t led1stat,uint8_t led2stat){
String ptr = "<!DOCTYPE html> <html>\n";

The <meta> viewport element makes the web page responsive, ensuring that it looks good on all devices. The title tag determines the page’s title.

ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>LED Control</title>\n";

Styling the Web Page

Following that, we have some CSS to style the buttons and the overall appearance of the web page. We select the Helvetica font and define the content to be displayed as an inline-block, center-aligned.

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";

The code that follows then sets the color, font, and margin around the body, H1, H3, and p tags.

ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";

The buttons are also styled with properties such as color, size, margin, and so on. The :active selector changes the look of buttons while they are being clicked.

ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #1abc9c;}\n";
ptr +=".button-on:active {background-color: #16a085;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";

Setting the Web Page Heading

Next, the heading of the web page is set. You can change this text to anything that works for your application.

ptr +="<h1>ESP8266 Web Server</h1>\n";
ptr +="<h3>Using Access Point(AP) Mode</h3>\n";

Displaying the Buttons and Corresponding State

The if statement is used to dynamically update the status of the buttons and LEDs.

if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

Configuring the ESP8266 Web Server in WiFi Station (STA) mode

Let’s move on to the next example, which shows how to configure the ESP8266 web server in Station (STA) mode and serve web pages to any connected client on the existing network.

Before you proceed with uploading the sketch, you must make some changes to ensure that it works for you. To connect ESP8266 to an existing network, you must modify the following two variables with your network credentials.

Once you’re done, go ahead and try out the sketch.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

/*Put your SSID & Password*/
const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

ESP8266WebServer server(80);

uint8_t LED1pin = D7;
bool LED1status = LOW;

uint8_t LED2pin = D6;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  delay(100);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO7 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO7 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO6 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #1abc9c;}\n";
  ptr +=".button-on:active {background-color: #16a085;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP8266 Web Server</h1>\n";
    ptr +="<h3>Using Station(STA) Mode</h3>\n";
  
   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

Accessing the Web Server in STA mode

After uploading the sketch, open the Serial Monitor at 115200 baud and press the RESET button on the ESP8266. If everything is fine, it will display the dynamic IP address obtained from your router as well as the “HTTP server started” message.

Next, launch a browser and navigate to the IP address displayed on the serial monitor. The NodeMCU should serve a web page with the current status of the LEDs and two buttons for controlling them. At the same time, you can check the serial monitor to see the status of the NodeMCU’s GPIO pins.

Now, while keeping an eye on the URL, click the button to turn LED1 ON. Once you click the button, the ESP8266 receives a request for the /led1on URL. It then turns on LED1 and serves a web page with the LED status updated. It also prints the GPIO pin status on the serial monitor.

You can test the LED2 button to see if it works similarly.

Let’s take a closer look at the code to see how it works so you can modify it to suit your needs.

Code Explanation

The only difference between this code and the previous code is that we are not creating our own WiFi network but rather joining an existing network using the WiFi.begin() function.

//connect to your local wi-fi network
  WiFi.begin(ssid, password);

While the ESP8266 attempts to connect to the network, we can use the WiFi.status() function to check the connectivity status.

//check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }

For your information, this function returns the following statuses:

• WL_CONNECTED: when connected to a Wi-Fi network
• WL_NO_SHIELD: when no Wi-Fi shield is present
• WL_IDLE_STATUS: a temporary status assigned when WiFi.begin() is called and remains active until the number of attempts expires (resulting in WL_CONNECT_FAILED) or a connection is established (resulting in WL_CONNECTED)
• WL_NO_SSID_AVAIL: when no SSID are available
• WL_SCAN_COMPLETED: when the scan networks is completed
• WL_CONNECT_FAILED: when the connection fails for all the attempts
• WL_CONNECTION_LOST: when the connection is lost
• WL_DISCONNECTED: when disconnected from a network

Once connected to the network, the WiFi.localIP() function is used to print the ESP8266’s IP address.

Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

The only difference between AP and STA mode is that one creates its own network while the other joins an existing one. So, the rest of the code for handling HTTP requests and serving web pages in STA mode is the same as explained above for AP mode. This includes the following:

• Declaring NodeMCU’s GPIO pins to which LEDs are connected
• Defining multiple server.on() methods to handle incoming HTTP requests
• Defining server.onNotFound() method to handle HTTP 404 error
• Creating custom functions that are executed when specific URL is hit
• Creating HTML page
• Styling the web page
• Creating buttons and displaying their status