Exemple Arduino 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 la plateforme éducative Arduino Uno R4 WiFi et DIYables STEM V4 IoT, offrant des capacités de traitement des données améliorées, des fonctionnalités de traçage en temps réel et 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
- Traçage de données en temps réel : Visualisez les données des capteurs au fur et à mesure qu'elles proviennent d'un 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 des ordonnées en fonction de la plage de données
- Interface interactive : Zoom, déplacement et analyse des tendances des données
- Communication WebSocket : Mises à jour instantanées avec une latence minimale
- Conception réactive : Fonctionne sur ordinateur de bureau, tablette et appareils mobiles
- Configuration personnalisable : Titres de tracé réglables, étiquettes des axes et plages
- Plateforme extensible : Actuellement implémentée pour Arduino Uno R4 WiFi, mais peut être étendue à d'autres plateformes matérielles. Voir DIYables_WebApps_ESP32
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino 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'Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consultez le tutoriel sur Arduino UNO R4 - Installation du logiciel..
- Connectez la carte Arduino Uno R4/DIYables STEM V4 IoT à votre ordinateur à l'aide d'un câble USB.
- Lancez l'Arduino IDE sur votre ordinateur.
- Sélectionnez la carte Arduino Uno R4 appropriée (par exemple, Arduino Uno R4 WiFi) et le port COM.
- Accédez à l'icône Libraries dans la barre de gauche de l'Arduino IDE.
- Recherchez "DIYables WebApps", puis trouvez la bibliothèque DIYables WebApps par DIYables.
- Cliquez sur le bouton Install pour installer la bibliothèque.
- Il vous sera demandé d’installer d’autres dépendances de la bibliothèque
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables 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: 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);
}
- 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 vers Arduino UNO R4/DIYables STEM V4 IoT
- Ouvrez le Moniteur Série
- Consultez le résultat dans le Moniteur Série. Il est ci-dessous
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
- Si vous ne voyez rien, redémarrez la carte Arduino.
- Notez l'adresse IP affichée et saisissez-la dans la barre d'adresse d'un navigateur Web sur votre smartphone ou PC.
- Par exemple : http://192.168.0.2
- Vous verrez la page d'accueil comme sur l'image ci-dessous :
- Cliquez sur le lien Web Plotter, vous verrez l'interface utilisateur de l'application Web Plotter comme ci-dessous :
- Ou vous pouvez également accéder directement à la page en utilisant l'adresse IP suivie de /web-plotter. Par exemple : http://192.168.0.2/web-plotter
- Observez l'Arduino générer des données de capteurs simulées et les tracer en temps réel. Vous verrez plusieurs courbes 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 traçage pour répondre à vos exigences uniques de projet et créez des visualisations de données époustouflantes :
Configuration de la source de données
Remplacer les données simulées par des mesures 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);
}
Journalisation des données avec 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 de l'environnement
#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 des 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 d'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 fournis en fonction de l'ensoleillement
Projets éducatifs
- Expériences de physique: Visualiser le mouvement du pendule et les oscillations d'un ressort
- Laboratoire de chimie: Surveiller les vitesses 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 les fonctions mathématiques et les résultats algorithmiques
Domotique
- Surveillance de la consommation d'énergie: Suivre les schémas de consommation d'énergie
- Automatisation du jardin: Surveiller l'humidité du sol et les niveaux de lumière
- Contrôle du CVC: Visualiser les tendances de température et d'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 des moteurs: Surveiller la vitesse, le couple et le rendement
- Fusion de capteurs: Combiner plusieurs lectures de capteurs
- Planification de trajectoires: Visualiser les algorithmes de déplacement du robot
Dépannage
Problèmes courants
- Aucune donnée n'apparaît sur le graphique
- Vérifier l'état de la connexion Wi-Fi
- Vérifier la connexion WebSocket dans la console du navigateur
- S'assurer que sendPlotData() est appelée régulièrement
- Vérifier 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
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
- Activer l'accélération matérielle dans le navigateur
4. Coupures de la connexion WebSocket
- Vérifier la puissance du signal WiFi
- Vérifier les paramètres du routeur (pare-feu, blocage de ports)
- Implémenter une logique de reconnexion dans du code personnalisé
- Surveiller l'utilisation de la mémoire d'Arduino
Conseils 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 affichage graphique
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
);
}
Prochaines étapes
Après avoir maîtrisé l'exemple WebPlotter, explorez :
- MultipleWebApps - Combiner le traçage avec des interfaces de contrôle
- WebMonitor - Ajouter des capacités de débogage en parallèle du traçage
- Applications personnalisées - Créez vos propres outils de traçage spécialisés
- Analyse des données - Mettre en œuvre une analyse statistique des données tracées
Aide
Pour obtenir de l'aide supplémentaire :
- Consultez la documentation de référence de l’API
- Consultez les tutoriels DIYables : https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Forums de la communauté Arduino
- Outils de débogage WebSocket dans la console de développement du navigateur