SENSOREN/AKTOREN

INTERNET DER DINGE (IoT)

ESP32 - Ethernet

ESP32 - GPIO-Unterbrechung

ESP32 WebAnalogGauge-Beispiel – Tutorial zur professionellen Anzeige-Schnittstelle

Übersicht

Das WebAnalogGauge-Beispiel erstellt eine professionelle kreisförmige Anzeigeoberfläche, die von jedem Webbrowser aus zugänglich ist. Designed for ESP32-Bildungsplattform mit verbesserten Sensorüberwachungsfunktionen, integrierten analogen Eingängen und nahtloser Integration in Messmodule für Bildungszwecke. Perfekt geeignet zur Überwachung von Sensordaten, Spannungspegeln, Druckmessungen oder jeder analogen Messgröße, die visuelles Feedback erfordert.

Arduino WebAnalogGauge-Beispiel – Tutorial zur professionellen Messanzeige

Funktionen

Professionelle Rundanzeige: Interaktive Anzeige über die Weboberfläche
Konfigurierbarer Bereich: Benutzerdefinierte minimale und maximale Werte mit Einheiten
Aktualisierungen in Echtzeit: Anzeige des Live-Sensorwerts 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
Mobile-Responsive: Funktioniert perfekt auf Desktop-, Tablet- und Mobilgeräten
Automatische Konfiguration: Bereich einmal im Konstruktor festlegen – keine manuelle Konfiguration nötig

Erforderliche Hardware

1	×	ESP32 ESP-WROOM-32 Entwicklungsmodul
1	×	USB-Kabel Typ-A zu Typ-C (für USB-A PC)
1	×	USB-Kabel Typ-C zu Typ-C (für USB-C PC)
1	×	Potentiometer (optional for testing)
1	×	Alternativ: 10k Ohm Trimmer Potentiometer
1	×	Alternativ: Potentiometer Kit
1	×	Alternativ: Potentiometer Module with Knob
1	×	Breadboard
1	×	Verbindungskabel
1	×	(Empfohlen) Schraubklemmen-Erweiterungsboard für ESP32
1	×	(Empfohlen) Breakout Expansion Board for ESP32
1	×	(Empfohlen) Stromverteiler für ESP32

Oder Sie können die folgenden Kits kaufen:

