Exemple ESP32 WebTemperature - Tutoriel sur l'interface du thermomètre visuel
Vue d'ensemble
L'exemple WebTemperature crée une interface de thermomètre visuelle accessible depuis n'importe quel navigateur Web. Conçu pour l'ESP32, une plateforme éducative avec des capacités de surveillance des capteurs améliorées, des fonctionnalités de détection de température intégrées et une intégration transparente avec les modules éducatifs de surveillance environnementale. Parfait pour la surveillance des capteurs de température, des conditions environnementales ou toute mesure basée sur la température nécessitant un retour visuel.
Fonctionnalités
- Affichage visuel du thermomètre: thermomètre interactif via une interface web
- Plage de températures configurable: températures minimales et maximales personnalisées avec unités
- Mises à jour en temps réel: affichage de la température en direct avec une animation au style mercure
- Support de plusieurs unités: Celsius (°C), Fahrenheit (°F), Kelvin (K)
- Gestion automatique de la configuration: définir la plage et l'unité une fois dans le constructeur
- Communication WebSocket: mises à jour instantanées sans rafraîchissement de la page
- Responsive sur mobile: Fonctionne parfaitement sur ordinateur, tablette et appareils mobiles
- Conception professionnelle: Visualisation du thermomètre soignée avec des animations fluides
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.
Note d'achat: De nombreux capteurs DS18B20 sur le marché sont de faible qualité. Nous recommandons vivement d'acheter le capteur de la marque DIYables en utilisant le lien ci-dessus. Nous l'avons testé et il a bien fonctionné.
Instructions d'installation
Étapes rapides
Suivez ces instructions étape par étape:
- Si c'est la première fois que vous utilisez l'ESP32, consultez le 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 de 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 ESP32 WebApps WebTemperature exemple, ou copiez le code ci-dessus et collez-le dans l'éditeur de l'IDE Arduino
/*
* This example demonstrates how to create a web-base Serial.println("Starting Web Temperature Server...");
// Add web apps to server
server.addApp(&homePage);
server.addApp(&temperaturePage);
// Set 404 Not Found page (optional - for better user experience)
server.setNotFoundPage(DIYablesNotFoundPage());re display
* using the DIYables ESP32 WebApps Library with ESP32.
*
* The library automatically detects the ESP32 platform and
* includes the appropriate abstraction layer for seamless operation.
*
* The web page displays a thermometer visualization that shows temperature
* readings in real-time through WebSocket communication.
*
* Features:
* - Real-time temperature display with thermometer visualization
* - Configurable temperature range and units
* - Auto-connecting WebSocket for seamless communication
* - Mobile-responsive design with professional UI
* - Automatic platform detection and abstraction
* - Compatible with both WiFi and Ethernet connections
* Hardware: ESP32 Boards
*/
#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 web app instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer server(serverFactory, 80, 81); // HTTP port 80, WebSocket port 81
DIYablesHomePage homePage;
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // Min: -10°C, Max: 50°C
// Temperature simulation variables
float currentTemp = 25.0; // Starting temperature
unsigned long lastUpdate = 0;
void setup() {
Serial.begin(9600);
Serial.println("Starting Web Temperature Server...");
// Add web apps to server
server.addApp(&homePage);
server.addApp(&temperaturePage);
// Set 404 Not Found page (optional - for better user experience)
server.setNotFoundPage(DIYablesNotFoundPage());
// Set up temperature callback for value requests
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
// Start the server
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
// Handle web server and WebSocket communications
server.loop();
// Simulate temperature readings
simulateTemperature();
// Send temperature update every 2 seconds
if (millis() - lastUpdate >= 2000) {
temperaturePage.sendTemperature(currentTemp);
// Print temperature to Serial Monitor
Serial.println("Temperature: " + String(currentTemp, 1) + "°C");
lastUpdate = millis();
}
delay(10); // Small delay for stability
}
void simulateTemperature() {
// Simple temperature simulation - slowly increases and decreases
static bool increasing = true;
if (increasing) {
currentTemp += 0.1; // Increase temperature slowly
if (currentTemp >= 35.0) {
increasing = false; // Start decreasing when it reaches 35°C
}
} else {
currentTemp -= 0.1; // Decrease temperature slowly
if (currentTemp <= 15.0) {
increasing = true; // Start increasing when it reaches 15°C
}
}
}
/**
* Callback function called when web interface requests temperature value
* Send current temperature value to web interface
*/
void onTemperatureValueRequested() {
Serial.println("Temperature value requested from web interface");
// Send current temperature value (config is automatically sent by the library)
temperaturePage.sendTemperature(currentTemp);
}
/*
* Alternative setup for real temperature sensor (DS18B20 example):
*
* #include <OneWire.h>
* #include <DallasTemperature.h>
*
* #define ONE_WIRE_BUS 2
* OneWire oneWire(ONE_WIRE_BUS);
* DallasTemperature sensors(&oneWire);
*
* void setup() {
* // ... existing setup code ...
* sensors.begin();
* }
*
* float readTemperature() {
* sensors.requestTemperatures();
* return sensors.getTempCByIndex(0);
* }
*
* // In loop(), replace simulateTemperature() with:
* // currentTemp = readTemperature();
*/
- 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'ESP32
- Ouvrez le moniteur série
- Consultez le résultat sur le moniteur série. Il ressemble à ce qui suit
COM6
Starting Web Temperature Server...
INFO: Added app /
INFO: Added app /web-temperature
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 Temperature: http://192.168.0.2/web-temperature
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Si vous ne voyez rien, redémarrez la carte ESP32.
- Ouvrez un navigateur web sur votre PC ou votre téléphone mobile.
- 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 Temperature, vous verrez l'interface utilisateur de l'application Web Temperature comme ci-dessous:
- Ou vous pouvez également accéder à la page directement en utilisant l'adresse IP suivie de /web-temperature. Par exemple : http://192.168.1.100/web-temperature
- Vous verrez un thermomètre visuel affichant les relevés de température en temps réel
Fonctionnalités de l'interface Web
Affichage du thermomètre
- Thermomètre visuel: Conception de thermomètre classique avec animation de style mercure
- Échelle de température: Marquages d'échelle clairs avec une plage configurable
- Mises à jour en temps réel: Affichage en direct de la température avec des transitions fluides
- Affichage des unités: Affiche les unités de température configurées (°C, °F, K)
- Conception professionnelle: Visualisation de thermomètre épurée et au style pédagogique
Surveillance en temps réel
- Données en temps réel: Les mises à jour de la température se font automatiquement via une connexion WebSocket.
- Animation fluide: Le niveau de mercure évolue en douceur entre les lectures.
- Indicateur d'état: Indicateur de l'état de la connexion.
- Optimisé pour mobile: Interface tactile adaptée à tous les appareils.
Configuration du code
Réglage de la température
// Configure temperature range and units
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // -10 to 50°C
// Set up temperature value request callback
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
Envoi des valeurs de température
void onTemperatureValueRequested() {
// Read temperature from sensor (example with simulation)
float currentTemp = readTemperatureSensor();
// Send to thermometer display
temperaturePage.sendTemperature(currentTemp);
}
Intégration du capteur de température
Capteur de température numérique DS18B20
#include <OneWire.h>
#include <DallasTemperature.h>
#define ONE_WIRE_BUS 2
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
void setup() {
sensors.begin();
// Configure temperature page for sensor range
DIYablesWebTemperaturePage tempPage(-55.0, 125.0, "°C");
}
float readTemperatureSensor() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
Capteur de température et d'humidité DHT22
#include <DHT.h>
#define DHT_PIN 2
#define DHT_TYPE DHT22
DHT dht(DHT_PIN, DHT_TYPE);
void setup() {
dht.begin();
// Configure for DHT22 range
DIYablesWebTemperaturePage tempPage(-40.0, 80.0, "°C");
}
float readTemperatureSensor() {
return dht.readTemperature(); // Returns °C
}
Capteur de température analogique (TMP36)
#define TEMP_PIN A0
float readTemperatureSensor() {
int reading = analogRead(TEMP_PIN);
float voltage = reading * 5.0 / 1024.0;
float temperatureC = (voltage - 0.5) * 100.0; // TMP36 formula
return temperatureC;
}
Conversion d'unités
Prise en charge de plusieurs unités
// Temperature in different units
DIYablesWebTemperaturePage celsiusPage(-10.0, 50.0, "°C");
DIYablesWebTemperaturePage fahrenheitPage(14.0, 122.0, "°F");
DIYablesWebTemperaturePage kelvinPage(263.15, 323.15, "K");
// Conversion functions
float celsiusToFahrenheit(float celsius) {
return (celsius * 9.0/5.0) + 32.0;
}
float celsiusToKelvin(float celsius) {
return celsius + 273.15;
}
Options de personnalisation
Plage de températures
- Température minimale: Définir la lecture minimale attendue
- Température maximale: Définir la lecture maximale attendue
- Unités: Afficher la chaîne d'unités (°C, °F, K ou personnalisé)
- Échelle: L'échelle du thermomètre s'ajuste automatiquement à la plage
Fréquence de mise à jour
// Control update rate to avoid overwhelming the interface
unsigned long lastUpdate = 0;
const unsigned long UPDATE_INTERVAL = 1000; // 1 second
void loop() {
server.loop();
if (millis() - lastUpdate >= UPDATE_INTERVAL) {
// Update temperature display
lastUpdate = millis();
}
}
Cas d'utilisation courants
Projets éducatifs
- Surveillance météorologique: Suivi de la température intérieure et extérieure
- Expériences de physique: Transfert de chaleur, thermodynamique
- Sciences de l'environnement: Surveillance du climat, contrôle de serre
- Apprentissage de l'électronique: Interface des capteurs, visualisation des données
Applications pratiques
- Domotique: Contrôle du CVC, surveillance énergétique
- Contrôle de serre: Optimisation de la croissance des plantes
- Sécurité alimentaire: Surveillance de la température de stockage
- Industriel: Surveillance des procédés, contrôle de qualité
Dépannage
La température ne se met pas à jour
- Vérifiez la connexion WiFi et l'état du WebSocket
- Vérifiez le câblage du capteur et l’alimentation
- Assurez-vous que la fonction de rappel est correctement définie
- Vérifiez le moniteur série pour les lectures du capteur
Valeurs de température incorrectes
- Vérifier l'étalonnage et la précision du capteur
- Vérifier la référence de tension pour les capteurs analogiques
- Assurer une initialisation correcte du capteur
- Tester le capteur de manière indépendante avec du code de base
Problèmes de connexion des capteurs
- Vérifier les connexions de câblage (alimentation, masse, données)
- Vérifier les résistances de pull-up pour les capteurs numériques
- Tester le capteur avec un multimètre pour un fonctionnement correct
- Vérifier l'installation et la compatibilité de la bibliothèque du capteur
Fonctionnalités avancées
Plusieurs capteurs de température
Surveiller plusieurs emplacements avec des thermomètres séparés:
DIYablesWebTemperaturePage indoorTemp(-10.0, 40.0, "°C");
DIYablesWebTemperaturePage outdoorTemp(-30.0, 50.0, "°C");
DIYablesWebTemperaturePage waterTemp(0.0, 100.0, "°C");
server.addApp(&indoorTemp);
server.addApp(&outdoorTemp);
server.addApp(&waterTemp);
Journalisation de la température
Combinez avec Web Plotter pour des données historiques de température :
// Send same value to both thermometer and plotter
temperaturePage.sendTemperature(currentTemp);
plotterPage.sendData("Temperature", currentTemp);
Système d'alerte
Mettre en place des alertes de température :
void checkTemperatureAlerts(float temp) {
if (temp > 35.0) {
Serial.println("⚠️ High temperature alert!");
// Send alert via web interface
} else if (temp < 5.0) {
Serial.println("🧊 Low temperature alert!");
// Send alert via web interface
}
}
Intégration éducative
Objectifs d'apprentissage STEM
- Physique de la température: Comprendre les concepts thermiques
- Technologie des capteurs: Apprendre les capteurs numériques et analogiques
- Visualisation des données: Techniques d'affichage des données en temps réel
- Programmation: Fonctions de rappel, intégration des capteurs
Activités en classe
- Comparaison des capteurs: Comparer les différents types de capteurs de température
- Exercice d'étalonnage: Apprendre les principes de précision des mesures
- Surveillance environnementale: Suivre les variations de température au fil du temps
- Intégration des systèmes: Combiner avec d'autres capteurs environnementaux
Expériences scientifiques
- Transfert de chaleur: surveiller les variations de température pendant les expériences
- Transitions de phase: observer la température pendant la fusion/ébullition
- Tests d'isolation: comparer l'efficacité de l'isolation
- Étude climatique: surveillance de la température à long terme
Cet exemple offre une base complète pour la surveillance et la visualisation de la température, idéale à la fois pour des applications éducatives et pratiques de surveillance environnementale.