Home
Arduino UNO R4

DIYables WebApps-Bibliothek - Vollständiges Arduino-Webanwendungs-Framework

DIYables WebApps-Bibliothek

Eine umfassende Arduino-Bibliothek zur Erstellung von WebSocket-basierten Webanwendungen auf dem Arduino Uno R4 WiFi und dem DIYables STEM V4 IoT. Diese Bibliothek bietet mehrere einsatzbereite Webanwendungen zur Überwachung, Steuerung und Interaktion mit Ihren Arduino-Projekten über eine moderne Weboberfläche. Speziell optimiert für die DIYables STEM V4 IoT-Bildungsplattform mit erweiterten IoT-Fähigkeiten und integrierten Sensoren.

Mit dieser Bibliothek können Sie über einen Webbrowser auf Ihrem Smartphone oder PC mit Ihrem Arduino interagieren, indem Sie entweder:

  • Verwenden Sie vorgefertigte Web-Apps aus den 11 bereitgestellten Anwendungen, ohne jegliche Kenntnisse in der Web-Programmierung.
  • Passen Sie die vorgefertigten Web-Apps an, um Ihre spezifischen Projektanforderungen zu erfüllen.
  • Erstellen und fügen Sie Ihre eigenen Web-Apps hinzu, indem Sie die flexible Framework-Architektur verwenden.
Arduino UNO R4 DIY-fähige Web-Apps

🚀 Funktionen

  • Modulare Architektur: Fügen Sie nur die Web-Apps hinzu, die Sie benötigen, um den Speicherverbrauch zu optimieren.
  • Speichereffizient: Jede Web-App kann unabhängig voneinander aktiviert oder deaktiviert werden.
  • Speicheroptimiert: HTML-, JavaScript- und CSS-Code werden minimiert, um die Codegröße zu verringern, während Benutzeroberfläche und Funktionalität erhalten bleiben. Der unminifizierte Originalquellcode ist in der Bibliothek zu Referenz- und Anpassungszwecken enthalten.
  • 11 vorkonfigurierte Webanwendungen: Vollständige Arduino-Steuerung – dafür ist kein Web-Programmierwissen erforderlich.
  • Startseite: Zentraler Hub mit Links zu allen Webanwendungen
  • Web Monitor: Echtzeit-Seriemonitor in Ihrem Browser über WebSocket
  • Web-Chat: Interaktive Chat-Schnittstelle mit Ihrem Arduino
  • Web-Digitale Pins: Steuern und überwachen Sie alle digitalen Pins über eine Weboberfläche
  • Web-Schieberegler: Duale Schieberegler zur Steuerung analoger und PWM-Ausgänge
  • Web-Joystick: Interaktiver Joystick zur Steuerung von Robotern und Fahrzeugen
  • Web-Analoganzeige: Kreisförmige Messanzeige zur Sensorüberwachung
  • Web-Rotator: Drehbare Scheibensteuerung mit kontinuierlichen bzw. begrenzten Modi
  • Web-Temperatur: Thermometeranzeige mit konfigurierbaren Bereichen
  • Web RTC: Echtzeituhr mit Zeitsynchronisation und Zeitzonenunterstützung
  • Web-Tabelle: Zwei-Spalten-Attribut-Wert-Tabelle mit Echtzeit-Updates
  • Web Plotter: Echtzeit-Datenvisualisierung und Plotten
  • Eigene Web-App-Vorlage: Vollständige Vorlage zur Erstellung eigener Webanwendungen mit Echtzeit-WebSocket-Kommunikation
  • Responsives Design: Funktioniert auf Desktop- und Mobilgeräten
  • Echtzeit-Kommunikation: WebSocket-basierte Kommunikation für sofortige Updates
  • Einfache Integration: Eine Callback-basierte API
  • Unterstützung mehrerer Apps: Unterstützung beim gleichzeitigen Hinzufügen mehrerer Web-Apps
  • Automatische Integration auf der Startseite: Die hinzugefügte Web-App wird automatisch als Link auf der Startseite angezeigt
  • Plattform-Erweiterbarkeit: Derzeit für Arduino Uno R4 WiFi implementiert, aber erweiterbar für andere Hardware-Plattformen. Siehe DIYables_WebApps_ESP32

