Jauge analogique Web Arduino Nano ESP32 avec la bibliothèque DIYables ESP32 WebApps
Vue d'ensemble
Ce tutoriel couvre la classe DIYablesWebAnalogGaugePage de la bibliothèque DIYables ESP32 WebApps. La page affiche une jauge circulaire dans le navigateur et reçoit des mises à jour de valeur depuis l'Arduino Nano ESP32 via WebSocket. La plage de la jauge, les unités et la précision décimale sont définies dans le constructeur — le navigateur lit cette configuration automatiquement.
Regardez ce tutoriel vidéo étape par étape démontrant comment utiliser un potentiomètre avec l'application Jauge analogique web :
Ce que ce tutoriel couvre
- Configuration d'une page de jauge avec une plage personnalisée et une étiquette d'unité
- Envoi des lectures de capteur au navigateur à la demande en utilisant un callback
- Diffusion continue des mises à jour de la jauge depuis la boucle principale
- Intégration d'un potentiomètre comme source d'entrée analogique
Matériel nécessaire
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 à l'aide d'un câble USB.
- Lancez l'Arduino IDE sur votre ordinateur.
- Sélectionnez la carte appropriée (par ex. Arduino Nano ESP32) et le port COM.
- Accédez à l'icône Bibliothèques dans la barre gauche de l'Arduino IDE.
- Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps par 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() {
- Il vous sera demandé d'installer d'autres dépendances de bibliothèques
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.
- Dans Arduino IDE, allez dans Fichier Exemples DIYables ESP32 WebApps WebAnalogGauge, ou copiez le code ci-dessus et collez-le dans l'éditeur Arduino IDE
/*
* 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);
}
- 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 Arduino IDE pour téléverser le code sur Arduino Nano ESP32
- Ouvrez le Moniteur Série
- La sortie du Moniteur Série devrait ressembler à ce qui suit :
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
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 Analog Gauge: http://192.168.0.2/web-gauge
==========================================
- Si rien n'apparaît, appuyez sur le bouton de réinitialisation de la carte.
- Entrez l'adresse IP affichée dans le Moniteur Série dans un navigateur sur un appareil sur le même réseau.
- Exemple : http://192.168.0.2
- La page d'accueil affiche une carte pour l'application jauge :
- Sélectionnez la carte Jauge analogique web pour ouvrir la page de jauge :
- La jauge est également accessible directement à http://192.168.0.2/web-gauge.
Configuration de la jauge
La plage et les unités sont définies dans le constructeur et envoyées au navigateur une fois lors de la connexion :
// Paramètres : minimum, maximum, chaîne d'unité
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V");
Le callback de requête de valeur est appelé chaque fois qu'un navigateur se connecte et demande la lecture actuelle :
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
void onGaugeValueRequested() {
int raw = analogRead(A0);
float voltage = (raw / 1023.0) * 5.0;
gaugePage.sendGaugeValue(voltage);
}
Pour la diffusion continue (plutôt qu'à la demande), appelez sendGaugeValue() depuis la boucle principale à l'intervalle souhaité.
Exemple : Jauge basée sur un potentiomètre
La bibliothèque inclut un exemple prêt à l'emploi avec potentiomètre :
#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";
// Define pin
#define PIN_ANALOG 36
// 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%
// 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;
currentGaugeValue = analogRead(PIN_ANALOG);
currentGaugeValue = map(currentGaugeValue,0,4095,0,100);
// 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);
}
Types de capteurs courants
La jauge est adaptée à toute mesure qui produit une valeur en virgule flottante dans une plage connue :
- Surveillance de tension (batterie, alimentation)
- Température ou humidité d'un capteur calibré
- Lectures de pression d'un transmetteur de pression
- Intensité lumineuse d'une LDR
- Toute lecture analogique mise à l'échelle en unités d'ingénierie
Dépannage
L'aiguille de la jauge ne bouge pas
- Confirmez que webAppsServer.loop() s'exécute à chaque itération de loop()
- Vérifiez le Moniteur Série pour les événements de connexion WebSocket
- Vérifiez que le callback est assigné avant webAppsServer.begin()
La jauge affiche des valeurs incorrectes
- Vérifiez la tension de référence analogique pour votre carte
- Vérifiez que la formule de mise à l'échelle mappe les valeurs ADC brutes à la plage configurée
- Ajoutez Serial.println(value) dans le callback pour inspecter les valeurs avant l'envoi
Impossible d'accéder à la page
- Confirmez l'adresse IP depuis le Moniteur Série
- Assurez-vous que l'appareil du navigateur est sur le même réseau 2,4 GHz que la carte
- Vérifiez que le port 80 n'est pas bloqué par un pare-feu