Arduino Nano ESP32 Custom WebApp mit DIYables ESP32 WebApps Library
Übersicht
Das CustomWebApp-Beispiel in der DIYables ESP32 WebApps Library bietet eine Startvorlage zum Erstellen von browserbasierten Schnittstellen, die sich in das vorhandene DIYables-Web-Apps-Ökosystem auf dem Arduino Nano ESP32 integrieren. Die Vorlage stellt bidirektionale WebSocket-Kommunikation zwischen einem Browser und dem Board her: Der Browser kann Textbefehle an das Board senden, und das Board kann jederzeit Daten an den Browser übertragen.
Das Beispiel besteht aus vier Dateien, die zusammen im selben Sketch-Ordner aufbewahrt werden müssen:
- CustomWebApp.ino — Haupt-Sketch mit Anwendungslogik
- CustomWebApp.h — Header, das die Seitklassen-Schnittstelle definiert
- CustomWebApp.cpp — Klassenimplementierung und WebSocket-Nachrichtenrouting
- custom_page_html.h — eingebettetes HTML, CSS und JavaScript für die Browser-Seite
Was dieses Tutorial abdeckt
- Ausführen der Standardvorlage für benutzerdefinierte Apps auf Arduino Nano ESP32
- Verständnis des App-Identifizierungssystems, das Nachrichten zwischen mehreren Apps isoliert
- Ändern der Vorlage zur Bearbeitung benutzerdefinierter Hardware-Befehle
- Senden von Sensordaten zur Laufzeit an den Browser
- Anpassung des HTML, CSS und JavaScript der eingebetteten Webseite
- Verwaltung mehrerer benutzerdefinierter Apps in einem Projekt ohne Nachrichtenkonflikte
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn Sie den Arduino Nano ESP32 zum ersten Mal verwenden, lesen Sie das Tutorial zum Einrichten der Arduino Nano ESP32-Entwicklungsumgebung.
- Verbinden Sie das Arduino Nano ESP32-Board mit Ihrem Computer über ein USB-Kabel.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das entsprechende Board (z. B. Arduino Nano ESP32) und den COM-Port.
- Navigieren Sie zum Symbol Bibliotheken in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables ESP32 WebApps", und finden Sie dann die DIYables ESP32 WebApps Library von DIYables
- Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Sie werden aufgefordert, einige andere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- Gehen Sie in der Arduino IDE zu Datei Beispiele DIYables ESP32 WebApps CustomWebApp. Die IDE öffnet vier Dateien: CustomWebApp.ino, CustomWebApp.h, CustomWebApp.cpp und custom_page_html.h.
- Aktualisieren Sie die WiFi-Anmeldedaten in CustomWebApp.ino:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um den Code auf Arduino Nano ESP32 hochzuladen
- Öffnen Sie den seriellen Monitor
- Die Ausgabe des seriellen Monitors sollte wie folgt aussehen:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Starting Custom WebApp...
INFO: Added app /
INFO: Added app /custom
DIYables WebApp Library
Platform: Arduino Nano ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
Web Interface: http://192.168.0.2
WebSocket: ws://192.168.0.2:81
Available Applications:
Home Page: http://192.168.0.2/
Custom WebApp: http://192.168.0.2/custom
==========================================
- Wenn nichts angezeigt wird, drücken Sie die Zurücksetzen-Taste auf dem Board.
- Geben Sie die IP-Adresse aus dem seriellen Monitor in einen Browser im selben Netzwerk ein.
- Beispiel: http://192.168.0.2
- Die Startseite zeigt eine Karte für die benutzerdefinierte Anwendung:
- Wählen Sie die Custom WebApp-Karte aus, um die Seite zu öffnen:
- Die Seite ist auch direkt unter http://192.168.0.2/custom erreichbar.
Überprüfung der Standardvorlage
Die Standardvorlage zeigt die grundlegende bidirektionale Kommunikation:
- Geben Sie einen beliebigen Text in das Eingabefeld auf der Seite ein und klicken Sie auf Senden. Das Board empfängt die Nachricht und gibt sie zurück. Die Webseite zeigt an: Echo: <Ihre Nachricht>
- Das Board sendet alle 5 Sekunden eine Uptime-Nachricht an alle verbundenen Browser: Arduino uptime: X seconds
- Alle eingegangenen Nachrichten werden im seriellen Monitor gedruckt.
App-Identifizierungssystem
Die Bibliothek ermöglicht es mehreren Web-Apps, einen WebSocket-Server auf Port 81 gemeinsam zu nutzen. Jede App ist durch eine kurze Präfix-Zeichenkette, die sogenannte App-Kennung, isoliert. Die Kennung wird vor jeder Nachricht in beide Richtungen vorangestellt.
Board-Seite (CustomWebApp.h / CustomWebApp.cpp)
// CustomWebApp.h
class CustomWebAppPage : public DIYablesWebAppPageBase {
private:
static const String APP_IDENTIFIER;
};
// CustomWebApp.cpp
const String CustomWebAppPage::APP_IDENTIFIER = "CUSTOM:";
// Receiving: strip identifier before passing to callback
void CustomWebAppPage::handleWebSocketMessage(const String& message) {
if (message.startsWith(APP_IDENTIFIER)) {
String payload = message.substring(APP_IDENTIFIER.length());
// invoke user callback with payload
}
}
// Sending: prepend identifier before broadcasting
void CustomWebAppPage::sendToWeb(const String& message) {
broadcastToAllClients(APP_IDENTIFIER + message);
}
Browser-Seite (custom_page_html.h)
const APP_IDENTIFIER = 'CUSTOM:';
// Receiving
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// display message
}
};
// Sending
ws.send(APP_IDENTIFIER + userInput);
Der Identifizierungswert in der .cpp-Datei und der .h-Datei muss genau übereinstimmen. Bei der Erstellung zusätzlicher benutzerdefinierter Apps muss jeder eine eindeutige Kennung zugewiesen werden.
Reservierte Kennungen — die folgenden werden bereits von integrierten Apps verwendet und dürfen nicht wiederverwendet werden:
- App-Kennungen: CHAT:, MONITOR:, PLOTTER:, DIGITAL_PINS:, JOYSTICK:, SLIDER:, TABLE:, RTC:, ROTATOR:, GAUGE:
- Sub-Protokoll-Kennungen: TIME:, DATETIME:, JOYSTICK_CONFIG:, PLOTTER_DATA:, PLOTTER_CONFIG:, SLIDER_VALUES:, TABLE_CONFIG:, TABLE_DATA:, VALUE_UPDATE:, PIN_CONFIG:, PIN_STATES:, PIN_UPDATE:
Anpassung der Vorlage
Bearbeitung von Hardware-Befehlen
Erweitern Sie den Rückruf in CustomWebApp.ino, um auf bestimmte Befehle zu reagieren:
customPage.onCustomMessageReceived([](const String& message) {
Serial.println("Received: " + message);
if (message == "led_on") {
digitalWrite(LED_BUILTIN, HIGH);
customPage.sendToWeb("LED turned ON");
}
else if (message == "led_off") {
digitalWrite(LED_BUILTIN, LOW);
customPage.sendToWeb("LED turned OFF");
}
else if (message.startsWith("servo:")) {
int angle = message.substring(6).toInt();
// servo.write(angle);
customPage.sendToWeb("Servo moved to " + String(angle) + " degrees");
}
else if (message == "get_temperature") {
float temp = readTemperatureSensor();
customPage.sendToWeb("Temperature: " + String(temp) + " C");
}
});
Senden von Sensordaten aus der Schleife
void loop() {
webAppsServer.loop();
static unsigned long lastSend = 0;
if (millis() - lastSend > 3000) {
int lightLevel = analogRead(A0);
customPage.sendToWeb("Light: " + String(lightLevel));
lastSend = millis();
}
}
Anpassung der Webseite (HTML)
Bearbeiten Sie custom_page_html.h, um Schaltflächen und Anzeigeelemente hinzuzufügen:
<div>
<h3>Device Control</h3>
<button onclick="send('led_on')">LED ON</button>
<button onclick="send('led_off')">LED OFF</button>
<label>Servo Angle:</label>
<input type="range" id="servoSlider" min="0" max="180" value="90"
onchange="send('servo:' + this.value)">
</div>
<div>
<h3>Sensor Data</h3>
<div>Temperature: <span id="tempValue">--</span></div>
<div>Light Level: <span id="lightValue">--</span></div>
</div>
Anpassung der Nachrichtenverarbeitung (JavaScript)
Aktualisieren Sie ws.onmessage in custom_page_html.h, um bestimmte Felder zu analysieren:
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
if (message.startsWith('Temperature:')) {
document.getElementById('tempValue').textContent = message.split(':')[1].trim();
}
else if (message.startsWith('Light:')) {
document.getElementById('lightValue').textContent = message.split(':')[1].trim();
}
}
};
Anpassung des URL-Pfads
Ändern Sie den Pfad, in dem die Seite bereitgestellt wird, indem Sie den Konstruktor in CustomWebApp.cpp ändern:
// Default: accessible at /custom
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") {}
// Change to a descriptive path
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/temperature") {}
Der Pfad muss mit / beginnen und darf keine Pfade duplizieren, die von integrierten Apps verwendet werden (/chat, /monitor, /plotter, /web-digital-pins, /web-joystick, /web-slider, /web-table, /web-rtc, /web-rotator, /web-gauge).
Verwaltung mehrerer benutzerdefinierter Apps
Bei Hinzufügen von mehr als einer benutzerdefinierten Seite muss jede eine eindeutige Kennung, einen eindeutigen Pfad und einen eindeutigen Klassennamen haben.
Dateistruktur
MyProject/
├── MyProject.ino
├── TemperatureApp.h
├── TemperatureApp.cpp
├── temperature_page_html.h
├── MotorApp.h
├── MotorApp.cpp
├── motor_page_html.h
├── SensorApp.h
├── SensorApp.cpp
└── sensor_page_html.h
Registrierung mehrerer Apps
#include "TemperatureApp.h"
#include "MotorApp.h"
#include "SensorApp.h"
DIYablesHomePage homePage;
TemperatureMonitorPage tempPage;
MotorControllerPage motorPage;
SensorDashboardPage sensorPage;
void setup() {
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&tempPage);
webAppsServer.addApp(&motorPage);
webAppsServer.addApp(&sensorPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
tempPage.onTemperatureMessageReceived([](const String& message) {
// handle temperature commands
});
motorPage.onMotorMessageReceived([](const String& message) {
// handle motor commands
});
}
Eindeutige Kennungen pro App
// TemperatureApp.cpp
const String TemperatureMonitorPage::APP_IDENTIFIER = "TEMP:";
// MotorApp.cpp
const String MotorControllerPage::APP_IDENTIFIER = "MOTOR:";
// SensorApp.cpp
const String SensorDashboardPage::APP_IDENTIFIER = "SENSOR:";
Die entsprechenden JavaScript-Konstanten in jeder *_page_html.h-Datei müssen die gleichen Zeichenfolgenwerte verwenden.