Arduino WebAnalogGauge-Beispiel – Tutorial zur professionellen Anzeigeinstrument-Schnittstelle
WebAnalogGauge-Beispiel – Installationsanleitung
Überblick
Das WebAnalogGauge-Beispiel erstellt eine professionelle kreisförmige Anzeigeoberfläche, die von jedem Webbrowser aus zugänglich ist. Entworfen für Arduino Uno R4 WiFi und DIYables STEM V4 IoT Bildungsplattform mit verbesserten Sensorüberwachungsfunktionen, integrierten analogen Eingabefunktionen und nahtlose Integration mit Messbildungsmodulen. Perfekt geeignet zur Überwachung von Sensorwerten, Spannungspegeln, Druckmesswerten oder jeder analogen Messung, die eine visuelle Rückmeldung erfordert.
Funktionen
- Professionelle Rundanzeige: Interaktive Anzeige über die Weboberfläche
- Konfigurierbarer Bereich: Eigene Minimal- und Maximalwerte mit Einheiten
- Aktualisierungen in Echtzeit: Anzeige der Sensorwerte in Echtzeit mit sanfter Nadelbewegung
- Farbcodierte Zonen: Visuelle Statusanzeige (grüne, gelbe, rote Zonen)
- Präzisionskontrolle: Konfigurierbare Dezimalgenauigkeit für angezeigte Werte
- WebSocket-Kommunikation: Sofortige Updates ohne Seitenaktualisierung
- Mobilfreundlich: Funktioniert perfekt auf Desktop-, Tablet- und Mobilgeräten
- Automatische Konfiguration: Bereich einmal im Konstruktor festlegen – keine manuelle Konfiguration erforderlich
- Plattform-Erweiterbarkeit: Derzeit für Arduino Uno R4 WiFi umgesetzt, 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.
Anweisungen zur Einrichtung
Schnelle Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- 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 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 über ein 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 aus.
- Gehen 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 Installieren, um die Bibliothek zu installieren.
- Sie werden aufgefordert, weitere Bibliotheksabhängigkeiten zu installieren.
- Klicken Sie auf die Alle installieren-Schaltfläche, um alle Bibliotheksabhängigkeiten zu installieren.
- In der Arduino-IDE, gehen Sie zu Datei Beispiele DIYables WebApps WebAnalogGauge Beispiel, oder kopieren Sie den obigen Code und fügen Sie ihn in den Editor der Arduino-IDE ein
/*
* DIYables WebApp Library - Web Analog Gauge Example
*
* This Serial.println("\nWebAnalogGauge is ready!");
Serial.print("IP Address: ");
Serial.println(webAppsServer.getLocalIP());
Serial.println("Open your web browser and navigate to:");
Serial.print("1. http://");
Serial.print(webAppsServer.getLocalIP());
Serial.println("/ (Home page)");
Serial.print("2. http://");
Serial.print(webAppsServer.getLocalIP());
Serial.println("/webanalogGauge (Analog Gauge)");
Serial.println("\nSimulating sensor data...");monstrates the Web Analog Gauge application:
* - Real-time analog gauge visualization
* - Simulated sensor data with smooth animation
* - WebSocket communication for live updates
* - Beautiful analog gauge with tick marks and smooth pointer movement
*
* Features:
* - Automatic gauge value simulation
* - Smooth animation between values
* - Range: 0° to 280° (customizable)
* - Real-time WebSocket updates
* - Professional analog gauge appearance
*
* Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[arduino-ip]/web-gauge in your web browser
*/
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
// Gauge configuration constants
const float GAUGE_MIN_VALUE = 0.0;
const float GAUGE_MAX_VALUE = 100.0;
const String GAUGE_UNIT = "%";
DIYablesWebAnalogGaugePage webAnalogGaugePage(GAUGE_MIN_VALUE, GAUGE_MAX_VALUE, GAUGE_UNIT); // Range: 0-100%
// Other examples:
// DIYablesWebAnalogGaugePage webAnalogGaugePage(-50.0, 150.0, "°C"); // Temperature: -50°C to 150°C
// DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 1023.0, ""); // Analog sensor: 0-1023 (no unit)
// DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 5.0, "V"); // Voltage: 0-5V
// Simulation variables
unsigned long lastUpdateTime = 0;
const unsigned long UPDATE_INTERVAL = 500; // Update every 500ms (0.5 second)
const float STEP_SIZE = 1.0; // Step size for simulation
float currentGaugeValue = GAUGE_MIN_VALUE; // Start at minimum value
float step = STEP_SIZE; // Positive step means increasing, negative means decreasing
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables WebApp - Web Analog Gauge Example");
// Add web applications to the server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webAnalogGaugePage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
setupCallbacks();
}
void setupCallbacks() {
// Handle gauge value requests (when web page loads/reconnects)
webAnalogGaugePage.onGaugeValueRequest([]() {
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
Serial.println("Web client requested gauge value - Sent: " + String(currentGaugeValue, 1) + GAUGE_UNIT);
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Update gauge with simulated sensor data
if (millis() - lastUpdateTime >= UPDATE_INTERVAL) {
lastUpdateTime = millis();
Serial.println("Updating gauge value..."); // Debug message
// Simple linear simulation: step changes direction at boundaries
currentGaugeValue += step;
// Change direction when reaching boundaries
if (currentGaugeValue >= GAUGE_MAX_VALUE || currentGaugeValue <= GAUGE_MIN_VALUE) {
step *= -1; // Reverse direction
}
// Ensure value stays within bounds (safety check)
if (currentGaugeValue < GAUGE_MIN_VALUE) currentGaugeValue = GAUGE_MIN_VALUE;
if (currentGaugeValue > GAUGE_MAX_VALUE) currentGaugeValue = GAUGE_MAX_VALUE;
// Send the new value to all connected web clients
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
// Print to serial for debugging
Serial.println("Gauge: " + String(currentGaugeValue, 1) + GAUGE_UNIT + " (" + (step > 0 ? "↑" : "↓") + ")");
}
delay(10);
}
- Konfigurieren Sie die WiFi-Zugangsdaten im Code, indem Sie diese Zeilen aktualisieren:
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 Code auf den Arduino UNO R4/DIYables STEM V4 IoT hochzuladen.
- Öffnen Sie den Seriemonitor.
- Überprüfen Sie das Ergebnis im Seriemonitor. Es sieht wie folgt aus.
COM6
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
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/
⏲️ Web Analog Gauge: http://192.168.0.2/web-gauge
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Öffnen Sie einen Webbrowser auf Ihrem PC oder Smartphone.
- Geben Sie die im Serial Monitor angezeigte IP-Adresse in den Webbrowser ein.
- Beispiel: http://192.168.1.100
- Sie sehen die Startseite wie im untenstehenden Bild:
- Klicken Sie auf den Link Web Analog Gauge, dann sehen Sie die Benutzeroberfläche der Web Analog Gauge-App wie unten dargestellt:
- Oder Sie können die Seite auch direkt über die IP-Adresse aufrufen, gefolgt von /web-analog-gauge. Zum Beispiel: http://192.168.1.100/web-analog-gauge
- Sie sehen eine professionelle kreisförmige Anzeige, die Echtzeit-Sensordaten anzeigt
Funktionen der Weboberfläche
Analoge Messanzeige
- Rundinstrument: Professionelles Messinstrument mit sanfter Zeigerbewegung
- Wertebereich: Zeigt konfigurierbare minimale und maximale Werte an
- Aktueller Messwert: Echtzeitanzeige des Wertes mit Einheiten
- Farbzonen: Visuelle Statusanzeige basierend auf Wertebereichen
- Präzision: Konfigurierbare Dezimalstellen für genaue Messwerte
Echtzeit-Updates
- Live-Daten: Werte werden automatisch über die WebSocket-Verbindung aktualisiert
- Sanfte Animation: Die Nadel bewegt sich sanft zwischen den Werten
- Status-Feedback: Anzeige des Verbindungsstatus
- Mobil optimiert: Touch-freundliche Benutzeroberfläche für alle Geräte
Code-Konfiguration
Messaufbau
// Configure gauge range and units
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // 0-100 Volts
// Set up value request callback
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
Werte senden
void onGaugeValueRequested() {
// Read sensor value (example with potentiometer)
int sensorValue = analogRead(A0);
float voltage = (sensorValue / 1023.0) * 5.0;
// Send to gauge
gaugePage.sendGaugeValue(voltage);
}
Anpassungsoptionen
Bereichskonfiguration
- Mindestwert: Den niedrigsten erwarteten Messwert festlegen
- Höchstwert: Den höchsten erwarteten Messwert festlegen
- Einheiten: Die Einheit als Zeichenfolge anzeigen (V, A, °C, PSI usw.)
- Präzision: Die Anzahl der Dezimalstellen in der Anzeige festlegen
Sensorintegration
- Analoge Sensoren: Spannungs-, Strom-, Druck- und Lichtsensoren
- Digitale Sensoren: Temperatur-, Feuchtigkeits- und Gassensoren über I2C/SPI
- Berechnete Werte: Aus mehreren Sensoren abgeleitete Messwerte
- Kalibrierte Messwerte: Kalibrierfaktoren zur Genauigkeit anwenden
Häufige Anwendungsfälle
Bildungsprojekte
- Spannungsüberwachung: Batteriespannung, Messwerte der Stromversorgung
- Umweltmessung: Temperatur, Luftfeuchtigkeit, Lichtpegel
- Physikexperimente: Kraft-, Druck- und Beschleunigungsmessungen
- Elektroniklernen: Schaltungsanalyse, Bauteilprüfung
Praktische Anwendungen
- Heimautomatisierung: Systemüberwachung, Umweltsteuerung
- Robotik: Sensor-Rückmeldung, Systemdiagnosen
- IoT-Projekte: Fernüberwachung, Datenvisualisierung
- Industrie: Qualitätskontrolle, Prozessüberwachung
Fehlersuche
Messanzeige aktualisiert sich nicht
- Überprüfe die WLAN-Verbindung und den WebSocket-Status
- Stelle sicher, dass die Callback-Funktion korrekt gesetzt ist
- Stelle sicher, dass der Anzeigenwert im konfigurierten Bereich liegt
- Prüfe den Serial Monitor auf Verbindungsnachrichten
Ungültige Werte
- Sensorverkabelung und Verbindungen überprüfen
- Analoge Referenzspannungseinstellungen überprüfen
- Sensorwerte bei Bedarf kalibrieren
- Für eine korrekte Skalierung in der Callback-Funktion sorgen
Verbindungsprobleme
- IP-Adresse im Browser überprüfen
- Firewall-Einstellungen überprüfen
- Stellen Sie sicher, dass das 2,4-GHz-WLAN-Netzwerk verwendet wird (5-GHz wird nicht unterstützt)
- Versuchen Sie, die Browser-Seite zu aktualisieren
Erweiterte Funktionen
Mehrere Messanzeigen
Sie können mehrere Gauge-Instanzen für verschiedene Sensoren erstellen:
DIYablesWebAnalogGaugePage voltageGauge(0.0, 5.0, "V");
DIYablesWebAnalogGaugePage currentGauge(0.0, 2.0, "A");
DIYablesWebAnalogGaugePage tempGauge(-40.0, 85.0, "°C");
server.addApp(&voltageGauge);
server.addApp(¤tGauge);
server.addApp(&tempGauge);
Datenerfassung
Mit Web Plotter zur Visualisierung historischer Daten kombinieren:
// Send same value to both gauge and plotter
gaugePage.sendGaugeValue(voltage);
plotterPage.sendData("Voltage", voltage);
Bildungsintegration
MINT-Lernziele
- Datenvisualisierung: Verständnis der Analog-zu-Digital-Wandlung
- Sensorphysik: Erlernen von Messprinzipien
- Webtechnologien: Konzepte der Echtzeitkommunikation
- Programmierung: Callback-Funktionen, Datenverarbeitung
Unterrichtsaktivitäten
- Sensor-Vergleich: Verschiedene Sensortypen und -bereiche vergleichen
- Kalibrierungsübung: Messgenauigkeit und Präzision erlernen
- Systemintegration: Mehrere Sensoren und Anzeigen kombinieren
- Problemlösung: Sensor- und Anzeigeprobleme beheben
Dieses Beispiel bietet eine umfassende Grundlage für die Überwachung und Visualisierung analoger Sensoren, ideal für Bildungs- und praxisorientierte Anwendungen.