ESP32 - Temperatur über das Web
In diesem Leitfaden befassen wir uns mit dem Prozess, den ESP32 so zu programmieren, dass er als Webserver fungiert, sodass Sie über eine Weboberfläche auf Temperaturdaten zugreifen können. Mit einem angeschlossenen DS18B20-Temperatursensor können Sie die aktuelle Temperatur ganz einfach überprüfen, indem Sie die vom ESP32 bereitgestellte Webseite mit Ihrem Smartphone oder PC aufrufen. Hier ist eine kurze Übersicht darüber, wie es funktioniert:
- Der ESP32 ist als Webserver programmiert.
- Geben Sie die IP-Adresse des ESP32 in einen Webbrowser auf Ihrem Smartphone oder PC ein.
- Der ESP32 antwortet auf die Anfrage des Webbrowsers mit einer Webseite, die die Temperatur enthält, die vom DS18B20-Sensor ausgelesen wurde.
Wir werden zwei Beispielcodes durchgehen:
- ESP32-Code, der eine sehr einfache Webseite bereitstellt, die die Temperatur des DS18B20-Sensors anzeigt. Dadurch fällt es Ihnen leichter, zu verstehen, wie es funktioniert. HTML-Inhalt ist im ESP32-Code eingebettet.
- ESP32-Code, der eine grafische Webseite bereitstellt, die die Temperatur des DS18B20-Sensors anzeigt. Der HTML-Inhalt ist vom ESP32-Code getrennt.
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.
Über ESP32-Webserver und DS18B20-Temperatursensor
Wenn Sie nichts über den ESP32-Webserver und den DS18B20-Temperatursensor wissen (Pinbelegung, Funktionsweise, Programmierung ...), erfahren Sie in den folgenden Tutorials mehr darüber:
Verdrahtungsdiagramm
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Wenn Sie nicht wissen, wie Sie ESP32 und andere Komponenten mit Strom versorgen, finden Sie Anleitungen im folgenden Tutorial: Wie man ESP32 mit Strom versorgt.
ESP32 Code - einfache Webseite
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-temperature-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#define SENSOR_PIN 17 // ESP32 pin GPIO17 connected to DS18B20 sensor's DATA pin
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature DS18B20(&oneWire); // pass oneWire to DallasTemperature library
AsyncWebServer server(80);
float getTemperature() {
DS18B20.requestTemperatures(); // send the command to get temperatures
float tempC = DS18B20.getTempCByIndex(0); // read temperature in °C
return tempC;
}
void setup() {
Serial.begin(9600);
DS18B20.begin(); // initialize the DS18B20 sensor
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("ESP32 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
request->send(200, "text/html", html);
});
// Start the server
server.begin();
}
void loop() {
// Your code here
}
Schnelle Schritte
- Wenn du ESP32 zum ersten Mal verwendest, sieh dir Anleitung zur Einrichtung der ESP32-Umgebung in der Arduino IDE an.
- Verlege die Verkabelung gemäß dem obigen Bild.
- Verbinde die ESP32-Platine über ein Micro-USB-Kabel mit deinem PC.
- Öffne die Arduino IDE auf deinem PC.
- Wähle das richtige ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
- Öffne den Library Manager, indem du auf das Library Manager-Symbol in der linken Navigationsleiste der Arduino IDE klickst.
- Suche “ESPAsyncWebServer”, finde dann den von lacamera erstellten ESPAsyncWebServer.
- Klicke auf die Install-Schaltfläche, um die ESPAsyncWebServer-Bibliothek zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Schaltfläche Alle installieren.
- Suchen Sie im Suchfeld nach “DallasTemperature”, und suchen Sie anschließend nach der DallasTemperature-Bibliothek von Miles Burton.
- Klicken Sie auf die Schaltfläche Installieren, um die DallasTemperature-Bibliothek zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Alle installieren-Schaltfläche, um die OneWire-Bibliothek zu installieren.
- Kopieren Sie den obigen Code und öffnen Sie ihn mit der Arduino IDE.
- Passen Sie im Code die WLAN-Informationen (SSID und Passwort) an Ihre eigenen an.
- Klicken Sie auf die Hochladen-Schaltfläche in der Arduino IDE, um den Code auf den ESP32 hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Schauen Sie sich das Ergebnis im seriellen Monitor an.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
- Sie werden eine IP-Adresse finden. Geben Sie diese IP-Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Sie werden die folgende Ausgabe im seriellen Monitor sehen.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web Server: New request received:
GET /
Autoscroll
Clear output
9600 baud
Newline
- Sie werden eine sehr einfache Webseite des ESP32-Boards im Webbrowser wie unten sehen:
※ Notiz:
Mit dem oben bereitgestellten Code muss die Seite im Webbrowser neu geladen werden, um die Temperaturaktualisierung zu erhalten. Im nächsten Teil werden wir lernen, wie man die Webseite dazu bringt, den Temperaturwert im Hintergrund zu aktualisieren, ohne die Webseite neu zu laden.
ESP32-Code - Grafische Webseite
Da eine grafische Webseite eine große Menge HTML-Inhalte enthält, wird das Einbetten in den ESP32-Code wie bisher unpraktisch. Um dies zu lösen, müssen der ESP32-Code und der HTML-Code in verschiedene Dateien aufgeteilt werden:
- Der ESP32-Code wird in einer .ino-Datei platziert.
- Der HTML-Code (einschließlich HTML, CSS und JavaScript) wird in einer .h-Datei platziert.
Für Details dazu, wie man den HTML-Code vom ESP32-Code trennt, siehe das ESP32 - Web Server Tutorial.
Schnelle Schritte
- Öffne die Arduino-IDE und erstelle einen neuen Sketch. Gib ihm einen Namen, zum Beispiel newbiely.com.ino.
- Kopiere den untenstehenden Code und öffne ihn in der Arduino-IDE.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-temperature-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "index.h" // Include the index.h file
#include <OneWire.h>
#include <DallasTemperature.h>
#define SENSOR_PIN 17 // ESP32 pin GPIO17 connected to DS18B20 sensor's DATA pin
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature DS18B20(&oneWire); // pass oneWire to DallasTemperature library
AsyncWebServer server(80);
float getTemperature() {
DS18B20.requestTemperatures(); // send the command to get temperatures
float tempC = DS18B20.getTempCByIndex(0); // read temperature in °C
return tempC;
}
void setup() {
Serial.begin(9600);
DS18B20.begin(); // initialize the DS18B20 sensor
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the HTML page from the file
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("ESP32 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
request->send(200, "text/html", webpage); // webpage is from index.h file
});
// Define a route to get the temperature data
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("ESP32 Web Server: New request received:"); // for debugging
Serial.println("GET /temperature"); // for debugging
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
request->send(200, "text/plain", temperatureStr);
});
// Start the server
server.begin();
}
void loop() {
// Your code here
}
- Ändern Sie die WiFi-Informationen (SSID und Passwort) im Code auf Ihre eigenen.
- Erstellen Sie die Datei index.h im Arduino-IDE durch:
- Klicken Sie entweder auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählen Sie Neuer Tab, oder verwenden Sie die Tasten Strg+Umschalt+N.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die Schaltfläche OK.
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in index.h ein.
- Jetzt hast du den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicke auf die Upload-Schaltfläche in der Arduino IDE, um den Code auf den ESP32 hochzuladen.
- Greife wie zuvor mit dem Webbrowser auf deinem PC oder Smartphone auf die Webseite des ESP32-Boards zu. Du wirst sie unten sehen:
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts in der newbiely.com.ino-Datei berühren, wird die Arduino IDE beim Kompilieren und Hochladen des Codes auf den ESP32 den HTML-Inhalt nicht aktualisieren.
- Um die Arduino IDE dazu zu bringen, den HTML-Inhalt in diesem Fall zu aktualisieren, nehmen Sie eine Änderung in der newbiely.com.ino-Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen ...)
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-temperature-via-web
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 - Web Temperature</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body { font-family: "Georgia"; text-align: center; font-size: width/2pt;}
h1 { font-weight: bold; font-size: width/2pt;}
h2 { font-weight: bold; font-size: width/2pt;}
button { font-weight: bold; font-size: width/2pt;}
</style>
<script>
var cvs_width = 200, cvs_height = 450;
function init() {
var canvas = document.getElementById("cvs");
canvas.width = cvs_width;
canvas.height = cvs_height + 50;
var ctx = canvas.getContext("2d");
ctx.translate(cvs_width/2, cvs_height - 80);
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
}
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {update_view(data);});
}
function update_view(temp) {
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var radius = 70;
var offset = 5;
var width = 45;
var height = 330;
ctx.clearRect(-cvs_width/2, -cvs_height + 80, cvs_width, cvs_height + 50);
ctx.strokeStyle="blue";
ctx.fillStyle="blue";
//5-step Degree
var x = -width/2;
ctx.lineWidth=2;
for (var i = 0; i <= 100; i+=5) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 20, y);
ctx.stroke();
}
//20-step Degree
ctx.lineWidth=5;
for (var i = 0; i <= 100; i+=20) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 25, y);
ctx.stroke();
ctx.font="20px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="right";
ctx.fillText(i.toString(), x - 35, y);
}
// shape
ctx.lineWidth=16;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle="#e6e6ff";
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.fill();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle="#ff1a1a";
ctx.beginPath();
ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI);
ctx.fill();
temp = Math.round(temp * 100) / 100;
var y = (height - radius)*temp/100.0 + radius + 5;
ctx.beginPath();
ctx.rect(-width/2 + offset, -y, width - 2*offset, y);
ctx.fill();
ctx.fillStyle="red";
ctx.font="bold 34px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText(temp.toString() + "°C", 0, 100);
}
window.onload = init;
</script>
</head>
<body>
<h1>ESP32 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)=====";
#endif
※ Notiz: