Arduino - Temperatur über das Web
In diesem Tutorial lernen wir, wie man Arduino so programmiert, dass es zu einem Webserver wird, der über das Web die Temperatur bereitstellt. Wir können auf die von Arduino bereitgestellte Webseite zugreifen, um die Temperatur von einem DS18B20-Temperatursensor abzulesen. Im Folgenden wird beschrieben, wie es funktioniert.
- Arduino ist als Webserver programmiert.
- Geben Sie die IP-Adresse von Arduino in einem Webbrowser auf Ihrem Smartphone oder PC ein.
- Arduino antwortet auf die Anfrage des Webbrowsers mit einer Webseite, die die Temperatur enthält, die vom DS18B20-Sensor ausgelesen wird.
Wir werden zwei Beispielcodes durchgehen:
- Arduino-Code, der eine sehr einfache Webseite bereitstellt, die die Temperatur des DS18B20-Sensors anzeigt. Dies erleichtert es Ihnen zu verstehen, wie es funktioniert.
- Arduino-Code, der eine grafische Webseite bereitstellt, die die Temperatur des DS18B20-Sensors anzeigt.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino 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 Arduino Uno R4 und DS18B20-Temperatursensor
Wenn Sie nichts über den Arduino Uno R4 und den DS18B20-Temperatursensor (Pinbelegung, Funktionsweise, Programmierung ...) wissen, erfahren Sie in den folgenden Tutorials mehr darüber:
Verdrahtungsdiagramm
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Arduino-Code - einfache Webseite
/*
* Dieser Arduino Code wurde von newbiely.de entwickelt
* Dieser Arduino 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/arduino-temperature-via-web
*/
#include <UnoR4WiFi_WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
const char HTML_CONTENT[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="data:,">
</head>
<p>
Temperature: <span style="color: red;">%TEMP_PLACE_HOLDER% °C</span>
</p>
</html>
)rawliteral";
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
const int SENSOR_PIN = 6; // Arduino pin connected to DS18B20 sensor's DQ pin
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature tempSensor(&oneWire); // pass oneWire to DallasTemperature library
UnoR4WiFi_WebServer server;
float getTemperature() {
tempSensor.requestTemperatures(); // send the command to get temperatures
float tempCelsius = tempSensor.getTempCByIndex(0); // read temperature in Celsius
return tempCelsius;
}
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = getTemperature();
String response = HTML_CONTENT;
response.replace("%TEMP_PLACE_HOLDER%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
tempSensor.begin(); // initialize the temperature sensor
Serial.println("Arduino Uno R4 WiFi - Temperature via Web");
// Connect to WiFi
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Configure routes
server.addRoute("/", handleHome);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
Schnelle Schritte
- Wenn dies das erste Mal ist, dass Sie Arduino Uno R4 verwenden, sehen Sie sich wie man die Umgebung für Arduino Uno R4 in der Arduino IDE einrichtet an.
- Öffnen Sie den Bibliotheks-Manager, indem Sie auf das Library Manager-Symbol auf der linken Seite der Arduino IDE klicken.
- Suchen Sie nach Web Server for Arduino Uno R4 WiFi und finden Sie die von DIYables erstellte Webserver-Bibliothek.
- Klicken Sie auf die Schaltfläche Install, um die Webserver-Bibliothek hinzuzufügen.
- Kopiere den obigen Code und öffne ihn mit der Arduino IDE
- Ändere die WLAN-Informationen (SSID und Passwort) im Code auf deine eigenen
- Klicke auf den Upload-Button in der Arduino IDE, um den Code auf den Arduino hochzuladen
- Öffne den Serial Monitor
- Prüfe das Ergebnis im Serial Monitor.
COM6
Arduino Uno R4 WiFi - Temperature via Web
Connecting to YOUR_WIFI_SSID
connected!
IP address: 192.168.0.254
Starting web server on IP: 192.168.0.254
=== Web Server Ready! ===
Visit: http://192.168.0.254
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 werden die folgende Ausgabe im seriellen Monitor sehen.
COM6
Arduino Uno R4 WiFi - Temperature via Web
Connecting to YOUR_WIFI_SSID
connected!
IP address: 192.168.0.254
Starting web server on IP: 192.168.0.254
=== Web Server Ready! ===
Visit: http://192.168.0.254
Method: GET
Requested path: /
Client disconnected
Autoscroll
Clear output
9600 baud
Newline
- Im Webbrowser sehen Sie eine sehr einfache Webseite eines Arduino-Boards wie unten:
Arduino-Code - Grafische Webseite
Da eine grafische Webseite eine große Menge HTML-Inhalte enthält, wird das Einbetten in den Arduino-Code wie zuvor unpraktisch. Um dem entgegenzuwirken, müssen wir den Arduino-Code und den HTML-Code in verschiedene Dateien aufteilen:
- Der Arduino-Code wird in einer .ino-Datei abgelegt.
- Der HTML-Code (einschließlich HTML, CSS und JavaScript) wird in einer .h-Datei abgelegt.
Schnelle Schritte
- Öffnen Sie die Arduino-IDE und erstellen Sie einen neuen Sketch. Geben Sie ihm einen Namen, zum Beispiel ArduinoGetStarted.com.ino.
- Kopieren Sie den unten stehenden Code und öffnen Sie ihn mit der Arduino-IDE.
/*
* Dieser Arduino Code wurde von newbiely.de entwickelt
* Dieser Arduino 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/arduino-temperature-via-web
*/
#include <UnoR4WiFi_WebServer.h>
#include "index.h"
#include <OneWire.h>
#include <DallasTemperature.h>
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
const int SENSOR_PIN = 6; // Arduino pin connected to DS18B20 sensor's DQ pin
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature tempSensor(&oneWire); // pass oneWire to DallasTemperature library
UnoR4WiFi_WebServer server;
float getTemperature() {
tempSensor.requestTemperatures(); // send the command to get temperatures
float tempCelsius = tempSensor.getTempCByIndex(0); // read temperature in Celsius
return tempCelsius;
}
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = getTemperature();
String response = HTML_CONTENT;
response.replace("TEMPERATURE_MARKER", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
tempSensor.begin(); // initialize the temperature sensor
Serial.println("Arduino Uno R4 WiFi - Temperature via Web");
// Connect to WiFi
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Configure routes
server.addRoute("/", handleHome);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
- Passe die WiFi-Informationen (SSID und Passwort) im Code an deine eigenen an
- Erstelle die index.h-Datei in der Arduino IDE durch:
- Klicke entweder auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wähle Neuer Tab, oder benutze die Tasten Ctrl+Shift+N.
- Geben Sie den Dateinamen index.h ein 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: ArduinoGetStarted.com.ino und index.h
- Klicken Sie auf die Hochladen-Schaltfläche in der Arduino IDE, um den Code auf den Arduino hochzuladen
- Greifen Sie wie zuvor über Ihren Webbrowser auf die Webseite des Arduino-Boards zu. Sie sehen sie unten:
- Wenn Sie Änderungen am HTML-Inhalt in der index.h-Datei vornehmen, diese jedoch in der ArduinoGetStarted.com.ino-Datei nicht ändern, aktualisiert die Arduino IDE den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den ESP32 nicht.
- Um die Arduino IDE in dieser Situation dazu zu bringen, den HTML-Inhalt zu aktualisieren, müssen Sie eine Änderung in der ArduinoGetStarted.com.ino-Datei vornehmen. Zum Beispiel können Sie eine leere Zeile hinzufügen oder einen Kommentar einfügen. Diese Aktion bewirkt, dass die IDE erkennt, dass es Änderungen im Projekt gegeben hat, und stellt sicher, dass Ihr aktualisierter HTML-Inhalt in den Upload aufgenommen wird.
/*
* Dieser Arduino Code wurde von newbiely.de entwickelt
* Dieser Arduino 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/arduino-temperature-via-web
*/
const char *HTML_CONTENT = R""""(
<!DOCTYPE html>
<html>
<head>
<title>Arduino - 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);
update_view(TEMPERATURE_MARKER);
}
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, -350, cvs_width, cvs_height);
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 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)"""";
※ Notiz: