Arduino - Webserver mit mehreren Seiten

Erforderliche Hardware

Oder Sie können die folgenden Kits kaufen:

Über Arduino Uno R4 und Webserver

Wenn Sie mit dem Arduino Uno R4 und dem Webserver (einschließlich Pinbelegung, Funktionsweise und Programmierung) nicht vertraut sind, können Sie durch die folgenden Tutorials mehr darüber erfahren:

• How to get started with Arduino Uno R4
• Arduino - Web Server

Wie ein Webserver auf Arduino funktioniert

Wenn ein Webbrowser eine HTTP-Anfrage an das Arduino-Board sendet, muss das Arduino-Board so programmiert werden, dass es die folgenden Aufgaben ausführt:

• Erstelle einen Webserver, der HTTP-Anfragen vom Webbrowser entgegennimmt.
• Lies die erste Zeile des HTTP-Anforderungs-Headers, wenn eine HTTP-Anforderung eingeht.
• Leite die Anfragen basierend auf der ersten Zeile der HTTP-Anforderung weiter, um zu bestimmen, welche Webseiten der Arduino zurückgeben soll.
• (Optional) Analysiere den HTTP-Anforderungs-Header, um vom Benutzer gesendete Steuerbefehle zu identifizieren.
• (Optional) Steuere die mit dem Arduino verbundenen Geräte basierend auf den empfangenen Steuerbefehlen.
• Sende eine HTTP-Antwort zurück an den Webbrowser, die Folgendes enthält:
• Ein HTTP-Antwort-Header.
• Der HTTP-Antwortkörper, der HTML-Inhalt und (falls zutreffend) Sensordaten oder Gerätezustand enthält.

Durch die Ausführung dieser Aufgaben kann der Arduino HTTP-Anfragen effektiv verarbeiten und dem Webbrowser angemessene Antworten liefern, was eine webbasierte Steuerung und Interaktion mit den an den Arduino angeschlossenen Geräten ermöglicht.

Die Routing-Funktion ist die wichtigste Aufgabe, und sie wird im Detail erläutert. Andere Teile werden im Arduino - Web Server Tutorial behandelt. Sobald Sie den Routing-Algorithmus verstanden haben, fahren wir fort, den vollständigen Code für einen Webserver mit mehreren Seiten zu sehen.

Arduino Webserver - Routing-Algorithmus

Bevor Sie Code für die Routing-Funktion schreiben, sollten Sie eine Liste von Webseiten und den entsprechenden HTTP-Methoden erstellen, die für Arduino verfügbar sein werden. In diesem Tutorial unterstützen wir nur die GET-Methode. Sie können es jedoch leicht erweitern, um bei Bedarf auch andere HTTP-Methoden zu unterstützen. Hier ist eine Beispiel-Liste:

• GET Startseite
• GET Temperaturseite
• GET Türseite
• GET LED-Seite

Danach musst du eine Liste der ersten Zeilen der HTTP-Anforderungsheader erstellen, die der Seitenliste entsprechen:

• GET Startseite:
• GET /
• GET /index.html
• GET Temperaturseite:
• GET /temperature.html
• GET Türseite:
• GET /door
• GET LED-Seite:
• GET /led.html

Zusammenfassend haben wir die folgende Liste:

GET / GET /index.html GET /temperature.html GET /door.html GET /led.html

Arduino-Code - Webserver mit mehreren Seiten

Im Folgenden finden Sie den vollständigen Arduino-Code, der einen Webserver mit mehreren Seiten erstellt. Um es einfach zu halten, ist der HTML-Inhalt jeder Seite sehr einfach und direkt im Arduino-Code eingebettet. Im nächsten Teil werden wir lernen, wie wir die HTML-Inhalte jeder Seite in separate Dateien aufteilen, wodurch der Code besser organisiert und leichter zu verwalten ist.

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 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.

• Kopieren Sie den obigen Code und öffnen Sie ihn in der Arduino IDE
• Ändern Sie im Code die WLAN-Informationen (SSID und Passwort) auf Ihre eigenen WLAN-Informationen
• Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um den Code auf den Arduino zu übertragen
• Öffnen Sie den seriellen Monitor
• Überprüfen Sie das Ergebnis im seriellen Monitor

• Sie sehen eine IP-Adresse im Seriellen Monitor, zum Beispiel: 192.168.0.2
• Geben Sie nacheinander die folgende Liste in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.

• Bitte beachten Sie, dass Sie die 192.168.0.2 durch die IP-Adresse ersetzen müssen, die Sie im Serial Monitor erhalten haben.
• Sie werden die folgenden Seiten sehen: Startseite, LED-Seite, Tür-Seite, Temperatur-Seite und die Seite 'Nicht gefunden'.
• Sie können die Ausgabe auch im Serial Monitor überprüfen.

Der vorherige Code enthält für jede Seite sehr einfachen HTML-Inhalt. Aber wenn wir eine schicke Benutzeroberfläche mit viel HTML erstellen möchten, kann der Code groß und unübersichtlich werden. Um es einfacher zu machen, lernen wir, wie man das HTML vom Arduino-Code trennt. So können wir das HTML in separaten Dateien halten, was die Verwaltung und die Arbeit damit erleichtert.

Arduino-Code – Vollständiger Mehrseiten-Webserver

• Öffnen Sie die Arduino-IDE.
• Erstellen Sie einen neuen Sketch und geben Sie ihm einen Namen, zum Beispiel ArduinoWebServer.ino.
• Kopieren Sie den bereitgestellten Code und fügen Sie ihn in diese Datei ein.

• Passen Sie die WLAN-Informationen (SSID und Passwort) im Code an.
• Erstellen Sie die index.h-Datei in der Arduino-IDE folgendermaßen:
• Entweder klicken Sie direkt unter dem Symbol des seriellen Monitors auf die Schaltfläche und wählen Sie Neue Registerkarte, oder verwenden Sie die Tasten 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 Datei 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-multiple-pages */ const char *HTML_CONTENT_HOME = R""""( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:,"> <title>Home Page</title> </head> <body> <h1>Welcome to the Home Page</h1> <ul> <li><a href="/led">LED Page</a></li> <li><a href="/temperature">Temperature Page</a></li> <li><a href="/door">Door Page</a></li> </ul> </body> </html> )"""";
• Ebensfalls erstellen Sie die Datei temperature.h in der Arduino-IDE mit dem folgenden Inhalt.

/* * 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-multiple-pages */ const char *HTML_CONTENT_TEMPERATURE = 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> )"""";
• Ebenso erstellen Sie die Datei door.h in der Arduino IDE mit dem folgenden Inhalt.

/* * 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-multiple-pages */ const char *HTML_CONTENT_DOOR = R""""( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:,"> <title>Door Page</title> </head> <body> <h1>Door Page</h1> <p>Door State: <span style="color: red;">DOOR_STATE_MARKER</span></p> </body> </html> )"""";
• Analog dazu erstellen Sie die Datei led.h in der Arduino-IDE mit dem folgenden Inhalt.

/* * 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-multiple-pages */ const char *HTML_CONTENT_LED = R""""( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:,"> <title>LED Page</title> </head> <body> <h1>LED Page</h1> <p>LED State: <span style="color: red;">LED_STATE_MARKER</span></p> </body> </html> )"""";
• Analog dazu erstellen Sie die Datei error_404.h in der Arduino IDE mit dem folgenden Inhalt.

/* * 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-multiple-pages */ const char *HTML_CONTENT_404 = R""""( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:,"> <title>404 - Page Not Found</title> <style> h1 {color: #ff4040;} </style> </head> <body> <h1>404</h1> <p>Oops! The page you are looking for could not be found on Arduino Web Server.</p> <p>Please check the URL or go back to the <a href="/">homepage</a>.</p> <p>Or check <a href="https://arduinogetstarted.com/tutorials/arduino-web-server-multiple-pages"> Arduino Web Server</a> tutorial.</p> </body> </html> )"""";
• Jetzt haben Sie mehrere Dateien in der Arduino-IDE wie unten:

• Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um Code auf den Arduino hochzuladen
• Greifen Sie wie zuvor nacheinander per Webbrowser auf die Webseiten des Arduino-Boards zu. Sie sehen alle Webseiten wie unten gezeigt:


※ Notiz:

• Wenn Sie Änderungen am HTML-Inhalt innerhalb der index.h-Datei vornehmen, aber in der ArduinoWebServer.ino-Datei nichts ändern, wird die Arduino IDE den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den ESP32 nicht aktualisieren oder neu laden.
• Um die Arduino IDE in dieser Situation dazu zu zwingen, den HTML-Inhalt zu aktualisieren, müssen Sie eine Änderung in der ArduinoWebServer.ino-Datei vornehmen. Zum Beispiel können Sie eine leere Zeile hinzufügen oder einen Kommentar einfügen. Diese Aktion veranlasst die IDE dazu festzustellen, dass Änderungen am Projekt vorgenommen wurden, und stellt sicher, dass Ihr aktualisierter HTML-Inhalt in den Upload aufgenommen wird.

Verwandte Tutorials

• Arduino - Web Server
• Arduino - Web Server Password
• Arduino - WebSocket
• Arduino - Web Plotter
• Arduino - Controls Servo Motor via Web
• Arduino - Controls Car via Web
• Arduino - LED Matrix via Web
• Arduino - Temperature via Web
• Arduino - Controls Door Lock via Web
• Arduino Uno R4 WiFi controls LED via Web
• Arduino Uno R4 WiFi controls Relay via Web