Arduino - Webserver
In diesem Tutorial lernen wir, wie man einen Arduino Uno R4 WiFi in einen Webserver verwandelt. Indem Sie über einen Webbrowser auf Ihrem PC oder Smartphone auf die auf dem Arduino Web Server gehosteten Webseiten zugreifen, können Sie Werte vom Arduino lesen und ihn sogar steuern. Hier ist eine Übersicht darüber, was wir lernen werden, um den Arduino Uno R4 WiFi so zu programmieren, dass Folgendes erreicht wird:
- Arduino Web Server - Einzelne Seite: Dies ermöglicht es uns, Sensorwerte vom Arduino über eine Weboberfläche zu überwachen.
- Arduino Web Server - Einzelne Seite: Wir ermöglichen die Steuerung des Arduino über einen Webbrowser.
- Arduino Web Server - Einzelne Seite: Wir lernen, HTML-Inhalte (HTML, CSS und JavaScript) in eine separate Datei innerhalb der Arduino-IDE zu trennen.
- Arduino Web Server - Mehrere Seiten: In diesem Schritt erstellen wir mehrere Seiten wie index.html, temperature.html, led.html, error_404.html und error_405.html..., und mehr.
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.
Sensorwert vom Arduino über das Web auslesen
Dies ist relativ einfach. Der Arduino-Code führt die folgenden Aufgaben aus:
- Einen Webserver erstellen, der auf HTTP-Anfragen von einem Webbrowser hört.
- Nach dem Empfang einer Anfrage von einem Webbrowser antwortet der Arduino mit den folgenden Informationen:
- HTTP-Header
- HTTP-Body: Dazu gehören HTML-Inhalte und der vom Sensor gelesene Wert.
- 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 Bibliotheks-Manager-Symbol auf der linken Seite der Arduino IDE klicken.
- Suchen Sie nach Webserver für Arduino Uno R4 WiFi und finden Sie die von DIYables erstellte Webserver-Bibliothek.
- Klicken Sie auf die Installieren-Schaltfläche, um die Webserver-Bibliothek hinzuzufügen.
- Kopiere den obigen Code und öffne ihn mit der Arduino IDE
- Passe die WLAN-Informationen (SSID und Passwort) im Code an dein Netzwerk an
- Klicke auf die Hochladen-Schaltfläche in der Arduino IDE, um den Code auf den Arduino hochzuladen
- Öffne den seriellen Monitor
- Sieh dir das Ergebnis im seriellen Monitor an
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Als Ergebnis sehen Sie die folgende Ausgabe im seriellen Monitor.
- Wenn Sie den Webbrowser über die IP-Adresse öffnen, wird Ihnen eine sehr einfache Webseite angezeigt, die Informationen über das Arduino-Board enthält. Die Seite wird wie folgt aussehen:
Nachfolgend ist der Arduino-Code, der die oben genannten Aufgaben ausführt:
/*
* 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-web-server
*/
#include <UnoR4WiFi_WebServer.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";
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
// Create web server instance
UnoR4WiFi_WebServer server;
float getTemperature() {
return 26.9456;
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
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);
Serial.println("Arduino Uno R4 WiFi - Web Server");
// 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
COM6
Arduino Uno R4 WiFi - Web Server
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
COM6
Arduino Uno R4 WiFi - Web Server
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
Um die Webseite mit einer grafischen Benutzeroberfläche (GUI) fantastisch aussehen zu lassen, schauen Sie sich den letzten Abschnitt dieses Tutorials an.
Arduino über das Web steuern
Die Steuerung von etwas, das mit dem Arduino verbunden ist, ist etwas anspruchsvoller, als nur einen Wert zu lesen. Das liegt daran, dass der Arduino die Anfrage verstehen muss, die er vom Webbrowser erhält, um zu wissen, welche Aktion er ausführen soll. Hier ist, was der Arduino-Code in diesem Fall tut:
- Einen Webserver erstellen, der auf HTTP-Anfragen von einem Webbrowser hört.
- Die vom Webbrowser empfangene Anfrage wie folgt bearbeiten:
- Liest den HTTP-Anforderungsheader.
- Analysiert den HTTP-Anforderungsheader, um den benötigten Steuerbefehl zu bestimmen.
- Steuert das an den Arduino angeschlossene Gerät gemäß dem empfangenen Steuerbefehl.
- Sendet eine HTTP-Antwort zurück.
- Zusätzlich kann es einen HTTP-Antwortkörper mit HTML-Inhalt senden, um Informationen zum Steuerstatus anzuzeigen (falls erforderlich).
Für ein umfassenderes und detaillierteres Beispiel empfehle ich, die unten aufgeführten Tutorials anzusehen.
HTML-Inhalte in eine separate Datei in der Arduino-IDE aufteilen
Wenn Sie eine einfache Webseite mit minimalem Inhalt erstellen möchten, können Sie das HTML direkt in den Arduino-Code einbetten, wie zuvor erläutert.
Wenn Sie jedoch eine anspruchsvollere und beeindruckendere Webseite mit umfangreicherem Inhalt erstellen möchten, wird es unpraktisch, den gesamten HTML-, CSS- und JavaScript-Code direkt im Arduino-Code zu integrieren. In diesem Fall können Sie einen anderen Ansatz verwenden, um den Code zu verwalten:
- Der Arduino-Code wird in einer .ino-Datei abgelegt, genau wie zuvor.
- Der HTML-Code (HTML, CSS, JavaScript) wird in einer separaten .h-Datei platziert. Dies ermöglicht es Ihnen, den Inhalt der Webseite vom Arduino-Code getrennt zu halten, was die Verwaltung und Änderung erleichtert.
Um dies zu tun, müssen wir zwei wesentliche Schritte durchführen:
- HTML-Inhalt vorbereiten
- Arduino programmieren
HTML-Inhalt vorbereiten
- Erstellen Sie eine HTML-Datei auf Ihrem lokalen PC, die den HTML-Inhalt (HTML, CSS und JavaScript) für Ihr UI-Design enthält.
- In der HTML-Datei, dort wo Daten von Arduino angezeigt werden sollen, verwenden Sie einen bel ie bligen Wert.
- Testen Sie es und ändern Sie es, bis Sie zufrieden sind.
- In der HTML-Datei ersetzen Sie den bel ie bligen Wert dort, wo Daten von Arduino angezeigt werden sollen, durch einen speziellen Namen, zum Beispiel TEMPERATURE_MARKER. Später im Arduino-Code verwenden wir die Funktion String.replace("TEMPERATURE_MARKER", real_value); um den von Arduino bereitgestellten Wert zu aktualisieren.
- Wir werden den HTML-Inhalt in die .h-Datei in der Arduino-IDE einfügen. Siehe den nächsten Schritt.
Arduino programmieren
- Öffnen Sie die Arduino-IDE und erstellen Sie eine neue Skizze. Geben Sie ihr einen Namen, zum Beispiel ArduinoGetStarted.com.ino.
- Kopieren Sie den unten bereitgestellten Code und fügen Sie ihn in die erstellte Datei ein.
/*
* 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-web-server
*/
#include <UnoR4WiFi_WebServer.h>
#include "index.h"
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
UnoR4WiFi_WebServer server;
float getTemperature() {
return 26.9456;
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
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);
Serial.println("Arduino Uno R4 WiFi - Web Server");
// 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();
}
- Passen Sie die WiFi-Informationen (SSID und Passwort) im Code an Ihre eigenen an.
- Erstellen Sie die Datei index.h in der 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 Tastenkombination Ctrl+Shift+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 die index.h ein.
/*
* 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-web-server
*/
const char *HTML_CONTENT = R""""(
REPLACE_YOUR_HTML_CONTENT_HERE
)"""";
- Ersetzen Sie die Zeile REPLACE_YOUR_HTML_CONTENT_HERE durch den HTML-Inhalt, den Sie zuvor vorbereitet haben. Es gibt kein Problem mit dem Zeilenumbruchzeichen. Unten ist ein Beispiel der index.h-Datei:
/*
* 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-web-server
*/
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>
)"""";
- Nun haben Sie den Code in zwei Dateien: ArduinoGetStarted.com.ino und index.h
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino-IDE, um den Code auf den Arduino hochzuladen.
- Greifen Sie wie zuvor über einen Webbrowser auf die Webseite des Arduino-Boards zu. Sie sehen sie unten:
Für eine umfassendere und detailliertere Darstellung verweisen Sie bitte auf das Arduino - DS18B20 Temperature Sensor via Web Tutorial.
※ Notiz:
- Wenn Sie Änderungen am HTML-Inhalt in der Datei index.h vornehmen, aber in der Datei ArduinoGetStarted.com.ino nichts ändern, wird die Arduino IDE den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den ESP32 weder aktualisieren noch neu laden.
- Um die Arduino IDE in dieser Situation dazu zu bringen, den HTML-Inhalt zu aktualisieren, müssen Sie eine Änderung in der Datei ArduinoGetStarted.com.ino vornehmen. Zum Beispiel können Sie eine leere Zeile hinzufügen oder einen Kommentar einfügen. Diese Maßnahme bewirkt, dass die IDE erkennt, dass es Änderungen am Projekt gegeben hat, wodurch sichergestellt wird, dass der aktualisierte HTML-Inhalt beim Upload mitübertragen wird.
Arduino-Webserver – Mehrere Seiten
Schau dir dieses Arduino - Web Server Multiple Pages Tutorial an.