📦 Installation - Arduino IDE Bibliotheksverwaltung

  • Öffne die Arduino-IDE
  • Gehe zum Bibliotheken-Symbol in der linken Leiste der Arduino-IDE.
  • Suche "DIYables WebApps", und finde dann die DIYables WebApps-Bibliothek von DIYables
  • Klicke auf die Installieren-Schaltfläche, um die Bibliothek zu installieren.
Arduino UNO R4 DIYables WebApps-Bibliothek
  • Sie werden aufgefordert, weitere Bibliotheksabhängigkeiten zu installieren.
  • Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
Arduino UNO R4 DIYables WebApps-Abhängigkeit

🔧 Abhängigkeiten

Diese Bibliothek erfordert Folgendes:

  • UnoR4WiFi_WebServer Bibliothek (für WebSocket-Unterstützung)

🎯 Schnellstart

Für detaillierte Installationsanleitungen und Codebeispiele verweisen Sie bitte auf:

📱 Webanwendungen

1. Startseite (`/`)

  • Zentrales Navigationszentrum
  • Links zu allen Webanwendungen
  • Nur aktivierte bzw. hinzugefügte Apps werden auf der Startseite angezeigt
  • Verbindungsstatusanzeige
  • Responsives Design

2. Web-Überwachung (`/web-monitor`)

  • Serieller Monitor im Browser
  • Echtzeit bidirektionale Kommunikation
  • Nachrichten-Zeitstempelung und Zählung
  • Befehlszeileneingabe mit Verlauf

3. Web-Plotter (`/web-plotter`)

  • Echtzeit-Datenvisualisierung und -Plotting
  • Unterstützung mehrerer Datenserien (bis zu 8 Linien)
  • Automatische Skalierung der Y-Achse oder feste Bereiche
  • Anpassbare Plot-Titel und Achsenbeschriftungen
  • WebSocket-Streaming mit minimaler Latenz
  • Ideal geeignet zur Sensorüberwachung und zum Debugging

4. WebChat (`/chat`)

  • Interaktive Chat-Oberfläche
  • Antworten in natürlicher Sprache
  • LED-Steuerung über Chat-Befehle
  • Unterhaltsame und lehrreiche Interaktionen

5. Web-Digitale Pins (`/web-digital-pins`)

  • Individuelle Pinsteuerung (Pins 0-13)
  • Jeder Pin kann im Eingangs- oder Ausgangsmodus konfiguriert werden.
  • Nur aktivierte Pins werden in der Weboberfläche angezeigt.
  • Überwachung von Eingangs- und Ausgangspins.
  • Massenoperationen (Alle AN/AUS, Umschalten)
  • Pin-Status in Echtzeit

6. Web-Schieberegler (`/web-slider`)

  • Duale Schieberegler (0–255)
  • PWM-Ausgangssteuerung
  • Tasten für voreingestellte Werte
  • Synchronisierte Steuerungsoptionen

7. Web-Joystick (`/web-joystick`)

  • Interaktive Joysticksteuerung mit Touch- und Mausunterstützung
  • X- und Y-Koordinatenwerte (-100 bis +100)
  • Positionsrückmeldung in Echtzeit
  • Die automatische Zentrierung kann über Arduino-Code aktiviert bzw. deaktiviert werden
  • Ideal geeignet für die Steuerung von Robotern und Fahrzeugen

8. Web-Analoganzeige (`/web-gauge`)

  • Professionelle Rundanzeige zur Echtzeit-Sensorüberwachung
  • Konfigurierbarer Wertebereich, Einheiten und Auflösung
  • Sanfte Zeigeranimation mit visuellem Feedback
  • Farbcodierte Zonen (grün, gelb, rot) zur Statusanzeige
  • Automatische Konfigurationsverarbeitung – Bereich einmal im Konstruktor festlegen
  • Perfekt für Drucksensoren, Spannungsüberwachung und analoge Messwerte

