Arduino - LED-Matrix über das Web
In diesem Tutorial lernen wir, wie man eine LED-Matrix über eine Weboberfläche steuert, die über einen Browser auf einem PC oder Smartphone genutzt wird, wobei der Arduino Uno R4 WiFi verwendet wird. Im Detail wird der Arduino Uno R4 WiFi so programmiert, dass er als Webserver funktioniert. Angenommen, die IP-Adresse des Arduino Uno R4 WiFi lautet 192.168.0.2. Hier sind die Details, wie es funktioniert:
- Wenn Sie 192.168.0.2 in den Webbrowser eingeben, sendet der Browser eine Anfrage an den Arduino, und der Arduino antwortet mit einer Webseite, die ein Nachrichtenfeld enthält.
- Sie geben eine Nachricht in das Nachrichtenfeld ein und klicken auf die Senden-Schaltfläche. Die Nachricht wird an den Arduino gesendet.
- Arduino zeigt die Nachricht auf der LED-Matrix an.
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.
Über LED-Matrix und Arduino Uno R4
Wenn Sie noch nichts über LED-Matrix und Arduino Uno R4 wissen (Pinbelegung, wie es funktioniert, wie man programmiert ...), informieren Sie sich in den folgenden Tutorials darüber:
Verdrahtungsdiagramm
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Arduino-Code
Schnelle Schritte
- Wenn dies das erste Mal ist, dass Sie den Arduino Uno R4 verwenden, sehen Sie sich [wie man die Umgebung für Arduino Uno R4 in der Arduino IDE einrichtet] an.
- Öffnen Sie die Arduino IDE.
- Öffnen Sie den Library Manager-Bereich, 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 Web-Server-Bibliothek.
- Klicken Sie auf die Install-Schaltfläche, um die Web-Server-Bibliothek hinzuzufügen.
- Suchen Sie nach “MD_Parola”, dann finden Sie die MD_Parola-Bibliothek
- Klicken Sie auf die Schaltfläche Installieren
- Sie werden aufgefordert, die MD_MAX72XX-Bibliothek als Abhängigkeit zu installieren. Klicken Sie auf die Schaltfläche Alle installieren.
- Erstellen Sie einen neuen Sketch. Geben Sie ihm 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-led-matrix-via-web
*/
#include <UnoR4WiFi_WebServer.h>
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include "index.h"
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4 // 4 blocks
#define CS_PIN 3
// create an instance of the MD_Parola class
MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);
// 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;
// Handler for LED matrix control
void handleMatrix(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Check for message parameter in query string
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "message") {
String message = params.params[i].value;
Serial.print("message: ");
Serial.println(message);
ledMatrix.displayClear(); // clear led matrix display
ledMatrix.displayScroll(message.c_str(), PA_CENTER, PA_SCROLL_LEFT, 100);
break;
}
}
String html = String(HTML_CONTENT);
server.sendResponse(client, html.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
// Initialize LED matrix
ledMatrix.begin(); // initialize the object
ledMatrix.setIntensity(15); // set the brightness of the LED matrix display (from 0 to 15)
ledMatrix.displayClear(); // clear led matrix display
ledMatrix.displayScroll("Hello, DIYables", PA_CENTER, PA_SCROLL_LEFT, 100);
Serial.println("Arduino Uno R4 WiFi - LED Matrix Web Control");
// 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("/", handleMatrix);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
if (ledMatrix.displayAnimate()) {
ledMatrix.displayReset();
}
}
- Passe die WiFi-Informationen (SSID und Passwort) im Code auf deine eigenen an
- 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 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 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-led-matrix-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino LED Matrix Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body {
font-size: 16px;
}
.user-input {
margin-bottom: 20px;
}
.user-input input {
flex: 1;
border: 1px solid #444;
padding: 5px;
}
.user-input input[type="submit"] {
margin-left: 5px;
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Arduino - LED Matrix via Web</h2>
<form class="user-input" action="" method="GET">
<input type="text" id="message" name="message" placeholder="Message to LED Matrix...">
<input type="submit" value="Send">
</form>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</body>
</html>
)=====";
- Jetzt haben Sie den Code in zwei Dateien: ArduinoGetStarted.com.ino und index.h
- Klicken Sie in der Arduino IDE auf die Upload-Schaltfläche, um den Code auf den Arduino hochzuladen.
- Sehen Sie das Ergebnis im seriellen Monitor.
COM6
Arduino Uno R4 WiFi - LED Matrix Web Control
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 sehen eine IP-Adresse, zum Beispiel: 192.168.0.254. Dies ist die IP-Adresse des Arduino-Webservers.
- Öffnen Sie einen Webbrowser und geben Sie eine der IP-Adressen in die Adressleiste ein.
- Bitte beachten Sie, dass die IP-Adresse variieren kann. Bitte überprüfen Sie den aktuellen Wert im seriellen Monitor.
- Sie werden auch die untenstehende Ausgabe im seriellen Monitor sehen.
COM6
Arduino Uno R4 WiFi - LED Matrix Web Control
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: /
Query param: message=Hello
message: Hello
Client disconnected
Autoscroll
Clear output
9600 baud
Newline
- Sie sehen die Webseite des Arduino-Boards im Webbrowser wie unten dargestellt.
- Geben Sie eine Nachricht ein und klicken Sie auf die Senden-Schaltfläche, um die Nachricht an Arduino zu senden.
- Schauen Sie sich die LED-Matrixanzeige an.
※ Notiz:
- Wenn Änderungen am HTML-Inhalt in der Datei index.h vorgenommen werden, ohne Änderungen an der Datei ArduinoGetStarted.com.ino vorzunehmen, aktualisiert die Arduino IDE den HTML-Inhalt während der Kompilierung und beim Hochladen des Codes auf den ESP32 nicht automatisch.
- Um die Arduino IDE in einem solchen Szenario dazu zu bringen, den HTML-Inhalt zu aktualisieren, ist es notwendig, eine Änderung in der Datei ArduinoGetStarted.com.ino vorzunehmen. Zum Beispiel können Sie eine leere Zeile hinzufügen oder einen Kommentar einfügen. Diese Aktion veranlasst die IDE, die Änderungen im Projekt zu erkennen, wodurch sichergestellt wird, dass der überarbeitete HTML-Inhalt in den Upload aufgenommen wird.