Exemple ESP32 WebPlotter - Tutoriel de visualisation de données en temps réel
Vue d'ensemble
L'exemple WebPlotter crée une interface de visualisation de données en temps réel accessible via n'importe quel navigateur web. Conçu pour ESP32, une plateforme éducative dotée de capacités améliorées de traitement des données, de fonctionnalités de tracé en temps réel et d'une intégration transparente avec les systèmes de surveillance des capteurs. Parfait pour visualiser les données des capteurs, déboguer des algorithmes ou surveiller les performances du système en temps réel.
Fonctionnalités
- Tracé de données en temps réel: Visualisez les données des capteurs au fur et à mesure qu'elles arrivent d'Arduino
- Plusieurs séries de données: Tracez jusqu'à 8 flux de données différents simultanément
- Échelle automatique: Mise à l'échelle automatique de l'axe Y en fonction de l'étendue des données
- Interface interactive: Zoomez, naviguez et analysez les tendances des données
- Communication WebSocket: Mises à jour instantanées avec une latence minimale
- Conception réactive: Fonctionne sur ordinateur, tablette et appareils mobiles
- Configuration personnalisable: Titres du graphique, étiquettes des axes et plages ajustables
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables ESP32 (ESP32 inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Instructions d'installation
Étapes rapides
Suivez ces instructions étape par étape :
- Si c'est la première fois que vous utilisez l'ESP32, reportez-vous au tutoriel sur Installation du logiciel ESP32..
- Connectez la carte ESP32 à votre ordinateur à l'aide d'un câble USB.
- Lancez l’IDE Arduino sur votre ordinateur.
- Sélectionnez la carte ESP32 appropriée (par exemple ESP32 Dev Module) et le port COM.
- Accédez à l’icône Libraries dans la barre gauche de l’IDE Arduino.
- Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps par DIYables
- Cliquez sur le bouton Install pour installer la bibliothèque.
- Il vous sera demandé d'installer d'autres dépendances logicielles.
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances logicielles.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebPlotter exemple, ou copiez le code ci-dessus et collez-le dans l'éditeur de l'IDE Arduino
/*
* 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);
}
- Configurez les identifiants Wi-Fi dans le code en mettant à jour ces lignes :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur l'ESP32
- Ouvrez le moniteur série
- Vérifiez le résultat dans le moniteur série. Il est affiché ci-dessous.
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
- Si vous ne voyez rien, redémarrez la carte ESP32.
- Notez l'adresse IP affichée, puis saisissez cette adresse dans la barre d'adresse d'un navigateur Web sur votre smartphone ou PC.
- Exemple : http://192.168.0.2
- Vous verrez la page d'accueil comme sur l'image ci-dessous:
- Cliquez sur le lien vers Web Plotter, vous verrez l'interface utilisateur de l'application Web Plotter comme ci-dessous :
- Ou vous pouvez également accéder directement à la page via l'adresse IP suivie de /web-plotter. Par exemple : http://192.168.0.2/web-plotter
- Observez l'ESP32 qui génère des données simulées de capteurs et les tracer en temps réel. Vous verrez plusieurs lignes de couleurs différentes représentant différents flux de données.
Personnalisation créative - Visualisez vos données de manière créative
Transformez l'interface de tracé pour qu'elle corresponde à vos exigences de projet uniques et créez des visualisations de données époustouflantes:
Configuration de la source de données
Remplacez les données simulées par les lectures réelles des capteurs:
Méthode 1: Lecture d'un seul capteur
void sendTemperatureData() {
float temperature = analogRead(A0) * (5.0 / 1023.0) * 100; // LM35 temperature sensor
webPlotterPage.sendPlotData(temperature);
}
Méthode 2 : Plusieurs capteurs
void sendMultipleSensors() {
float temperature = readTemperature();
float humidity = readHumidity();
float light = analogRead(A1) / 10.0;
float pressure = readPressure();
webPlotterPage.sendPlotData(temperature, humidity, light, pressure);
}
Méthode 3 : Tableau de valeurs
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);
}
Personnalisation du tracé
Apparence personnalisée du graphique
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
}
Configuration dynamique
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();
});
}
Traitement avancé des données
Filtre à moyenne mobile
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);
}
Enregistrement des données avec des horodatages
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);
}
Exemples d'intégration
Surveillance environnementale
#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étroaction du contrôle moteur
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);
}
Visualisation du contrôleur PID
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);
}
Optimisation des performances
Transmission efficace des données
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);
}
}
Envoi conditionnel de données
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;
}
}
Idées de projets
Applications scientifiques
- Enregistreur de données: Enregistrer la température, l'humidité et la pression au fil du temps
- Analyse des vibrations: Surveiller les données de l'accéléromètre pour les systèmes mécaniques
- Surveillance du pH: Suivre la qualité de l'eau dans les systèmes d'aquaponie
- Efficacité des panneaux solaires: Surveiller la tension et le courant de sortie en fonction de l'ensoleillement
Projets éducatifs
- Expériences de Physique: Visualiser le mouvement du pendule, les oscillations des ressorts
- Laboratoire de Chimie: Surveiller les taux de réaction et les variations de température
- Études de Biologie: Suivre les capteurs de croissance des plantes et les facteurs environnementaux
- Mathématiques: Tracer des fonctions mathématiques et des sorties algorithmiques
Domotique
- Suivi de la consommation d'énergie: Suivre les tendances de la consommation d'énergie
- Automatisation du jardin: Surveiller l'humidité du sol et les niveaux de lumière
- Contrôle du chauffage, de la ventilation et de la climatisation: Visualiser les tendances de la température et de l'humidité
- Système de sécurité: Tracer les activités des capteurs de mouvement
Robotique et contrôle
- Navigation du robot: Tracer les données de position et d’orientation
- Contrôle du moteur: Surveiller la vitesse, le couple et l’efficacité
- Fusion de capteurs: Combiner plusieurs lectures de capteurs
- Planification de trajectoire: Visualiser les algorithmes de mouvement du robot
Dépannage
Problèmes courants
1. Aucune donnée n'apparaît sur le graphique
- Vérifiez l'état de la connexion Wi‑Fi
- Vérifiez la connexion WebSocket dans la console du navigateur
- Vérifiez que sendPlotData() est appelée régulièrement
- Vérifiez le moniteur série pour les messages d'erreur
2. Le graphique semble saccadé ou erratique
- Implémenter le filtrage des données (moyenne mobile)
- Réduire la fréquence d'envoi des données
- Vérifier le bruit du capteur ou les problèmes de connexion
- Vérifier la stabilité de l'alimentation électrique
3. Problèmes de performance du navigateur
- Réduire le nombre maximal d'échantillons (setMaxSamples())
- Réduire le débit de transmission des données
- Fermer les autres onglets du navigateur
- Utiliser l'accélération matérielle dans le navigateur
- Coupures de connexion WebSocket
- Vérifier la force du signal WiFi
- Vérifier les paramètres du routeur (pare-feu, blocage des ports)
- Implémenter une logique de reconnexion dans du code personnalisé
- Surveiller l'utilisation de la mémoire de l'ESP32
Astuces de débogage
Activer la journalisation détaillée
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("========================");
}
Génération de données de test
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;
}
Fonctionnalités avancées
Formatage personnalisé des données
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);
}
Intégration avec d'autres applications Web
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
});
}
Contrôle en temps réel avec tracé
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
);
}
Étapes suivantes
Après avoir maîtrisé l'exemple WebPlotter, explorez :
- MultipleWebApps - Allier le tracé avec des interfaces de contrôle
- WebMonitor - Ajouter des capacités de débogage en parallèle du tracé
- Applications personnalisées - Créez vos propres outils de traçage spécialisés
- Analyse de données - Mettre en œuvre une analyse statistique des données tracées
Assistance
Pour obtenir une aide supplémentaire :
- Consultez la documentation de référence de l’API
- Consultez les tutoriels DIYables : https://esp32io.com/tutorials/diyables-esp32-webapps
- Forums de la communauté ESP32
- Outils de débogage WebSocket dans la console de développement du navigateur