Anniversary Sale · up to 80% off all librariesEnds Nov 9Shop now
SOFTTDocs

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:

  1. Serve ESP-DASH at a separate URI. Initialize the dashboard at /dashboard with the custom URI constructor, so it does not conflict with the portal page that NetWizard serves at / in access point mode.
  2. Rewrite / for station clients. Add server.rewrite("/", "/dashboard").setFilter(ON_STA_FILTER) so that users on the local network who open the device's root URL see the dashboard.

Example

main.cpp
#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

On this page