Blog Datasheets Home About me Clients My work Services Contact

G2Labs Grzegorz Grzęda

Building Custom Web Interfaces for ESP32: Using Embedded Web Servers

June 8, 2024

Building Custom Web Interfaces for ESP32: Using Embedded Web Servers

The ESP32 microcontroller has taken the world by storm with its powerful features and low cost. It not only provides connectivity options, like Wi-Fi and Bluetooth, but also has enough computational power to handle complex tasks. Building custom web interfaces on the ESP32 is a popular choice for IoT projects, as it allows straightforward access and control from any device with a web browser.

In this blog post, we will explore how to build custom web interfaces for ESP32 using embedded web servers. We will walk through the process step-by-step, providing extensive examples and explanations. Let’s jump right in!

Prerequisites

Before we start, make sure you have the following prerequisites:

Setting Up the Embedded Web Server

To get started, we need to set up an embedded web server on the ESP32. The ESPAsyncWebServer library provides a simple way to do this. The library can be installed via the Arduino Library Manager.

Once installed, you can include the library in your Arduino sketch like this:

1

#include <ESPAsyncWebServer.h>

Creating a Basic Web Interface

Let’s start by creating a basic web interface for our ESP32. We’ll create a simple HTML page that displays some data and has a button to control an LED.

First, create a new HTML file named index.html and include the following content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
  <head>
    <title>ESP32 Web Interface</title>
    <script>
      function toggleLED() {
        // TODO: Add code to toggle LED
      }
    </script>
  </head>
  <body>
    <h1>Welcome to ESP32 Web Interface</h1>
    
    <p id="data">Temperature: 25°C</p>
    
    <button onclick="toggleLED()">Toggle LED</button>
  </body>
</html>

In the above HTML code, we have a <h1> heading, a paragraph <p> to display some data (e.g., temperature), and a button to toggle an LED. The toggleLED() function is yet to be implemented.

Handling Requests on the Embedded Web Server

To handle HTTP requests from the web interface, we need to define routes on the embedded web server. In this example, we’ll handle requests to the root route ('/') and a specific route for toggling the LED ('/toggle').

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

AsyncWebServer server(80); // Create a server instance, listening on port 80

void handleRoot(AsyncWebServerRequest *request) {
  request->send(SPIFFS, "/index.html", "text/html"); // Serve index.html
}

void handleToggle(AsyncWebServerRequest *request) {
  // TODO: Add code to toggle LED
  request->send(200); // Respond with OK status
}

void setup() {
  //...
  server.on("/", HTTP_GET, handleRoot); // Handle root route
  server.on("/toggle", HTTP_GET, handleToggle); // Handle toggle route
  //...
}

In the code snippet above, we create a server instance listening on port 80. We define two request handlers using the server.on() method. The handleRoot() function serves the index.html file, and the handleToggle() function is called when the /toggle route is accessed. You can add the code to toggle the LED within the handleToggle() function.

Serving Static Files from SPIFFS

To serve static files, such as the index.html file and any associated JavaScript or CSS files, we can use the SPIFFS file system. First, we need to upload the files to the ESP32’s SPIFFS using the Arduino IDE’s built-in SPIFFS Uploader tool. You can find detailed instructions on how to upload files to SPIFFS in the official ESPAsyncWebServer documentation.

Once the files are uploaded, we need to mount the SPIFFS file system and initialize it in the setup() function of our Arduino sketch.

1
2
3
4
5
6
7
8
9

#include <SPIFFS.h>

void setup() {
  //...
  if (!SPIFFS.begin(true)) {
    Serial.println("An error occurred while mounting SPIFFS");
  }
  //...
}

Testing the Web Interface

At this point, we have a basic web interface ready to be tested. Connect your ESP32 development board, compile and upload the sketch, and open the Serial Monitor. You should see the IP address assigned to your ESP32. Open a web browser and enter the IP address in the address bar. You should see the web interface rendered in the browser.

You can now interact with the web interface by clicking the “Toggle LED” button. To handle the LED toggling, add the necessary code in the handleToggle() function we defined earlier.

Conclusion

In this blog post, we have explored how to build custom web interfaces for ESP32 using embedded web servers. We started by setting up the ESPAsyncWebServer library and creating a basic web interface. We then handled HTTP requests on the embedded web server and served static files from SPIFFS.

With this knowledge, you can now build and customize your own web interfaces for your ESP32 projects. The possibilities are endless, from controlling various sensors and actuators to monitoring and visualizing data. Have fun experimenting and building exciting IoT projects with custom web interfaces on the ESP32!

You can find the complete source code for this example on GitHub: [link to GitHub repository]

Thank you for reading, and happy hacking!

➡️ Linux tail command

⬅️ Linux 'less' command

Go back to Posts.