ESP8266 - Temperatur über das Web
Dieses Tutorial zeigt dir, wie du den ESP8266 so programmierst, dass er zu einem Webserver wird, wodurch du über eine Weboberfläche auf Temperaturdaten zugreifen kannst. Mithilfe eines angeschlossenen DS18B20-Temperatursensors kannst du die aktuelle Temperatur ganz einfach prüfen, indem du dein Smartphone oder deinen PC benutzt, um die vom ESP8266 bereitgestellte Webseite zu besuchen. Hier ist ein kurzer Überblick darüber, wie es funktioniert:
- ESP8266 ist als Webserver programmiert.
- Geben Sie die IP-Adresse des ESP8266 in einen Webbrowser auf Ihrem Smartphone oder PC ein.
- ESP8266 antwortet auf die Anfrage des Webbrowsers mit einer Webseite, die die vom DS18B20-Sensor gemessene Temperatur enthält.
Wir werden zwei Beispielcodes durchgehen:
- ESP8266-Code, der eine sehr einfache Webseite bereitstellt, die die Temperatur des DS18B20-Sensors anzeigt. Dies erleichtert Ihnen das Verständnis dafür, wie sie funktioniert. Der HTML-Inhalt ist im ESP8266-Code eingebettet.
- ESP8266-Code, der eine grafische Webseite bereitstellt, die die Temperatur des DS18B20-Sensors anzeigt. Der HTML-Inhalt ist vom ESP8266-Code getrennt.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 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 ESP8266-Webserver und DS18B20-Temperatursensor
Wenn Sie nichts über den ESP8266-Webserver und den DS18B20-Temperatursensor (Pinbelegung, Funktionsweise, Programmierung …) wissen, informieren Sie sich in den folgenden Tutorials darüber:
Verdrahtungsdiagramm
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Weitere Informationen finden Sie unter ESP8266-Pinbelegung und wie man ESP8266 und andere Komponenten mit Strom versorgt.
ESP8266 Code - Eine einfache Webseite
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-temperature-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#define SENSOR_PIN D7 // The ESP8266 pin 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
ESP8266WebServer server(80); // Web server on port 80
float getTemperature() {
DS18B20.requestTemperatures(); // send the command to get temperatures
float temperature_C = DS18B20.getTempCByIndex(0); // read temperature in °C
return temperature_C;
}
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 ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 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>";
server.send(200, "text/html", html);
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
Schnelle Schritte
Um mit dem ESP8266 in der Arduino-IDE zu beginnen, befolgen Sie diese Schritte:
- Schau dir das how to setup environment for ESP8266 on Arduino IDE Tutorial an, falls dies dein erster Umgang mit ESP8266 ist.
- Verbinde die Komponenten wie im Diagramm gezeigt.
- Schließe das ESP8266-Board mit einem USB-Kabel an deinen Computer an.
- Öffne die Arduino IDE auf deinem Computer.
- Wähle das richtige ESP8266-Board, z. B. NodeMCU 1.0 (ESP-12E Module), und den entsprechenden COM-Port.
- Klicke auf das Libraries-Symbol in der linken Leiste der Arduino IDE.
- Gib „Dallas“ in das Suchfeld ein, und suche dann nach der DallasTemperature-Bibliothek von Miles Burton.
- Klicke auf die Install-Schaltfläche, um die DallasTemperature-Bibliothek zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Schaltfläche Alle installieren, um die OneWire-Bibliothek zu installieren.
- Kopieren Sie den obigen Code und öffnen Sie ihn in der Arduino IDE.
- Ändern Sie die WLAN-Informationen (SSID und Passwort) im Code auf Ihre eigenen.
- Klicken Sie in der Arduino IDE auf die Hochladen-Schaltfläche, um den Code auf den ESP8266 hochzuladen.
- Öffnen Sie den Seriellen Monitor.
- Überprüfen Sie das Ergebnis im Seriellen Monitor.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
- Sie finden eine IP-Adresse. Geben Sie diese IP-Adresse in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Sie sehen die folgende Ausgabe im seriellen Monitor.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
ESP8266 Web Server: New request received:
GET /
Autoscroll
Clear output
9600 baud
Newline
- Sie werden im Webbrowser eine sehr einfache Webseite des ESP8266-Boards sehen, wie unten dargestellt:
※ Notiz:
Mit dem oben genannten Code müssen Sie die Seite im Webbrowser neu laden, um die Temperaturaktualisierung zu erhalten. Im nächsten Teil werden wir lernen, wie man eine Webseite dazu bringt, den Temperaturwert im Hintergrund zu aktualisieren, ohne die Webseite neu zu laden.
ESP8266-Code - Grafische Webseite
Da eine grafische Webseite eine große Menge HTML-Inhalte enthält, wird das Einbetten in den ESP8266-Code wie zuvor unpraktisch. Um dem entgegenzuwirken, müssen wir den ESP8266-Code und den HTML-Code in verschiedene Dateien aufteilen:
- Der ESP8266-Code wird in eine .ino-Datei eingefügt.
- Der HTML-Code (einschließlich HTML, CSS und JavaScript) wird in eine .h-Datei eingefügt.
Für Details dazu, wie man den HTML-Code vom ESP8266-Code trennt, verweisen Sie bitte auf das Tutorial ESP8266 - Web Server.
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 mit der Arduino-IDE.
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-temperature-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "index.h" // Include the index.h file
#include <OneWire.h>
#include <DallasTemperature.h>
#define SENSOR_PIN D7 // The ESP8266 pin 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
ESP8266WebServer server(80); // Web server on port 80
float getTemperature() {
DS18B20.requestTemperatures(); // send the command to get temperatures
float temperature_C = DS18B20.getTempCByIndex(0); // read temperature in °C
return temperature_C;
}
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 ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the HTML page from the file
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
server.send(200, "text/html", webpage); // webpage is from index.h file
});
// Define a route to get the temperature data
server.on("/temperature", HTTP_GET, []() {
Serial.println("ESP8266 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);
server.send(200, "text/plain", temperatureStr);
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
- Passe die WiFi-Informationen (SSID und Passwort) im Code an
- Erstelle die Datei index.h in der Arduino-IDE durch:
- Entweder klicke auf den Button direkt unter dem Symbol des Seriellen Monitors und wähle Neue Registerkarte, oder verwende die Tastenkombination Strg+Umschalt+N.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die Schaltfläche OK
- Kopiere den untenstehenden Code und füge ihn in die index.h ein.
- Jetzt haben Sie den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicken Sie in der Arduino IDE auf die Schaltfläche Hochladen, um den Code auf den ESP8266 hochzuladen
- Greifen Sie wie zuvor über den Webbrowser auf die Webseite des ESP8266-Boards zu. Sie sehen sie unten dargestellt:
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts in der newbiely.com.ino-Datei berühren, aktualisiert die Arduino IDE den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den ESP8266 nicht.
- Um die Arduino IDE in diesem Fall dazu zu bringen, den HTML-Inhalt 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 ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-temperature-via-web
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 - 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>ESP8266 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)=====";
#endif
※ Notiz: