Arduino WebTemperature-Beispiel – Tutorial zur visuellen Thermometer-Schnittstelle
Überblick
Das WebTemperature-Beispiel erstellt eine visuelle Thermometeroberfläche, die von jedem Webbrowser aus erreichbar ist. Ausgelegt für Arduino Uno R4 WiFi und DIYables STEM V4 IoT Bildungsplattform mit erweiterten Sensorüberwachungsfunktionen, integrierten Temperaturmessfunktionen und nahtloser Integration in Lernmodule zur Umweltüberwachung. Perfekt geeignet zur Überwachung von Temperatursensoren, Umweltbedingungen oder jeder temperaturbasierten Messung, die eine visuelle Rückmeldung erfordert.
Funktionen
- Visuelle Thermometeranzeige: Interaktives Thermometer über die Weboberfläche
- Konfigurierbarer Temperaturbereich: Benutzerdefinierte Minimal- und Maximalwerte mit Einheiten
- Aktualisierungen in Echtzeit: Temperaturanzeige in Echtzeit mit Quecksilber-Stil-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 Neuladen der Seite
- Mobilfreundlich: Funktioniert perfekt auf Desktop-, Tablet- und Mobilgeräten
- Professionelles Design: saubere Thermometer-Visualisierung mit sanften Animationen
- Plattform-Erweiterbarkeit: Derzeit implementiert für Arduino Uno R4 WiFi, kann jedoch auf andere Hardware-Plattformen erweitert werden. Siehe DIYables_WebApps_ESP32
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino 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.
Anweisungen zur Einrichtung
Schnelle Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn dies das erste Mal ist, dass Sie den Arduino Uno R4 WiFi/DIYables STEM V4 IoT verwenden, lesen Sie das Tutorial zur Einrichtung der Umgebung für Arduino Uno R4 WiFi/DIYables STEM V4 IoT in der Arduino IDE (BASE_URL/tutorials/arduino-uno-r4/arduino-uno-r4-software-installation).
- Schließen Sie das Arduino Uno R4/DIYables STEM V4 IoT-Board mit einem USB-Kabel an Ihren Computer an.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das entsprechende Arduino Uno R4-Board aus (z. B. Arduino Uno R4 WiFi) und den COM-Port aus.
- Gehen Sie zum Libraries-Symbol in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables WebApps", dann finden Sie die DIYables WebApps-Bibliothek von DIYables.
- Klicken Sie auf die Installieren-Schaltfläche, 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.
- Im Arduino-IDE gehen Sie zu Datei Beispiele DIYables WebApps WebTemperature WebTemperature-Beispiel, oder kopieren Sie den obigen Code und fügen Sie 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 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();
*/
- 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";
- Klicken Sie in der Arduino IDE auf die Upload-Schaltfläche, um Code auf den Arduino UNO R4/DIYables STEM V4 IoT hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Schauen Sie sich 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: 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
- Wenn Sie nichts sehen, starten Sie das Arduino-Board neu.
- Öffnen Sie einen Webbrowser auf Ihrem PC oder Smartphone.
- Geben Sie die im Serial Monitor angezeigte IP-Adresse in den Webbrowser ein.
- Beispiel: http://192.168.1.100
- Sie sehen die Startseite wie im folgenden Bild:
- Klicken Sie auf den Link Web Temperature, dann sehen Sie die Benutzeroberfläche der Web Temperature-App wie unten:
- Oder Sie können die Seite auch direkt über die 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ähnlicher Animation
- Temperaturskala: Klare Skalenmarkierungen mit einstellbarem Bereich
- Echtzeit-Updates: Live-Temperaturanzeige mit sanften Übergängen
- Einheitenanzeige: Zeigt konfigurierte Temperatureinheiten (°C, °F, K)
- Professionelles Design: Saubere, didaktisch gestaltete Thermometer-Visualisierung
Echtzeit-Überwachung
- Live-Daten: Die Temperaturwerte werden automatisch über eine WebSocket-Verbindung aktualisiert
- Sanfte Animation: Der Quecksilberstand bewegt sich sanft zwischen den Messwerten
- Status-Feedback: Verbindungsstatusanzeige
- Mobil-optimiert: Touchfreundliche Benutzeroberfläche für alle Geräte
Code-Konfiguration
Temperaturkonfiguration
// 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);
Senden von Temperaturwerten
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
}
Analog-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: Den niedrigsten erwarteten Messwert einstellen
- Maximale Temperatur: Den höchsten erwarteten Messwert einstellen
- Einheiten: Einheitenzeichen 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- und Außentemperaturerfassung
- Physikalische Experimente: Wärmeübertragung, thermische Dynamik
- Umweltwissenschaften: Klimabeobachtung, Gewächshaussteuerung
- Elektroniklernen: Sensor-Schnittstellen, Datenvisualisierung
Praktische Anwendungen
- Hausautomation: HLK-Steuerung, Energieüberwachung
- Gewächshaussteuerung: Optimierung des Pflanzenwachstums
- Lebensmittelsicherheit: Temperaturüberwachung zur Lagerung
- Industrie: Prozessüberwachung, Qualitätskontrolle
Fehlerbehebung
Temperatur wird nicht aktualisiert
- Überprüfe die WLAN-Verbindung und den WebSocket-Status
- Überprüfe die Sensorverdrahtung und die Stromversorgung
- Stelle sicher, dass die Callback-Funktion korrekt gesetzt ist
- Überprüfe den seriellen Monitor auf Sensorwerte
Ungültige Temperaturwerte
- Überprüfen Sie die Kalibrierung und Genauigkeit des Sensors.
- Überprüfen Sie die Referenzspannung für analoge Sensoren.
- Stellen Sie eine ordnungsgemäße Initialisierung des Sensors sicher.
- Testen Sie den Sensor eigenständig mit einfachem Code.
Sensor-Verbindungsprobleme
- Verkabelung überprüfen (Stromversorgung, Masse, Daten)
- Pull-up-Widerstände für digitale Sensoren überprüfen
- Sensor mit Multimeter auf ordnungsgemäße Funktion testen
- Sensorbibliothek installieren und Kompatibilität überprüfen
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
Mit Web Plotter für historische Temperaturdaten kombinieren:
// Send same value to both thermometer and plotter
temperaturePage.sendTemperature(currentTemp);
plotterPage.sendData("Temperature", currentTemp);
Warnsystem
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
- Sensorentechnologie: Lernen digitaler und analoger Sensoren
- Datenvisualisierung: Techniken der Echtzeit-Datenanzeige
- Programmierung: Callback-Funktionen, Sensorintegration
Unterrichtsaktivitäten
- Sensorenvergleich: Verschiedene Typen von Temperatursensoren vergleichen
- Kalibrierungsübung: Prinzipien der Messgenauigkeit lernen
- Umweltüberwachung: Temperaturveränderungen im Zeitverlauf verfolgen
- Systemintegration: Mit anderen Umweltsensoren kombinieren
Naturwissenschaftliche Experimente
- Wärmeübertragung: Temperaturveränderungen während der Experimente überwachen
- Phasenübergänge: Die Temperatur während des Schmelzens und des Siedens beobachten
- Dämmtests: 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.