Integration
Add an ESP-DASH v4 dashboard to an existing ESPAsyncWebServer sketch on ESP8266, ESP32 or RP2040.
This guide shows how to add ESP-DASH to a sketch that already runs an AsyncWebServer. Each step adds a few lines to your existing code; the complete sketch is shown at the end.
Include dependencies
The includes use conditional compilation so the same sketch builds for ESP8266, ESP32, RP2040 and RP2350.
#include <Arduino.h>
#if defined(ESP8266)
/* ESP8266 dependencies */
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#elif defined(ESP32)
/* ESP32 dependencies */
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#elif defined(TARGET_RP2040) || defined(PICO_RP2040) || defined(TARGET_RP2350) || defined(PICO_RP2350)
/* RP2040 or RP2350 dependencies */
#include <WiFi.h>
#include <RPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#endif
#include <ESPDash.h>Create the AsyncWebServer instance
Create an AsyncWebServer instance on port 80.
AsyncWebServer server(80);You are not limited to a single dashboard. You can host multiple dashboards on different ports.
Attach ESP-DASH
Pass a pointer to the AsyncWebServer instance to the ESPDash constructor. ESP-DASH registers its routes and WebSocket handler on that server.
ESPDash dashboard(&server);You can continue to use the same AsyncWebServer instance for your own routes.
Create widgets
Create widgets and pass a pointer to the dashboard as the first argument so that each widget can add itself to, and remove itself from, the dashboard.
/*
Card format: (dashboard, card type, card name, symbol (optional))
*/
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");See the Cards section for the available card types.
Configure setup()
Connect to Wi-Fi and start the server with server.begin().
void setup() {
Serial.begin(115200);
/* Connect to Wi-Fi */
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
Serial.printf("WiFi Failed!\n");
return;
}
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
/* Start AsyncWebServer */
server.begin();
}Update widgets in loop()
Update the card values, then call dashboard.sendUpdates() to push the changes to all connected clients. You can call these methods anywhere in your sketch; the example uses loop() for simplicity.
void loop() {
/* Update card values */
temperature.update((int)random(0, 50));
humidity.update((int)random(0, 100));
/* Send updates to the dashboard */
dashboard.sendUpdates();
/* For demonstration only; use a millis() interval in production code */
delay(3000);
}Upload the sketch
Set ssid and password to match your access point, upload the sketch and open the IP address printed on the serial monitor in a browser.
#include <Arduino.h>
#if defined(ESP8266)
/* ESP8266 dependencies */
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#elif defined(ESP32)
/* ESP32 dependencies */
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#elif defined(TARGET_RP2040) || defined(PICO_RP2040) || defined(TARGET_RP2350) || defined(PICO_RP2350)
/* RP2040 or RP2350 dependencies */
#include <WiFi.h>
#include <RPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#endif
#include <ESPDash.h>
/* Wi-Fi credentials */
const char* ssid = "";
const char* password = "";
AsyncWebServer server(80);
ESPDash dashboard(&server);
/*
Card format: (dashboard, card type, card name, symbol (optional))
*/
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");
void setup() {
Serial.begin(115200);
/* Connect to Wi-Fi */
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
Serial.printf("WiFi Failed!\n");
return;
}
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
/* Start AsyncWebServer */
server.begin();
}
void loop() {
/* Update card values */
temperature.update((int)random(0, 50));
humidity.update((int)random(0, 100));
/* Send updates to the dashboard */
dashboard.sendUpdates();
/* For demonstration only; use a millis() interval in production code */
delay(3000);
}Next steps
- Cards: the card types and their parameters.
- Charts: plot data series on the dashboard.
- Authentication: restrict access to the dashboard.