Using with Other SOFTT Libraries
Combine NetWizard with ESP-DASH, ElegantOTA and WebSerial in the same project, sharing one AsyncWebServer.
ESP-DASH, ElegantOTA, NetWizard and WebSerial are designed to work together in the same project. A single sketch can provide WiFi provisioning (NetWizard), a real-time dashboard (ESP-DASH), over-the-air updates (ElegantOTA) and a remote serial terminal (WebSerial), all served by one AsyncWebServer instance. The Lite and Pro editions of each library can be mixed freely.
Requirements
- One shared
AsyncWebServer. Create a singleAsyncWebServer server(80);and pass it to every library. Callserver.begin()once, after all libraries are initialized. - Async mode for ElegantOTA and NetWizard. ESP-DASH and WebSerial only run on
ESPAsyncWebServer. ElegantOTA and NetWizard default to the coreWebServer, so enable their async mode by settingELEGANTOTA_USE_ASYNC_WEBSERVER=1andNETWIZARD_USE_ASYNC_WEBSERVER=1. See ElegantOTA async mode and NetWizard async mode. - One copy of each dependency. Install a single copy of
ESPAsyncWebServerandAsyncTCP(ESP32) orRPAsyncTCP(RP2040/RP2350) whose version satisfies the highest minimum listed on the installation page of each library you use. Do not install two forks ofESPAsyncWebServerside by side. - A board that every library supports. ESP32 is supported by all four libraries. Check each library's supported boards before targeting RP2040, RP2350 or ESP8266: for example, ESP-DASH v5 and NetWizard do not support ESP8266.
Default paths
Each library registers its own routes on the shared server. The defaults do not collide, except for ESP-DASH and the NetWizard portal, which both use /:
| Library | Default path | How to change it |
|---|---|---|
| ESP-DASH | / | Pass a URI to the constructor: ESPDash dashboard(server, "/dashboard", true); (custom URI) |
| ElegantOTA | /update | Fixed |
| WebSerial | /webserial | Pass a path to begin(): WebSerial.begin(&server, "/terminal"); |
| NetWizard | / (captive portal, access point clients only) | Fixed |
When NetWizard is part of the project, serve ESP-DASH at /dashboard and add server.rewrite("/", "/dashboard").setFilter(ON_STA_FILTER); so that clients on the local network still see the dashboard at the device's root URL. See NetWizard with ESP-DASH.
Example
The sketch below combines all four libraries on an ESP32. Build it with -D ELEGANTOTA_USE_ASYNC_WEBSERVER=1 -D NETWIZARD_USE_ASYNC_WEBSERVER=1, or set both macros in the library headers as described on the async mode pages.
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <NetWizard.h> // NetWizard Pro: <NetWizardPro.h>
#include <ESPDash.h>
#include <ElegantOTA.h> // ElegantOTA Pro: <ElegantOTAPro.h>
#include <WebSerial.h>
AsyncWebServer server(80);
// WiFi provisioning: captive portal at / for access point clients
NetWizard NW(&server);
// Dashboard at /dashboard, so it does not conflict with the portal
ESPDash dashboard(server, "/dashboard", true);
dash::TemperatureCard temperature(dashboard, "Temperature");
unsigned long lastUpdate = 0;
void setup() {
Serial.begin(115200);
// Connect to the saved network, or start the captive portal
NW.setStrategy(NetWizardStrategy::BLOCKING);
NW.autoConnect("My Device", "");
// Over-the-air updates at /update
ElegantOTA.begin(&server);
// Remote serial terminal at /webserial
WebSerial.begin(&server);
WebSerial.onMessage([](const String& msg) {
Serial.println(msg);
});
// Show the dashboard at / for clients on the local network
server.rewrite("/", "/dashboard").setFilter(ON_STA_FILTER);
server.begin();
}
void loop() {
NW.loop();
ElegantOTA.loop();
WebSerial.loop();
if (millis() - lastUpdate > 3000) {
lastUpdate = millis();
temperature.setValue((int)random(0, 50));
dashboard.sendUpdates();
WebSerial.println("Dashboard updated");
}
}Each library's loop() method must be called on every iteration, and loop() must not block, so that the portal, OTA updates and buffered terminal output keep running alongside the dashboard.