1	×	DIYables ESP32 Starter-Kit (ESP32 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.

Setup-Anweisungen

Schnelle Schritte

Folge diesen Anweisungen Schritt für Schritt:

Wenn dies das erste Mal ist, dass Sie den ESP32 verwenden, lesen Sie das Tutorial zum Einrichten der Umgebung für ESP32 in der Arduino IDE (Einrichten der Umgebung für ESP32 in der Arduino IDE).
Verbinden Sie das ESP32-Board über ein USB-Kabel mit Ihrem Computer.
Starten Sie die Arduino IDE auf Ihrem Computer.
Wählen Sie das passende ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
Gehen Sie zum Libraries-Symbol in der linken Leiste der Arduino IDE.
Suchen Sie "DIYables ESP32 WebApps", und finden Sie dann die DIYables ESP32 WebApps-Bibliothek von DIYables.
Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.

Sie werden aufgefordert, einige weitere Bibliotheksabhängigkeiten zu installieren.
Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.

In der Arduino IDE gehen Sie zu Datei Beispiele DIYables ESP32 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: ESP32 Boards * * 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://[esp32-ip]/web-gauge in your web browser */ #include <DIYables_ESP32_Platform.h> #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 ESP32ServerFactory 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 ESP32 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 WLAN-Zugangsdaten im Code, indem Sie diese Zeilen aktualisieren:

const char WIFI_SSID[] = "YOUR_WIFI_NETWORK"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";

Klicken Sie in der Arduino IDE auf die Hochladen-Schaltfläche, um Code auf den ESP32 hochzuladen
Öffnen Sie den seriellen Monitor
Überprüfen Sie das Ergebnis im seriellen Monitor. Es sieht wie folgt aus

COM6

Send

DIYables WebApp - Web Analog Gauge Example INFO: Added app / INFO: Added app /web-gauge DIYables WebApp Library Platform: 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/ ⏲️ Web Analog Gauge: http://192.168.0.2/web-gauge ==========================================

Autoscroll Show timestamp

Clear output

9600 baud

Newline

Öffnen Sie einen Webbrowser auf Ihrem PC oder Mobiltelefon.
Geben Sie die im Serial Monitor angezeigte IP-Adresse in den Webbrowser ein.
Beispiel: http://192.168.1.100
Sie sehen die Startseite wie in der folgenden Abbildung:

ESP32 DIYables WebApp-Startseite mit Web-Analoganzeige-App

Klicken Sie auf den Link Web Analog Gauge, dann sehen Sie die Benutzeroberfläche der Web Analog Gauge-App wie unten:

ESP32 DIYables Web-App Web-Analoganzeige-App

Oder Sie können die Seite auch direkt über die IP-Adresse aufrufen, indem Sie /web-analog-gauge anhängen. Zum Beispiel: http://192.168.1.100/web-analog-gauge
Sie sehen eine professionelle kreisförmige Anzeige, die Echtzeit-Sensorwerte anzeigt

Weboberflächenfunktionen

Analoge Messanzeige

Kreisanzeige: Professionelle Anzeige mit sanfter Zeiger-Animation
Wertebereich: Zeigt konfigurierbare Mindest- und Höchstwerte an
Aktueller Wert: Anzeige des aktuellen Werts in Echtzeit 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: Der Zeiger bewegt sich sanft zwischen den Werten.
Status-Feedback: Verbindungsstatusanzeige.
Mobil optimiert: Touchfreundliche 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 einstellen
Maximalwert: Den höchsten erwarteten Messwert einstellen
Einheiten: Einheitenzeichen anzeigen (V, A, °C, PSI, usw.)
Präzision: Nachkommastellen im Display 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

Gängige Anwendungsfälle

Bildungsprojekte

Spannungsüberwachung: Batteriespannung, Messwerte der Stromversorgung
Umweltmessung: Temperatur, Luftfeuchtigkeit, Lichtintensität
Physikexperimente: Kraft-, Druck- und Beschleunigungsmessungen
Elektroniklernen: Schaltungsanalyse, Bauteilprüfung

Praktische Anwendungen

Hausautomation: Systemüberwachung, Umweltsteuerung
Robotik: Sensorfeedback, Systemdiagnosen
IoT-Projekte: Fernüberwachung, Datenvisualisierung
Industrie: Qualitätskontrolle, Prozessüberwachung

Fehlerbehebung

Messanzeige aktualisiert sich nicht

Überprüfen Sie die WLAN-Verbindung und den WebSocket-Status
Stellen Sie sicher, dass die Callback-Funktion ordnungsgemäß gesetzt ist
Stellen Sie sicher, dass der Anzeigewert innerhalb des konfigurierten Bereichs liegt
Prüfen Sie den seriellen Monitor auf Verbindungsnachrichten

Ungültige Werte

Überprüfen Sie die Sensorverkabelung und -verbindungen
Überprüfen Sie die Einstellungen der analogen Referenzspannung
Kalibrieren Sie die Sensorwerte, falls erforderlich
Stellen Sie sicher, dass die Skalierung in der Callback-Funktion korrekt ist

Verbindungsprobleme

IP-Adresse im Browser überprüfen
Firewall-Einstellungen überprüfen
Stellen Sie sicher, dass es sich um ein 2,4-GHz-WLAN-Netzwerk handelt (5-GHz wird nicht unterstützt)
Versuchen Sie, die Seite im Browser zu aktualisieren

Erweiterte Funktionen

Mehrere Messanzeigen

Sie können mehrere Messanzeigen-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(&currentGauge); server.addApp(&tempGauge);

Datenprotokollierung

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-Digital-Wandlung
Sensorphysik: Erlernen von Messprinzipien
Webtechnologien: Echtzeit-Kommunikationskonzepte
Programmierung: Callback-Funktionen, Datenverarbeitung

Unterrichtsaktivitäten

Sensorvergleich: Verschiedene Sensortypen und -bereiche vergleichen
Kalibrierungsübung: Messgenauigkeit und -präzision lernen
Systemintegration: Mehrere Sensoren und Displays kombinieren
Problemlösung: Sensor- und Displayprobleme beheben

Dieses Beispiel bietet eine umfassende Grundlage für die Überwachung und Visualisierung analoger Sensoren, ideal sowohl für Bildungs- als auch für praktische Anwendungen.