ESP32 Web Server:  Control an LED from Webpage

ESP series WiFi modules have become very popular among hobbyists and industries for IoT based projects. ESP32 is one of the popular board among ESP series modules as it has Dual core 32-bit CPU with built in Wi-Fi, bluetooth and sufficient amount of  I/O pins. It is a small and cost effective device which can be used to make any project communicate with the internet. In this project I will create a web server with ESP32 that controls LED using Arduino IDE environment. Web server is a place where we can store the web pages, process them and deliver them to the web clients. Web server can be accessed with any device on the local network. We previously built the same webserver using Raspberry pi in one of the previous tutorials.

Requirements

1. ESP32 module
2. USB Cable
3. Breadboard
4. LED
5. Jumper wires
6. Resistor 1K

Circuit Diagram

Programming Part

Complete ESP32 web server code is given at the end of this project. In this section I will tell you how the code actually works.

The first thing you need to do is include the WiFi library.

#include <WiFi.h>

Now enter your network credentials i.e. SSID and password of your WiFi Network inside the double inverted comma.

const char* ssid     = "         ";
const char* password = "        ";

Next, declare an object of WiFi Server library, so we can access its functions. The argument of the instance formed will be the port number, since the default port for HTTP is 80, so I will use this value.

WiFiServer server(80);

The below line creates a variable to store the header of HTTP request:

String header;

Now, you have to make auxiliary variable to store the current state of your output.

String output2State= “off”;

Now, assign GPIO to your output, here I am using GPIO2 pin as my output you can change it according to the output you are using.

Const in output2= 2;

In void setup() function, we will initialize the baud rate, LED output, and will connect the module with the Wi-Fi using WiFi.begin(ssid,password); function. This function begins the Wi-Fi connection, wait for a successful connection and print the ESP IP address in the serial monitor.

void setup() {
  Serial.begin(115200);
    pinMode(output2, OUTPUT);
  digitalWrite(output2, LOW);
  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.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

In loop() function you will have to program what happens when  a new client establishes a connection with the web server. The ESP32 is always listening to the incoming clients using server.available(); and store the incoming data to a string variable and print the data on serial monitor.

void loop(){
 WiFiClient client = server.available(); 
if (client) {                            
   Serial.println("New Client.");        
    String currentLine = "";               
    while (client.connected()) {           
      if (client.available()) {            
        char c = client.read();            
        Serial.write(c);                   
        header += c;
        if (c == '\n') {                   
         if (currentLine.length() == 0) {
          client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

Now, if and else statements checks which button was pressed in your webpage, and controls the output accordingly. For example, if you press GPIO2 ON button then ESP32 receives a request on the /2/ON URL and the ESP32 turns the LED ON.

if (header.indexOf("GET /2/on") >= 0) {
Serial.println("GPIO 2 on");
output2State = "on";
digitalWrite(output2, HIGH);
} else if (header.indexOf("GET /2/off") >= 0) {
      Serial.println("GPIO 2 off");
      output2State = "off";
      digitalWrite(output2, LOW);
       }

HTML code for ESP32 Webserver

Creating the web page in HTML which is most important for this project, The ESP32 will send a response to your browser with some HTML code to build the web page. – Here we have embedded the complete HTML code in Arduino code using client.println. Complete code is given at the end.

Below line indicates that we are sending HTML.

<!DOCTYPE html><html>

The following lines make the web page responsive in any web browser.

client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");

Now we have to style our web page, to decorate your page you can use CSS to style the buttons and background. You can change the properties according to you.

client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
 client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
 client.println(".button2 {background-color: #555555;}</style></head>");

Now set the heading of your web page. Here you can give any name or whatever you like.

client.println("<body><h1> Circuit digest</h1>");
client.println("<body><h1>ESP32 Web Server: LED Blink</h1>");

Now you have to write code to display the GPIO 2 current state. Use output2state variable, so that the state updates instantly when the variable changes.

client.println("<p>GPIO 2 - State " + output2State + "</p>");

Now, display the on or off button, depending on the current state of the GPIO. If the current state is off the you have to show ON button and vice- versa.

if (output2State=="off") {
 client.println("<p><a href=\"/2/on\"><button                                                             
class=\"button\">ON</button></a></p>");
            } else {
  client.println("<p><a href=\"/2/off\"><button class=\"button button2\">OFF</button></a></p>");
            }

At last, when the response ends, you have to clear the header variable, and stop the connection with the client with client.stop().

header = "";
client.stop();
Serial.println("Client disconnected.");
Serial.println("");

This is the whole programming procedure of the project; the complete code of this project is given at last of this article you can check.

Programming your ESP32 with Arduino IDE

Now you are in a stage to upload the code in your ESP32, we will upload the code in ESP32 using Arduino IDE by following the steps below:

1. Connect your ESP32 to your PC via USB cable and make circuit as given above, here I am using GPIO2 you can use according to you.
2. Open your Arduino IDE and copy this code to your IDE window but make sure that you provide correct WiFi credentials of your network.
3. Now go to Tools--> Board--> ESP32 Dev module.
4. Now go to Tools-->Port and select port to which your ESP32 is connected.
5. Now click on upload to upload the code.
6. After complete uploading you will find message like this in your output console.

7. Now open your serial monitor and press reset button of your ESP32 and now your ESP starts connecting to your network, once connected it will give you IP of this ESP.

8. Now open the browser and type this IP address and you will find following webpage.

9.  From this webpage you can control your LED and you can see on serial monitor as well what happening on background.

This is how you are successfully able to create a webserver and control LED from webpage. Like this you can also control Home appliances from anywhere in the world using ESP32 webserver.