Integration Guide
Add an ESP-DASH v5 dashboard to an existing ESPAsyncWebServer sketch on ESP32, RP2040 or RP2350.
This guide shows how to add ESP-DASH to a sketch that already runs an AsyncWebServer. Each step lists the lines to add; the complete sketch is at the end of the page.
Include the dependencies
Include the Wi-Fi, async TCP and web server headers for your platform, followed by ESPDash.h. The preprocessor conditions below select the correct headers for ESP32, RP2040 and RP2350, so the same sketch compiles on every supported board.
#include <Arduino.h>
#if 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 web server
Create an AsyncWebServer instance on port 80.
/* Start Webserver */
AsyncWebServer server(80);You are not limited to a single dashboard. You can host multiple dashboards on different ports.
Attach ESP-DASH to the server
Pass the AsyncWebServer instance to the ESPDash constructor by reference. ESP-DASH registers its routes and WebSocket handler on this server and handles all dashboard networking through it.
/* Attach ESP-DASH to AsyncWebServer */
ESPDash dashboard(server);You can continue to use the same AsyncWebServer instance for your own routes.
Create widgets
Declare the widgets in global scope, passing the dashboard instance as the first argument. Each card type has its own constructor parameters; see the Cards section for the available types.
dash::TemperatureCard temperature(dashboard, "Temperature");
dash::HumidityCard humidity(dashboard, "Humidity");Connect to Wi-Fi and start the server
In setup(), connect to your access point and start the server with server.begin(). The ssid and password variables are declared in the complete sketch below.
void setup() {
Serial.begin(115200);
/* Connect WiFi */
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 values and send updates
Set new widget values, then call dashboard.sendUpdates() to push the changes to all connected clients. You can call these methods anywhere in your sketch; this example uses loop() for simplicity.
void loop() {
/* Update Card Values */
temperature.setValue((int)random(0, 50));
humidity.setValue((int)random(0, 100));
/* Send Updates to our Dashboard (realtime) */
dashboard.sendUpdates();
/*
Delay is just for demonstration purposes in this example,
Replace this code with 'millis interval' in your final project.
*/
delay(3000);
}delay() blocks the loop. In production code, schedule updates with a non-blocking millis() interval instead.
Upload the sketch
Set ssid and password to the credentials of your access point, upload the sketch and open the IP address printed on the serial monitor in a browser.
/*
-----------------------
ESPDASH Lite - Basic Example
-----------------------
Skill Level: Intermediate
In this example we will be creating a basic dashboard which consists
of some cards and then update them in realtime ( at 3s interval ).
Github: https://github.com/ayushsharma82/ESP-DASH
WiKi: https://docs.espdash.pro
Works with ESP32, RP2040+W and RP2350+W based devices / projects.
-------------------------------
Upgrade to ESP-DASH Pro: https://store.softt.io/products/esp-dash-pro
*/
#include <Arduino.h>
#if 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>
/* Your WiFi Credentials */
const char* ssid = ""; // SSID
const char* password = ""; // Password
/* Start Webserver */
AsyncWebServer server(80);
/* Attach ESP-DASH to AsyncWebServer */
ESPDash dashboard(server);
/*
Dashboard Cards
*/
dash::TemperatureCard temperature(dashboard, "Temperature");
dash::HumidityCard humidity(dashboard, "Humidity");
void setup() {
Serial.begin(115200);
/* Connect WiFi */
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.setValue((int)random(0, 50));
humidity.setValue((int)random(0, 100));
/* Send Updates to our Dashboard (realtime) */
dashboard.sendUpdates();
/*
Delay is just for demonstration purposes in this example,
Replace this code with 'millis interval' in your final project
for non-blocking operation.
*/
delay(3000);
}Next steps
- Cards: display values and capture user input.
- Charts: plot data series on the dashboard.
- Statistics: show device information and other key values.
- Examples: browse the example sketches.