Arduino UNO R4 - Webserver
In diesem Leitfaden zeigen wir Ihnen, wie Sie einen Arduino UNO R4 R4 WiFi als Webserver betreiben. Sie können mit einem Webbrowser auf Ihrem Computer oder Smartphone Webseiten des Arduino UNO R4 Webservers aufrufen. Dadurch können Sie Werte am Arduino UNO R4 anzeigen und ändern. Wir werden die folgenden Schritte durchgehen, um den Arduino UNO R4 WiFi für diesen Zweck zu programmieren:
- Arduino UNO R4 Web Server - Einzelseite: Dies hilft uns, Sensorwerte am Arduino UNO R4 über eine Webseite zu überprüfen.
- Arduino UNO R4 Web Server - Einzelseite: Wir werden es ermöglichen, den Arduino UNO R4 über einen Webbrowser zu verwalten.
- Arduino UNO R4 Web Server - Einzelseite: Wir lernen, wie man HTML-Elemente (wie HTML, CSS und JavaScript) in eine andere Datei in der Arduino IDE verschiebt.
- Arduino UNO R4 Web Server - Mehrere Seiten: Wir werden verschiedene Webseiten erstellen, wie z. B. index.html, temperature.html, led.html, error_404.html und error_405.html, unter anderem.
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 UNO R4 über das Web auslesen
Der Arduino UNO R4-Code führt diese Aufgaben aus:
- Einen Webserver erstellen, der HTTP-Anfragen von einem Webbrowser empfängt.
- Wenn ein Webbrowser eine Anfrage sendet, antwortet der Arduino UNO R4 mit:
- HTTP-Header
- HTTP-Body: Dies enthält HTML-Inhalt und Sensordaten.
- Wenn dies das erste Mal ist, dass Sie den Arduino Uno R4 WiFi/Minima verwenden, schauen Sie sich zur Einrichtung der Umgebung für Arduino Uno R4 WiFi/Minima in der Arduino IDE an.
- Schließen Sie das Arduino Uno R4-Board über ein USB-Kabel an Ihren Computer an.
- Starten Sie die Arduino-IDE auf Ihrem Computer.
- Wählen Sie das passende Arduino Uno R4-Board (z. B. Arduino Uno R4 WiFi) und den COM-Port aus.
- Öffnen Sie den Bibliotheksverwalter, indem Sie auf das 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 Installieren, um die Webserver-Bibliothek hinzuzufügen.
- Kopieren Sie den Code und öffnen Sie ihn in der Arduino IDE.
- Ersetzen Sie die WLAN-Daten (SSID und Passwort) im Code durch Ihre eigenen.
- Klicken Sie in der Arduino IDE auf die Hochladen-Schaltfläche, um den Code auf den Arduino UNO R4 hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Schauen Sie sich die Ergebnisse im seriellen Monitor an.
- Schau dir die angezeigte IP-Adresse an und tippe sie in die Adressleiste eines Webbrowsers auf deinem Smartphone oder Computer ein.
- Dann wirst du diese Information im Serial Monitor sehen.
- Wenn Sie die IP-Adresse in Ihren Webbrowser eingeben, sehen Sie eine einfache Webseite, die Informationen über das Arduino UNO R4-Board anzeigt. Die Seite wird wie folgt aussehen:
Hier ist der Arduino UNO R4-Code, der die oben genannten Aufgaben ausführt:
/*
* Dieser Arduino UNO R4 Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO R4 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-uno-r4/arduino-uno-r4-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
Folge diesen Anweisungen Schritt für Schritt:
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 eine ansprechend aussehende Webseite mit einer grafischen Benutzeroberfläche (GUI) zu erstellen, sehen Sie sich den letzten Teil dieses Tutorials an.
Steuerung des Arduino UNO R4 über das Web
Die Steuerung eines an den Arduino UNO R4 angeschlossenen Geräts ist etwas komplexer, als einfach nur einen Wert zu überprüfen. Diese Komplexität entsteht, weil der Arduino UNO R4 den Befehl, den er vom Webbrowser erhält, interpretieren muss, um die passende Antwort zu bestimmen. So geht der Arduino UNO R4-Code mit dieser Situation um:
- Einen Webserver erstellen, der HTTP-Anfragen von einem Webbrowser empfängt.
- Die Anfrage des Browsers durch folgende Schritte verarbeiten:
- Den HTTP-Header der Anfrage lesen.
- Den HTTP-Header der Anfrage untersuchen, um den benötigten Steuerbefehl zu ermitteln.
- Das angeschlossene Gerät bzw. Objekt gemäß dem Steuerbefehl mit dem Arduino UNO R4 steuern.
- Eine HTTP-Antwort senden.
- Optional kann auch ein HTTP-Antwortkörper gesendet werden, der HTML-Inhalt enthält, um Details zum Kontrollstatus anzuzeigen (falls erforderlich).
Für ein besseres und detailliertes Beispiel schlage ich vor, sich die untenstehenden Tutorials anzusehen:
HTML-Inhalt in eine andere Datei in der Arduino-IDE aufteilen
Um eine einfache Webseite mit nur wenigen Inhalten zu erstellen, können Sie den HTML-Code wie zuvor erwähnt in den Arduino UNO R4-Code einbinden.
Wenn Sie eine komplexere und beeindruckendere Webseite mit vielen Inhalten erstellen möchten, ist es nicht einfach, den gesamten HTML-, CSS- und JavaScript-Code direkt in den Arduino UNO R4-Code zu integrieren. In diesem Fall können Sie eine andere Methode verwenden, um den Code zu verwalten.
- Der Arduino UNO R4-Code sollte in einer Datei mit dem Namen .ino gespeichert werden.
- Der HTML-Code, der HTML, CSS und JavaScript umfasst, sollte in einer separaten Datei mit dem Namen .h gespeichert werden. Dies hilft, den Webseiteninhalt vom Arduino UNO R4-Code zu trennen, was die Handhabung und Änderung erleichtert.
Wir müssen zwei wesentliche Schritte unternehmen:
- HTML-Inhalte erstellen
- Arduino UNO R4 programmieren
HTML-Inhalte vorbereiten
- Erstelle eine HTML-Datei auf deinem Computer. Diese Datei sollte dein Benutzeroberflächendesign unter Verwendung von HTML, CSS und JavaScript enthalten.
- Füge in der HTML-Datei einen Platzhalter ein, an dem die Daten vom Arduino UNO R4 erscheinen sollen. Verwende vorerst einen beliebigen Beispielwert.
- Überprüfe und passe das Design deiner Datei so an, dass du damit zufrieden bist.
- Ersetze den Platzhalterwert in deiner HTML-Datei durch eine eindeutige Bezeichnung, wie z. B. TEMPERATURE_MARKER. Später wirst du den Befehl String.replace("TEMPERATURE_MARKER", real_value); in deinem Arduino UNO R4-Skript verwenden, um echte Daten vom Arduino anzuzeigen.
- Als Nächstes werden wir diesen HTML-Inhalt in eine .h-Datei innerhalb der Arduino-IDE übertragen.
Programmierung Arduino UNO R4
- Starte die Arduino IDE und erstelle eine neue Datei. Benenne sie so: newbiely.com.ino.
- Nimm den unten angegebenen Code und füge ihn in die von dir erstellte neue Datei ein.
/*
* Dieser Arduino UNO R4 Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO R4 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-uno-r4/arduino-uno-r4-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();
}
- Aktualisieren Sie den Code mit Ihren WLAN-Daten (SSID und Passwort)
- Im Arduino IDE erstellen Sie die Datei mit dem Namen index.h
- Klicke auf die Schaltfläche unter dem Symbol des Seriemonitors und wähle Neuer Tab, oder drücke Ctrl+Shift+N.
- Benenne die Datei index.h und drücke die OK-Schaltfläche.
- Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei mit dem Namen index.h ein.
/*
* Dieser Arduino UNO R4 Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO R4 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-uno-r4/arduino-uno-r4-web-server
*/
const char *HTML_CONTENT = R""""(
REPLACE_YOUR_HTML_CONTENT_HERE
)"""";
- Fügen Sie Ihren vorbereiteten HTML-Inhalt an der Stelle REPLACE_YOUR_HTML_CONTENT_HERE ein. Es ist in Ordnung, Zeilenumbrüche zu verwenden. Hier ist ein Beispiel für eine index.h-Datei:
/*
* Dieser Arduino UNO R4 Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO R4 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-uno-r4/arduino-uno-r4-web-server
*/
const char *HTML_CONTENT = R""""(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Uno R4 - 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>
)"""";
- Sie haben den Code jetzt in zwei Dateien: newbiely.com.ino und index.h
- Klicken Sie im Arduino IDE auf die Schaltfläche Upload, um den Code auf den Arduino UNO R4 zu übertragen
- Öffnen Sie die Webseite des Arduino UNO R4-Boards in Ihrem Webbrowser, wie zuvor. Es wird wie folgt angezeigt:
Für eine detaillierte Anleitung schauen Sie sich bitte das Arduino UNO R4 - DS18B20 Temperature Sensor via Web Tutorial an.
※ Notiz:
Wenn Sie den HTML-Code in der Datei mit dem Namen "index.h" ändern, aber keine Änderungen an der Datei "newbiely.com.ino" vornehmen, aktualisiert die Arduino IDE das HTML nicht, wenn Sie den Code für den ESP32 kompilieren und hochladen.
Um die Arduino IDE dazu zu bringen, das HTML zu aktualisieren, müssen Sie in der Datei "newbiely.com.ino" etwas ändern. Sie könnten eine leere Zeile oder einen Kommentar hinzufügen. Dies informiert die IDE darüber, dass sich das Projekt geändert hat, sodass beim Hochladen Ihr neues HTML mit eingeschlossen wird.
Arduino UNO R4 Webserver – Mehrere Seiten
Besuchen Sie dieses Tutorial über Arduino UNO R4 - Web Server Multiple Pages.