Exemple Arduino WebTemperature - Tutoriel sur l’interface visuelle du thermomètre
Vue d'ensemble
L'exemple WebTemperature crée une interface visuelle de thermomètre accessible depuis n'importe quel navigateur web. Conçu pour la plateforme éducative Arduino Uno R4 WiFi et DIYables STEM V4 IoT, offrant des capacités améliorées de surveillance des capteurs, 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 personnalisables avec les unités
- Mises à jour en temps réel: Affichage de la température en temps réel avec une animation de 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 actualisation de la page
- Adapté aux mobiles: Fonctionne parfaitement sur ordinateur de bureau, tablette et appareils mobiles
- Conception professionnelle: Visualisation claire du thermomètre avec des animations fluides
- Plate-forme extensible: Actuellement implémenté pour Arduino Uno R4 WiFi, mais peut être étendu pour 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.
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'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 de 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.
- Il vous sera demandé d'installer d'autres dépendances de 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 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 WebApps library with Arduino Uno R4 WiFi.
*
* The library automatically detects the Arduino Uno R4 WiFi 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*/
#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
UnoR4ServerFactory 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 sur 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 présenté ci-dessous
COM6
Starting Web Temperature Server...
INFO: Added app /
INFO: Added app /web-temperature
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 Temperature: http://192.168.0.2/web-temperature
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Si vous ne voyez rien, redémarrez la carte Arduino.
- Ouvrez un navigateur web sur votre PC ou sur 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 Temperature, vous verrez l'interface utilisateur de l'application Web Temperature comme ci-dessous :
- Ou vous pouvez également accéder directement à la page en utilisant l'adresse IP suivie de /web-temperature. Par exemple : http://192.168.1.100/web-temperature
- Vous verrez un affichage visuel du thermomètre montrant les lectures 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: Graduations claires 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 d'un thermomètre épuré au style pédagogique
Surveillance en temps réel
- Données en temps réel: La température se met à jour automatiquement via une connexion WebSocket
- Animation fluide: Le niveau de mercure se déplace en douceur entre les lectures
- Retour d'état: Indicateur de l'état de connexion
- Optimisé pour les mobiles: Interface tactile pour tous les appareils
Configuration du code
Configuration 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 DHT22 de température et d'humidité
#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 valeur minimale attendue
- Température maximale: Définir la valeur maximale attendue
- Unités: Afficher la chaîne d'unité (°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 la serre
- Apprentissage de l'électronique: Interfaçage des capteurs, visualisation des données
Applications pratiques
- Domotique: contrôle CVC, surveillance de l'énergie
- Contrôle de serre: optimisation de la croissance des plantes
- Sécurité alimentaire: surveillance de la température pour le stockage
- Industriel: surveillance des procédés, contrôle qualité
Dépannage
Température non actualisée
- Vérifier la connexion Wi-Fi et l'état du WebSocket
- Vérifier le câblage du capteur et l'alimentation
- S'assurer que la fonction de rappel est correctement définie
- Vérifier 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
- S'assurer d'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 tirage vers le haut pour les capteurs numériques
- Tester le capteur avec un multimètre pour un fonctionnement correct
- Vérifier l'installation de la bibliothèque du capteur et sa compatibilité
Fonctionnalités avancées
Plusieurs capteurs de température
Surveillez 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);
Enregistrement de la température
Combinez avec Web Plotter pour les 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 thermique: 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 de capteurs: Comparer 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 de systèmes: Combiner avec d'autres capteurs environnementaux
Expériences scientifiques
- Transfert de chaleur: Surveiller les variations de température pendant les expériences
- Changements de phase: Observer la température pendant la fusion et l'ébullition
- Tests d'isolation: Comparer l'efficacité de l'isolation
- Étude du climat: 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 pour des applications de surveillance environnementale à des fins éducatives et pratiques.