9. Web-Rotator (`/web-rotator`)

  • Interaktives rotierbares Scheiben-Steuerelement mit visueller Rückmeldung
  • Zwei Betriebsmodi: Kontinuierlich (0–360°) und Begrenzt (benutzerdefinierter Bereich)
  • Echtzeit-Winkelrückmeldung mit sanfter Rotation
  • Touch- und Mausunterstützung für Desktop und Mobilgeräte
  • Professionelles Design mit konischem Verlauf und Positionsanzeige
  • Ideal für Servomotoren, Schrittmotoren und Rotationssteuerung

10. Web-Temperatur (`/web-temperature`)

  • Visuelle Thermometeranzeige mit Echtzeit-Temperaturüberwachung
  • Konfigurierbarer Temperaturbereich und Einheiten (°C, °F, K)
  • Interaktive Thermometer-Visualisierung mit Quecksilber-Animation
  • Automatische Konfigurationsverwaltung - Bereich im Konstruktor einmal festlegen
  • Werte in Echtzeit über WebSocket aktualisieren
  • Perfekt für Temperatursensoren und Umweltüberwachung

11. WebRTC (`/web-rtc`)

  • Echtzeituhranzeige für sowohl die Arduino RTC als auch die Zeit des Client-Geräts
  • Ein-Klick-Zeit-Synchronisierung vom Webbrowser zur Arduino RTC
  • Visueller Zeitdifferenzindikator, der die Synchronisationsgenauigkeit in Minuten anzeigt
  • Zweizeiliges Zeitformat mit 12-Stunden-Anzeige (AM/PM) und vollständigem Datum
  • WebSocket-basierte Echtzeit-Updates für sofortige Zeitsynchronisation
  • Moderne Gradient-UI mit responsivem Kartenlayout
  • Zeitzonenbewusste Synchronisation unter Verwendung der lokalen Gerätezzeit
  • Eingebaute RTC-Unterstützung speziell für das Arduino Uno R4 WiFi
  • Verbindungsstatus-Überwachung mit visuellen WebSocket-Indikatoren
  • Automatische Zeitanfragen beim Laden der Seite für sofortige Anzeige
  • Perfekt geeignet für Zeitstempelgenerierung, Datenerfassung, Planung und zeitbasierte Automatisierung

12. Webtabelle (`/web-table`)

  • Zweispaltige Datentabelle mit Attribut-Wert-Paaren zur übersichtlichen Darstellung der Daten
  • Echtzeit-Wertaktualisierungen über WebSocket für eine sofortige Aktualisierung der Daten
  • Konfigurierbare Tabellenstruktur, die einmal in der Arduino setup() Funktion eingerichtet wird
  • Dynamische Werteaktualisierungen während der Laufzeit ohne Seitenaktualisierung
  • Modernes responsives Design mit Hover-Effekten und visuellem Feedback
  • Verbindungsstatusüberwachung mit visuellen WebSocket-Indikatoren
  • Behandlung des Leeren Zustands mit benutzerfreundlichen Meldungen, wenn keine Daten verfügbar sind
  • Manuelle Aktualisierungsmöglichkeit mit einem dedizierten Aktualisierungsknopf
  • Flexible Datentypen, die Zeichenketten, Zahlen und formatierte Werte unterstützen
  • Speichereffiziente Speicherung mit konfigurierbarer maximaler Zeilenanzahl (Standard: 20)
  • Automatische Datenanfragen beim Laden der Seite für eine sofortige Tabellenbefüllung
  • Ideal für Sensorüberwachung, Systemstatus, Konfigurationsanzeige und Echtzeit-Dashboards

13. CustomWebApp-Vorlage (`/custom`)

  • Vollständige Vorlage zur Erstellung eigener benutzerdefinierter Webanwendungen
  • Echtzeit-WebSocket-Kommunikation mit automatischer Nachrichtenfilterung
  • Professionelles klassenbasiertes Design mit gekapseltem APP_IDENTIFIER-System
  • Anfängerfreundliche Vorlage mit einfacher Textnachrichtenübermittlung zwischen Web und Arduino
  • Automatische Wiederverbindungsfunktion für zuverlässige WebSocket-Verbindungen
  • Mobil-responsives Design, das auf Telefonen, Tablets und Computern funktioniert
  • Hinweise zur Konfliktvermeidung bei der Entwicklung mehrerer benutzerdefinierter Apps
  • Modulare Dateistruktur mit separatem HTML, Arduino-Logik und Bibliotheksintegration
  • Erweiterbares Framework – Vorlage anpassen, um anspruchsvolle Anwendungen zu erstellen
  • Integrationsbereit – funktioniert nahtlos mit anderen DIYables WebApps
  • Ideal für benutzerdefinierte IoT-Schnittstellen, Sensor-Dashboards, Geräte-Steuerpanels und Bildungsprojekte

🧩 Modulare Architektur

Speicheroptimierung: Die DIYables WebApps-Bibliothek verfügt über ein modulares Design, das es Ihnen ermöglicht, nur die Webanwendungen einzubinden, die Sie tatsächlich benötigen, wodurch der Speicherverbrauch auf Ihrem Arduino deutlich reduziert wird.

Hauptvorteile:

  • Selektive Integration: Fügen Sie nur benötigte Web-Apps zu Ihrem Projekt hinzu
  • Speichereffizient: Jede Web-App ist unabhängig und optional
  • Skalierbar: Klein anfangen und nach Bedarf weitere Funktionen hinzufügen
  • Leistungsoptimiert: Weniger aktive Apps = bessere Leistung

So funktioniert es:

// Basic setup - include only what you need DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; // Always recommended DIYablesWebSliderPage webSliderPage; // Only if you need sliders DIYablesWebJoystickPage webJoystickPage; // Only if you need joystick DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // Only if you need analog gauge DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS); // Only if you need rotator DIYablesWebTemperaturePage tempPage(-10.0, 50.0, "°C"); // Only if you need temperature DIYablesWebRTCPage webRTCPage; // Only if you need time sync // Add only the apps you want webAppsServer.addApp(&homePage); webAppsServer.addApp(&webSliderPage); // Skip apps you don't need webAppsServer.addApp(&gaugePage); // Add only what you use webAppsServer.addApp(&tempPage); // to save memory webAppsServer.addApp(&webRotatorPage); // Customize as needed webAppsServer.addApp(&webRTCPage); // Add time synchronization // Start server - choose appropriate method webAppsServer.begin("WiFi_SSID", "password"); // WiFi connection // OR // webAppsServer.begin(); // For Ethernet or pre-configured connections (future) // Runtime management (advanced) if (sensorConnected) { webAppsServer.addApp(&webJoystickPage); // Add dynamically }

Laufzeitflexibilität:

  • Dynamische Verwaltung: Apps zur Laufzeit hinzufügen oder entfernen mittels addApp() und removeApp()
  • Bedingtes Laden: Apps basierend auf Hardware oder Konfiguration laden
  • Eigene Webanwendungen: Eigene Webanwendungen erstellen, indem Sie von DIYablesWebAppPageBase erben
  • Keine Neukompilierung: Verfügbare Apps ohne erneutes Kompilieren ändern

🔌 API-Referenz

Für die vollständige API-Dokumentation, einschließlich aller Klassen, Methoden und Anwendungsbeispiele, siehe:

API-Referenzdokumentation

📋 Beispiele

Die Bibliothek enthält umfassende Beispiel-Tutorials:

