Get Started: ESP8266 NodeMCU Web Server With Arduino IDE

The ESP8266 has gained significant popularity in the past few years, particularly in IoT and WiFi projects. It is an affordable WiFi module that, with some additional work, can be programmed to function as a standalone web server. This capability adds a fascinating aspect to its functionality.

The ESP8266 is known for its versatile operating modes, enabling it to connect to existing WiFi networks, act as a web server, and even create its own network for direct device connections and webpage access.

There are three primary modes in which the ESP8266 can operate: Station (STA) mode, Soft Access Point (AP) mode, or a combination of both.

In Station (STA) mode, the ESP8266 connects to an established WiFi network, typically created by a wireless router.

By joining this network, the ESP8266 obtains an IP address assigned by the router. With this IP address, it can set up a web server and serve web pages to all devices connected to the existing WiFi network.

In Soft Access Point (AP) mode, the ESP8266 acts as a hub, creating its own WiFi network similar to a WiFi router. However, unlike a traditional router, it lacks a connection to a wired network. As a result, it can only accommodate up to five connected stations simultaneously.

In AP mode, the ESP8266 assigns an SSID (network name) and an IP address to the created WiFi network. It can then serve web pages to all devices connected to this network.

Now that we grasp the basic concepts of web server functionality and the various modes available for the ESP8266 to create one, let’s proceed with connecting LEDs to the ESP8266 for WiFi-based control.

Start by placing the NodeMCU board on a breadboard, ensuring that each side of the board is on a separate side of the breadboard. Then, connect two LEDs to the digital GPIO pins D6 and D7, utilizing a 220Ω current-limiting resistor.

Once completed, your setup should resemble the image provided.

You may be curious about how to control devices when the ESP8266 web server solely processes and serves web pages. The solution is quite straightforward – control is achieved by visiting specific URLs.

When you enter a URL in a web browser, it sends an HTTP request (GET request) to a web server. The web server is responsible for handling this request.

For instance, if you enter a URL like http://192.168.1.1/ledon in your browser, it sends an HTTP request to the ESP8266. Upon receiving this request, the ESP8266 recognizes the intention to turn on an LED. Consequently, it activates the LED and sends a dynamic webpage back to the browser, displaying the LED’s status as “on.” This mechanism allows for simple and intuitive control.

Now let’s delve into the exciting part!

This example, as the title suggests, demonstrates how to configure the ESP8266 web server in Access Point (AP) mode, enabling it to serve web pages to any connected client. Connect your ESP8266 to your computer and run the provided sketch to explore the details of this configuration.

#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;
}

Once you have uploaded the sketch, open the Serial Monitor and set the baud rate to 115200. Press the RESET button on the ESP8266. If everything is working correctly, you will see the message “HTTP server started” displayed.

Now, grab a phone, laptop, or any other WiFi-enabled device and search for a network named “NodeMCU”. Connect to this network using the password “12345678”.

Once you are connected to the NodeMCU AP network, open a web browser and enter the address 192.168.1.1. The ESP8266 will respond by displaying a web page that shows the current status of the LEDs and buttons. You can also monitor the serial monitor to check the status of the ESP8266’s GPIO pins.

While observing the URL, click the button to turn on LED1. When you click the button, the ESP8266 will receive a request for the /led1on URL. It will then activate LED1 and update the web page with the new LED status. The status of the GPIO pin will also be printed in the serial monitor.

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

Now, let’s dive into the code to gain a deeper understanding of how it works and learn how to customize it to suit your specific requirements.

Link: https://arduinokitproject.com/get-started-esp8266-nodemcu-web-server-with-arduino-ide/