Arduino Nano ESP32 Web-Analoganzeige mit DIYables ESP32 WebApps Library
Übersicht
Dieses Tutorial behandelt die DIYablesWebAnalogGaugePage Klasse aus der DIYables ESP32 WebApps Library. Die Seite zeichnet eine Kreisanzeige im Browser und empfängt Wertaktualisierungen vom Arduino Nano ESP32 über WebSocket. Der Anzeigebereich, die Einheiten und die Dezimalgenauigkeit werden im Konstruktor definiert – der Browser liest diese Konfiguration automatisch.
Sehen Sie sich dieses Schritt-für-Schritt-Videotutorial an, das zeigt, wie Sie einen Potentiometer mit der Web-Analoganzeige verwenden:
Was dieses Tutorial abdeckt
- Konfigurieren einer Anzeigeseite mit benutzerdefiniertem Bereich und Einheitenetikett
- Senden von Sensorwerten auf Anforderung an den Browser mithilfe eines Callbacks
- Streaming kontinuierlicher Anzeigeaktualisierungen aus der Hauptschleife
- Integration eines Potentiometers als Analogeingangsquelle
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 zum ersten Mal den Arduino Nano ESP32 verwenden, beziehen Sie sich auf 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 die entsprechende Platine (z. B. Arduino Nano ESP32) und COM-Port aus.
- Navigieren Sie zum Symbol Bibliotheken in der linken Leiste der Arduino IDE.
- Suchen Sie nach "DIYables ESP32 WebApps", dann finden Sie 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 WebAnalogGauge Beispiel, oder kopieren Sie den obigen Code und fügen Sie ihn im 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);
}
- Aktualisieren Sie die WiFi-Anmeldedaten im Sketch:
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 Arduino Nano ESP32 hochzuladen
- Öffnen Sie den seriellen Monitor
- Die Ausgabe des seriellen Monitors sollte etwa wie folgt aussehen:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
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/
Web Analog Gauge: http://192.168.0.2/web-gauge
==========================================
- Wenn nichts angezeigt wird, drücken Sie die Zurücksetzen-Taste auf der Platine.
- Geben Sie die im seriellen Monitor angezeigte IP-Adresse in einen Browser auf einem Gerät im selben Netzwerk ein.
- Beispiel: http://192.168.0.2
- Die Startseite zeigt eine Karte für die Anzeigenanwendung an:
- Wählen Sie die Karte Web-Analoganzeige, um die Anzeigeseite zu öffnen:
- Die Anzeige ist auch direkt unter http://192.168.0.2/web-gauge erreichbar.
Anzeigenkonfiguration
Der Bereich und die Einheiten werden im Konstruktor festgelegt und einmal bei der Verbindung an den Browser gesendet:
// Parameters: minimum, maximum, unit string
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V");
Der Wertanforderungs-Callback wird jedes Mal aufgerufen, wenn sich ein Browser verbindet und die aktuelle Messwert anfordert:
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
void onGaugeValueRequested() {
int raw = analogRead(A0);
float voltage = (raw / 1023.0) * 5.0;
gaugePage.sendGaugeValue(voltage);
}
Für kontinuierliches Streaming (anstelle von On-Demand) rufen Sie sendGaugeValue() aus der Hauptschleife in gewünschten Abständen auf.
Beispiel: Potentiometer-basierte Anzeige
Die Bibliothek enthält ein einsatzbereites Potentiometer-Beispiel:
#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";
// Define pin
#define PIN_ANALOG 36
// 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%
// 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;
currentGaugeValue = analogRead(PIN_ANALOG);
currentGaugeValue = map(currentGaugeValue,0,4095,0,100);
// 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);
}
Häufige Sensortypen
Die Anzeige eignet sich für alle Messungen, die einen Gleitkommawert in einem bekannten Bereich erzeugen:
- Spannungsüberwachung (Batterie, Stromversorgung)
- Temperatur- oder Feuchtemessungen von einem kalibrierten Sensor
- Druckmessungen von einem Druckwandler
- Lichintensität von einem LDR
- Jede Analoglesart skaliert auf technische Einheiten
Fehlerbehebung
Anzeigezeiger bewegt sich nicht
- Bestätigen Sie, dass webAppsServer.loop() bei jeder Iteration von loop() ausgeführt wird
- Überprüfen Sie den seriellen Monitor auf WebSocket-Verbindungsereignisse
- Verifizieren Sie, dass der Callback vor webAppsServer.begin() zugewiesen wurde
Anzeige zeigt falsche Werte
- Überprüfen Sie die Analogreferenzspannung für Ihre Platine
- Verifizieren Sie, dass die Skalierungsformel die Raw-ADC-Werte auf den konfigurierten Bereich abbildet
- Fügen Sie Serial.println(value) im Callback ein, um Werte vor dem Senden zu überprüfen
Seite ist nicht erreichbar
- Bestätigen Sie die IP-Adresse aus dem seriellen Monitor
- Stellen Sie sicher, dass sich das Browser-Gerät im selben 2,4-GHz-Netzwerk wie die Platine befindet
- Überprüfen Sie, dass Port 80 nicht durch eine Firewall blockiert wird