Jedes Beispiel-Tutorial enthält:

  • Schritt-für-Schritt-Anleitungen zur Einrichtung
  • Hardware-Verbindungsdiagramme
  • Vollständige Code-Beispiele
  • Fehlerbehebungsleitfäden
  • Projektideen und Tipps zur Integration

🌐 Web-Schnittstellen-URLs

Sobald Sie mit dem WLAN verbunden sind, greifen Sie auf die Anwendungen zu:

  • Startseite: http://[IP_ADDRESS]/
  • Web-Chat: http://[IP_ADDRESS]/chat
  • Web-Monitor: http://[IP_ADDRESS]/web-monitor
  • Web-Plotter: http://[IP_ADDRESS]/web-plotter
  • Web-Digitale-Pins: http://[IP_ADDRESS]/web-digital-pins
  • Web-Schieberegler: http://[IP_ADDRESS]/web-slider
  • Web-Joystick: http://[IP_ADDRESS]/web-joystick
  • Web-Analoge Anzeige: http://[IP_ADDRESS]/web-gauge
  • Web-Rotator: http://[IP_ADDRESS]/web-rotator
  • Web-Temperatur: http://[IP_ADDRESS]/web-temperature
  • Web-RTC: http://[IP_ADDRESS]/web-rtc
  • Web-Tabelle: http://[IP_ADDRESS]/web-table
  • Benutzerdefinierte App: http://[IP_ADDRESS]/custom (bei Verwendung der CustomWebApp-Vorlage)

🔧 Hardware-Aufbau

DIYables STEM V4 IoT (Empfohlene Plattform)

  • Integrierte WLAN-Funktion mit optimiertem Antennendesign
  • LEDs und Sensoren an Bord sofort einsatzbereit
  • Erweiterte I/O-Optionen mit zusätzlicher Konnektivität
  • Bildungsorientiertes Design perfekt zum Erlernen der IoT-Entwicklung
  • Professionelle Komponenten für zuverlässige Prototypen
  • Umfassendes Pin-Layout optimiert für den Breadboard-Einsatz
  • Verbessertes Energiemanagement für stabilen Betrieb
  • Perfekt für MINT-Bildung und IoT-Projektentwicklung

Arduino Uno R4 WiFi

  • Keine zusätzliche Hardware erforderlich für die Grundfunktionalität
  • Schließen Sie LEDs an digitale Pins an, um visuelles Feedback zu erhalten
  • Schließen Sie Sensoren an analoge Pins an, um sie zu überwachen
  • Standard-Arduino-Kompatibilität

💡 Tipps zur Verwendung

  1. Speicheroptimierung: Verwenden Sie eine modulare Architektur – fügen Sie nur die Web-Apps hinzu, die Sie benötigen, um Speicher zu sparen
  2. WLAN-Verbindung: Stellen Sie sicher, dass das WLAN-Signal stark ist, um eine stabile WebSocket-Kommunikation zu gewährleisten
  3. PIN-Funktionen: Prüfen Sie vor dem Anschluss externer Geräte immer die PIN-Funktionen
  4. Stromversorgung: Verwenden Sie eine ausreichende Stromversorgung für Ihre angeschlossenen Geräte
  5. Browser-Kompatibilität: Funktioniert am besten mit modernen Browsern (Chrome, Firefox, Safari, Edge)
  6. Mobilfreundlich: Alle Schnittstellen sind responsiv und funktionieren auf Mobilgeräten
  7. Klein anfangen: Beginnen Sie mit 1–2 Web-Apps, dann fügen Sie weitere Funktionen hinzu, während Ihr Projekt wächst

🔍 Fehlerbehebung

WLAN-Verbindungsprobleme

  • SSID und Passwort überprüfen
  • WLAN-Signalstärke überprüfen
  • 2,4-GHz-Netzwerk verwenden (5-GHz wird nicht unterstützt)

WebSocket-Verbindungsprobleme

  • Überprüfe die Firewall-Einstellungen
  • Überprüfe die IP-Adresse im Browser
  • Versuche, die Webseite zu aktualisieren
  • Überprüfe den Serial Monitor auf Fehlermeldungen

