ESP32 WebTemperature Voorbeeld - Visuele Thermometer Interface Tutorial
Overzicht
Het WebTemperature voorbeeld maakt een visuele thermometerinterface die toegankelijk is via elke webbrowser. Ontworpen voor het ESP32 educatieve platform met verbeterde sensor monitoringsmogelijkheden, ingebouwde temperatuursensorfuncties en naadloze integratie met educatieve modules voor omgevingsmonitoring. Perfect voor het monitoren van temperatuursensoren, omgevingscondities of elke temperatuurgebaseerde meting die visuele feedback vereist.
Kenmerken
- Visuele Thermometerweergave: Interactieve thermometer via webinterface
- Configureerbaar Temperatuurbereik: Aangepaste minimum- en maximumtemperaturen met eenheden
- Realtime Updates: Live temperatuurweergave met kwiksifstijl animatie
- Ondersteuning voor Meerdere Eenheden: Celsius (°C), Fahrenheit (°F), Kelvin (K)
- Automatische Configuratieverwerking: Bereik en eenheid één keer instellen in de constructor
- WebSocket Communicatie: Directe updates zonder pagina te verversen
- Mobiel Responsief: Werkt perfect op desktop, tablet en mobiele apparaten
- Professioneel Ontwerp: Schone thermometerweergave met vloeiende animaties
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Aankoopadvies: Veel DS18B20-sensoren op de markt zijn van lage kwaliteit. We raden u ten zeerste aan de sensor van het merk DIYables te kopen via de bovenstaande link. We hebben het getest en het werkte goed.
Installatie-instructies
Snelle Stappen
Volg deze stappen één voor één:
- Als u ESP32 voor het eerst gebruikt, raadpleeg dan de tutorial over het instellen van de omgeving voor ESP32 in de Arduino IDE.
- Verbind de ESP32-module met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Kies het juiste ESP32 board (bijv. ESP32 Dev Module) en de juiste COM-poort.
- Ga naar het Libraries icoon in de linkerzijbalk van de Arduino IDE.
- Zoek naar "DIYables ESP32 WebApps" en vind de DIYables ESP32 WebApps Library van DIYables.
- Klik op de Install knop om de bibliotheek te installeren.
- U wordt gevraagd om nog enkele andere bibliotheekafhankelijkheden te installeren.
- Klik op de Install All knop om alle afhankelijkheden te installeren.
- Ga in de Arduino IDE naar File Examples DIYables ESP32 WebApps WebTemperature voorbeeld, of kopieer de bovenstaande code en plak deze in de editor van de Arduino IDE.
/*
* 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();
*/
- Stel in de code uw WiFi-gegevens in door deze regels aan te passen:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Upload knop in de Arduino IDE om de code naar de ESP32 te uploaden.
- Open de Seriële Monitor.
- Bekijk het resultaat in de Seriële Monitor. Het ziet eruit zoals hieronder:
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
- Zie je niets, herstart dan het ESP32 board.
- Open een webbrowser op uw pc of mobiel.
- Typ het IP-adres dat in de Seriële Monitor wordt weergegeven in de browser.
- Voorbeeld: http://192.168.1.100
- U ziet dan de startpagina zoals in de onderstaande afbeelding:
- Klik op de Web Temperature link en u ziet de gebruikersinterface van de Web Temperature app zoals hieronder:
- U kunt de pagina ook direct bereiken via het IP-adres gevolgd door /web-temperature. Bijvoorbeeld: http://192.168.1.100/web-temperature
- U ziet een visuele thermometerweergave met realtime temperatuurmetingen.
Functies van de Web Interface
Thermometerweergave
- Visuele Thermometer: Klassiek thermometerontwerp met kwiksifstijl-animatie
- Temperatuurschaal: Duidelijke schaalmarkeringen met configureerbaar bereik
- Realtime Updates: Live temperatuurweergave met vloeiende overgangen
- Eenheidweergave: Toont ingestelde temperatuureenheden (°C, °F, K)
- Professioneel Ontwerp: Schone, educatieve thermometervisualisatie
Realtime Monitoring
- Live Data: Temperatuur wordt automatisch bijgewerkt via WebSocket-verbinding
- Vloeiende Animatie: Kwiksifniveau beweegt soepel tussen metingen
- Statusfeedback: Indicatie van verbindingsstatus
- Mobiel Geoptimaliseerd: Touchvriendelijke interface voor alle apparaten
Codeconfiguratie
Temperatuur Instelling
// Configureer temperatuurbereik en eenheden
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // -10 tot 50°C
// Instellen van callback voor temperatuurwaarde aanvraag
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
Temperatuurwaarden Verzenden
void onTemperatureValueRequested() {
// Lees temperatuur van sensor (voorbeeld met simulatie)
float currentTemp = readTemperatureSensor();
// Verstuur naar thermometerweergave
temperaturePage.sendTemperature(currentTemp);
}
Integratie van Temperatuursensoren
DS18B20 Digitale Temperatuursensor
#include <OneWire.h>
#include <DallasTemperature.h>
#define ONE_WIRE_BUS 2
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
void setup() {
sensors.begin();
// Configureer temperatuurpagina voor sensorbereik
DIYablesWebTemperaturePage tempPage(-55.0, 125.0, "°C");
}
float readTemperatureSensor() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
DHT22 Temperatuur/Vochtigheidssensor
#include <DHT.h>
#define DHT_PIN 2
#define DHT_TYPE DHT22
DHT dht(DHT_PIN, DHT_TYPE);
void setup() {
dht.begin();
// Configureer voor DHT22-bereik
DIYablesWebTemperaturePage tempPage(-40.0, 80.0, "°C");
}
float readTemperatureSensor() {
return dht.readTemperature(); // Retourneert °C
}
Analoge Temperatuursensor (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 formule
return temperatureC;
}
Eenheidconversie
Ondersteuning voor Meerdere Eenheden
// Temperatuur in verschillende eenheden
DIYablesWebTemperaturePage celsiusPage(-10.0, 50.0, "°C");
DIYablesWebTemperaturePage fahrenheitPage(14.0, 122.0, "°F");
DIYablesWebTemperaturePage kelvinPage(263.15, 323.15, "K");
// Conversiefuncties
float celsiusToFahrenheit(float celsius) {
return (celsius * 9.0/5.0) + 32.0;
}
float celsiusToKelvin(float celsius) {
return celsius + 273.15;
}
Aanpassingsmogelijkheden
Temperatuurbereik
- Minimale Temperatuur: Stel de laagst verwachte temperatuur in
- Maximale Temperatuur: Stel de hoogst verwachte temperatuur in
- Eenheden: Toon eenheidsteken (°C, °F, K of aangepast)
- Schaal: Thermometerschaal past zich automatisch aan het bereik aan
Updatefrequentie
// Beheer update-snelheid om de interface niet te overbelasten
unsigned long lastUpdate = 0;
const unsigned long UPDATE_INTERVAL = 1000; // 1 seconde
void loop() {
server.loop();
if (millis() - lastUpdate >= UPDATE_INTERVAL) {
// Werk temperatuurweergave bij
lastUpdate = millis();
}
}
Veelvoorkomende Toepassingen
Educatieve Projecten
- Weer Monitoring: Binnen- en buitentemperatuur volgen
- Natuurkundige Experimenten: Warmteoverdracht, thermodynamica
- Milieuwetenschappen: Klimaatmonitoring, kweekkascontrole
- Elektronica Leren: Sensorinterfaces en datavisualisatie
Praktische Toepassingen
- Domotica: HVAC besturing, energiebeheer
- Kwekerijcontrole: Optimale plantengroei
- Voedselveiligheid: Temperatuurcontrole bij opslag
- Industrieel: Procesmonitoring, kwaliteitsbewaking
Probleemoplossing
Temperatuur wordt niet bijgewerkt
- Controleer WiFi-verbinding en WebSocket-status
- Controleer bedrading en voeding van de sensor
- Zorg dat de callbackfunctie correct is ingesteld
- Controleer seriële monitor op sensoruitvoer
Verkeerde Temperatuurwaarden
- Controleer sensor kalibratie en nauwkeurigheid
- Controleer spanningsreferentie bij analoge sensoren
- Zorg voor correcte initiatie van sensoren
- Test sensor los met eenvoudige code
Sensorverbindingsproblemen
- Controleer bedrading (voeding, massa, data)
- Controleer pull-up weerstanden voor digitale sensoren
- Test sensor met multimeter op juiste werking
- Controleer bibliotheekinstallatie en compatibiliteit
Gevorderde Functies
Meerdere Temperatuursensoren
Monitor meerdere locaties met aparte thermometers:
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);
Temperatuur Logging
Combineer met Web Plotter voor historische temperatuurdata:
// Stuurt dezelfde waarde naar thermometer en plotter
temperaturePage.sendTemperature(currentTemp);
plotterPage.sendData("Temperature", currentTemp);
Waarschuwingssysteem
Implementeer temperatuurwaarschuwingen:
void checkTemperatureAlerts(float temp) {
if (temp > 35.0) {
Serial.println("⚠️ High temperature alert!");
// Verstuur waarschuwing via webinterface
} else if (temp < 5.0) {
Serial.println("🧊 Low temperature alert!");
// Verstuur waarschuwing via webinterface
}
}
Educatieve Integratie
STEM Leerdoelen
- Temperatuur Fysica: Begrip van thermische concepten
- Sensortechnologie: Kennismaking met digitale en analoge sensoren
- Datavisualisatie: Technieken voor realtime dataweergave
- Programmeren: Callback-functies, sensorintegratie
Klassikale Activiteiten
- Sensorvergelijking: Verschillende types temperatuursensoren vergelijken
- Kalibratie-oefening: Leer nauwkeurigheidsprincipes in meten
- Omgevingsmonitoring: Temperatuurschommelingen in de tijd volgen
- Systeemintegratie: Combineren met andere milieusensoren
Wetenschappelijke Experimenten
- Warmteoverdracht: Temperatuurverandering tijdens experimenten monitoren
- Fase-overgangen: Temperatuur waarnemen tijdens smelten/koken
- Isolatietesten: Effectiviteit van isolatie vergelijken
- Klimaatstudie: Lange termijn temperatuurmonitoring
Dit voorbeeld biedt een gedegen basis voor temperatuurmonitoring en visualisatie, ideaal voor zowel educatieve als praktische toepassingen in omgevingsmonitoring.