Arduino Nano ESP32 Web Temperature avec la Bibliothèque DIYables ESP32 WebApps
Aperçu
Ce tutoriel couvre la classe DIYablesWebTemperaturePage de la bibliothèque DIYables ESP32 WebApps. La page du navigateur affiche un thermomètre de style mercure qui affiche une valeur de température en temps réel reçue de l'Arduino Nano ESP32 via WebSocket. La plage de température, les unités et l'échelle sont configurées dans le constructeur et transmises au navigateur lors de la connexion.
Regardez une démonstration de l'application Web Temperature avec un capteur DS18B20 :
Ce que ce Tutoriel Couvre
- Configurer la plage et les unités du thermomètre dans le constructeur
- Fournir les lectures de température via un callback
- Envoyer des valeurs mises à jour depuis de vrais capteurs (DS18B20, DHT22)
- Accéder à la page thermomètre depuis un navigateur
Matériel Requis
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.
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é.
É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 avec un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte appropriée (ex. Arduino Nano ESP32) et le port COM.
- Naviguez vers l'icône Bibliothèques dans la barre gauche de l'IDE Arduino.
- Cherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps de 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() {
- On vous demandera d'installer d'autres dépendances de bibliothèques
- Cliquez sur le bouton Installer tout pour installer toutes les dépendances de bibliothèques.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebTemperature, 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();
*/
- 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 l'IDE Arduino pour téléverser le code sur l'Arduino Nano ESP32
- Ouvrez le Moniteur Série
- La sortie du Moniteur Série devrait ressembler à ceci :
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Starting Web Temperature Server...
INFO: Added app /
INFO: Added app /web-temperature
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 Temperature: http://192.168.0.2/web-temperature
==========================================
- Si rien n'apparaît, appuyez sur le bouton de réinitialisation de la carte.
- Entrez l'adresse IP du Moniteur Série dans un navigateur sur le même réseau.
- Exemple : http://192.168.0.2
- La page d'accueil affiche une carte pour l'application de température :
- Sélectionnez la carte Web Temperature pour ouvrir la page thermomètre :
- La page est également directement accessible à http://192.168.0.2/web-temperature.
Configuration du Thermomètre
Constructeur
Définissez la température minimale, la température maximale et la chaîne d'unité dans le constructeur. Ces valeurs sont envoyées au navigateur lors de la connexion et déterminent l'échelle du thermomètre.
// Range: -10 to 50 degrees Celsius
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C");
Configurations courantes :
| Min | Max | Unité |
|---|---|---|
| -10.0 | 50.0 | °C |
| 32.0 | 122.0 | °F |
| 263.15 | 323.15 | K |
Callback
Enregistrez onTemperatureValueRequested pour fournir une lecture chaque fois que le navigateur demande une mise à jour :
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
Envoi d'une Valeur
À l'intérieur de la fonction callback, lisez le capteur et appelez sendTemperatureValue() :
void onTemperatureValueRequested() {
float temp = readSensor(); // returns float in configured units
temperaturePage.sendTemperatureValue(temp);
}
Lecture depuis de Vrais Capteurs
DS18B20 (1-Wire)
#include <OneWire.h>
#include <DallasTemperature.h>
OneWire oneWire(4);
DallasTemperature sensors(&oneWire);
float readSensor() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
DHT22 (Single-Wire)
#include <DHT.h>
DHT dht(5, DHT22);
float readSensor() {
return dht.readTemperature(); // returns °C; use readTemperature(true) for °F
}
Dépannage
Le thermomètre n'affiche aucune valeur
- Vérifiez que onTemperatureValueRequested est enregistré avant webAppsServer.begin()
- Confirmez que sendTemperatureValue() est appelé à l'intérieur du callback
Le capteur retourne NaN
- Pour DS18B20 : vérifiez la broche de données OneWire et la résistance de pull-up (4,7 kΩ entre data et 3,3 V)
- Pour DHT22 : ajoutez un pull-up de 10 kΩ sur la ligne de données ; l'intervalle de lecture minimum est de 2 s
Le niveau du mercure ne correspond pas à la valeur attendue
- Vérifiez que la valeur rapportée est dans la plage min/max configurée
- Les valeurs hors de la plage sont écrêtées aux limites du thermomètre
Page inaccessible
- Vérifiez l'adresse IP du Moniteur Série
- Confirmez que la carte et l'appareil du navigateur sont sur le même réseau WiFi