ESP32 Dashboard: Status card

ESP32 / Leave a Comment
Contents hide
1 Introduction
2 The code to display the status card
3 Testing the code
4 References
5 Suggested ESP32 Readings

Introduction

In this tutorial we are going to learn how to display and use the Status Card from the ESP-DASH library. We will be using the ESP32 and the Arduino core.

In previous tutorials we have already covered dashboard cards suitable for sensor measurements (temperature, humidity and the generic card). These cards are useful when we want to display the numeric value of a measurement.

Nonetheless, we may also want to monitor the state of a given component of our system (ex: it is working / not working, the button is pressed / not pressed, etc…). For these scenarios, a status display is usually more adequate.

The Status Card supports 4 different values, each one with a different icon [1]:

  • “success” – Green
  • “danger” – Red
  • “warning” – Yellow
  • “idle” – Grey

Note that the names of the states we have listed above are basically the values we need to pass to have the different icons rendered. The actual message that is on the card can be defined by us.

As such, the “success” status, for example, doesn’t necessarily need to have a message indicating “success“. We can use something like “Working” or “Connected”, or similar, since the actual icon is quite generic and can apply for different use cases. The same goes for the other status.

In order for us to focus on how the card works, we are not going to attach any real sensor or device to the ESP32. Instead, we are going to check how to test its different values. Naturally, once we understand the basic operating mechanism, it should be easy to adapt for any particular device we want to monitor.

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 to display the status card

As usual, we will start by the library includes. These libraries will expose to us the functionality we need to connect the ESP32 to a WiFi network, setup a HTTP server and serve the real-time web dashboard.

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

To be able to connect the ESP32 to the WiFi network, we will need to know its credentials. As such, we will define two global variables to hold the network name (SSID) and password. We will use them later in the Arduino setup.

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

Then we will create our AsyncWebServer object and our ESPDash object. The server object will be used under the hood by the ESP-DASH lib to take care of serving the web page with the dashboard and to the updates via a websocket connection.

ESPDash dashboard(&server);

We will then create a Card object and indicate in the constructor that we want to render a Status Card. The constructor receives the following parameters:

  • The address of a ESPDash object.
  • An enum value indicating the card type. A Status Card has a type equal to STATUS_CARD.
  • The name of the card, which will be rendered in the dashboard. We will call it “Status“.
  • The inicial status value of the card. The valid values are a list of strings listed here. We will start with “success“.
Card statusCard(&dashboard, STATUS_CARD, "Status", "success");

In order to display all the 4 possible status, we will define an array of strings with all the supported values. We will also define a global counter that will allow us to iterate over these values, so we are able to display them all in the dashboard.

int statusIterator = 0;
char possibleStatus[4][10] = { "success", "danger", "warning", "idle" };

The Arduino setup will be pretty much what we have covered in previous tutorials: opening a serial connection, connecting the ESP32 to a WiFi network and starting the async HTTP web server. The full code is available below.

void setup() {
  Serial.begin(115200);
 
  WiFi.begin(ssid, password);
   
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
   
  Serial.println(WiFi.localIP());
   
  server.begin();
}

We will use the Arduino main loop to iterate through all the values of our status array. To do so, we will start by incrementing the iterator by 1 and performing the modulo operation over the value 4 (the length of the status string array). This ensures a circular counter behavior that will never reach 4 (outside the array boundaries, which is indexed starting at zero) and will reset to 0 after the value 3.

statusIterator = (statusIterator+1)%4;

Then, just for readibility, we will assign the current value of the array to a variable.

char * currentStatus = possibleStatus[statusIterator];

After this we will call the update method in our Card object. This method receives two values: a message that will be printed on the card and the current status. We will pass the string with the current status in both, simply so we can match the icon with the status name later, when testing the code.

statusCard.update(currentStatus, currentStatus);
dashboard.sendUpdates();

Finally we will introduce a 5 seconds delay between each iteration of the loop. The complete code for the loop is available in the snippet below.

void loop() {

  statusIterator = (statusIterator+1)%4;
  char * currentStatus = possibleStatus[statusIterator];

  statusCard.update(currentStatus, currentStatus);
  dashboard.sendUpdates();
 
  delay(5000);
}

The complete code is available below.

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <ESPDash.h>
 
const char* ssid = "networkName";
const char* password =  "networkPassword";
 
AsyncWebServer server(80);
ESPDash dashboard(&server); 

Card statusCard(&dashboard, STATUS_CARD, "Status", "success");

int statusIterator = 0;
char possibleStatus[4][10] = { "success", "danger", "warning", "idle" };


void setup() {
  Serial.begin(115200);
 
  WiFi.begin(ssid, password);
   
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
   
  Serial.println(WiFi.localIP());
   
  server.begin();
}
 
void loop() {

  statusIterator = (statusIterator+1)%4;
  char * currentStatus = possibleStatus[statusIterator];

  statusCard.update(currentStatus, currentStatus);
  dashboard.sendUpdates();
 
  delay(5000);
}

Testing the code

As usual, to test the code, simply compile it and upload it to your ESP32 using the Arduino IDE. Once the procedure finishes, open the IDE serial monitor.

After the ESP32 connects to the WiFi network, it should print the IP address assigned to it on the network. Copy that value, since we are going to need it to access the dashboard.

Then, open a web browser of your choice and type the following in the address bar, changing #yourDeviceIp# by the IP you have just copied:

http://#yourDeviceIp#/

Upon navigating to this URL, you should get a result similar to figure 1. As can be seen, we have obtained a web page with the dashboard, which shows the status card. The current value shown is for “success”, but it should change periodically to the other values, as we have defined in our code.

ESP32 real-time dashboard with status card being rendered.
Figure 1 – ESP32 real-time dashboard with status card being rendered.

References

[1] https://ayushsharma82.github.io/ESP-DASH/cards/status.html

Suggested ESP32 Readings

Leave a Reply