Leistungsprobleme

  • Speicheroptimierung: Entfernen Sie nicht verwendete Web-Apps, um RAM und Flash-Speicher freizugeben
  • Selektives Laden: Verwenden Sie eine modulare Architektur, um nur die benötigten Funktionalitäten einzubinden
  • Begrenzen Sie die Aktualisierungsfrequenz für Daten mit hoher Frequenz
  • Verwenden Sie geeignete Verzögerungen in loop()
  • Überwachen Sie den Speicherverbrauch bei lang laufenden Anwendungen

📚 Fortgeschrittene Nutzung

Dynamische App-Verwaltung

Die Bibliothek unterstützt das Hinzufügen und Entfernen von Webanwendungen zur Laufzeit:

// Add apps dynamically during runtime if (sensorConnected && !webAppsServer.getApp("/webmonitor")) { webAppsServer.addApp(new DIYablesWebMonitorPage()); } // Remove apps to free memory webAppsServer.removeApp("/chat"); // Remove webchat if not needed // Get specific app instances DIYablesWebDigitalPinsPage* pinsPage = webAppsServer.getWebDigitalPinsPage(); if (pinsPage) { pinsPage->enablePin(2, WEB_PIN_OUTPUT); }

Maßgeschneiderte Webanwendungen

Erstelle deine eigenen Web-Apps, indem du von DIYablesWebAppPageBase erbst:

class MySensorDashboard : public DIYablesWebAppPageBase { public: MySensorDashboard() : DIYablesWebAppPageBase("/sensors") {} void handleHTTPRequest(WiFiClient& client) override { sendHTTPHeader(client); client.print("<h1>Sensor Dashboard</h1>"); client.print("<p>Temperature: " + String(getTemperature()) + "°C</p>"); } void handleWebSocketMessage(WebSocket& ws, const String& message) override { if (message == "get_data") { sendWebSocketMessage(ws, "temp:" + String(getTemperature())); } } }; // Add your custom app webAppsServer.addApp(new MySensorDashboard());

Benutzerdefinierte HTML-Seiten

Sie können die HTML-Dateien im Verzeichnis src/html/ bearbeiten, um das Aussehen und die Funktionalität der Weboberfläche anzupassen.

Mehrere WebSocket-Clients

Die Bibliothek unterstützt mehrere gleichzeitige WebSocket-Verbindungen, wodurch mehrere Benutzer denselben Arduino steuern können.

Integration mit anderen Bibliotheken

Einfache Integration mit Sensorbibliotheken, Servosteuerung, Motortreibern und weiteren Arduino-Bibliotheken.

📄 Lizenz

Diese Bibliothek ist unter der MIT-Lizenz freigegeben. Siehe LICENSE-Datei für Details.

🔗 Links

---

Viel Spaß beim Programmieren mit DIYables WebApps Library! 🎉

Verwandte Tutorials

※ UNSERE NACHRICHTEN

  • Sie können gerne den Link zu diesem Tutorial teilen. Bitte verwenden Sie jedoch unsere Inhalte nicht auf anderen Websites. Wir haben viel Mühe und Zeit in die Erstellung der Inhalte investiert, bitte respektieren Sie unsere Arbeit!
OFFENLEGUNG
Newbiely.de ist Teilnehmer des Amazon Services LLC Associates Program, einem Affiliate-Werbeprogramm, das entwickelt wurde, um Websites eine Möglichkeit zu bieten, Werbegebühren durch Werbung und Verlinkung zu Amazon.com, Amazon.it, Amazon.de, Amazon.co.uk, Amazon.ca, Amazon.de, Amazon.es, Amazon.nl, Amazon.pl und Amazon.se zu verdienen
Copyright © 2025 Newbiely.de. Alle Rechte vorbehalten.
Allgemeine Geschäftsbedingungen | Datenschutzrichtlinie
Email: newbiely.com@gmail.com