ESP32: web dashboard over Soft AP

ESP32 / Leave a Comment
Contents hide
1 Introduction
2 The code
3 Testing the code
4 Suggested ESP32 readings

Introduction

In this post we are going to check how to serve a web dashboard from the ESP32 with the device working as Soft AP. We will be using the ESP-DASH library and the Arduino core. For an introductory tutorial on how to use ESP-DASH, please go here.

In the world of the Internet of Things, it is a common use case to have devices connected to the Internet, exposing sensor measurements remotely. Nonetheless, there might be use cases where a connection to the Internet is not available and we may still want to centralize sensor measurements and display them in a dashboard.

One important feature of the ESP32 that is useful for these use cases is the support for the device to host its own WiFi network, to which other devices can connect. In this case, the ESP32 works as soft AP.

When the ESP32 is hosting a WiFi network, it can still act as a HTTP server and answer to HTTP requests performed by stations connected to that network. In other words, we can connect a computer to the WiFi network hosted by the ESP32 and access the same web dashboard we have seen in the already mentioned previous tutorial.

We will be using a DHT22 sensor module to obtain temperature and humidity measurements to be sent to our dashboard. For a tutorial on how to wire the sensor to the ESP32 and to install the library to interact with it, please check this post.

The tests shown below were performed on a ESP32-E FireBeetle board from DFRobot. The Arduino core version used was 2.0.0 and the Arduino IDE version was 1.8.15, working on Windows 8.1. 

The code

We will start our code by the library includes:

  • WiFi.h: Needed to connect the ESP32 to a WiFi network.
  • ESPAsyncWebServer.h: Needed to setup a HTTP async server on the ESP32.
  • ESPDash.h: Exposes the functionality to setup and update the dashboard.
  • DHTesp.h: Allows to interact with the DHT22 sensor with a very easy interface.
  • Ticker.h: Allows to setup the periodic execution of functions. We are using this library to make our code cleaner, but if you don’t want to have this dependency you can, for example, implement the same functionality in the Arduino main loop.

Then we will define a variable to hold the name of the network that the ESP32 will host. We will call it “MyESP32AP“.

const char *ssid = "MyESP32AP";

We will also define the number of the ESP32 GPIO connected to the DHT22 sensor. Like already mentioned, you can check here the wiring diagram between the ESP32 and the DHT22 module.

const int sensorPin = 17;

After this we will create an object of class DHTesp. This object is the one that will expose the methods we need to initialize the sensor interface and obtain temperature and humidity measurements.

DHTesp dht;

We will also create a Ticker object, which we will use later to setup the periodic execution of the function that will update the dashboard values.

Ticker periodicTicker;

Since the ESP-DASH library uses the async HTTP web server solution under the hood, we will create an object of class AsyncWebServer. As input of the constructor, we will pass the port where the server will be listening for incoming requests. We will be using port 80, which is the default HTTP port.

AsyncWebServer server(80);

Then we will create an object of class ESPDash. As input, the constructor of this class receives a pointer to an AsyncWebServer object. We will pass the address of our previously created AsyncWebServer object.

ESPDash dashboard(&server);

We will now setup two cards to be displayed in our dashboard. One will show temperature measurements and the other will display humidity measurements. To do so, we create two objects of class Card. The constructor receives the following arguments:

  • A pointer to an ESPDash object. We will pass the address of our dashboard object.
  • The type of card (it should be a value from this enum). For the temperature card we will pass the value TEMPERATURE_CARD and for the humidity the value HUMIDITY_CARD.
  • The name of the card. This name will be displayed in the dashboard.
  • The symbol of the unit that will be displayed.
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");

Moving on to the Arduino setup, we will start by opening a serial connection.

Serial.begin(115200);

Then we will initialize the sensor interface by calling the setup method on our DHTesp object. As input, this method receives the number of the GPIO pin of the ESP32 connected to the sensor. Naturally, we will pass the variable we have defined earlier.

dht.setup(sensorPin);

After this, we will setup the WiFi network to be hosted by the ESP32. The whole procedure is shown in detail here. Note that at the end we will be printing the IP address assigned to the ESP32, which we will need later to reach the server.

WiFi.softAP(ssid);
 
Serial.print("IP address: ");
Serial.println(WiFi.softAPIP());

Then we will call the begin method on our server object, so it starts listening to incoming requests.

server.begin();

Finally we will setup the periodic execution of the function that will get the measurements from the DHT22 and update them in the dashboard. We will set it to run every 5 seconds. We will call this function updateCards and check its implementation below.

periodicTicker.attach_ms(5000, updateCards);

The full setup function is shown below.

void setup() {
  Serial.begin(115200);

  dht.setup(sensorPin);

  WiFi.softAP(ssid);
 
  Serial.print("IP address: ");
  Serial.println(WiFi.softAPIP());
  
  server.begin();

  periodicTicker.attach_ms(5000, updateCards);

}

To finalize our code, we will check the implementation of the updateCards function.

void updateCards() {
   // Get measurements and update dashboard
}

Naturally, the first thing we will do is getting the temperature and humidity measurements from the sensor by calling the getTemperature and getHumidity methods, respectively, on the DHTesp object.

float temp = dht.getTemperature();
float hum = dht.getHumidity();

Then we will update the value on each Card object.

temperature.update(temp);
humidity.update(hum);

Finally, we will send the values to the dashboard with a call to the sendUpdates method on our ESPDash object.

dashboard.sendUpdates();

The full callback is available on the snippet below.

void updateCards() {
 
  float temp = dht.getTemperature();
  float hum = dht.getHumidity();
  
  temperature.update(temp);
  humidity.update(hum);

  dashboard.sendUpdates();
}

The complete code is shown below.

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <ESPDash.h>
#include <DHTesp.h>
#include <Ticker.h>

const char *ssid = "MyESP32AP";

const int sensorPin = 17;
DHTesp dht;

Ticker periodicTicker;

AsyncWebServer server(80);
ESPDash dashboard(&server); 

Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");

void updateCards() {
 
  float temp = dht.getTemperature();
  float hum = dht.getHumidity();
  
  temperature.update(temp);
  humidity.update(hum);

  dashboard.sendUpdates();
}

void setup() {
  Serial.begin(115200);

  dht.setup(sensorPin);

  WiFi.softAP(ssid);
 
  Serial.print("IP address: ");
  Serial.println(WiFi.softAPIP());
  
  server.begin();

  periodicTicker.attach_ms(5000, updateCards);

}

void loop() {}

Testing the code

To test the end-to-end system, first make sure to have the DHT22 module correctly wired to the ESP32 and powered on. After that, simply compile and upload the code to your device, using the Arduino IDE.

Once the procedure finishes, open the Arduino IDE serial monitor and copy the IP address that gets printed. It will allow you to reach the server. Besides this, you should see a WiFi network called MyESP32AP in the list of networks shown by your Operating System. Connect your computer to this network.

After that, open a web browser of your choice and type the following, changing #YourIP# by the IP address you have just copied.

http://#YourIP#/

You should obtain a result similar to figure 1. As we can see, we have two cards: one for temperature and another for humidity. These should get updated periodically with the measurements taken from the DHT22 sensor.

Web dashboard served by the ESP32, on the network hosted by itself.
Figure 1 – Web dashboard served by the ESP32, on the network hosted by itself.

Suggested ESP32 readings

Leave a Reply