Arduino WebPlotter Voorbeeld - Real-Time Data Visualisatie Tutorial
Overzicht
Het WebPlotter voorbeeld creëert een real-time datavisualisatie-interface die toegankelijk is via elke webbrowser. Ontworpen voor Arduino Uno R4 WiFi en DIYables STEM V4 IoT educatief platform met verbeterde dataverwerkingsmogelijkheden, real-time plotfuncties en naadloze integratie met sensormonitoringsystemen. Perfect voor het visualiseren van sensordata, debuggen van algoritmes, of het monitoren van systeemprestaties in real-time.
Functies
- Real-time Data Plotten: Visualiseer sensordata terwijl deze streamt vanaf Arduino
- Meerdere Datareeksen: Plot tot 8 verschillende datastromen gelijktijdig
- Auto-schaling: Automatische Y-as schaling gebaseerd op databereik
- Interactieve Interface: Zoom, pan en analyseer datatrends
- WebSocket Communicatie: Directe updates met minimale latentie
- Responsief Ontwerp: Werkt op desktop, tablet en mobiele apparaten
- Aanpasbare Configuratie: Instelbare plottitels, aslabels en bereiken
- Platform Uitbreidbaar: Momenteel geïmplementeerd voor Arduino Uno R4 WiFi, maar kan worden uitgebreid voor andere hardwareplatforms. Zie DIYables_WebApps_ESP32
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables STEM V4 IoT Starterskit (Arduino inbegrepen) | |
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Setup Instructies
Snelle Stappen
Volg deze instructies stap voor stap:
- Als dit uw eerste keer is met de Arduino Uno R4 WiFi/DIYables STEM V4 IoT, raadpleeg de tutorial over het instellen van de omgeving voor Arduino Uno R4 WiFi/DIYables STEM V4 IoT in de Arduino IDE.
- Verbind het Arduino Uno R4/DIYables STEM V4 IoT board met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste Arduino Uno R4 board (bijv., Arduino Uno R4 WiFi) en COM-poort.
- Navigeer naar het Libraries icoon in de linkerbalk van de Arduino IDE.
- Zoek "DIYables WebApps", vind vervolgens de DIYables WebApps bibliotheek door DIYables
- Klik op de Install knop om de bibliotheek te installeren.
- U wordt gevraagd om enkele andere bibliotheekafhankelijkheden te installeren
- Klik op de Install All knop om alle bibliotheekafhankelijkheden te installeren.
- In Arduino IDE, ga naar File Examples DIYables WebApps WebPlotter voorbeeld, of kopieer de bovenstaande code en plak deze in de editor van Arduino IDE
/*
* 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);
}
- Configureer WiFi-inloggegevens in de code door deze regels bij te werken:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Upload knop in Arduino IDE om code naar Arduino UNO R4/DIYables STEM V4 IoT te uploaden
- Open de Serial Monitor
- Bekijk het resultaat in Serial Monitor. Het ziet er als volgt uit
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
- Als u niets ziet, herstart dan het Arduino board.
- Noteer het weergegeven IP-adres en voer dit adres in de adresbalk van een webbrowser op uw smartphone of PC in.
- Voorbeeld: http://192.168.0.2
- U ziet de startpagina zoals hieronder afgebeeld:
- Klik op de Web Plotter link, u ziet de Web Plotter app's UI zoals hieronder:
- Of u kunt ook direct naar de pagina gaan via het IP-adres gevolgd door /web-plotter. Bijvoorbeeld: http://192.168.0.2/web-plotter
- Kijk hoe de Arduino gesimuleerde sensordata genereert en deze in real-time plot. U ziet meerdere gekleurde lijnen die verschillende datastromen vertegenwoordigen.
Creatieve Aanpassing - Visualiseer Uw Data Creatief
Transformeer de plotinterface om aan uw unieke projectvereisten te voldoen en creëer verbluffende datavisualisaties:
Databron Configuratie
Vervang gesimuleerde data met echte sensormetingen:
Methode 1: Enkele Sensormeting
void sendTemperatureData() {
float temperature = analogRead(A0) * (5.0 / 1023.0) * 100; // LM35 temperatuursensor
webPlotterPage.sendPlotData(temperature);
}
Methode 2: Meerdere 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 van Waarden
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, // Digitale status
millis() / 1000.0, // Tijdteller
random(0, 100) // Willekeurige data
};
webPlotterPage.sendPlotData(sensors, 6);
}
Plot Aanpassing
Aangepaste Plot Weergave
void setupCustomPlot() {
webPlotterPage.setPlotTitle("Omgevingsmonitoringstation");
webPlotterPage.setAxisLabels("Tijd (minuten)", "Sensormetingen");
webPlotterPage.setYAxisRange(0, 100); // Vast Y-as bereik
webPlotterPage.setMaxSamples(100); // Toon meer datapunten
}
Dynamische Configuratie
void setupDynamicPlot() {
webPlotterPage.setPlotTitle("Slimme Tuin Monitor");
webPlotterPage.setAxisLabels("Sample #", "Waarden");
webPlotterPage.enableAutoScale(true); // Auto-aanpassing Y-as
// Configureer callbacks voor interactieve functies
webPlotterPage.onPlotterDataRequest([]() {
Serial.println("Client verbonden - initiële data verzenden");
sendInitialDataBurst();
});
}
Geavanceerde Dataverwerking
Voortschrijdend Gemiddelde Filter
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);
}
Data Logging met Tijdstempels
void sendTimestampedData() {
unsigned long currentTime = millis() / 1000;
float sensorValue = analogRead(A0) / 10.0;
// Verzend tijd en waarde als aparte datareeksen
webPlotterPage.sendPlotData(currentTime, sensorValue);
// Log ook naar Serial voor debugging
Serial.print("Tijd: ");
Serial.print(currentTime);
Serial.print("s, Waarde: ");
Serial.println(sensorValue);
}
Integratie Voorbeelden
Omgevingsmonitoring
#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("%, Licht: ");
Serial.println(lightLevel);
}
}
Motor Besturing Feedback
void sendMotorData() {
int motorSpeed = analogRead(A0); // Snelheid potentiometer
int currentDraw = analogRead(A1); // Stroomsensor
int motorPosition = digitalRead(2); // Positiesensor
float speedPercent = (motorSpeed / 1023.0) * 100;
float currentAmps = (currentDraw / 1023.0) * 5.0;
float positionDegrees = motorPosition * 90;
webPlotterPage.sendPlotData(speedPercent, currentAmps, positionDegrees);
}
PID Controller Visualisatie
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 en output
webPlotterPage.sendPlotData(setpoint, input, error, output);
}
Prestatie Optimalisatie
Efficiënte Data Transmissie
unsigned long lastPlotUpdate = 0;
const unsigned long PLOT_INTERVAL = 100; // Update elke 100ms
void efficientDataSending() {
if (millis() - lastPlotUpdate >= PLOT_INTERVAL) {
lastPlotUpdate = millis();
// Verzend alleen data op gedefinieerde intervallen
float value1 = analogRead(A0) / 10.0;
float value2 = analogRead(A1) / 10.0;
webPlotterPage.sendPlotData(value1, value2);
}
}
Voorwaardelijke Data Verzending
float lastSentValue = 0;
const float CHANGE_THRESHOLD = 5.0;
void sendOnChange() {
float currentValue = analogRead(A0) / 10.0;
// Verzend alleen als waarde significant is veranderd
if (abs(currentValue - lastSentValue) > CHANGE_THRESHOLD) {
webPlotterPage.sendPlotData(currentValue);
lastSentValue = currentValue;
}
}
Projectideeën
Wetenschappelijke Toepassingen
- Data Logger: Registreer temperatuur, luchtvochtigheid, druk over tijd
- Trillingenanalyse: Monitor accelerometer data voor mechanische systemen
- pH Monitoring: Volg waterkwaliteit in aquaponics systemen
- Zonnepaneel Efficiëntie: Monitor spanning/stroom output vs. zonlicht
Educatieve Projecten
- Natuurkunde Experimenten: Visualiseer slingerbeweging, veeroscillaties
- Chemie Lab: Monitor reactiesnelheden en temperatuurveranderingen
- Biologie Studies: Volg plantgroei sensoren, omgevingsfactoren
- Wiskunde: Plot wiskundige functies en algoritmische outputs
Huisautomatisering
- Energie Monitoring: Volg stroomverbruikpatronen
- Tuinautomatisering: Monitor bodemvocht, lichtniveaus
- HVAC Besturing: Visualiseer temperatuur en vochtigheidstrends
- Beveiligingssysteem: Plot bewegingssensor activiteiten
Robotica en Besturing
- Robot Navigatie: Plot positie en oriëntatie data
- Motor Besturing: Monitor snelheid, koppel en efficiëntie
- Sensor Fusie: Combineer meerdere sensormetingen
- Pad Planning: Visualiseer robot bewegingsalgoritmes
Probleemoplossing
Veel Voorkomende Problemen
1. Geen data verschijnt op plot
- Controleer WiFi-verbindingsstatus
- Verifieer WebSocket-verbinding in browser console
- Zorg ervoor dat sendPlotData() regelmatig wordt aangeroepen
- Controleer Serial Monitor voor foutmeldingen
2. Plot lijkt schokkerig of onregelmatig
- Implementeer datafiltering (voortschrijdend gemiddelde)
- Verminder data verzendfrequentie
- Controleer op sensorruis of verbindingsproblemen
- Verifieer voedingsstabiliteit
3. Browser prestatieproblemen
- Verminder maximum samples (setMaxSamples())
- Verlaag datatransmissiesnelheid
- Sluit andere browsertabbladen
- Gebruik hardwareversnelling in browser
4. WebSocket-verbinding valt weg
- Controleer WiFi-signaalsterkte
- Verifieer router instellingen (firewall, poort blokkering)
- Implementeer herverbindingslogica in aangepaste code
- Monitor Arduino geheugengebruik
Debug Tips
Gedetailleerde Logging Inschakelen
void debugPlotterData() {
Serial.println("=== Plotter Debug Info ===");
Serial.print("Vrij RAM: ");
Serial.println(freeMemory());
Serial.print("Verbonden clients: ");
Serial.println(server.getConnectedClients());
Serial.print("Data snelheid: ");
Serial.println("Elke " + String(DATA_INTERVAL) + "ms");
Serial.println("========================");
}
Test Data Generatie
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;
}
Geavanceerde Functies
Aangepaste Data Formatting
void sendFormattedData() {
float temp = 25.5;
float humidity = 60.3;
// Creëer aangepaste geformatteerde data string
String dataLine = String(temp, 1) + "\t" + String(humidity, 1);
webPlotterPage.sendPlotData(dataLine);
}
Integratie met Andere WebApps
void setupMultipleApps() {
// Voeg meerdere web applicaties toe
server.addApp(new DIYablesHomePage());
server.addApp(new DIYablesWebDigitalPinsPage());
server.addApp(new DIYablesWebSliderPage());
server.addApp(&webPlotterPage);
server.addApp(new DIYablesNotFoundPage());
// Configureer interacties tussen apps
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Gebruik slider waarden om te bepalen wat geplot wordt
float scaleFactor = slider1 / 255.0;
// ... plotting logica
});
}
Real-time Besturing met Plotten
void controlAndPlot() {
// Lees besturingsinputs
int targetSpeed = analogRead(A0);
// Bestuur hardware
analogWrite(9, targetSpeed / 4); // PWM output
// Lees feedback
int actualSpeed = analogRead(A1);
int motorCurrent = analogRead(A2);
// Plot doel vs werkelijk
webPlotterPage.sendPlotData(
targetSpeed / 4.0, // Doelsnelheid
actualSpeed / 4.0, // Werkelijke snelheid
motorCurrent / 10.0 // Stroomverbruik
);
}
Volgende Stappen
Na het beheersen van het WebPlotter voorbeeld, verken:
- MultipleWebApps - Combineer plotten met besturingsinterfaces
- WebMonitor - Voeg debugging mogelijkheden toe naast plotten
- Aangepaste Applicaties - Bouw uw eigen gespecialiseerde plot tools
- Data Analyse - Implementeer statistische analyse van geplotstte data
Ondersteuning
Voor extra hulp:
- Controleer de API Referentie documentatie
- Bezoek DIYables tutorials: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Arduino community forums
- WebSocket debugging tools in browser developer console