ESP32 WebPlotter Voorbeeld - Tutorial voor Real-Time Data Visualisatie
Overzicht
Het WebPlotter voorbeeld creëert een real-time data visualisatie-interface die toegankelijk is via elke webbrowser. Ontworpen voor het ESP32 educatieve platform met geavanceerde dataverwerking, real-time plotmogelijkheden en naadloze integratie met sensorbewaking systemen. Perfect om sensorgegevens te visualiseren, algoritmen te debuggen of systeemprestaties in real-time te monitoren.
Kenmerken
- Real-time Data Plotting: Visualiseer sensorgegevens terwijl ze binnenkomen vanuit Arduino
- Meerdere Datastreams: Plot tot 8 verschillende datastromen tegelijk
- Auto-scaling: Automatische Y-as schaling op basis van datumbereik
- Interactieve Interface: Zoom, pan en analyseer datatrends
- WebSocket Communicatie: Directe updates met minimale vertraging
- Responsive Design: Werkt op desktop, tablet en mobiele apparaten
- Aanpasbare Configuratie: Instelbare plot titels, aslabels en bereiken
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables ESP32 Starterskit (ESP32 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.
Installatie-instructies
Snelle Stappen
Volg deze instructies stap voor stap:
- Als u voor het eerst met ESP32 werkt, raadpleeg dan de tutorial over het opzetten van de ESP32-omgeving in de Arduino IDE.
- Verbind het ESP32 bord met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste ESP32 bord (bijvoorbeeld ESP32 Dev Module) en de juiste COM-poort.
- Ga naar het Libraries-icoon in de linkerzijbalk van de Arduino IDE.
- Zoek op "DIYables ESP32 WebApps" en vind de DIYables ESP32 WebApps Library door DIYables.
- Klik op de Installeren knop om de library te installeren.
- U wordt gevraagd om extra benodigde dependencies te installeren.
- Klik op de Alles installeren knop om alle dependencies te installeren.
- Ga in Arduino IDE naar Bestand Voorbeelden DIYables ESP32 WebApps WebPlotter voorbeeld, of kopieer de bovenstaande code en plak deze in de Arduino IDE editor.
/*
* 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);
}
- Stel uw WiFi-inloggegevens in door de volgende regels in de code aan te passen:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Uploaden knop in de Arduino IDE om de code naar de ESP32 te uploaden.
- Open de Seriële Monitor.
- Bekijk het resultaat in de Seriële Monitor. Het ziet er ongeveer als volgt uit:
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
- Als u niets ziet, start het ESP32 bord opnieuw op.
- Noteer het getoonde 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 op de onderstaande afbeelding:
- Klik op de Web Plotter-link om de gebruikersinterface van de Web Plotter-app te zien zoals hieronder:
- U kunt ook direct de pagina openen met het IP-adres, gevolgd door /web-plotter. Bijvoorbeeld: http://192.168.0.2/web-plotter
- Kijk hoe de ESP32 gesimuleerde sensorgegevens genereert en deze in real-time plot. U ziet meerdere gekleurde lijnen die verschillende datastromen vertegenwoordigen.
Creatieve Aanpassingen - Visualiseer Uw Gegevens Creatief
Pas de plotinterface aan om aan uw unieke projectvereisten te voldoen en creëer verbluffende datavisualisaties:
Configuratie van Datasources
Vervang gesimuleerde data door echte sensorwaarden:
Methode 1: Enkele Sensorwaarde
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 met 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, // Tijdsteller
random(0, 100) // Willekeurige data
};
webPlotterPage.sendPlotData(sensors, 6);
}
Plot Aanpassingen
Aangepaste Plot Weergave
void setupCustomPlot() {
webPlotterPage.setPlotTitle("Milieubewakingsstation");
webPlotterPage.setAxisLabels("Tijd (minuten)", "Sensorwaarden");
webPlotterPage.setYAxisRange(0, 100); // Vaste Y-as range
webPlotterPage.setMaxSamples(100); // Toon meer datapunten
}
Dynamische Configuratie
void setupDynamicPlot() {
webPlotterPage.setPlotTitle("Slimme Tuin Monitor");
webPlotterPage.setAxisLabels("Monster #", "Waarden");
webPlotterPage.enableAutoScale(true); // Automatische Y-as aanpassing
// Configureer callbacks voor interactieve functies
webPlotterPage.onPlotterDataRequest([]() {
Serial.println("Client verbonden - verzend initiële data");
sendInitialDataBurst();
});
}
Geavanceerde Dataverwerking
Moving Average 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;
// Verstuur tijd en waarde als aparte data series
webPlotterPage.sendPlotData(currentTime, sensorValue);
// Log ook naar Serial voor debugging
Serial.print("Time: ");
Serial.print(currentTime);
Serial.print("s, Value: ");
Serial.println(sensorValue);
}
Integratie Voorbeelden
Milieubewaking
#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);
}
}
Motorbesturing Feedback
void sendMotorData() {
int motorSpeed = analogRead(A0); // Snelheid potentiometer
int currentDraw = analogRead(A1); // Stroom sensor
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, invoer, fout en output
webPlotterPage.sendPlotData(setpoint, input, error, output);
}
Prestatie-optimalisatie
Efficiënte Dataoverdracht
unsigned long lastPlotUpdate = 0;
const unsigned long PLOT_INTERVAL = 100; // Update elke 100ms
void efficientDataSending() {
if (millis() - lastPlotUpdate >= PLOT_INTERVAL) {
lastPlotUpdate = millis();
// Verstuur data alleen in de gedefinieerde intervallen
float value1 = analogRead(A0) / 10.0;
float value2 = analogRead(A1) / 10.0;
webPlotterPage.sendPlotData(value1, value2);
}
}
Gegevens verzenden bij verandering
float lastSentValue = 0;
const float CHANGE_THRESHOLD = 5.0;
void sendOnChange() {
float currentValue = analogRead(A0) / 10.0;
// Alleen verzenden als de waarde significant is veranderd
if (abs(currentValue - lastSentValue) > CHANGE_THRESHOLD) {
webPlotterPage.sendPlotData(currentValue);
lastSentValue = currentValue;
}
}
Projectideeën
Wetenschappelijke Toepassingen
- Data Logger: Leg temperatuur, vochtigheid en druk over tijd vast
- Trillingsanalyse: Monitor accelerometerdata voor mechanische systemen
- pH Monitoring: Volg waterkwaliteit in aquaponics systemen
- Zonnepaneel efficiëntie: Houd spanning/stroom output en zonlicht bij
Educatieve Projecten
- Natuurkunde experimenten: Visualiseer slingerbewegingen, veeroscillaties
- Scheikunde lab: Bewaak reactiesnelheden en temperatuurveranderingen
- Biologische studies: Volg plantengroei sensoren en omgevingsfactoren
- Wiskunde: Plot wiskundige functies en algoritmische output
Domotica
- Energie monitoring: Houd het energieverbruik bij
- Tuinautomatisering: Bewaak bodemvochtigheid en lichtniveaus
- HVAC besturing: Visualiseer temperatuur- en vochtigheidstrends
- Beveiligingssysteem: Plot bewegingssensorsignalen
Robotica en Besturing
- Robotnavigatie: Plot positie- en oriëntatiegegevens
- Motorbesturing: Monitor snelheid, koppel en efficiëntie
- Sensorfusie: Combineer meerdere sensoruitkomsten
- Routeplanning: Visualiseer robotbewegingsalgoritmen
Problemen oplossen
Veelvoorkomende Problemen
1. Geen data zichtbaar in de plot
- Controleer de WiFi-verbinding
- Verifieer de WebSocket-verbinding in de browserconsole
- Zorg dat sendPlotData() regelmatig wordt aangeroepen
- Controleer de Seriële Monitor op foutmeldingen
2. Plot is schokkerig of onregelmatig
- Pas datafiltering toe (moving average)
- Verlaag de frequentie van dataverzending
- Controleer op sensorruis of verbindingsproblemen
- Verifieer stabiele stroomvoorziening
3. Browser presteert slecht
- Verminder maximaal aantal monsters (setMaxSamples())
- Verlaag het dataverzendtempo
- Sluit andere browser-tabbladen
- Gebruik hardwareversnelling in de browser
4. WebSocket-verbinding valt uit
- Controleer WiFi-signaalsterkte
- Controleer router-instellingen (firewall, poortblokkering)
- Implementeer reconnect-logica in eigen code
- Houd ESP32-geheugenverbruik in de gaten
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("========================");
}
Testpatroon genereren
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 Dataformatering
void sendFormattedData() {
float temp = 25.5;
float humidity = 60.3;
// Maak een eigen geformatteerde datastring
String dataLine = String(temp, 1) + "\t" + String(humidity, 1);
webPlotterPage.sendPlotData(dataLine);
}
Integratie met Andere WebApps
void setupMultipleApps() {
// Voeg meerdere webapplicaties 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 sliderwaarden om te bepalen wat er geplot wordt
float scaleFactor = slider1 / 255.0;
// ... plotting logica
});
}
Real-time Besturing met Plotting
void controlAndPlot() {
// Lees besturingsinputs
int targetSpeed = analogRead(A0);
// Bestuur hardware
analogWrite(9, targetSpeed / 4); // PWM uitgang
// Lees feedback
int actualSpeed = analogRead(A1);
int motorCurrent = analogRead(A2);
// Plot doel vs. actuele waarden
webPlotterPage.sendPlotData(
targetSpeed / 4.0, // Doelsnelheid
actualSpeed / 4.0, // Actuele snelheid
motorCurrent / 10.0 // Stroomverbruik
);
}
Volgende Stappen
Na het beheersen van het WebPlotter voorbeeld, kunt u verder met:
- MultipleWebApps - Combineer plotten met bedieningsinterfaces
- WebMonitor - Voeg debugging mogelijkheden toe naast plots
- Aangepaste Applicaties - Bouw uw eigen gespecialiseerde plottingtools
- Data-analyse - Implementeer statistische analyse van geplotte gegevens
Ondersteuning
Voor extra hulp:
- Raadpleeg de API Reference documentatie
- Bezoek DIYables tutorials: https://esp32io.com/tutorials/diyables-esp32-webapps
- ESP32 community forums
- WebSocket debugtools in de browser developer console