Exemple Arduino 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 Arduino Uno R4 WiFi et DIYables STEM V4 IoT : une plateforme éducative 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 personnalisées avec unités
- Mises à jour en temps réel: affichage en direct de la valeur du capteur avec une animation fluide de l’aiguille
- Zones codées par couleur: indication visuelle d'état (zones verte, jaune et rouge)
- Contrôle de la précision: précision décimale configurable pour les valeurs affichées
- Communication WebSocket: mises à jour instantanées sans actualisation de la page
- Conception adaptée aux mobiles: fonctionne parfaitement sur ordinateur de bureau, tablette et appareils mobiles
- Configuration automatique: définir la plage une fois dans le constructeur — aucune configuration manuelle nécessaire
- Plateforme extensible: Actuellement implémentée pour Arduino Uno R4 WiFi, mais peut être étendue à d'autres plates-formes 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'IDE Arduino 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 gauche de l'IDE Arduino.
- Recherchez "DIYables WebApps", puis trouvez la bibliothèque DIYables WebApps par DIYables.
- Cliquez sur le bouton Install pour installer la bibliothèque.
- Vous serez invité à installer d'autres dépendances de bibliothèques.
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances des bibliothèques.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables 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: 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://[arduino-ip]/web-gauge in your web browser
*/
#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;
// 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 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 vers l'Arduino UNO R4/DIYables STEM V4 IoT
- Ouvrez le Moniteur Série
- Vérifiez le résultat dans le Moniteur Série. Il est affiché ci-dessous.
COM6
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
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 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.
- 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 à la page directement via l'adresse IP suivie de /web-analog-gauge. Par exemple : http://192.168.1.100/web-analog-gauge
- Vous verrez une jauge circulaire professionnelle affichant les valeurs des capteurs en temps réel
Fonctionnalités de l'interface Web
Affichage de jauge analogique
- Jauge circulaire: Jauge professionnelle avec 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 les plages de valeurs
- Précision: Nombre de décimales configurable 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
- Rétroaction d'état: Indicateur de statut de la connexion
- Optimisé pour les appareils mobiles: Interface tactile pour 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éfinissez la lecture minimale attendue
- Valeur maximale: Définissez la lecture maximale attendue
- Unités: Chaîne d'unité affichée (V, A, °C, PSI, etc.)
- Précision: Contrôlez le nombre de décimales affichées
Intégration des capteurs
- Capteurs analogiques : tension, courant, pression, capteurs 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 plus de précision
Cas d'utilisation courants
Projets éducatifs
- Surveillance de la tension: Tension de la batterie, lectures d'alimentation
- Capteurs environnementaux: Température, humidité, niveaux de lumière
- Expériences de physique: Mesures de la force, de la pression et de l'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 du capteur et les connexions
- Vérifier les paramètres de 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érifier l'adresse IP dans le navigateur
- Vérifier les paramètres du pare-feu
- Assurez-vous que le réseau Wi‑Fi 2,4 GHz est utilisé (5 GHz non 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
Combinez avec Web Plotter pour la visualisation des données historiques :
// Send same value to both gauge and plotter
gaugePage.sendGaugeValue(voltage);
plotterPage.sendData("Voltage", voltage);
Intégration pédagogique
Objectifs d'apprentissage en STEM
- Visualisation des données: Comprendre la conversion analogique-numérique
- Physique des capteurs: Apprentissage des principes de 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: Comparez les différents types de capteurs et leurs plages de mesure
- Exercice d'étalonnage: Apprenez l'exactitude et la précision des mesures
- Intégration de systèmes: Intégrez plusieurs capteurs et afficheurs
- Résolution de problèmes: Dépannez les problèmes des capteurs et des affichages
Cet exemple offre une base complète pour la surveillance et la visualisation des capteurs analogiques, parfaite pour des applications éducatives et pratiques.