Arduino benutzerdefiniertes Web-App-Beispiel – Einfaches Tutorial zur Weboberfläche für Anfänger
Überblick
Dieses Beispiel bietet eine vollständige Vorlage zur Erstellung eigener benutzerdefinierter Webanwendungen, die sich nahtlos in die DIYables WebApps-Bibliothek integrieren.
Die CustomWebApp-Vorlage ist perfekt für Anfänger, die ihre eigene Weboberfläche in das DIYables WebApps-Ökosystem integrieren möchten! Dieses Tutorial zeigt dir, wie du eine einfache Webseite mit echtzeitigem bidirektionalem Datenaustausch zwischen dem Webbrowser und dem Arduino über WebSocket erstellen kannst. Das Folgende kann:
- Textnachrichten senden vom Webbrowser zum Arduino sofort über WebSocket
- Nachrichten empfangen vom Arduino und sie in Echtzeit auf der Webseite anzeigen
- Eine dauerhafte WebSocket-Verbindung aufrechterhalten für kontinuierliche Kommunikation
- Automatische Wiederverbindung, wenn die WebSocket-Verbindung verloren geht
- Funktioniert auf mobilen Geräten mit responsivem Design
Entworfen für Arduino Uno R4 WiFi und DIYables STEM V4 IoT - Diese Vorlage lässt sich perfekt in bestehende DIYables-Web-Apps integrieren und bildet die Grundlage für den Aufbau eigener maßgeschneiderter IoT-Schnittstellen!
Diese Vorlage bietet nur minimalen Code, um Ihnen den Einstieg zu erleichtern. Benutzer können eigene anspruchsvolle Webanwendungen entwickeln, indem sie diese Vorlage anpassen. Grundlegende Kenntnisse der Webprogrammierung (HTML, CSS, JavaScript) werden empfohlen, um die Weboberfläche anzupassen und fortgeschrittene Funktionen hinzuzufügen.
Was du lernen wirst
- Wie man eine benutzerdefinierte Webanwendung erstellt, die sich in die DIYables WebApps-Bibliothek integriert
- Wie man Ihre benutzerdefinierte Seite in das DIYables Web-Apps-Ökosystem integriert
- Wie man Textnachrichten vom Webbrowser an Arduino sendet
- Wie man Daten vom Arduino zum Webbrowser sendet
- Wie man WebSocket-Verbindungen verwaltet und automatisches Wiederverbinden einrichtet
- Wie man mobilfreundliche, responsive Weboberflächen erstellt
- Wie man das DIYables WebApps-Template-System für eine schnelle Entwicklung verwendet
Funktionen
- DIYables WebApps-Integration: Integriert sich nahtlos in das DIYables WebApps-Bibliotheks-Ökosystem.
- Minimaler Vorlagen-Code: Stellt eine grundlegende Basis bereit, die Sie erweitern und anpassen können.
- Vorlagenbasierte Entwicklung: Vollständiger Ausgangspunkt, den Sie ändern können, um anspruchsvolle Anwendungen zu erstellen.
- Einfache Textnachrichtenübermittlung: Nachrichten zwischen Webbrowser und Arduino senden.
- Automatische Wiederverbindung: Stellt automatisch die Verbindung wieder her, wenn sie verloren geht.
- Mobilfreundlich: Funktioniert einwandfrei auf Smartphones, Tablets und Computern.
- Anfängerfreundlich: Sauberer, leicht verständlicher Code.
- Erweiterbares Framework: Erfordert grundlegende Web-Programmierkenntnisse (HTML/CSS/JavaScript) für fortgeschrittene Anpassungen.
- Plattform-Erweiterbarkeit: Derzeit für Arduino Uno R4 WiFi implementiert, kann aber auf andere Hardware-Plattformen erweitert werden. Siehe DIYables_WebApps_ESP32
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino enthalten) | |
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 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.
Wie man anfängt
Sie können damit beginnen, Ihre benutzerdefinierte Webanwendung für das Arduino Uno R4/DIYables STEM V4 IoT-Board zu erstellen, indem Sie die folgenden Hauptschritte durchlaufen:
- Führen Sie die Standardvorlage für benutzerdefinierte Apps auf Ihrem Arduino-Board aus.
- Testen und Verifizieren Sie, dass die Standard-Web-App für benutzerdefinierte Apps korrekt funktioniert.
- Verstehen Sie das Kommunikationsprotokoll und wie es im Hintergrund funktioniert.
- Passen Sie die Vorlage an Ihre Anwendung an.
- Verwalten Sie mehrere benutzerdefinierte Web-Apps – Wesentlicher Leitfaden zur Vermeidung von Konflikten.
Lass uns eins nach dem anderen anfangen.
Führen Sie die Standardvorlage für benutzerdefinierte Apps auf Ihrem Arduino-Board aus.
Schnelle Schritte
- Wenn dies das erste Mal ist, dass Sie den Arduino Uno R4 WiFi/DIYables STEM V4 IoT verwenden, lesen Sie das Tutorial zur Einrichtung der Umgebung für Arduino Uno R4 WiFi/DIYables STEM V4 IoT in der Arduino IDE Anleitung zur Einrichtung der Umgebung für Arduino Uno R4 WiFi/DIYables STEM V4 IoT in der Arduino IDE
- Schließen Sie das Arduino Uno R4/DIYables STEM V4 IoT-Board mit einem USB-Kabel an Ihren Computer an
- Öffnen Sie die Arduino IDE auf Ihrem Computer
- Wählen Sie das passende Arduino Uno R4-Board (z. B. Arduino Uno R4 WiFi) und den COM-Port
- Navigieren Sie zum Libraries-Symbol in der linken Leiste der Arduino IDE
- Suchen Sie "DIYables WebApps", und finden Sie dann die DIYables WebApps-Bibliothek von DIYables
- Klicken Sie auf die Schaltfläche Install, um die Bibliothek zu installieren
- Sie werden gefragt, einige weitere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren
- Im Arduino IDE gehen Sie zu Datei > Beispiele > DIYables WebApps > CustomWebApp
- Sie sehen vier Dateien, die die vollständige Vorlage der benutzerdefinierten Web-App ausmachen:
- CustomWebApp.ino - Haupt-Arduino-Code (hier fügen Sie Ihre benutzerdefinierte Logik hinzu!)
- CustomWebApp.h - Header-Datei (definiert die Schnittstelle zur DIYables WebApps-Bibliothek)
- CustomWebApp.cpp - Implementierungsdatei (verwaltet die Integration mit dem Bibliotheks-Framework)
- custom_page_html.h - Webseitengestaltung (Passen Sie hier Ihre Weboberfläche an!)
- Konfigurieren Sie die WLAN-Einstellungen, indem Sie diese Zeilen in CustomWebApp.ino ändern:
const char WIFI_SSID[] = "YOUR_WIFI_NAME";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Schritt 5: Hochladen und Testen
- Klicken Sie auf die Schaltfläche Hochladen im Arduino IDE, um Code auf den Arduino UNO R4/DIYables STEM V4 IoT hochzuladen.
- Öffnen Sie den seriellen Monitor, um den Verbindungsstatus zu sehen.
- Notieren Sie die im seriellen Monitor angezeigte IP-Adresse.
- Öffnen Sie den seriellen Monitor.
- Überprüfen Sie das Ergebnis im seriellen Monitor. Es sieht so aus wie unten dargestellt.
COM6
Starting Custom WebApp...
INFO: Added app /
INFO: Added app /custom
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
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
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Wenn Sie nichts sehen, starten Sie das Arduino-Board neu.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Beispiel: http://192.168.0.2
- Sie sehen die Startseite wie im unten gezeigten Bild:
- Klicken Sie auf den Web Custom-Link, dann sehen Sie die Benutzeroberfläche der Web Custom-App wie unten dargestellt:
- Oder Sie können die Seite auch direkt über die IP-Adresse aufrufen, gefolgt von /custom. Zum Beispiel: http://[IP_ADDRESS]/custom
Testen und Verifizieren, dass die standardmäßige benutzerdefinierte Webanwendung korrekt funktioniert
Wenn Sie das Standard-Template CustomWebApp ausführen, sehen Sie Folgendes:
In der Weboberfläche:
- Verbindungsstatus: Zeigt „Verbunden“ in Blau an, wenn der WebSocket aktiv ist
- Nachrichten-Eingabefeld: Textfeld zum Eingeben von Nachrichten an den Arduino
- Senden-Button: Klicken Sie, um Ihre Nachricht zu senden (oder Enter drücken)
- Arduino-Nachrichtenanzeige: Zeigt Nachrichten, die vom Arduino empfangen werden, in blauer Schrift
Arduino-Verhalten:
- Echo-Antwort: Wenn Sie "Hallo" vom Web aus senden, antwortet Arduino mit "Echo: Hallo"
- Periodische Updates: Arduino sendet alle 5 Sekunden Meldungen zur Betriebszeit: "Arduino-Betriebszeit: X Sekunden"
- Serieller Monitor: Alle empfangenen Nachrichten werden zur Fehlersuche protokolliert
Kommunikation testen:
- Geben Sie eine Nachricht in das Eingabefeld ein (z. B. "Testnachricht")
- Klicken Sie auf Senden oder drücken Sie die Eingabetaste
- Überprüfen Sie den seriellen Monitor – Sie sollten sehen: "Vom Web empfangen: Testnachricht"
- Webseite überprüfen – Sie sollten sehen: "Echo: Testnachricht"
- Warten Sie ein paar Sekunden – Sie sehen regelmäßige Laufzeitmeldungen, die alle 3 Sekunden aktualisiert werden (z. B. "Arduino-Laufzeit: 15 Sekunden", "Arduino-Laufzeit: 18 Sekunden", usw.)
Verstehen Sie das Kommunikationsprotokoll und wie es im Hintergrund funktioniert
Das Verständnis der internen Mechanismen hilft Ihnen, die Vorlage effektiv anzupassen.
App-Identifikationssystem
Die CustomWebApp-Vorlage verwendet eindeutige Nachrichtentags (genannt „App-Identifikatoren“), die Arduino-Code und Web-Clients dabei helfen, Nachrichten zu filtern, die ihnen gehören. Das ist entscheidend, weil Ihre Anwendung möglicherweise mehrere Web-Apps enthält, und jede App muss nur ihre eigenen Nachrichten verarbeiten, während andere ignoriert werden:
Arduino-Seite (CustomWebApp.h und CustomWebApp.cpp)
// In CustomWebApp.h
class CustomWebAppPage : public DIYablesWebAppPageBase {
private:
// WebSocket message identifier for this custom app
static const String APP_IDENTIFIER;
// ...
};
// In CustomWebApp.cpp
const String CustomWebAppPage::APP_IDENTIFIER = "CUSTOM:";
// Usage in handleWebSocketMessage:
if (message.startsWith(APP_IDENTIFIER)) {
String payload = message.substring(APP_IDENTIFIER.length());
// Process clean payload without identifier
}
// Usage in sendToWeb:
broadcastToAllClients(APP_IDENTIFIER + message);
JavaScript-Seite (custom_page_html.h)
// WebSocket message identifier for this custom app
const APP_IDENTIFIER = 'CUSTOM:';
// Usage in receiving:
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// Process clean message without identifier
}
// Usage in sending:
ws.send(APP_IDENTIFIER + userInput);
Vorteile dieses Designs:
- Eine einzige Quelle der Wahrheit: Bezeichner in einer Stelle pro Sprache ändern
- Keine magischen Zeichenketten: Eliminiert hartkodierte 'CUSTOM:' im gesamten Code
- Typensicherheit: Durch Konstanten werden Tippfehler vermieden
- Erweiterbar: Leicht mehrere benutzerdefinierte Apps mit unterschiedlichen Identifikatoren erstellen
- Datenkonflikte zwischen mehreren Apps vermeiden: Jede App verwendet einen eindeutigen Bezeichner, um Nachrichteninterferenzen zu verhindern
- Professionell: Folgt objektorientierten Designprinzipien
Wichtige Hinweise:
- Sie können den aktuellen Bezeichner "CUSTOM:" beibehalten, wenn Sie diese benutzerdefinierte Web-App-Vorlage an Ihr Projekt anpassen. Wenn Sie jedoch mehr als eine benutzerdefinierte App erstellen, stellen Sie sicher, ihn zu ändern, um Konflikte zu vermeiden.
- Wenn Sie den Bezeichner ändern, stellen Sie sicher, dass der Wert in JavaScript (.h-Datei) und Arduino-Code (.cpp-Datei) derselbe ist (z. B. verwenden beide "TEMP:" oder beide "SENSOR:").
- Vorreservierte Bezeichner durch integrierte Apps: Die folgenden Bezeichner werden bereits von den integrierten Anwendungen von DIYables WebApps verwendet und sollten vermieden werden:
- Haupt-App-Identifikatoren: "CHAT:", "MONITOR:", "PLOTTER:", "DIGITAL_PINS:", "JOYSTICK:", "SLIDER:", "TABLE:", "RTC:", "ROTATOR:", "GAUGE:"
- Unterprotokoll-Identifikatoren: "TIME:", "DATETIME:", "JOYSTICK_CONFIG:", "PLOTTER_DATA:", "PLOTTER_CONFIG:", "SLIDER_VALUES:", "TABLE_CONFIG:", "TABLE_DATA:", "VALUE_UPDATE:", "PIN_CONFIG:", "PIN_STATES:", "PIN_UPDATE:"
Kommunikationsfluss
Von der Webseite zum Arduino:
Wenn Sie eine Nachricht in der Weboberfläche eingeben und auf den Senden-Button klicken, zum Beispiel: Hello, erfolgt der folgende Ablauf:
- JavaScript fügt App-Identifikator hinzu: JavaScript fügt den App-Identifikator (der in diesem Template "CUSTOM:" ist) mithilfe der Konstante APP_IDENTIFIER ein und sendet dann die Nachricht über WebSocket an Arduino. Die eigentliche gesendete Nachricht lautet: CUSTOM:Hello
- DIYables WebApps-Bibliothek empfängt: Die Bibliothek empfängt die Nachricht CUSTOM:Hello und übergibt sie an Ihre Methode CustomWebAppPage::handleWebSocketMessage
- CustomWebAppPage-Klasse entfernt Identifikator: In handleWebSocketMessage prüft die Klasse CustomWebAppPage, ob die Nachricht mit ihrem APP_IDENTIFIER beginnt, entfernt den Identifikator mit .substring(APP_IDENTIFIER.length()) und übergibt dann die verbleibende Nachricht Hello durch Aufruf der in Ihrer .ino-Datei implementierten Callback-Funktion
- Ihre Anwendung verarbeitet: Ihre Anwendung in der .ino-Datei empfängt lediglich Hello und kann die Nachricht entsprechend Ihrer benutzerdefinierten Logik verarbeiten. Die aktuelle Vorlage gibt sie einfach aus und sendet eine Antwort zurück
Vom Arduino zur Webseite:
Wenn dein Arduino Daten an die Weboberfläche senden möchte, zum Beispiel: Temperature: 25°C, folgt der untenstehende Ablauf:
- Ihre Anwendung ruft sendToWeb() auf: In Ihrer .ino-Datei rufen Sie customPage.sendToWeb("Temperature: 25°C") auf, um Daten an den Webbrowser zu senden
- Die CustomWebAppPage-Klasse fügt den App-Identifikator hinzu und sendet Broadcast: Die CustomWebAppPage-Klasse fügt automatisch den App-Identifikator mithilfe ihrer Konstante APP_IDENTIFIER zu Ihrer Nachricht hinzu und sendet CUSTOM:Temperature: 25°C an alle verbundenen Web-Clients über WebSocket
- JavaScript empfängt und filtert Nachrichten: Der Webbrowser erhält CUSTOM:Temperature: 25°C über den ws.onmessage-Event-Handler, aber das JavaScript verarbeitet nur Nachrichten, die mit APP_IDENTIFIER beginnen, und entfernt den Identifikator mittels .substring(APP_IDENTIFIER.length())
- Webseite zeigt saubere Nachricht an: Die aktuelle Vorlage zeigt die saubere Nachricht Temperature: 25°C (ohne Identifikator) im Abschnitt "Nachricht von Arduino" an. Sie können das JavaScript anpassen, um die Daten je nach Anwendungsbedarf auf unterschiedliche Weise zu parsen und anzuzeigen.
Architekturübersicht
Das CustomWebApp-Beispiel besteht aus vier Hauptdateien:
- CustomWebApp.ino - Haupt-Arduino-Skizze mit Ihrer Anwendungslogik
- CustomWebApp.h - Headerdatei, die die benutzerdefinierte Seitenklasse (Bibliotheksschnittstelle) definiert
- CustomWebApp.cpp - Implementierung mit Kommunikationslogik (Bibliothekscode)
- custom_page_html.h - HTML-Schnittstelle getrennt für einfache Anpassung
Die Vorlage an Ihre Anwendung anpassen
Die Vorlage ist so gestaltet, dass sie sich leicht an Ihre spezifischen Bedürfnisse anpassen lässt. So passen Sie sie an:
1. Hardware-Integration
Hardware-Initialisierung hinzufügen
In der setup()-Funktion von CustomWebApp.ino:
void setup() {
Serial.begin(9600);
// Add your hardware initialization here
pinMode(LED_BUILTIN, OUTPUT); // Built-in LED
pinMode(3, OUTPUT); // PWM output pin
pinMode(4, INPUT_PULLUP); // Button input with pullup
pinMode(A0, INPUT); // Analog sensor input
// Initialize sensors, displays, motors, etc.
// servo.attach(9);
// lcd.begin(16, 2);
// Rest of setup...
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&customPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
Benutzerdefinierte Befehle verarbeiten
Erweitern Sie die Callback-Funktion, um Ihre benutzerdefinierten Befehle zu verarbeiten:
customPage.onCustomMessageReceived([](const String& message) {
Serial.println("Received: " + message);
// LED Control
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");
}
// Servo Control
else if (message.startsWith("servo:")) {
int angle = message.substring(6).toInt(); // Get number after "servo:"
// servo.write(angle);
customPage.sendToWeb("Servo moved to " + String(angle) + " degrees");
}
// Sensor Reading Request
else if (message == "get_temperature") {
float temp = readTemperatureSensor(); // Your sensor function
customPage.sendToWeb("Temperature: " + String(temp) + "°C");
}
// Add more custom commands here
});
Echtzeit-Sensordaten senden
void loop() {
webAppsServer.loop();
// Send sensor data every 3 seconds
static unsigned long lastSend = 0;
if (millis() - lastSend > 3000) {
// Read your sensors
int lightLevel = analogRead(A0);
bool buttonPressed = !digitalRead(4); // Inverted due to pullup
float temperature = readTemperatureSensor();
// Send to web interface
customPage.sendToWeb("Light: " + String(lightLevel));
customPage.sendToWeb("Button: " + String(buttonPressed ? "Pressed" : "Released"));
customPage.sendToWeb("Temp: " + String(temperature) + "°C");
lastSend = millis();
}
}
2. Anpassung der Weboberfläche
HTML-Layout ändern
Bearbeiten Sie das HTML in custom_page_html.h, um die Schnittstelle zu ändern:
<!-- Add new controls -->
<div>
<h3>🔌 Device Control</h3>
<button onclick="send('led_on')">LED ON</button>
<button onclick="send('led_off')">LED OFF</button>
<br><br>
<label>Servo Angle:</label>
<input type="range" id="servoSlider" min="0" max="180" value="90"
onchange="send('servo:' + this.value)">
<span id="servoValue">90°</span>
</div>
<div>
<h3>📊 Sensor Data</h3>
<div>Temperature: <span id="tempValue">--°C</span></div>
<div>Light Level: <span id="lightValue">--</span></div>
<div>Button Status: <span id="buttonValue">--</span></div>
</div>
JavaScript-Verarbeitung anpassen
Aktualisieren Sie die Funktion ws.onmessage, um bestimmte Datentypen zu behandeln:
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// Display all messages in general area
document.getElementById('rawMessage').textContent = message;
// Handle specific message types
if (message.startsWith('Temperature:')) {
let temp = message.split(':')[1].trim();
document.getElementById('tempValue').textContent = temp;
}
else if (message.startsWith('Light:')) {
let light = message.split(':')[1].trim();
document.getElementById('lightValue').textContent = light;
}
else if (message.startsWith('Button:')) {
let button = message.split(':')[1].trim();
document.getElementById('buttonValue').textContent = button;
}
}
};
Styling hinzufügen
Passen Sie das CSS für Ihre Anwendung an:
<style>
.control-panel {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
padding: 20px;
margin: 10px 0;
color: white;
}
.sensor-display {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 10px;
padding: 15px;
margin: 10px 0;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
</style>
Weitere Anpassungen
Über die Anpassung der Weboberfläche und der Hardware-Integration hinaus können Sie auch anpassen, wie Ihre App im DIYables WebApps-Ökosystem erscheint:
1. App-Pfad anpassen
Sie können den URL-Pfad ändern, unter dem Ihre benutzerdefinierte Web-App erreichbar ist, indem Sie den Konstruktor in Ihrer Header-Datei ändern:
Standardpfad:
// In CustomWebApp.cpp - Default path is "/custom"
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") {
}
Benutzerdefinierte Pfadbeispiele:
// Temperature monitoring app
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/new-path") {
}
// Accessible at: http://[IP_ADDRESS]/new-path
Wichtige Hinweise:
- Der Pfad muss mit einem Schrägstrich beginnen: Beginnen Sie Ihren Pfad immer mit einem Schrägstrich
- Verwenden Sie aussagekräftige Namen: Wählen Sie Pfade, die die Funktion Ihrer App klar beschreiben
- Konflikte vermeiden: Verwenden Sie keine Pfade, die bereits von integrierten Apps belegt sind, z. B. /chat, /monitor, /plotter usw.
- Verwenden Sie Kleinbuchstaben und Bindestriche: Befolgen Sie die Web-URL-Konventionen für eine bessere Kompatibilität
2. App-Karte auf der Startseite anpassen
Sie können anpassen, wie Ihre App auf der Startseite der DIYables WebApps erscheint, indem Sie die Methode getNavigationInfo() in Ihrer Implementierungsdatei ändern:
Einfache App-Karte:
// In CustomWebApp.cpp
String CustomWebAppPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card\">"
"<h3>🔧 Custom App</h3>"
"<p>My custom web application</p>"
"</a>";
}
Fortgeschrittene App-Karte mit Inline-CSS:
// In CustomWebApp.cpp
String CustomWebAppPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card\" "
"style=\"background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\">"
"<h3>🌡️ Temperature Monitor</h3>"
"<p>Real-time temperature monitoring</p>"
"</a>";
}
Verwaltung mehrerer benutzerdefinierter Web-Apps - Wesentlicher Leitfaden zur Konfliktvermeidung
Bei der Entwicklung mehrerer benutzerdefinierter Webanwendungen ist es entscheidend, Konflikte zwischen verschiedenen Apps zu vermeiden. Nehmen wir an, dass wir drei benutzerdefinierte Apps mit den Namen "Temperature Monitor", "Motor Controller" und "Sensor Dashboard" zu unserem Arduino-Projekt hinzufügen möchten. So stellen Sie sicher, dass sie harmonisch zusammenarbeiten:
Verwenden Sie eindeutige App-Identifikatoren
Jede benutzerdefinierte Webanwendung muss über eine eindeutige Kennung verfügen, um Nachrichtenkonflikte zu vermeiden:
Beispiel: Temperaturüberwachungs-App
// In TemperatureApp.cpp
const String TemperatureAppPage::APP_IDENTIFIER = "TEMP:";
// JavaScript in temperature_page_html.h
const APP_IDENTIFIER = 'TEMP:';
Beispiel: Motorsteuerungs-App
// In MotorApp.cpp
const String MotorAppPage::APP_IDENTIFIER = "MOTOR:";
// JavaScript in motor_page_html.h
const APP_IDENTIFIER = 'MOTOR:';
Beispiel: Sensor-Dashboard-App
// In SensorApp.cpp
const String SensorAppPage::APP_IDENTIFIER = "SENSOR:";
// JavaScript in sensor_page_html.h
const APP_IDENTIFIER = 'SENSOR:';
2. Eindeutige Seitenpfade verwenden
Jede Webanwendung benötigt einen eindeutigen URL-Pfad:
// Temperature App
TemperatureAppPage::TemperatureAppPage() : DIYablesWebAppPageBase("/temperature") {
}
// Motor Controller App
MotorAppPage::MotorAppPage() : DIYablesWebAppPageBase("/motor") {
}
// Sensor Dashboard App
SensorAppPage::SensorAppPage() : DIYablesWebAppPageBase("/sensors") {
}
3. Verwenden Sie eindeutige Klassennamen
Vermeiden Sie Namenskonflikte, indem Sie aussagekräftige Klassennamen verwenden:
// Instead of multiple "CustomWebAppPage" classes
class TemperatureMonitorPage : public DIYablesWebAppPageBase { };
class MotorControllerPage : public DIYablesWebAppPageBase { };
class SensorDashboardPage : public DIYablesWebAppPageBase { };
4. Mehrere Apps in einem Projekt organisieren
So strukturieren Sie ein Projekt mit mehreren benutzerdefinierten Apps:
// In main .ino file
#include "TemperatureApp.h"
#include "MotorApp.h"
#include "SensorApp.h"
// Create instances
DIYablesHomePage homePage;
TemperatureMonitorPage tempPage;
MotorControllerPage motorPage;
SensorDashboardPage sensorPage;
void setup() {
// Add all pages to server
webAppsServer.addApp(&homePage); // pre-built app
webAppsServer.addApp(&tempPage);
webAppsServer.addApp(&motorPage);
webAppsServer.addApp(&sensorPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
// Set up callbacks for each app
tempPage.onTemperatureMessageReceived([](const String& message) {
// Handle temperature app messages
});
motorPage.onMotorMessageReceived([](const String& message) {
// Handle motor app messages
});
sensorPage.onSensorMessageReceived([](const String& message) {
// Handle sensor app messages
});
}
5. Bewährte Verfahren für mehrere Apps
Datei-Organisation
MyProject/
├── MyProject.ino // Main sketch
├── TemperatureApp.h // Temperature app header
├── TemperatureApp.cpp // Temperature app implementation
├── temperature_page_html.h // Temperature app web page
├── MotorApp.h // Motor app header
├── MotorApp.cpp // Motor app implementation
├── motor_page_html.h // Motor app web page
├── SensorApp.h // Sensor app header
├── SensorApp.cpp // Sensor app implementation
└── sensor_page_html.h // Sensor app web page
Navigation zwischen Apps
Aktualisieren Sie die Methode getNavigationInfo() in jeder App, um eine einfache Navigation zu ermöglichen:
String TemperatureMonitorPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card temperature\">"
"<h3>🌡️ Temperature Monitor</h3>"
"<p>View real-time temperature data</p>"
"</a>";
}
String MotorControllerPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card motor\">"
"<h3>⚙️ Motor Controller</h3>"
"<p>Control servo and stepper motors</p>"
"</a>";
}
6. Testen mehrerer Apps
Beim Testen mehrerer Apps:
- Teste jede App zuerst einzeln
- Prüfe den seriellen Monitor auf Nachrichtenkonflikte
- Verifiziere eindeutige Identifikatoren, damit sie korrekt funktionieren
- Teste die Navigation zwischen verschiedenen Apps
- Überwache den Speicherverbrauch mehrerer geladener Apps
Wenn Sie diese Richtlinien befolgen, können Sie mehrere benutzerdefinierte Webanwendungen erstellen, die nahtlos zusammenarbeiten, ohne sich gegenseitig oder andere DIYables-WebApps zu beeinträchtigen.