Arduino Nano ESP32 Web Temperatur mit DIYables ESP32 WebApps-Bibliothek
Übersicht
Dieses Tutorial behandelt die Klasse DIYablesWebTemperaturePage aus der DIYables ESP32 WebApps-Bibliothek. Die Browser-Seite rendert ein quecksilberähnliches Thermometer, das einen Echtzeit-Temperaturwert anzeigt, der vom Arduino Nano ESP32 über WebSocket empfangen wird. Der Temperaturbereich, die Einheit und die Skala werden im Konstruktor konfiguriert und beim Verbinden an den Browser übertragen.
Schauen Sie sich eine Demonstration der Web-Temperatur-App mit einem DS18B20-Sensor an:
Was dieses Tutorial abdeckt
- Konfiguration des Thermometer-Bereichs und der Einheit im Konstruktor
- Versorgung mit Temperaturmessungen über einen Callback
- Senden von aktualisierten Werten von echten Sensoren (DS18B20, DHT22)
- Zugriff auf die Thermometer-Seite von einem Browser aus
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 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.
Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn Sie den Arduino Nano ESP32 zum ersten Mal verwenden, lesen Sie das Tutorial zum Einrichten der Arduino Nano ESP32-Entwicklungsumgebung.
- Verbinden Sie die Arduino Nano ESP32-Platine mit Ihrem Computer über ein USB-Kabel.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie die entsprechende Platine (z. B. Arduino Nano ESP32) und den COM-Port aus.
- Navigieren Sie zum Symbol Bibliotheken in der linken Leiste der Arduino IDE.
- Suchen Sie nach "DIYables ESP32 WebApps", dann finden Sie die DIYables ESP32 WebApps-Bibliothek von DIYables
- Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Sie werden aufgefordert, einige andere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- In der Arduino IDE gehen Sie zu Datei Beispiele DIYables ESP32 WebApps 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 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();
*/
- Aktualisieren Sie die WiFi-Anmeldedaten in der Skizze:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um Code zum Arduino Nano ESP32 hochzuladen
- Öffnen Sie den seriellen Monitor
- Die Ausgabe des seriellen Monitors sollte wie folgt aussehen:
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
==========================================
- Wenn nichts angezeigt wird, drücken Sie die Reset-Taste auf der Platine.
- Geben Sie die IP-Adresse aus dem seriellen Monitor in einen Browser im selben Netzwerk ein.
- Beispiel: http://192.168.0.2
- Die Startseite zeigt eine Karte für die Temperaturanwendung:
- Wählen Sie die Web-Temperatur-Karte aus, um die Thermometer-Seite zu öffnen:
- Die Seite ist auch direkt unter http://192.168.0.2/web-temperature erreichbar.
Thermometer-Konfiguration
Konstruktor
Legen Sie die Mindesttemperatur, die maximale Temperatur und die Einheitszeichenfolge im Konstruktor fest. Diese Werte werden beim Verbinden an den Browser gesendet und bestimmen die Skala des Thermometers.
// Range: -10 to 50 degrees Celsius
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C");
Häufige Konfigurationen:
| Min | Max | Einheit |
|---|---|---|
| -10.0 | 50.0 | °C |
| 32.0 | 122.0 | °F |
| 263.15 | 323.15 | K |
Callback
Registrieren Sie onTemperatureValueRequested, um eine Messung jedes Mal zu liefern, wenn der Browser um eine Aktualisierung anfordert:
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
Wert senden
Lesen Sie den Sensor in der Callback-Funktion und rufen Sie sendTemperatureValue() auf:
void onTemperatureValueRequested() {
float temp = readSensor(); // returns float in configured units
temperaturePage.sendTemperatureValue(temp);
}
Lesen von echten Sensoren
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
}
Fehlerbehebung
Thermometer zeigt keinen Wert
- Überprüfen Sie, dass onTemperatureValueRequested vor webAppsServer.begin() registriert ist
- Bestätigen Sie, dass sendTemperatureValue() innerhalb des Callbacks aufgerufen wird
Sensor gibt NaN zurück
- Für DS18B20: überprüfen Sie den OneWire-Daten-Pin und Pull-up-Widerstand (4,7 kΩ zwischen Daten und 3,3 V)
- Für DHT22: fügen Sie einen 10-kΩ-Pull-up auf der Datenleitung hinzu; das minimale Leseintervall beträgt 2 s
Quecksilberniveau stimmt nicht mit dem erwarteten Wert überein
- Überprüfen Sie, dass der gemeldete Wert innerhalb des konfigurierten Min/Max-Bereichs liegt
- Werte außerhalb des Bereichs werden an den Thermometergrenzen begrenzt
Seite ist nicht erreichbar
- Überprüfen Sie die IP-Adresse aus dem seriellen Monitor
- Bestätigen Sie, dass sich die Platine und das Browser-Gerät im selben WiFi-Netzwerk befinden