Arduino Nano ESP32 Web Plotter mit DIYables ESP32 WebApps Library
Übersicht
Dieses Tutorial behandelt die DIYablesWebPlotterPage-Klasse aus der DIYables ESP32 WebApps-Bibliothek. Die Seite rendert ein Streaming-Liniendiagramm im Browser. Der Arduino Nano ESP32-Sketch sendet Datenpunkte über WebSocket; der Browser hängt jeden Punkt in Echtzeit an die entsprechende Serie an. Bis zu 8 unabhängige Datenreihen werden gleichzeitig unterstützt.
Schauen Sie sich dieses Schritt-für-Schritt-Video-Tutorial an, das zeigt, wie Sie einen DHT-Sensor mit der Web Plotter App verwenden:
Was dieses Tutorial behandelt
- Konfigurieren des Plottertitels, der Achsenbeschriftungen und des Samplespeicherungslimits
- Senden benannter Datenpunkte aus dem Sketch mit addDataPoint()
- Gleichzeitiges Plotten mehrerer Serien
- Ersetzen simulierter Daten durch echte Sensormessungen
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
Befolgen Sie diese Anleitung Schritt für Schritt:
- Wenn Sie den Arduino Nano ESP32 zum ersten Mal verwenden, beachten Sie das Tutorial zu Einrichten der Entwicklungsumgebung für Arduino Nano ESP32.
- Verbinden Sie das Arduino Nano ESP32-Board mit einem USB-Kabel mit Ihrem Computer.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das richtige Board (z. B. Arduino Nano ESP32) und den COM-Port.
- Navigieren Sie zum Symbol Bibliotheken in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables ESP32 WebApps", und 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 WebPlotter, oder kopieren Sie den obigen Code und fügen Sie ihn in den Editor der Arduino IDE ein
/*
* DIYables WebApp Library - Web Plotter Example
*
* This example demonstrates the Web Plotter feature:
* - Real-time data visualization
* - Multiple data series support
* - Auto-scaling Y-axis
* - Responsive web interface
* - WebSocket communication for instant updates
*
* 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://[IP_ADDRESS]/webplotter
*/
#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;
DIYablesWebPlotterPage webPlotterPage;
// Simulation variables
unsigned long lastDataTime = 0;
const unsigned long DATA_INTERVAL = 1000; // Send data every 1000ms
float timeCounter = 0;
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins and sensors here
Serial.println("DIYables ESP32 WebApp - Web Plotter Example");
// Add home and web plotter pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webPlotterPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Configure the plotter
webPlotterPage.setPlotTitle("Real-time Data Plotter");
webPlotterPage.setAxisLabels("Time (s)", "Values");
webPlotterPage.enableAutoScale(true);
webPlotterPage.setMaxSamples(50);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up callbacks
webPlotterPage.onPlotterDataRequest([]() {
Serial.println("Web client requested data");
sendSensorData();
});
Serial.println("\nWebPlotter is ready!");
Serial.println("Usage Instructions:");
Serial.println("1. Connect to the WiFi network");
Serial.println("2. Open your web browser");
Serial.println("3. Navigate to the Arduino's IP address");
Serial.println("4. Click on 'Web Plotter' to view real-time data");
Serial.println("\nGenerating simulated sensor data...");
}
void loop() {
// Handle web server and WebSocket connections
webAppsServer.loop();
// Send sensor data at regular intervals
if (millis() - lastDataTime >= DATA_INTERVAL) {
lastDataTime = millis();
sendSensorData();
timeCounter += DATA_INTERVAL / 1000.0; // Convert to seconds
}
}
void sendSensorData() {
// Generate simulated sensor data
// In a real application, replace these with actual sensor readings
// Simulated temperature sensor (sine wave with noise)
float temperature = 25.0 + 5.0 * sin(timeCounter * 0.5) + random(-100, 100) / 100.0;
// Simulated humidity sensor (cosine wave)
float humidity = 50.0 + 20.0 * cos(timeCounter * 0.3);
// Simulated light sensor (triangle wave)
float light = 512.0 + 300.0 * (2.0 * abs(fmod(timeCounter * 0.2, 2.0) - 1.0) - 1.0);
// Simulated analog pin reading
float analogValue = analogRead(A0);
// Send data using different methods:
// Method 1: Send individual values (uncomment to use)
// webPlotterPage.sendPlotData(temperature);
// Method 2: Send multiple values at once
webPlotterPage.sendPlotData(temperature, humidity, light / 10.0, analogValue / 100.0);
// Method 3: Send array of values (alternative approach)
// float values[] = {temperature, humidity, light / 10.0, analogValue / 100.0};
// webPlotterPage.sendPlotData(values, 4);
// Method 4: Send raw data string (for custom formatting)
// String dataLine = String(temperature, 2) + " " + String(humidity, 1) + " " + String(light / 10.0, 1);
// webPlotterPage.sendPlotData(dataLine);
// Print to Serial Monitor in Serial Plotter compatible format
// Format: Temperature Humidity Light Analog (tab-separated for Serial Plotter)
Serial.print(temperature, 1);
Serial.print("\t");
Serial.print(humidity, 1);
Serial.print("\t");
Serial.print(light / 10.0, 1);
Serial.print("\t");
Serial.println(analogValue / 100.0, 2);
}
- 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 den Code auf den 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 Plotter Example
INFO: Added app /
INFO: Added app /web-plotter
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 Plotter: http://192.168.0.2/web-plotter
==========================================
- Wenn nichts angezeigt wird, drücken Sie die Reset-Taste auf dem Board.
- Geben Sie die IP-Adresse aus dem Seriellen Monitor in einen Browser im selben Netzwerk ein.
- Beispiel: http://192.168.0.2
- Die Startseite zeigt eine Karte für die Plotter-Anwendung:
- Wählen Sie die Web Plotter-Karte aus, um die Diagrammseite zu öffnen:
- Die Seite ist auch direkt unter http://192.168.0.2/web-plotter erreichbar.
- Das Diagramm beginnt sich zu aktualisieren, wenn der Sketch simulierte Daten sendet. Jede Serie wird in einer anderen Farbe gezeichnet.
Plotter-Konfiguration
Legen Sie vor dem Starten des Servers den Diagrammtitel, die Achsenbeschriftungen, das Verhalten der automatischen Skalierung und die maximale Anzahl der beibehaltenen Samples fest:
webPlotterPage.setPlotTitle("Sensor Data");
webPlotterPage.setAxisLabels("Time (s)", "Value");
webPlotterPage.enableAutoScale(true);
webPlotterPage.setMaxSamples(100); // Keep last 100 points per series
Senden von Datenpunkten
Jeder Datenpunkt gibt einen Seriennamen, X-Wert und Y-Wert an. Die Serie wird bei der ersten Verwendung automatisch erstellt:
// Single series
webPlotterPage.addDataPoint("temperature", elapsedSeconds, sensorValue);
// Multiple series in the same update cycle
webPlotterPage.addDataPoint("temperature", t, tempValue);
webPlotterPage.addDataPoint("humidity", t, humValue);
webPlotterPage.addDataPoint("pressure", t, pressValue);
Lesen aus echten Sensoren
Ersetzen Sie die simulierten Werte im Beispiel durch tatsächliche Sensormessungen:
Einzelner Sensor
float temperature = analogRead(A0) * (5.0 / 1023.0) * 100.0; // LM35
webPlotterPage.addDataPoint("LM35", millis() / 1000.0, temperature);
Mehrere Sensoren
float temp = readTemperature();
float humid = readHumidity();
webPlotterPage.addDataPoint("Temp", millis() / 1000.0, temp);
webPlotterPage.addDataPoint("Humid", millis() / 1000.0, humid);
Beschränken Sie die Senderate, um die WebSocket-Verbindung nicht zu überlasten. Ein Intervall von 500 ms bis 1000 ms ist für die meisten Sensoranwendungen geeignet.
Fehlerbehebung
Diagramm wird nicht aktualisiert
- Bestätigen Sie, dass webAppsServer.loop() bei jeder loop()-Iteration ausgeführt wird
- Fügen Sie Serial.println() vor addDataPoint() hinzu, um zu überprüfen, ob der Codepfad ausgeführt wird
- Laden Sie die Browserseite neu und überprüfen Sie den WebSocket-Verbindungsindikator
Diagramm zeigt flache Linien oder falsche Werte
- Überprüfen Sie die Sensormessung und die Skalierungsformel
- Geben Sie den Wert im Seriellen Monitor aus und senden Sie ihn gleichzeitig an den Plotter
Zu viele Datenpunkte verlangsamen den Browser
- Reduzieren Sie setMaxSamples(), um die pro Serie beibehaltenen Punkte zu verringern
- Erhöhen Sie die Verzögerung zwischen den Datensendungen
Board 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 das Board befindet