Using with ESP-DASH
Run a NetWizard captive portal and an ESP-DASH dashboard on the same AsyncWebServer.
ESP-DASH is an on-device dashboard library for wireless microcontrollers that lets you display and control values in your firmware from a web interface. NetWizard and ESP-DASH can share one AsyncWebServer: NetWizard provides WiFi setup, and ESP-DASH provides the dashboard once the device is on the network.
Enable async mode
ESP-DASH requires ESPAsyncWebServer. Enable async mode in NetWizard before compiling.
Required changes
Two changes let the libraries coexist:
- Serve ESP-DASH at a separate URI. Initialize the dashboard at
/dashboardwith the custom URI constructor, so it does not conflict with the portal page that NetWizard serves at/in access point mode. - Rewrite
/for station clients. Addserver.rewrite("/", "/dashboard").setFilter(ON_STA_FILTER)so that users on the local network who open the device's root URL see the dashboard.
Example
#include <Arduino.h>
#if defined(ESP32)
#include <WiFi.h>
#include <AsyncTCP.h>
#elif defined(TARGET_RP2040) || defined(PICO_RP2040) || defined(TARGET_RP2350) || defined(PICO_RP2350)
#include <WiFi.h>
#include <RPAsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>
#include <NetWizard.h> // NetWizard Pro: #include <NetWizardPro.h>
#include <ESPDash.h>
AsyncWebServer server(80);
// Initialize NetWizard
NetWizard NW(&server);
// Configuration parameters
NetWizardParameter nw_header(&NW, NW_HEADER, "MQTT");
NetWizardParameter nw_divider1(&NW, NW_DIVIDER);
NetWizardParameter nw_mqtt_host(&NW, NW_INPUT, "Host", "", "mqtt.example.com");
NetWizardParameter nw_mqtt_port(&NW, NW_INPUT, "Port", "", "1883");
// Serve ESP-DASH at /dashboard so that it does not conflict with the portal
ESPDash dashboard(server, "/dashboard", true);
// Dashboard cards
dash::TemperatureCard<int> tempInt(dashboard, "Temperature", "°C");
dash::HumidityCard<int> humInt(dashboard, "Humidity", "%");
void setup(void) {
delay(3000);
Serial.begin(115200);
Serial.println("");
Serial.println("Starting NetWizard & ESP-DASH Demo...");
NW.setStrategy(NetWizardStrategy::BLOCKING);
NW.onConnectionStatus([](NetWizardConnectionStatus status) {
if (status == NetWizardConnectionStatus::CONNECTED) {
Serial.printf("Local IP: %s\n", NW.localIP().toString().c_str());
Serial.printf("Gateway IP: %s\n", NW.gatewayIP().toString().c_str());
Serial.printf("Subnet mask: %s\n", NW.subnetMask().toString().c_str());
}
});
NW.onPortalState([](NetWizardPortalState state) {
Serial.printf("NW portal state changed: %d\n", (int)state);
});
NW.onConfig([&]() {
Serial.printf("Host: %s\n", nw_mqtt_host.getValueStr().c_str());
Serial.printf("Port: %s\n", nw_mqtt_port.getValueStr().c_str());
return true; // accept the submitted values
});
// Connect to the saved network, or start the captive portal
NW.autoConnect("NetWizard Demo", "");
if (NW.isConfigured()) {
Serial.println("Device is configured");
} else {
Serial.println("Device is not configured");
}
// Application route
server.on("/demo", HTTP_GET, [](AsyncWebServerRequest* request) {
request->send(200, "text/plain", "Hi! This is NetWizard Demo.");
});
// Show the dashboard at / for clients on the local network
server.rewrite("/", "/dashboard").setFilter(ON_STA_FILTER);
server.begin();
}
void loop(void) {
NW.loop();
}The Example page shows complete onConnectionStatus and onPortalState handlers that convert each value to a readable string.
Next steps
- ESP-DASH Cards: add widgets to the dashboard.
- Callbacks: react to connection and portal changes.