Arduino WebPlotter-Beispiel – Tutorial zur Echtzeit-Datenvisualisierung
WebPlotter-Beispiel – Installationsanleitung
Überblick
Das WebPlotter-Beispiel erstellt eine Echtzeit-Datenvisualisierungsoberfläche, die über jeden Webbrowser zugänglich ist. Entworfen für Arduino Uno R4 WiFi und DIYables STEM V4 IoT-Bildungsplattform mit erweiterten Datenverarbeitungsfähigkeiten, Echtzeit-Plotting-Funktionen und nahtlose Integration in Sensorüberwachungssysteme. Ideal zum Visualisieren von Sensordaten, zum Debuggen von Algorithmen oder zur Überwachung der Systemleistung in Echtzeit.
Funktionen
- Echtzeit-Datenvisualisierung: Visualisieren Sie Sensordaten, die vom Arduino gestreamt werden
- Mehrere Datenreihen: Plotten Sie bis zu 8 verschiedene Datenströme gleichzeitig
- Automatische Skalierung: Die Y-Achse wird automatisch basierend auf dem Wertebereich der Daten skaliert
- Interaktive Benutzeroberfläche: Zoomen, Verschieben und Daten-Trends analysieren
- WebSocket-Kommunikation: Sofortige Updates mit minimaler Latenz
- Responsives Design: Funktioniert auf Desktop-, Tablet- und Mobilgeräten
- Anpassbare Konfiguration: Einstellbare Diagrammtitel, Achsenbeschriftungen und Bereiche
- Plattform-Erweiterbarkeit: Derzeit für Arduino Uno R4 WiFi implementiert, kann jedoch 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.
Installationsanweisungen
Schnelle Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Falls dies Ihre erste Nutzung des Arduino Uno R4 WiFi/DIYables STEM V4 IoT ist, lesen Sie die Anleitung zur Einrichtung der Umgebung für Arduino Uno R4 WiFi/DIYables STEM V4 IoT in der Arduino IDE.
- Verbinden Sie das Arduino Uno R4/DIYables STEM V4 IoT-Board über ein USB-Kabel mit Ihrem Computer.
- Ö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.
- Navigieren Sie zum Bibliotheken-Symbol in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables WebApps", und finden Sie anschließend 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 Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- In der Arduino IDE gehen Sie zu Datei Beispiele DIYables WebApps WebPlotter Beispiel, 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: 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://[IP_ADDRESS]/webplotter
*/
#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;
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 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 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 Arduino UNO R4/DIYables STEM V4 IoT hochzuladen.
- Öffnen Sie den Serial Monitor.
- Überprüfen Sie das Ergebnis im Serial Monitor. Es sieht so aus wie unten.
COM6
DIYables WebApp - Web Plotter Example
INFO: Added app /
INFO: Added app /web-plotter
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 Plotter: http://192.168.0.2/web-plotter
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Wenn Sie nichts sehen, starten Sie das Arduino-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 folgenden 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 Arduino simulierte Sensordaten generiert und diese in Echtzeit plottet. Sie werden mehrere farbige Linien sehen, die verschiedene Datenströme repräsentieren.
Kreative Anpassung – Visualisiere deine Daten kreativ
Transformieren Sie die Plot-Oberfläche, um sie an Ihre einzigartigen Projektanforderungen anzupassen und beeindruckende Datenvisualisierungen zu erstellen:
Konfiguration der Datenquelle
Ersetze simulierte Daten durch reale Sensordaten:
Methode 1: Einzelner Sensorwert
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: Werte-Array
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);
}
Plot-Anpassung
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
Umweltüberwachung
#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, Druck im Verlauf der Zeit aufzeichnen
- Schwingungsanalyse: Beschleunigungsdaten von mechanischen Systemen überwachen
- pH-Überwachung: Wasserqualität in Aquaponik-Systemen überwachen
- Solarmodul-Effizienz: Spannung und Stromausgabe im Verhältnis zur Sonneneinstrahlung überwachen
Bildungsprojekte
- Physik-Experimente: Pendelsbewegung visualisieren, Feder-Schwingungen
- Chemielabor: Reaktionsraten und Temperaturänderungen überwachen
- Biologiestudien: Pflanzenwachstumssensoren und Umweltfaktoren überwachen
- Mathematik: Mathematische Funktionen und algorithmische Ausgaben darstellen
Heimautomatisierung
- Energieüberwachung: Stromverbrauchsmuster verfolgen
- Gartenautomation: Bodenfeuchtigkeit und Lichtverhältnisse überwachen
- HVAC-Steuerung: Temperatur- und Feuchtigkeitsverläufe visualisieren
- Sicherheitssystem: Bewegungssensoraktivitäten aufzeichnen
Robotik und Regelung
- Roboternavigation: Positions- und Orientierungsdaten visualisieren
- Motorsteuerung: Geschwindigkeit, Drehmoment und Effizienz überwachen
- Sensorfusion: Mehrere Sensordaten kombinieren
- Pfadplanung: Bewegungsalgorithmen des Roboters visualisieren
Fehlerbehebung
Häufige Probleme
- Es erscheinen keine Daten im Diagramm
- WLAN-Verbindungsstatus prüfen
- WebSocket-Verbindung in der Browser-Konsole prüfen
- Stelle sicher, dass sendPlotData() regelmäßig aufgerufen wird
- Prüfe den seriellen Monitor auf Fehlermeldungen
2. Das Diagramm wirkt sprunghaft oder unregelmäßig
- Datenfilterung implementieren (gleitender Durchschnitt)
- Datenübertragungsfrequenz reduzieren
- Sensorrauschen oder Verbindungsprobleme überprüfen
- Stromversorgungsstabilität überprüfen
3. Leistungsprobleme des Browsers
- Reduziere die maximale Anzahl an Stichproben (setMaxSamples())
- Reduziere die Datenübertragungsrate
- Schließe andere Browser-Tabs
- Verwende Hardwarebeschleunigung im Browser
- WebSocket-Verbindungsabbrüche
- WLAN-Signalstärke überprüfen
- Routereinstellungen überprüfen (Firewall, Port-Blockierung)
- Wiederverbindungslogik im eigenen Code implementieren
- Arduino-Speicherverbrauch ü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-Erzeugung
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 Webanwendungen
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 Plot-Darstellung
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 Steuerelementen kombinieren
- WebMonitor - Debugging-Funktionen neben dem Plotten hinzufügen
- Custom Applications - Eigene spezialisierte Plot-Werkzeuge erstellen
- Data Analysis - Statistische Analyse der geplotteten Daten implementieren
Unterstützung
Für weitere Hilfe:
- Überprüfen Sie die API-Referenzdokumentation
- Besuchen Sie die DIYables-Tutorials: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Arduino-Community-Foren
- WebSocket-Debugging-Tools in der Browser-Entwicklerkonsole