Arduino Nano ESP32 - Temperatur über das Web
In diesem Leitfaden werden wir den Prozess untersuchen, wie man den Arduino Nano ESP32 so programmieren kann, dass er als Webserver funktioniert, wodurch Sie über eine Weboberfläche auf Temperaturdaten zugreifen können. Mit einem angeschlossenen DS18B20-Temperatursensor können Sie die aktuelle Temperatur ganz einfach abrufen, indem Sie mit Ihrem Smartphone oder PC die von dem Arduino Nano ESP32 bereitgestellte Webseite aufrufen. Hier ist ein kurzer Überblick darüber, wie es funktioniert:
- Arduino Nano ESP32 ist als Webserver programmiert.
- Geben Sie die IP-Adresse des Arduino Nano ESP32 in einem Webbrowser auf Ihrem Smartphone oder PC ein.
- Arduino Nano ESP32 antwortet auf die Anfrage des Webbrowsers mit einer Webseite, die die vom DS18B20-Sensor gemessene Temperatur enthält.
Wir werden zwei Beispielcodes durchgehen:
- Arduino Nano ESP32-Code, der eine sehr einfache Webseite bereitstellt, die die Temperatur des DS18B20-Sensors anzeigt. Dies erleichtert es Ihnen zu verstehen, wie es funktioniert. HTML-Inhalt ist im Arduino Nano ESP32-Code eingebettet.
- Arduino Nano ESP32-Code, der eine grafische Webseite bereitstellt, die die Temperatur des DS18B20-Sensors anzeigt. HTML-Inhalt ist vom Arduino Nano ESP32-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 Arduino Nano ESP32 Webserver und DS18B20-Temperatursensor
Wenn Sie nichts über den Arduino Nano ESP32 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.
Arduino Nano ESP32-Code - Eine einfache Webseite
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-temperature-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#define SENSOR_PIN D2 // The Arduino Nano ESP32 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
AsyncWebServer server(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 ESP32's IP address
Serial.print("Arduino Nano 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("Arduino Nano 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
Um mit dem Arduino Nano ESP32 zu beginnen, befolgen Sie diese Schritte:
- Wenn Sie neu bei Arduino Nano ESP32 sind, lesen Sie das Tutorial wie man die Umgebung für Arduino Nano ESP32 in der Arduino IDE einrichtet.
- Verdrahten Sie die Bauteile gemäß dem bereitgestellten Diagramm.
- Schließen Sie das Arduino Nano ESP32-Board über ein USB-Kabel an Ihren Computer an.
- Öffnen Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das Arduino Nano ESP32-Board und den entsprechenden COM-Port aus.
- Öffnen Sie den Library Manager, indem Sie auf das Library Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie „ESPAsyncWebServer“, dann finden Sie den ESPAsyncWebServer.
- Klicken Sie auf die Install-Schaltfläche, um die ESPAsyncWebServer-Bibliothek von lacamera 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 dann nach der DallasTemperature-Bibliothek von Miles Burton.
- Klicken Sie auf die Schaltfläche Install, 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 mit der Arduino IDE
- Passen Sie im Code Ihre WLAN-Informationen (SSID und Passwort) an
- Klicken Sie auf die Schaltfläche Hochladen im Arduino IDE, um den Code auf den Arduino Nano ESP32 hochzuladen
- Öffnen Sie den seriellen Monitor
- Prüfen Sie das Ergebnis im seriellen Monitor
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
- Sie finden eine IP-Adresse. Geben Sie diese IP-Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Sie sehen die folgende Ausgabe im Serial Monitor.
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.2
Arduino Nano ESP32 Web Server: New request received:
GET /
Autoscroll
Clear output
9600 baud
Newline
- Sie werden im Webbrowser eine sehr einfache Webseite des Arduino Nano ESP32-Boards sehen, wie unten gezeigt:
※ Notiz:
Mit dem oben gezeigten 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.
Arduino Nano ESP32-Code - Grafische Webseite
Da eine grafische Webseite eine große Menge HTML-Inhalte enthält, wird das Einbetten in den Arduino Nano ESP32-Code wie zuvor unpraktisch. Um dies zu lösen, müssen der Arduino Nano ESP32-Code und der HTML-Code auf verschiedene Dateien aufgeteilt werden:
- Der Arduino Nano ESP32-Code wird in einer .ino-Datei abgelegt.
- Der HTML-Code (einschließlich HTML, CSS und JavaScript) wird in einer .h-Datei abgelegt.
Für Details, wie man den HTML-Code vom Arduino Nano ESP32-Code trennt, lesen Sie bitte das Arduino Nano ESP32 - Web Server Tutorial.
Schnelle Schritte
- Öffnen Sie die Arduino IDE und erstellen Sie einen neuen Sketch. Geben Sie ihm einen Namen, zum Beispiel newbiely.com.ino.
- Kopieren Sie den untenstehenden Code und öffnen Sie ihn mit der Arduino IDE.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-temperature-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#include "index.h" // Include the index.h file
#define SENSOR_PIN D2 // The Arduino Nano ESP32 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
AsyncWebServer server(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 ESP32's IP address
Serial.print("Arduino Nano 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("Arduino Nano 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("Arduino Nano 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
}
- Ändere die WiFi-Informationen (SSID und Passwort) im Code auf deine eigenen Werte.
- Erzeuge die index.h Datei in der Arduino-IDE, indem du:
- Entweder klickst du auf den Button direkt unter dem Symbol des seriellen Monitors und wählst Neuer Tab, oder verwende die Tasten Strg+Umschalt+N.
- Geben Sie den Dateinamen index.h an und klicken Sie auf die OK Schaltfläche
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in die index.h ein.
- Jetzt haben Sie den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicken Sie auf die Upload-Schaltfläche in der Arduino-IDE, um den Code auf den Arduino Nano ESP32 hochzuladen.
- Greifen Sie wie zuvor über Ihren PC oder Ihr Smartphone mit einem Webbrowser auf die Webseite des Arduino Nano ESP32-Boards zu. Sie sehen sie wie unten dargestellt:
- Wenn Sie den HTML-Inhalt in der index.h ändern und in der newbiely.com.ino Datei nichts ändern, wird die Arduino IDE den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den ESP32 nicht aktualisieren.
- Um in diesem Fall sicherzustellen, dass die Arduino IDE den HTML-Inhalt aktualisiert, nehmen Sie eine Änderung in der newbiely.com.ino-Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen...).
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-temperature-via-web
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano 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>Arduino Nano ESP32 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)=====";
#endif
※ Notiz: