Arduino Nano - Webserver
In diesem Leitfaden zeigen wir Ihnen, wie man ein Arduino Nano-Board mit einem Ethernet-Modul programmiert, damit es als Webserver fungiert. Sie können Daten anzeigen und den Arduino Nano über Webseiten steuern, die von Ihrem Computer oder Smartphone aus erreichbar sind. Wir beginnen mit einfachen Aufgaben und arbeiten uns zu fortgeschritteneren Aufgaben vor, wie unten beschrieben:
- Arduino Nano Webserver - Hallo Welt!
- Arduino Nano Webserver - Sensorwerte über eine Webseite überwachen.
- Arduino Nano Webserver - Automatisch aktualisierte Werte auf der Webseite.
- Arduino Nano Webserver - HTML, CSS und JavaScript vom Arduino-Code trennen.
- Arduino Nano Webserver - Arduino Nano über eine Webseite steuern.
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.
Verdrahtungsdiagramm zwischen Arduino Nano und W5500-Ethernet-Modul
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Siehe Der beste Weg, den Arduino Nano und andere Komponenten mit Strom zu versorgen.
image source: diyables.io
Arduino Nano Webserver - Hallo Welt
Das ist relativ einfach. Der Arduino Nano-Code führt die folgenden Aufgaben aus:
- Einen Webserver erstellen, der auf HTTP-Anfragen eines Webbrowsers lauscht.
- Nach Eingang einer Anfrage eines Webbrowsers antwortet der Arduino Nano mit den folgenden Informationen:
- HTTP-Header
- HTTP-Body: enthält "Hello World!".
- Verbinden Sie das Arduino Nano mit dem Ethernet-Modul gemäß dem oben gezeigten Verdrahtungsdiagramm.
- Verbinden Sie ein Ethernet-Kabel mit dem Ethernet-Modul.
- Verbinden Sie das Arduino Nano über ein USB-Kabel mit einem PC.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das Arduino Nano-Board und den entsprechenden COM-Port aus.
- Klicken Sie auf das Bibliotheken-Symbol in der linken Seitenleiste der Arduino IDE.
- Suchen Sie „Ethernet“, und finden Sie dann die Ethernet-Bibliothek von Various.
- Klicken Sie auf die Schaltfläche Installieren, um die Ethernet-Bibliothek zu installieren.
- Kopiere den obigen Code und öffne ihn mit der Arduino-IDE.
- Klicke auf die Hochladen-Schaltfläche in der Arduino-IDE, um den Code auf den Arduino Nano hochzuladen.
- Öffne den seriellen Monitor.
- Schau dir das Ergebnis im seriellen Monitor an.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie sie in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Sie sehen dann die folgende Ausgabe im seriellen Monitor.
- Sobald du den Webbrowser über die IP-Adresse aufrufst, siehst du eine einfache Webseite, die „Hallo Welt!“ anzeigt. Die Seite wird so aussehen:
Nachfolgend ist der Arduino Nano-Code, der die oben genannten Aufgaben ausführt:
/*
* Dieser Arduino Nano Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-web-server
*/
#include <SPI.h>
#include <Ethernet.h>
// MAC address for the Ethernet module, you can modify it as needed
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // Set a static IP address
EthernetServer server(80); // Create an Ethernet server that listens on port 80
void setup() {
//Initialize serial communication:
Serial.begin(9600);
// Start the Ethernet connection:
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
// Try with a static IP:
Ethernet.begin(mac, ip);
}
// Start the server:
server.begin();
// Print the Ethernet board's IP address:
Serial.print(F("Arduino Nano Web Server's IP address: "));
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient client = server.available();
if (client) {
// read the HTTP request header line by line
while (client.connected()) {
if (client.available()) {
String HTTP_header = client.readStringUntil('\n'); // read the header line of HTTP request
if (HTTP_header.equals("\r")) // the end of HTTP request
break;
Serial.print(F("<< "));
Serial.println(HTTP_header); // print HTTP request to Serial Monitor
}
}
// send the HTTP response
// send the HTTP response header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // the connection will be closed after completion of the response
client.println(); // the separator between HTTP header and body
// send the HTTP response body
client.println(F("<!DOCTYPE HTML>"));
client.println(F("<html>"));
client.println(F("<head>"));
client.println(F("<link rel=\"icon\" href=\"data:,\">"));
client.println(F("</head>"));
client.println(F("<p>"));
client.println(F("Hello World!"));
client.println(F("</p>"));
client.println(F("</html>"));
client.flush();
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
}
Schnelle Schritte
COM6
Arduino Nano Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
COM6
Arduino Nano Web Server's IP address: 192.168.0.3
<< GET / HTTP/1.1
<< Host: 192.168.0.3
<< Connection: keep-alive
<< Upgrade-Insecure-Requests: 1
<< User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36 Edg/129.0.0.0
<< Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
<< Accept-Encoding: gzip, deflate
<< Accept-Language: en-US,en;q=0.9,ko;q=0.8
Autoscroll
Clear output
9600 baud
Newline
Arduino Nano Webserver - Überwachung von Sensordaten über eine Webseite.
Der untenstehende Arduino-Nano-Code führt die folgenden Aufgaben aus:
- Einen Webserver erstellen, der auf HTTP-Anfragen von einem Webbrowser wartet.
- Wenn eine Anfrage von einem Webbrowser eingeht, antwortet der Arduino Nano mit den folgenden Informationen:
- HTTP-Header
- HTTP-Body: Dies umfasst HTML- und CSS-Inhalte sowie den vom Sensor ausgelesenen Wert.
- Kopieren Sie den obigen Code und öffnen Sie ihn in der Arduino-IDE.
- Klicken Sie im Arduino-IDE auf die Upload-Schaltfläche, um den Code auf den Arduino Nano hochzuladen.
- Laden Sie die vorherige Webseite erneut (Ctrl + F5); Sie sehen sie dann, wie unten gezeigt:
/*
* Dieser Arduino Nano Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-web-server
*/
#include <SPI.h>
#include <Ethernet.h>
// MAC address for the Ethernet module, you can modify it as needed
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // Set a static IP address
EthernetServer server(80); // Create an Ethernet server that listens on port 80
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a random value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
//Initialize serial communication:
Serial.begin(9600);
// Start the Ethernet connection:
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
// Try with a static IP:
Ethernet.begin(mac, ip);
}
// Start the server:
server.begin();
// Print the Ethernet board's IP address:
Serial.print(F("Server is at: "));
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient client = server.available();
if (client) {
// read the HTTP request header line by line
while (client.connected()) {
if (client.available()) {
String HTTP_header = client.readStringUntil('\n'); // read the header line of HTTP request
if (HTTP_header.equals("\r")) // the end of HTTP request
break;
Serial.print(F("<< "));
Serial.println(HTTP_header); // print HTTP request to Serial Monitor
}
}
// send the HTTP response
// send the HTTP response header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // the connection will be closed after completion of the response
client.println(); // the separator between HTTP header and body
// send the HTTP response body
client.println(F("<!DOCTYPE HTML>"));
client.println(F("<html>"));
client.println(F("<head>"));
client.println(F("<link rel=\"icon\" href=\"data:,\">"));
client.println(F("</head>"));
client.println(F("<p>"));
client.print(F("Temperature: <span style=\"color: red;\">"));
float temperature = getTemperature();
client.print(temperature, 2);
client.println(F("°C</span>"));
client.println(F("</p>"));
client.println(F("</html>"));
client.flush();
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
}
Schnelle Schritte
Mit dem bereitgestellten Code müssen Sie die Seite im Webbrowser neu laden, um die Temperatur zu aktualisieren. Im nächsten Abschnitt lernen wir, wie die Webseite den Temperaturwert im Hintergrund automatisch aktualisieren kann, ohne neu zu laden.
Arduino Nano Web-Server - Automatisch aktualisierte Werte auf der Webseite
Wie die automatische Aktualisierung funktioniert
- Der Benutzer gibt die IP-Adresse des Arduino Nano im Webbrowser ein.
- Der Webbrowser sendet eine HTTP-Anfrage an die Startseite des Arduino Nano (/).
- Der Arduino antwortet mit HTML, CSS und JavaScript.
- Der Webbrowser zeigt die Webseite mit dem empfangenen HTML und CSS an.
- Alle 3 Sekunden führt der Webbrowser den JavaScript-Code aus, der eine HTTP-Anfrage an den Endpunkt /temperature sendet.
- Der Arduino liest den Sensorwert aus und sendet ihn als Antwort zurück.
- Der Webbrowser empfängt den Sensorwert und aktualisiert die Webseite entsprechend.
Nachfolgend ist der Arduino Nano-Code, der die oben genannten Aufgaben ausführt:
/*
* Dieser Arduino Nano Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-web-server
*/
#include <SPI.h>
#include <Ethernet.h>
// MAC address and IP address for the Ethernet module (modify if necessary)
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // Static IP address for the Arduino Nano
EthernetServer server(80); // Set up the Ethernet server to listen on port 80
const char* HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano Temperature</title>
</head>
<body>
<h1>Arduino Nano Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 3000); // Update temperature every 3 seconds
</script>
</body>
</html>
)=====";
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a random value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
// Start serial communication
Serial.begin(9600);
// Start Ethernet connection
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
// Try with a static IP address if DHCP fails
Ethernet.begin(mac, ip);
}
// Start the server
server.begin();
// Print the Arduino Nano's IP address
Serial.print(F("Arduino Nano Web Server's IP address: "));
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient client = server.available();
if (client) {
Serial.println(F("Client connected"));
// Wait until the client sends some data
while (client.connected()) {
if (client.available()) {
// Read the first line of the HTTP request
String request = client.readStringUntil('\r');
Serial.print(F("Request: "));
Serial.println(request);
client.flush();
// Serve the HTML page from the index.h file if the request is "/"
if (request.indexOf("GET / ") >= 0) {
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // Connection will be closed after the response
client.println();
client.println(HTML_CONTENT); // Send the HTML page from index.h
}
// Serve the temperature data if the request is "/temperature"
else if (request.indexOf("GET /temperature") >= 0) {
float temperature = getTemperature();
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/plain"));
client.println(F("Connection: close")); // Connection will be closed after the response
client.println();
client.print(temperature, 2); // Send the temperature as plain text
}
// Close the connection
client.stop();
Serial.println(F("Client disconnected"));
}
}
}
}
Schnelle Schritte
- Kopieren Sie den obigen Code und öffnen Sie ihn in der Arduino IDE.
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um den Code auf den Arduino Nano hochzuladen.
- Laden Sie die vorherige Webseite neu (Strg + F5), und Sie sehen sie wie unten gezeigt:
Sie werden sehen, dass der Wert alle 3 Sekunden automatisch aktualisiert wird.
HTML-Inhalt in eine separate Datei in der Arduino-IDE auslagern
Wenn Sie eine einfache Webseite mit minimalem Inhalt erstellen möchten, können Sie das HTML direkt in den Code des Arduino Nano einbetten, wie zuvor erläutert.
Allerdings kann das Einbetten sämtlicher HTML-, CSS- und JavaScript-Dateien direkt in den Code des Arduino Nano bei komplexeren und funktionsreicheren Webseiten unhandlich werden. In solchen Fällen ist es besser, einen anderen Ansatz zu verwenden, um den Code zu verwalten:
- Der Code des Arduino Nano wird wie üblich in einer .ino-Datei gespeichert.
- Der Inhalt der Webseite (HTML, CSS, JavaScript) wird in einer separaten .h-Datei platziert. Diese Trennung erleichtert es, die Webseite zu verwalten und zu aktualisieren, ohne den Arduino-Code unübersichtlich zu machen.
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 füge ihn in die erstellte Datei ein.
/*
* Dieser Arduino Nano Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-web-server
*/
#include <SPI.h>
#include <Ethernet.h>
#include "index.h" // Include the index.h file
// MAC address and IP address for the Ethernet module (modify if necessary)
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // Static IP address for the Arduino Nano
EthernetServer server(80); // Set up the Ethernet server to listen on port 80
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a random value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
// Start serial communication
Serial.begin(9600);
// Start Ethernet connection
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
// Try with a static IP address if DHCP fails
Ethernet.begin(mac, ip);
}
// Start the server
server.begin();
// Print the Arduino Nano's IP address
Serial.print(F("Arduino Nano Web Server's IP address: "));
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient client = server.available();
if (client) {
Serial.println(F("Client connected"));
// Wait until the client sends some data
while (client.connected()) {
if (client.available()) {
// Read the first line of the HTTP request
String request = client.readStringUntil('\r');
Serial.print(F("Request: "));
Serial.println(request);
client.flush();
// Serve the HTML page from the index.h file if the request is "/"
if (request.indexOf("GET / ") >= 0) {
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // Connection will be closed after the response
client.println();
client.println(HTML_CONTENT); // Send the HTML page from index.h
}
// Serve the temperature data if the request is "/temperature"
else if (request.indexOf("GET /temperature") >= 0) {
float temperature = getTemperature();
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/plain"));
client.println(F("Connection: close")); // Connection will be closed after the response
client.println();
client.print(temperature, 2); // Send the temperature as plain text
}
// Close the connection
client.stop();
Serial.println(F("Client disconnected"));
}
}
}
}
- Erstelle die index.h-Datei 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 OK-Schaltfläche
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in die index.h ein.
/*
* Dieser Arduino Nano Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-web-server
*/
/*
* This Arduino Nano code was developed by newbiely.com
*
* This Arduino Nano code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* http://localhost/web/newbiely.com/public/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano Temperature</title>
</head>
<body>
<h1>Arduino Nano Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 3000); // Update temperature every 3 seconds
</script>
</body>
</html>
)=====";
#endif
- 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 hochzuladen
- Laden Sie die Webseite neu (mit Ctrl + F5); sie wird genauso aussehen wie zuvor
※ Notiz:
- Wenn du den HTML-Inhalt in der Datei index.h aktualisierst, ohne etwas in der Datei newbiely.com.ino zu ändern, wird die Arduino-IDE die aktualisierten HTML-Inhalte beim Kompilieren und Hochladen des Codes auf den Arduino Nano nicht neu laden oder berücksichtigen.
- Um sicherzustellen, dass die Arduino-IDE den HTML-Inhalt aktualisiert, musst du eine kleine Änderung in der Datei newbiely.com.ino vornehmen, zum Beispiel eine Leerzeile oder einen Kommentar hinzufügen. Dadurch wird die IDE gezwungen, Änderungen zu erkennen, und der aktualisierte HTML-Inhalt wird beim Upload eingeschlossen.
Arduino Nano über das Web steuern
Die Steuerung von etwas, das mit dem Arduino Nano verbunden ist, ist etwas anspruchsvoller als nur einen Wert auszulesen. Das liegt daran, dass der Arduino Nano die vom Webbrowser empfangene Anfrage verstehen muss, um zu wissen, welche Aktion er ausführen soll.
Für ein umfassenderes und detaillierteres Beispiel empfehle ich, die unten aufgeführten Tutorials anzusehen.