ESP32 WebTemperature-Beispiel – Tutorial zur visuellen Thermometer-Schnittstelle
Überblick
Das WebTemperature-Beispiel erstellt eine visuelle Thermometer-Schnittstelle, die von jedem Webbrowser aus zugänglich ist. Es wurde für die ESP32-Bildungsplattform entwickelt und bietet erweiterte Sensorüberwachungsfunktionen, integrierte Temperaturmessfunktionen und eine nahtlose Integration in Bildungsmodulen zur Umweltüberwachung. Perfekt zum Überwachen von Temperatursensoren, Umweltbedingungen oder temperaturabhängigen Messungen jeglicher Art, die visuelles Feedback erfordern.
Funktionen
- Visuelle Thermometeranzeige: Interaktives Thermometer über Weboberfläche
- Konfigurierbarer Temperaturbereich: Benutzerdefinierte minimale und maximale Temperaturen mit Einheiten
- Echtzeitaktualisierungen: Temperaturanzeige in Echtzeit mit einer quecksilberähnlichen Animation
- Unterstützung mehrerer Einheiten: Celsius (°C), Fahrenheit (°F), Kelvin (K)
- Automatische Konfigurationsverwaltung: Bereich und Einheit einmal im Konstruktor festlegen
- WebSocket-Kommunikation: Sofortige Updates ohne Seitenaktualisierung
- Mobilfreundlich: Funktioniert perfekt auf Desktop, Tablet und Mobilgeräten
- Professionelles Design: Saubere Thermometer-Visualisierung mit sanften Animationen
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Kaufhinweis: Viele DS18B20-Sensoren auf dem Markt sind von geringer Qualität. Wir empfehlen dringend den Kauf des Sensors von der Marke DIYables über den obigen Link. Wir haben ihn getestet und er funktionierte gut.
Installationsanweisungen
Schnelle Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn dies Ihre erste Verwendung des ESP32 ist, lesen Sie das Tutorial Tutorial zur Einrichtung der ESP32-Umgebung in der Arduino IDE.
- Schließen Sie das ESP32-Board über ein USB-Kabel an Ihren Computer an.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
- Navigieren Sie zum Symbol Libraries in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables ESP32 WebApps", dann finden Sie die DIYables ESP32 WebApps-Bibliothek von DIYables.
- Klicken Sie auf die Schaltfläche Install, um die Bibliothek zu installieren.
- Sie werden aufgefordert, weitere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- In der Arduino-IDE gehe zu Datei Beispiele DIYables ESP32 WebApps WebTemperature Beispiel, oder kopiere den obigen Code und füge ihn in den Editor der Arduino-IDE ein
/*
* 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();
*/
- Konfigurieren Sie die WLAN-Zugangsdaten im Code, indem Sie diese Zeilen aktualisieren:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicke in der Arduino-IDE auf die Hochladen-Schaltfläche, um Code auf dem ESP32 hochzuladen.
- Öffne den seriellen Monitor.
- Sieh dir das Ergebnis im seriellen Monitor an. Es sieht so aus, wie unten gezeigt.
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
- Wenn Sie nichts sehen, starten Sie das ESP32-Board neu.
- Öffnen Sie einen Webbrowser auf Ihrem PC oder Mobiltelefon.
- Geben Sie die im seriellen Monitor angezeigte IP-Adresse in den Webbrowser ein.
- Beispiel: http://192.168.1.100
- Sie sehen die Startseite wie im untenstehenden Bild:
- Klicken Sie auf den Web Temperature-Link, dann sehen Sie die Benutzeroberfläche der Web Temperature-App wie unten:
- Oder Sie können die Seite auch direkt über eine IP-Adresse aufrufen, gefolgt von /web-temperature. Zum Beispiel: http://192.168.1.100/web-temperature
- Sie sehen eine visuelle Thermometeranzeige, die Echtzeit-Temperaturwerte anzeigt
Funktionen der Weboberfläche
Thermometeranzeige
- Visuelles Thermometer: Klassisches Thermometer-Design mit Quecksilber-Animation
- Temperaturskala: Klare Skalenmarkierungen mit konfigurierbarem Bereich
- Aktualisierungen in Echtzeit: Live-Temperaturanzeige mit sanften Übergängen
- Einheitenanzeige: Zeigt konfigurierte Temperatureinheiten (°C, °F, K)
- Professionelles Design: Saubere, lehrreiche Thermometer-Visualisierung
Echtzeitüberwachung
- Live-Daten: Die Temperatur wird automatisch über eine WebSocket-Verbindung aktualisiert
- Sanfte Animation: Der Quecksilberstand bewegt sich sanft zwischen den Messwerten
- Status-Feedback: Verbindungsstatus-Indikator
- Für mobile Geräte optimiert: Touch-freundliche Benutzeroberfläche für alle Geräte
Code-Konfiguration
Temperatur-Setup
// 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);
Temperaturwerte senden
void onTemperatureValueRequested() {
// Read temperature from sensor (example with simulation)
float currentTemp = readTemperatureSensor();
// Send to thermometer display
temperaturePage.sendTemperature(currentTemp);
}
Temperatursensor-Integration
DS18B20 digitaler Temperatursensor
#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);
}
DHT22 Temperatur- und Luftfeuchtigkeitssensor
#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
}
Analoger Temperatursensor (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;
}
Einheitenumrechnung
Unterstützung mehrerer Einheiten
// 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;
}
Anpassungsoptionen
Temperaturbereich
- Minimale Temperatur: Legen Sie den niedrigsten erwarteten Messwert fest
- Maximale Temperatur: Legen Sie den höchsten erwarteten Messwert fest
- Einheiten: Als Zeichenkette anzeigen (°C, °F, K oder benutzerdefiniert)
- Skala: Die Thermometer-Skala passt sich automatisch an den Bereich an
Aktualisierungsfrequenz
// 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();
}
}
Häufige Anwendungsfälle
Bildungsprojekte
- Wetterüberwachung: Innen-/Außentemperaturmessung
- Physikexperimente: Wärmeübertragung, Thermodynamik
- Umweltwissenschaften: Klimaüberwachung, Gewächshaussteuerung
- Elektronik lernen: Sensoranbindung, Datenvisualisierung
Praktische Anwendungen
- Hausautomation: HLK-Steuerung, Energieüberwachung
- Gewächshaussteuerung: Pflanzenwachstumsoptimierung
- Lebensmittelsicherheit: Temperaturüberwachung für die Lagerung
- Industrie: Prozessüberwachung, Qualitätskontrolle
Fehlerbehebung
Temperatur wird nicht aktualisiert
- Überprüfen Sie die WLAN-Verbindung und den WebSocket-Status
- Überprüfen Sie die Sensorverkabelung und die Stromversorgung
- Stellen Sie sicher, dass die Callback-Funktion korrekt gesetzt ist
- Überprüfen Sie den Serial Monitor auf Sensorwerte
Fehlerhafte Temperaturwerte
- Kalibrierung und Genauigkeit des Sensors überprüfen
- Spannungsreferenz für analoge Sensoren überprüfen
- Sicherstellen, dass der Sensor ordnungsgemäß initialisiert wird
- Sensor unabhängig mit einem einfachen Code testen
Sensorverbindungsprobleme
- Prüfen Sie die Verkabelung (Stromversorgung, Masse, Daten)
- Prüfen Sie die Pull-up-Widerstände für digitale Sensoren
- Prüfen Sie den Sensor mit dem Multimeter auf ordnungsgemäßen Betrieb
- Prüfen Sie die Installation der Sensorbibliothek und deren Kompatibilität
Erweiterte Funktionen
Mehrere Temperatursensoren
Mehrere Standorte mit separaten Thermometern überwachen:
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);
Temperaturprotokollierung
Kombinieren Sie es mit dem Web Plotter für historische Temperaturdaten:
// Send same value to both thermometer and plotter
temperaturePage.sendTemperature(currentTemp);
plotterPage.sendData("Temperature", currentTemp);
Alarm-System
Temperaturwarnungen implementieren:
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
}
}
Bildungsintegration
MINT-Lernziele
- Temperaturphysik: Verständnis thermischer Konzepte
- Sensorentechnik: Lernen digitaler und analoger Sensoren
- Datenvisualisierung: Techniken zur Echtzeitanzeige von Daten
- Programmierung: Callback-Funktionen, Sensorintegration
Unterrichtsaktivitäten
- Sensorvergleich: Vergleiche verschiedene Typen von Temperatursensoren
- Kalibrierungsübung: Lerne Prinzipien der Messgenauigkeit
- Umweltüberwachung: Verfolge Temperaturveränderungen im Laufe der Zeit
- Systemintegration: Kombiniere sie mit anderen Umweltsensoren
Wissenschaftsexperimente
- Wärmeübertragung: Temperaturänderungen während der Experimente überwachen
- Phasenwechsel: Temperatur während des Schmelzens oder des Kochens beobachten
- Dämmungsprüfung: Die Wirksamkeit der Dämmung vergleichen
- Klimastudie: Langzeit-Temperaturüberwachung
Dieses Beispiel bietet eine umfassende Grundlage für die Temperaturüberwachung und Visualisierung, ideal sowohl für Bildungs- als auch für praktische Umweltüberwachungsanwendungen.