Skip to content

Commit 7b02f7b

Browse files
ayushsharma82ayushsharma82
authored
Create using-with-espdash/page.md
1 parent c0dba0a commit 7b02f7b

File tree

1 file changed

+192
-0
lines changed
  • src/app/docs/intro/using-with-espdash

1 file changed

+192
-0
lines changed

‎src/app/docs/intro/using-with-espdash/page.md‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
---
2+
title: Using with ESP-DASH
3+
nextjs:
4+
metadata:
5+
title: Using with ESP-DASH
6+
description: Learn how to use NetWizard with ESP-DASH library
7+
---
8+
9+
## What is ESP-DASH?
10+
11+
ESP-DASH is a on-device dashboard library for wireless microcontrollers through which you can setup your very own web dashboard to visualize or control things in your firmware.
12+
13+
## Sample Code
14+
15+
Using NetWizard along with ESP-DASH can be easily done as illustrated in this sample code. You can alsp skip to bottom to see what changes were applied.
16+
17+
{% callout title="Important" %}
18+
As ESP-DASH works with AsyncWebServer library please make sure you have enabled async mode of NetWizard before compiling your firmware. Ref: [Async Mode](/intro/async-mode)
19+
{% /callout %}
20+
21+
```cpp
22+
#include <Arduino.h>
23+
#if defined(ESP8266)
24+
/* ESP8266 Dependencies */
25+
#include <ESP8266WiFi.h>
26+
#include <ESPAsyncTCP.h>
27+
#include <ESPAsyncWebServer.h>
28+
#elif defined(ESP32)
29+
/* ESP32 Dependencies */
30+
#include <WiFi.h>
31+
#include <AsyncTCP.h>
32+
#include <ESPAsyncWebServer.h>
33+
#elif defined(TARGET_RP2040) || defined(PICO_RP2040) || defined(TARGET_RP2350) || defined(PICO_RP2350)
34+
/* RP2040 or RP2350 Dependencies */
35+
#include <WiFi.h>
36+
#include <RPAsyncTCP.h>
37+
#include <ESPAsyncWebServer.h>
38+
#endif
39+
#include <NetWizard.h>
40+
#include <ESPDash.h>
41+
42+
// Start AsyncWebServer
43+
AsyncWebServer server(80);
44+
45+
// Initialize NetWizard
46+
NetWizard NW(&server);
47+
48+
// Setup configuration parameters
49+
NetWizardParameter nw_header(&NW, NW_HEADER, "MQTT");
50+
NetWizardParameter nw_divider1(&NW, NW_DIVIDER);
51+
NetWizardParameter nw_mqtt_host(&NW, NW_INPUT, "Host", "", "mqtt.example.com");
52+
NetWizardParameter nw_mqtt_port(&NW, NW_INPUT, "Port", "", "1883");
53+
54+
// Initialize ESP-DASH
55+
ESPDash dashboard(&server, "/dashboard", true); // <--- We initialize ESP-DASH at "/dashboard" URL so that NetWizard logic is not distrupted
56+
57+
/*
58+
Dashboard Cards
59+
Format - (Dashboard Instance, Card Type, Card Name, Card Symbol(optional) )
60+
*/
61+
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
62+
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");
63+
64+
65+
void setup(void) {
66+
delay(3000);
67+
Serial.begin(115200);
68+
Serial.println("");
69+
Serial.println("Starting NetWizard & ESP-DASH Demo...");
70+
71+
// ----------------------------
72+
// Configure NetWizard Strategy
73+
// ----------------------------
74+
// BLOCKING - Connect to WiFi and wait till portal is active
75+
// (blocks execution after autoConnect)
76+
//
77+
// NON_BLOCKING - Connect to WiFi and proceed while portal is active in background
78+
// (does not block execution after autoConnect)
79+
NW.setStrategy(NetWizardStrategy::BLOCKING);
80+
81+
// Listen for connection status changes
82+
NW.onConnectionStatus([](NetWizardConnectionStatus status) {
83+
String status_str = "";
84+
85+
switch (status) {
86+
case NetWizardConnectionStatus::DISCONNECTED:
87+
status_str = "Disconnected";
88+
break;
89+
case NetWizardConnectionStatus::CONNECTING:
90+
status_str = "Connecting";
91+
break;
92+
case NetWizardConnectionStatus::CONNECTED:
93+
status_str = "Connected";
94+
break;
95+
case NetWizardConnectionStatus::CONNECTION_FAILED:
96+
status_str = "Connection Failed";
97+
break;
98+
case NetWizardConnectionStatus::CONNECTION_LOST:
99+
status_str = "Connection Lost";
100+
break;
101+
case NetWizardConnectionStatus::NOT_FOUND:
102+
status_str = "Not Found";
103+
break;
104+
default:
105+
status_str = "Unknown";
106+
}
107+
108+
Serial.printf("NW connection status changed: %s\n", status_str.c_str());
109+
if (status == NetWizardConnectionStatus::CONNECTED) {
110+
// Local IP
111+
Serial.printf("Local IP: %s\n", NW.localIP().toString().c_str());
112+
// Gateway IP
113+
Serial.printf("Gateway IP: %s\n", NW.gatewayIP().toString().c_str());
114+
// Subnet mask
115+
Serial.printf("Subnet mask: %s\n", NW.subnetMask().toString().c_str());
116+
}
117+
});
118+
119+
// Listen for portal state changes
120+
NW.onPortalState([](NetWizardPortalState state) {
121+
String state_str = "";
122+
123+
switch (state) {
124+
case NetWizardPortalState::IDLE:
125+
state_str = "Idle";
126+
break;
127+
case NetWizardPortalState::CONNECTING_WIFI:
128+
state_str = "Connecting to WiFi";
129+
break;
130+
case NetWizardPortalState::WAITING_FOR_CONNECTION:
131+
state_str = "Waiting for Connection";
132+
break;
133+
case NetWizardPortalState::SUCCESS:
134+
state_str = "Success";
135+
break;
136+
case NetWizardPortalState::FAILED:
137+
state_str = "Failed";
138+
break;
139+
case NetWizardPortalState::TIMEOUT:
140+
state_str = "Timeout";
141+
break;
142+
default:
143+
state_str = "Unknown";
144+
}
145+
146+
Serial.printf("NW portal state changed: %s\n", state_str.c_str());
147+
});
148+
149+
NW.onConfig([&]() {
150+
Serial.println("NW onConfig Received");
151+
152+
// Print new parameter values
153+
Serial.printf("Host: %s\n", nw_mqtt_host.getValueStr().c_str());
154+
Serial.printf("Port: %s\n", nw_mqtt_port.getValueStr().c_str());
155+
return true; // <-- return true to approve request, false to reject
156+
});
157+
158+
// Start NetWizard
159+
NW.autoConnect("NetWizard Demo", "");
160+
161+
// Check if configured
162+
if (NW.isConfigured()) {
163+
Serial.println("Device is configured");
164+
} else {
165+
Serial.println("Device is not configured!");
166+
}
167+
168+
// Demo Route
169+
server.on("/demo", HTTP_GET, []() {
170+
server.send(200, "text/plain", "Hi! This is NetWizard Demo.");
171+
});
172+
173+
// Internal rewrite for ESP-DASH dashboard
174+
server.rewrite("/", "/dashboard").setFilter(ON_STA_FILTER);
175+
176+
// Start WebServer
177+
server.begin();
178+
}
179+
180+
void loop(void) {
181+
// NetWizard Loop Task
182+
NW.loop();
183+
}
184+
```
185+
186+
## So what was the catch?
187+
188+
1. We had to initialze ESP-DASH at "/dashboard" URL so that it doesn't clash with the NetWizard's portal in AP mode.
189+
2. Create a internal `rewrite` inside `setup()` block for STA connections, so that we display the dashboard on "/" when the device is being accessed on LAN.
190+
191+
192+
Once these changes were applied, both libraries work with eachother without any problems!

0 commit comments

Comments
 (0)