ESP32 WebPlotter-Beispiel – Tutorial zur Visualisierung von Echtzeitdaten
Überblick
Das WebPlotter-Beispiel erstellt eine Echtzeit-Datenvisualisierungsoberfläche, die über jeden Webbrowser zugänglich ist. Es ist für die ESP32-Bildungsplattform konzipiert und bietet erweiterte Datenverarbeitungsfähigkeiten, Echtzeit-Plot-Funktionen und eine nahtlose Integration in Sensorüberwachungssysteme. Ideal zur Visualisierung von Sensordaten, zum Debuggen von Algorithmen oder zur Überwachung der Systemleistung in Echtzeit.
Funktionen
- Echtzeit-Datenvisualisierung: Sensorendaten in Echtzeit visualisieren, die direkt vom Arduino gestreamt werden
- Mehrere Datenreihen: Bis zu 8 verschiedene Datenströme gleichzeitig darstellen
- Auto-Skalierung: Automatische Skalierung der Y-Achse basierend auf dem Wertebereich der Daten
- Interaktive Oberfläche: Zoomen, Verschieben und Analysieren von Daten-Trends
- WebSocket-Kommunikation: Sofortige Updates mit minimaler Latenz
- Responsives Design: Funktioniert auf Desktop-, Tablet- und Mobilgeräten
- Anpassbare Konfiguration: Plot-Titel, Achsenbeschriftungen und Bereiche
Erforderliche Hardware
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.
Installationsanweisungen
Schnelle Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn Sie das ESP32 zum ersten Mal verwenden, lesen Sie das Tutorial zur Einrichtung der ESP32-Umgebung in der Arduino IDE.
- Schließen Sie das ESP32-Board über ein USB-Kabel an Ihren Computer an.
- 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.
- Navigieren Sie zum Bibliotheken-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, 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 WebPlotter Beispeil, oder kopieren Sie den obigen Code und fügen 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);
}
- 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 Hochladen-Schaltfläche in der Arduino IDE, um den Code auf den ESP32 hochzuladen
- Öffnen Sie den seriellen Monitor
- Überprüfen Sie das Ergebnis im seriellen Monitor. Es sieht wie folgt aus:
COM6
DIYables WebApp - Web Plotter Example
INFO: Added app /
INFO: Added app /web-plotter
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 Plotter: http://192.168.0.2/web-plotter
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Wenn Sie nichts sehen, starten Sie das ESP32-Board neu.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Beispiel: http://192.168.0.2
- Sie sehen die Startseite wie im unten gezeigten Bild:
- Klicken Sie auf den Link zum Web Plotter, dann sehen Sie die Benutzeroberfläche der Web Plotter-App wie unten:
- Oder Sie können die Seite auch direkt über die IP-Adresse aufrufen, gefolgt von /web-plotter. Zum Beispiel: http://192.168.0.2/web-plotter
- Beobachten Sie, wie der ESP32 simulierte Sensordaten erzeugt und sie in Echtzeit grafisch darstellt. Sie werden mehrere farbige Linien sehen, die verschiedene Datenströme repräsentieren.
Kreative Anpassung – Visualisieren Sie Ihre Daten kreativ
Passe die Plot-Schnittstelle an deine einzigartigen Projektanforderungen an und erstelle beeindruckende Datenvisualisierungen:
Konfiguration der Datenquelle
Ersetzen Sie simulierte Daten durch echte Sensordaten:
Methode 1: Sensorwert eines einzelnen Sensors
void sendTemperatureData() {
float temperature = analogRead(A0) * (5.0 / 1023.0) * 100; // LM35 temperature sensor
webPlotterPage.sendPlotData(temperature);
}
Methode 2: Mehrere Sensoren
void sendMultipleSensors() {
float temperature = readTemperature();
float humidity = readHumidity();
float light = analogRead(A1) / 10.0;
float pressure = readPressure();
webPlotterPage.sendPlotData(temperature, humidity, light, pressure);
}
Methode 3: Array von Werten
void sendSensorArray() {
float sensors[6] = {
analogRead(A0) / 10.0, // Sensor 1
analogRead(A1) / 10.0, // Sensor 2
analogRead(A2) / 10.0, // Sensor 3
digitalRead(2) * 50, // Digital state
millis() / 1000.0, // Time counter
random(0, 100) // Random data
};
webPlotterPage.sendPlotData(sensors, 6);
}
Diagrammanpassung
Benutzerdefiniertes Diagramm-Aussehen
void setupCustomPlot() {
webPlotterPage.setPlotTitle("Environmental Monitoring Station");
webPlotterPage.setAxisLabels("Time (minutes)", "Sensor Readings");
webPlotterPage.setYAxisRange(0, 100); // Fixed Y-axis range
webPlotterPage.setMaxSamples(100); // Show more data points
}
Dynamische Konfiguration
void setupDynamicPlot() {
webPlotterPage.setPlotTitle("Smart Garden Monitor");
webPlotterPage.setAxisLabels("Sample #", "Values");
webPlotterPage.enableAutoScale(true); // Auto-adjust Y-axis
// Configure callbacks for interactive features
webPlotterPage.onPlotterDataRequest([]() {
Serial.println("Client connected - sending initial data");
sendInitialDataBurst();
});
}
Fortgeschrittene Datenverarbeitung
Gleitender Durchschnittsfilter
float movingAverage(float newValue) {
static float readings[10];
static int index = 0;
static float total = 0;
total -= readings[index];
readings[index] = newValue;
total += readings[index];
index = (index + 1) % 10;
return total / 10.0;
}
void sendFilteredData() {
float rawValue = analogRead(A0);
float filteredValue = movingAverage(rawValue);
webPlotterPage.sendPlotData(rawValue / 10.0, filteredValue / 10.0);
}
Datenprotokollierung mit Zeitstempeln
void sendTimestampedData() {
unsigned long currentTime = millis() / 1000;
float sensorValue = analogRead(A0) / 10.0;
// Send time and value as separate data series
webPlotterPage.sendPlotData(currentTime, sensorValue);
// Also log to Serial for debugging
Serial.print("Time: ");
Serial.print(currentTime);
Serial.print("s, Value: ");
Serial.println(sensorValue);
}
Integrationsbeispiele
Umweltmonitoring
#include <DHT.h>
#define DHT_PIN 2
#define DHT_TYPE DHT22
DHT dht(DHT_PIN, DHT_TYPE);
void sendEnvironmentalData() {
float temperature = dht.readTemperature();
float humidity = dht.readHumidity();
float lightLevel = analogRead(A0) / 10.0;
if (!isnan(temperature) && !isnan(humidity)) {
webPlotterPage.sendPlotData(temperature, humidity, lightLevel);
Serial.print("T: ");
Serial.print(temperature);
Serial.print("°C, H: ");
Serial.print(humidity);
Serial.print("%, Light: ");
Serial.println(lightLevel);
}
}
Rückmeldung zur Motorsteuerung
void sendMotorData() {
int motorSpeed = analogRead(A0); // Speed potentiometer
int currentDraw = analogRead(A1); // Current sensor
int motorPosition = digitalRead(2); // Position sensor
float speedPercent = (motorSpeed / 1023.0) * 100;
float currentAmps = (currentDraw / 1023.0) * 5.0;
float positionDegrees = motorPosition * 90;
webPlotterPage.sendPlotData(speedPercent, currentAmps, positionDegrees);
}
PID-Regler-Visualisierung
float setpoint = 50.0;
float kp = 1.0, ki = 0.1, kd = 0.01;
float integral = 0, previousError = 0;
void sendPIDData() {
float input = analogRead(A0) / 10.0;
float error = setpoint - input;
integral += error;
float derivative = error - previousError;
float output = (kp * error) + (ki * integral) + (kd * derivative);
previousError = error;
// Plot setpoint, input, error, and output
webPlotterPage.sendPlotData(setpoint, input, error, output);
}
Leistungsoptimierung
Effiziente Datenübertragung
unsigned long lastPlotUpdate = 0;
const unsigned long PLOT_INTERVAL = 100; // Update every 100ms
void efficientDataSending() {
if (millis() - lastPlotUpdate >= PLOT_INTERVAL) {
lastPlotUpdate = millis();
// Only send data at defined intervals
float value1 = analogRead(A0) / 10.0;
float value2 = analogRead(A1) / 10.0;
webPlotterPage.sendPlotData(value1, value2);
}
}
Bedingte Datenübermittlung
float lastSentValue = 0;
const float CHANGE_THRESHOLD = 5.0;
void sendOnChange() {
float currentValue = analogRead(A0) / 10.0;
// Only send if value changed significantly
if (abs(currentValue - lastSentValue) > CHANGE_THRESHOLD) {
webPlotterPage.sendPlotData(currentValue);
lastSentValue = currentValue;
}
}
Projektideen
Wissenschaftliche Anwendungen
- Datenlogger: Temperatur, Luftfeuchtigkeit und Druck im Zeitverlauf aufzeichnen
- Schwingungsanalyse: Beschleunigungsdaten für mechanische Systeme überwachen
- pH-Überwachung: Wasserqualität in Aquaponik-Systemen überwachen
- Solarmodul-Effizienz: Spannungsausgang und Stromausgang im Verhältnis zur Sonneneinstrahlung überwachen
Bildungsprojekte
- Physikexperimente: Pendelbewegung visualisieren, Federschwingungen visualisieren
- Chemielabor: Reaktionsgeschwindigkeiten und Temperaturänderungen überwachen
- Biologiestudien: Pflanzenwachstumssensoren und Umweltfaktoren überwachen
- Mathematik: Mathematische Funktionen und algorithmische Ergebnisse darstellen
Heimautomatisierung
- Energieüberwachung: Stromverbrauchsmuster verfolgen
- Gartenautomatisierung: Bodenfeuchtigkeit und Lichtverhältnisse überwachen
- HLK-Steuerung: Temperatur- und Feuchtigkeitsverläufe visualisieren
- Sicherheitssystem: Bewegungsmelderaktivitäten darstellen
Robotik und Regelung
- Roboternavigation: Positionen und Orientierungsdaten visualisieren
- Motorsteuerung: Geschwindigkeit, Drehmoment und Effizienz überwachen
- Sensorfusion: Mehrere Sensorwerte kombinieren
- Pfadplanung: Bewegungsalgorithmen des Roboters visualisieren
Fehlerbehebung
Häufige Probleme
- Auf dem Diagramm werden keine Daten angezeigt.
- WLAN-Verbindungsstatus überprüfen
- WebSocket-Verbindung in der Browser-Konsole überprüfen
- Stellen Sie sicher, dass sendPlotData() regelmäßig aufgerufen wird
- Seriellen Monitor nach Fehlermeldungen prüfen
- Der Plot wirkt sprunghaft oder unberechenbar.
- Datenfilterung implementieren (gleitender Durchschnitt)
- Sendehäufigkeit der Daten reduzieren
- Auf Sensorrauschen oder Verbindungsprobleme prüfen
- Stabilität der Stromversorgung überprüfen
3. Leistungsprobleme im Browser
- Reduziere die maximale Anzahl der Samples (setMaxSamples())
- Reduziere die Datenübertragungsrate
- Schließe andere Browser-Tabs
- Verwende die Hardwarebeschleunigung im Browser
4. WebSocket-Verbindungsabbrüche
- WLAN-Signalstärke überprüfen
- Router-Einstellungen verifizieren (Firewall, Port-Blockierung)
- Wiederverbindungslogik im eigenen Code implementieren
- Speicherverbrauch des ESP32 überwachen
Debug-Tipps
Detaillierte Protokollierung aktivieren
void debugPlotterData() {
Serial.println("=== Plotter Debug Info ===");
Serial.print("Free RAM: ");
Serial.println(freeMemory());
Serial.print("Connected clients: ");
Serial.println(server.getConnectedClients());
Serial.print("Data rate: ");
Serial.println("Every " + String(DATA_INTERVAL) + "ms");
Serial.println("========================");
}
Testdaten-Generierung
void generateTestPattern() {
static float phase = 0;
float sine = sin(phase) * 50 + 50;
float cosine = cos(phase) * 30 + 70;
float triangle = (phase / PI) * 25 + 25;
webPlotterPage.sendPlotData(sine, cosine, triangle);
phase += 0.1;
if (phase > 2 * PI) phase = 0;
}
Erweiterte Funktionen
Benutzerdefinierte Datenformatierung
void sendFormattedData() {
float temp = 25.5;
float humidity = 60.3;
// Create custom formatted data string
String dataLine = String(temp, 1) + "\t" + String(humidity, 1);
webPlotterPage.sendPlotData(dataLine);
}
Integration mit anderen Web-Apps
void setupMultipleApps() {
// Add multiple web applications
server.addApp(new DIYablesHomePage());
server.addApp(new DIYablesWebDigitalPinsPage());
server.addApp(new DIYablesWebSliderPage());
server.addApp(&webPlotterPage);
server.addApp(new DIYablesNotFoundPage());
// Configure interactions between apps
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Use slider values to control what gets plotted
float scaleFactor = slider1 / 255.0;
// ... plotting logic
});
}
Echtzeitsteuerung mit Plotten
void controlAndPlot() {
// Read control inputs
int targetSpeed = analogRead(A0);
// Control hardware
analogWrite(9, targetSpeed / 4); // PWM output
// Read feedback
int actualSpeed = analogRead(A1);
int motorCurrent = analogRead(A2);
// Plot target vs actual
webPlotterPage.sendPlotData(
targetSpeed / 4.0, // Target speed
actualSpeed / 4.0, // Actual speed
motorCurrent / 10.0 // Current draw
);
}
Nächste Schritte
Nachdem Sie das WebPlotter-Beispiel gemeistert haben, erkunden Sie:
- MultipleWebApps - Plotten mit Bedienoberflächen kombinieren
- WebMonitor - Debugging-Funktionen neben dem Plotten hinzufügen
- Custom Applications - Eigene spezialisierte Plotting-Werkzeuge erstellen
- Data Analysis - Statistische Analyse der geplotteten Daten implementieren
Unterstützung
Für weitere Hilfe:
- Überprüfen Sie die API-Referenzdokumentation
- Besuchen Sie DIYables Tutorials: https://esp32io.com/tutorials/diyables-esp32-webapps
- ESP32-Community-Foren
- WebSocket-Debugging-Tools in der Browser-Entwicklerkonsole