Exemple ESP32 WebAnalogGauge - Tutoriel sur l'interface de jauge professionnelle
Vue d'ensemble
L'exemple WebAnalogGauge crée une interface de jauge circulaire professionnelle accessible depuis n'importe quel navigateur Web. Conçu pour la plateforme éducative ESP32 avec des capacités améliorées de surveillance des capteurs, des fonctionnalités d'entrée analogique intégrées et une intégration transparente avec les modules éducatifs de mesure. Parfait pour surveiller les valeurs des capteurs, les niveaux de tension, les lectures de pression, ou toute mesure analogique nécessitant un retour visuel.
Fonctionnalités
- Jauge circulaire professionnelle: Affichage interactif de la jauge via une interface Web
- Plage configurable: Valeurs minimales et maximales personnalisables avec unités
- Mises à jour en temps réel: Affichage en temps réel de la valeur du capteur avec une animation d'aiguille fluide
- Zones codées par couleur: Indication visuelle de l'état (zones vertes, jaunes et rouges)
- Précision configurable: Précision décimale des valeurs affichées
- Communication WebSocket: Mises à jour instantanées sans rafraîchissement de la page
- Conception adaptée aux mobiles: Fonctionne parfaitement sur ordinateurs de bureau, tablettes et appareils mobiles
- Configuration automatique: Définissez la plage une fois dans le constructeur - aucune configuration manuelle nécessaire
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 votre première utilisation de 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 de 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.
- On vous demandera 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 ESP32 WebApps WebAnalogGauge exemple, ou copiez le code ci-dessus et collez-le dans l'éditeur de l'IDE Arduino
/*
* DIYables WebApp Library - Web Analog Gauge Example
*
* This Serial.println("\nWebAnalogGauge is ready!");
Serial.print("IP Address: ");
Serial.println(webAppsServer.getLocalIP());
Serial.println("Open your web browser and navigate to:");
Serial.print("1. http://");
Serial.print(webAppsServer.getLocalIP());
Serial.println("/ (Home page)");
Serial.print("2. http://");
Serial.print(webAppsServer.getLocalIP());
Serial.println("/webanalogGauge (Analog Gauge)");
Serial.println("\nSimulating sensor data...");monstrates the Web Analog Gauge application:
* - Real-time analog gauge visualization
* - Simulated sensor data with smooth animation
* - WebSocket communication for live updates
* - Beautiful analog gauge with tick marks and smooth pointer movement
*
* Features:
* - Automatic gauge value simulation
* - Smooth animation between values
* - Range: 0° to 280° (customizable)
* - Real-time WebSocket updates
* - Professional analog gauge appearance
*
* 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://[esp32-ip]/web-gauge in your web browser
*/
#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;
// Gauge configuration constants
const float GAUGE_MIN_VALUE = 0.0;
const float GAUGE_MAX_VALUE = 100.0;
const String GAUGE_UNIT = "%";
DIYablesWebAnalogGaugePage webAnalogGaugePage(GAUGE_MIN_VALUE, GAUGE_MAX_VALUE, GAUGE_UNIT); // Range: 0-100%
// Other examples:
// DIYablesWebAnalogGaugePage webAnalogGaugePage(-50.0, 150.0, "°C"); // Temperature: -50°C to 150°C
// DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 1023.0, ""); // Analog sensor: 0-1023 (no unit)
// DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 5.0, "V"); // Voltage: 0-5V
// Simulation variables
unsigned long lastUpdateTime = 0;
const unsigned long UPDATE_INTERVAL = 500; // Update every 500ms (0.5 second)
const float STEP_SIZE = 1.0; // Step size for simulation
float currentGaugeValue = GAUGE_MIN_VALUE; // Start at minimum value
float step = STEP_SIZE; // Positive step means increasing, negative means decreasing
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - Web Analog Gauge Example");
// Add web applications to the server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webAnalogGaugePage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
setupCallbacks();
}
void setupCallbacks() {
// Handle gauge value requests (when web page loads/reconnects)
webAnalogGaugePage.onGaugeValueRequest([]() {
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
Serial.println("Web client requested gauge value - Sent: " + String(currentGaugeValue, 1) + GAUGE_UNIT);
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Update gauge with simulated sensor data
if (millis() - lastUpdateTime >= UPDATE_INTERVAL) {
lastUpdateTime = millis();
Serial.println("Updating gauge value..."); // Debug message
// Simple linear simulation: step changes direction at boundaries
currentGaugeValue += step;
// Change direction when reaching boundaries
if (currentGaugeValue >= GAUGE_MAX_VALUE || currentGaugeValue <= GAUGE_MIN_VALUE) {
step *= -1; // Reverse direction
}
// Ensure value stays within bounds (safety check)
if (currentGaugeValue < GAUGE_MIN_VALUE) currentGaugeValue = GAUGE_MIN_VALUE;
if (currentGaugeValue > GAUGE_MAX_VALUE) currentGaugeValue = GAUGE_MAX_VALUE;
// Send the new value to all connected web clients
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
// Print to serial for debugging
Serial.println("Gauge: " + String(currentGaugeValue, 1) + GAUGE_UNIT + " (" + (step > 0 ? "↑" : "↓") + ")");
}
delay(10);
}
- Configurez les identifiants WiFi 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 ressemble à ce qui suit
COM6
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
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 Analog Gauge: http://192.168.0.2/web-gauge
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Ouvrez un navigateur Web sur votre PC ou votre téléphone portable.
- Saisissez l'adresse IP affichée dans le Moniteur Série dans le navigateur Web.
- Exemple : http://192.168.1.100
- Vous verrez la page d'accueil comme sur l'image ci-dessous :
- Cliquez sur le lien Web Analog Gauge, vous verrez l'interface utilisateur de l'application Web Analog Gauge comme ci-dessous :
- Ou vous pouvez également accéder directement à la page en indiquant l'adresse IP suivie de /web-analog-gauge. Par exemple : http://192.168.1.100/web-analog-gauge
- Vous verrez un affichage de jauge circulaire professionnelle affichant les valeurs des capteurs en temps réel
Fonctionnalités de l'interface Web
Affichage de la jauge analogique
- Jauge circulaire: Jauge professionnelle avec une animation d'aiguille fluide
- Plage de valeurs: Affiche les valeurs minimales et maximales configurées
- Lecture actuelle: Affichage en temps réel de la valeur avec les unités
- Zones de couleur: Indication visuelle de l'état basée sur des plages de valeurs
- Précision: Décimales configurables pour des lectures précises
Mises à jour en temps réel
- Données en temps réel: Les valeurs se mettent à jour automatiquement via une connexion WebSocket
- Animation fluide: L'aiguille se déplace en douceur entre les valeurs
- Indicateur de statut: Indicateur de l'état de la connexion
- Optimisé pour les mobiles: Interface tactile adaptée à tous les appareils
Configuration du code
Configuration de la jauge
// Configure gauge range and units
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // 0-100 Volts
// Set up value request callback
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
Envoi des valeurs
void onGaugeValueRequested() {
// Read sensor value (example with potentiometer)
int sensorValue = analogRead(A0);
float voltage = (sensorValue / 1023.0) * 5.0;
// Send to gauge
gaugePage.sendGaugeValue(voltage);
}
Options de personnalisation
Configuration de la plage
- Valeur minimale: Définir la lecture minimale attendue
- Valeur maximale: Définir la lecture maximale attendue
- Unités: Chaîne d'unités affichée (V, A, °C, PSI, etc.)
- Précision: Contrôler le nombre de décimales affichées
Intégration des capteurs
- Capteurs analogiques: Capteurs de tension, de courant, de pression et de lumière
- Capteurs numériques: Température, humidité, capteurs de gaz via I2C/SPI
- Valeurs calculées: Mesures dérivées de plusieurs capteurs
- Lectures calibrées: Appliquer des facteurs d'étalonnage pour la précision
Cas d'utilisation courants
Projets pédagogiques
- Surveillance de la tension: Lectures de la tension de la batterie et de l'alimentation
- Capteurs environnementaux: Température, humidité, niveaux de luminosité
- Expériences de physique: Mesures de force, de pression et d'accélération
- Apprentissage de l'électronique: Analyse de circuits, tests de composants
Applications pratiques
- Domotique: Surveillance du système, contrôle environnemental
- Robotique: Rétroaction des capteurs, diagnostics du système
- Projets IoT: Surveillance à distance, visualisation des données
- Industriel: Contrôle qualité, surveillance des procédés
Dépannage
La jauge ne se met pas à jour
- Vérifier la connexion Wi‑Fi et l’état du WebSocket
- Vérifier que la fonction de rappel est correctement définie
- S’assurer que la valeur de la jauge est comprise dans la plage configurée
- Vérifier le moniteur série pour les messages de connexion
Valeurs incorrectes
- Vérifier le câblage et les connexions du capteur
- Vérifier les réglages de la tension de référence analogique
- Calibrer les lectures du capteur si nécessaire
- Assurer une mise à l'échelle correcte dans la fonction de rappel
Problèmes de connexion
- Vérifiez l'adresse IP dans le navigateur
- Vérifiez les paramètres du pare-feu
- Assurez-vous que le réseau Wi‑Fi est en 2,4 GHz (le 5 GHz n'est pas pris en charge)
- Essayez d'actualiser la page du navigateur
Fonctionnalités avancées
Plusieurs jauges
Vous pouvez créer plusieurs instances de jauges pour différents capteurs :
DIYablesWebAnalogGaugePage voltageGauge(0.0, 5.0, "V");
DIYablesWebAnalogGaugePage currentGauge(0.0, 2.0, "A");
DIYablesWebAnalogGaugePage tempGauge(-40.0, 85.0, "°C");
server.addApp(&voltageGauge);
server.addApp(¤tGauge);
server.addApp(&tempGauge);
Enregistrement des données
Associer Web Plotter à la visualisation des données historiques :
// Send same value to both gauge and plotter
gaugePage.sendGaugeValue(voltage);
plotterPage.sendData("Voltage", voltage);
Intégration Éducative
Objectifs d'apprentissage en STEM
- Visualisation des données: Comprendre la conversion analogique-numérique
- Physique des capteurs: Apprendre les principes de la mesure
- Technologies du Web: Concepts de communication en temps réel
- Programmation: Fonctions de rappel, gestion des données
Activités en classe
- Comparaison des capteurs : comparer différents types de capteurs et leurs plages de mesure
- Exercice d'étalonnage : comprendre l'exactitude et la précision des mesures
- Intégration de systèmes : combiner plusieurs capteurs et affichages
- Résolution de problèmes : dépanner les problèmes de capteurs et d'affichage
Cet exemple fournit une base complète pour la surveillance et la visualisation des capteurs analogiques, parfaite pour des applications éducatives et pratiques.