Arduino WebTemperature Voorbeeld - Visuele Thermometer Interface Tutorial
Overzicht
Het WebTemperature voorbeeld creëert een visuele thermometer interface die toegankelijk is vanuit elke webbrowser. Ontworpen voor Arduino Uno R4 WiFi en DIYables STEM V4 IoT educatief platform met verbeterde sensormonitoring mogelijkheden, ingebouwde temperatuurmeting functies, en naadloze integratie met educatieve modules voor omgevingsmonitoring. Perfect voor het monitoren van temperatuursensoren, omgevingscondities, of temperatuurgebaseerde metingen die visuele feedback vereisen.
Functies
- Visuele Thermometer Weergave: Interactieve thermometer via web-interface
- Configureerbaar Temperatuurbereik: Aangepaste minimum en maximum temperaturen met eenheden
- Real-time Updates: Live temperatuurweergave met kwik-stijl animatie
- Ondersteuning Meerdere Eenheden: Celsius (°C), Fahrenheit (°F), Kelvin (K)
- Automatische Config Verwerking: Stel bereik en eenheid eenmaal in de constructor in
- WebSocket Communicatie: Directe updates zonder pagina vernieuwing
- Mobiel Responsive: Werkt perfect op desktop, tablet en mobiele apparaten
- Professioneel Ontwerp: Schone thermometer visualisatie met vloeiende animaties
- Platform Uitbreidbaar: Momenteel geïmplementeerd voor Arduino Uno R4 WiFi, maar kan worden uitgebreid voor andere hardware platforms. Zie DIYables_WebApps_ESP32
Hardware Vereist
Of u kunt de volgende kits kopen:
| 1 | × | DIYables STEM V4 IoT Starterskit (Arduino inbegrepen) | |
| 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.
Setup Instructies
Snelle Stappen
Volg deze instructies stap voor stap:
- Als dit uw eerste keer is met de Arduino Uno R4 WiFi/DIYables STEM V4 IoT, raadpleeg dan de tutorial over het opzetten van de omgeving voor Arduino Uno R4 WiFi/DIYables STEM V4 IoT in de Arduino IDE.
- Verbind het Arduino Uno R4/DIYables STEM V4 IoT board met uw computer met behulp van een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste Arduino Uno R4 board (bijv., Arduino Uno R4 WiFi) en COM-poort.
- Navigeer naar het Libraries icoon in de linker balk van de Arduino IDE.
- Zoek "DIYables WebApps", vind dan de DIYables WebApps bibliotheek door DIYables
- Klik op de Install knop om de bibliotheek te installeren.
- U wordt gevraagd om enkele andere bibliotheek afhankelijkheden te installeren
- Klik op de Install All knop om alle bibliotheek afhankelijkheden te installeren.
- In Arduino IDE, ga naar File Examples DIYables WebApps WebTemperature voorbeeld, of kopieer de bovenstaande code en plak het in de editor van 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 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();
*/
- Configureer WiFi-inloggegevens in de code door deze regels bij te werken:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Upload knop in Arduino IDE om code naar Arduino UNO R4/DIYables STEM V4 IoT te uploaden
- Open de Serial Monitor
- Bekijk het resultaat in Serial Monitor. Het ziet er als volgt uit
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
- Als u niets ziet, herstart het Arduino board.
- Open een webbrowser op uw PC of mobiele telefoon.
- Typ het IP-adres dat wordt weergegeven in de Serial Monitor in de webbrowser
- Voorbeeld: http://192.168.1.100
- U ziet de startpagina zoals onderstaande afbeelding:
- Klik op de Web Temperature link, u ziet de Web Temperature app's UI zoals hieronder:
- Of u kunt ook direct toegang krijgen tot de pagina via IP-adres gevolgd door /web-temperature. Bijvoorbeeld: http://192.168.1.100/web-temperature
- U ziet een visuele thermometer weergave die real-time temperatuurmetingen toont
Web Interface Functies
Thermometer Weergave
- Visuele Thermometer: Klassiek thermometer ontwerp met kwik-stijl animatie
- Temperatuurschaal: Duidelijke schaalmarkering met configureerbaar bereik
- Real-time Updates: Live temperatuurweergave met vloeiende overgangen
- Eenheid Weergave: Toont geconfigureerde temperatuureenheden (°C, °F, K)
- Professioneel Ontwerp: Schone, educatieve-stijl thermometer visualisatie
Real-time Monitoring
- Live Data: Temperatuur updates automatisch via WebSocket verbinding
- Vloeiende Animatie: Kwikniveau beweegt soepel tussen metingen
- Status Feedback: Verbindingsstatus indicator
- Mobiel Geoptimaliseerd: Touch-vriendelijke interface voor alle apparaten
Code Configuratie
Temperatuur Setup
// Configureer temperatuurbereik en eenheden
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // -10 tot 50°C
// Stel temperatuurwaarde verzoek callback in
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
Temperatuurwaarden Verzenden
void onTemperatureValueRequested() {
// Lees temperatuur van sensor (voorbeeld met simulatie)
float currentTemp = readTemperatureSensor();
// Verstuur naar thermometer weergave
temperaturePage.sendTemperature(currentTemp);
}
Temperatuursensor Integratie
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 sensor bereik
DIYablesWebTemperaturePage tempPage(-55.0, 125.0, "°C");
}
float readTemperatureSensor() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
DHT22 Temperatuur/Luchtvochtigheid Sensor
#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;
}
Eenheid Conversie
Ondersteuning 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");
// Conversie functies
float celsiusToFahrenheit(float celsius) {
return (celsius * 9.0/5.0) + 32.0;
}
float celsiusToKelvin(float celsius) {
return celsius + 273.15;
}
Aanpassing Opties
Temperatuurbereik
- Minimum Temperatuur: Stel laagste verwachte meting in
- Maximum Temperatuur: Stel hoogste verwachte meting in
- Eenheden: Weergave eenheid string (°C, °F, K, of aangepast)
- Schaal: Thermometer schaal past zich automatisch aan het bereik aan
Update Frequentie
// Controleer update rate om overbelasting van de interface te voorkomen
unsigned long lastUpdate = 0;
const unsigned long UPDATE_INTERVAL = 1000; // 1 seconde
void loop() {
server.loop();
if (millis() - lastUpdate >= UPDATE_INTERVAL) {
// Update temperatuurweergave
lastUpdate = millis();
}
}
Veelvoorkomende Toepassingen
Educatieve Projecten
- Weersmonitoring: Binnen/buiten temperatuurtracking
- Natuurkunde Experimenten: Warmteoverdracht, thermische dynamica
- Milieuwetenschap: Klimaatmonitoring, kas controle
- Elektronica Leren: Sensor interfacing, data visualisatie
Praktische Toepassingen
- Domotica: HVAC controle, energiemonitoring
- Kas Controle: Plant groei optimalisatie
- Voedingsveiligheid: Temperatuurmonitoring voor opslag
- Industrieel: Procesmonitoring, kwaliteitscontrole
Probleemoplossing
Temperatuur Wordt Niet Bijgewerkt
- Controleer WiFi-verbinding en WebSocket status
- Verifieer sensor bedrading en voeding
- Zorg ervoor dat callback functie correct is ingesteld
- Controleer Serial Monitor voor sensor metingen
Onjuiste Temperatuurwaarden
- Verifieer sensor kalibratie en nauwkeurigheid
- Controleer voltage referentie voor analoge sensoren
- Zorg voor juiste sensor initialisatie
- Test sensor onafhankelijk met basis code
Sensor Verbindingsproblemen
- Controleer bedradingsverbindingen (voeding, aarding, data)
- Verifieer pull-up weerstanden voor digitale sensoren
- Test sensor met multimeter voor juiste werking
- Controleer sensor bibliotheek installatie en compatibiliteit
Geavanceerde Functies
Meerdere Temperatuursensoren
Monitor meerdere locaties met afzonderlijke 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:
// Verstuur dezelfde waarde naar zowel thermometer als plotter
temperaturePage.sendTemperature(currentTemp);
plotterPage.sendData("Temperature", currentTemp);
Waarschuwingssysteem
Implementeer temperatuurwaarschuwingen:
void checkTemperatureAlerts(float temp) {
if (temp > 35.0) {
Serial.println("⚠️ Hoge temperatuur waarschuwing!");
// Verstuur waarschuwing via web-interface
} else if (temp < 5.0) {
Serial.println("🧊 Lage temperatuur waarschuwing!");
// Verstuur waarschuwing via web-interface
}
}
Educatieve Integratie
STEM Leerdoelstellingen
- Temperatuur Natuurkunde: Begrip van thermische concepten
- Sensor Technologie: Leren over digitale en analoge sensoren
- Data Visualisatie: Real-time data weergave technieken
- Programmeren: Callback functies, sensor integratie
Klaslokaal Activiteiten
- Sensor Vergelijking: Vergelijk verschillende temperatuursensor types
- Kalibratie Oefening: Leer meetnauwkeurigheid principes
- Omgevingsmonitoring: Volg temperatuurveranderingen over tijd
- Systeemintegratie: Combineer met andere omgevingssensoren
Wetenschap Experimenten
- Warmteoverdracht: Monitor temperatuurveranderingen tijdens experimenten
- Fase Veranderingen: Observeer temperatuur tijdens smelten/koken
- Isolatie Testen: Vergelijk isolatie effectiviteit
- Klimaat Studie: Langdurige temperatuurmonitoring
Dit voorbeeld biedt een uitgebreide basis voor temperatuurmonitoring en visualisatie, perfect voor zowel educatieve als praktische omgevingsmonitoring toepassingen.