Arduino Nano ESP32 Web Plotter avec la Bibliothèque DIYables ESP32 WebApps
Aperçu
Ce tutoriel couvre la classe DIYablesWebPlotterPage de la bibliothèque DIYables ESP32 WebApps. La page affiche un graphique linéaire en streaming dans le navigateur. Le sketch de l'Arduino Nano ESP32 envoie des points de données via WebSocket ; le navigateur ajoute chaque point à la série correspondante en temps réel. Jusqu'à 8 séries de données indépendantes sont supportées simultanément.
Regardez ce tutoriel vidéo étape par étape montrant comment utiliser un capteur DHT avec l'application Web Plotter :
Ce que ce Tutoriel Couvre
- Configurer le titre du traceur, les étiquettes des axes et la limite de rétention des échantillons
- Envoyer des points de données nommés depuis le sketch avec addDataPoint()
- Tracer plusieurs séries simultanément
- Remplacer les données simulées par de vraies lectures de capteur
Matériel Requis
Ou vous pouvez acheter les kits suivants:
| 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.
Étapes
Suivez ces instructions étape par étape :
- Si c'est la première fois que vous utilisez l'Arduino Nano ESP32, consultez le tutoriel sur Installation du logiciel Arduino Nano ESP32..
- Connectez la carte Arduino Nano ESP32 à votre ordinateur avec un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte appropriée (ex. Arduino Nano ESP32) et le port COM.
- Naviguez vers l'icône Bibliothèques dans la barre gauche de l'IDE Arduino.
- Cherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps de DIYables
- Cliquez sur le bouton Installer pour installer la bibliothèque.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- On vous demandera d'installer d'autres dépendances de bibliothèques
- Cliquez sur le bouton Installer tout pour installer toutes les dépendances de bibliothèques.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebPlotter, 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);
}
- Mettez à jour les identifiants WiFi dans le sketch :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Téléverser dans l'IDE Arduino pour téléverser le code sur l'Arduino Nano ESP32
- Ouvrez le Moniteur Série
- La sortie du Moniteur Série devrait ressembler à ceci :
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Plotter Example
INFO: Added app /
INFO: Added app /web-plotter
DIYables WebApp Library
Platform: Arduino Nano 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
==========================================
- Si rien n'apparaît, appuyez sur le bouton de réinitialisation de la carte.
- Entrez l'adresse IP du Moniteur Série dans un navigateur sur le même réseau.
- Exemple : http://192.168.0.2
- La page d'accueil affiche une carte pour l'application de traceur :
- Sélectionnez la carte Web Plotter pour ouvrir la page du graphique :
- La page est également directement accessible à http://192.168.0.2/web-plotter.
- Le graphique commence à se mettre à jour au fur et à mesure que le sketch envoie des données simulées. Chaque série est dessinée dans une couleur distincte.
Configuration du Traceur
Définissez le titre du graphique, les étiquettes des axes, le comportement de mise à l'échelle automatique et le nombre maximum d'échantillons conservés avant de démarrer le serveur :
webPlotterPage.setPlotTitle("Sensor Data");
webPlotterPage.setAxisLabels("Time (s)", "Value");
webPlotterPage.enableAutoScale(true);
webPlotterPage.setMaxSamples(100); // Keep last 100 points per series
Envoi de Points de Données
Chaque point de données spécifie un nom de série, une valeur X et une valeur Y. La série est créée automatiquement à la première utilisation :
// Single series
webPlotterPage.addDataPoint("temperature", elapsedSeconds, sensorValue);
// Multiple series in the same update cycle
webPlotterPage.addDataPoint("temperature", t, tempValue);
webPlotterPage.addDataPoint("humidity", t, humValue);
webPlotterPage.addDataPoint("pressure", t, pressValue);
Lecture depuis de Vrais Capteurs
Remplacez les valeurs simulées dans l'exemple par de vraies lectures de capteur :
Capteur Unique
float temperature = analogRead(A0) * (5.0 / 1023.0) * 100.0; // LM35
webPlotterPage.addDataPoint("LM35", millis() / 1000.0, temperature);
Plusieurs Capteurs
float temp = readTemperature();
float humid = readHumidity();
webPlotterPage.addDataPoint("Temp", millis() / 1000.0, temp);
webPlotterPage.addDataPoint("Humid", millis() / 1000.0, humid);
Limitez le taux d'envoi pour éviter de surcharger la connexion WebSocket. Un intervalle de 500 ms à 1000 ms convient à la plupart des applications de capteurs.
Dépannage
Le graphique ne se met pas à jour
- Confirmez que webAppsServer.loop() s'exécute à chaque itération de loop()
- Ajoutez Serial.println() avant addDataPoint() pour vérifier que le chemin de code s'exécute
- Rechargez la page du navigateur et vérifiez l'indicateur de connexion WebSocket
Le graphique affiche des lignes plates ou des valeurs incorrectes
- Vérifiez la formule de lecture et de mise à l'échelle du capteur
- Imprimez la valeur dans le Moniteur Série en même temps que vous l'envoyez au traceur
Trop de points de données ralentissent le navigateur
- Réduisez setMaxSamples() pour diminuer les points conservés par série
- Augmentez le délai entre les envois de données