Arduino Nano ESP32 - LED-Matrix über das Web
In diesem Tutorial lernen wir, wie man eine LED-Matrixanzeige über eine Weboberfläche mit dem Arduino Nano ESP32 steuert. Im Detail programmieren wir den Arduino Nano ESP32 so, dass er zu einem Webserver wird, der Folgendes tut:
- Bietet Benutzern eine Weboberfläche an, wenn eine Anfrage von einem Webbrowser empfangen wird.
- Stellt die Weboberfläche bereit, über die Benutzer die Nachricht an den Arduino Nano ESP32 senden können.
- Zeigt die Nachrichten auf der LED-Matrix an, sobald die Nachricht empfangen wird.
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.
Über LED-Matrix und Webserver
Wir können reines HTTP verwenden, um Text von der Weboberfläche an den Arduino Nano ESP32 zu senden. Allerdings wirkt WebSocket reaktionsschneller und fügt nicht viel Aufwand hinzu, daher verwenden wir in diesem Tutorial WebSocket.
Hast du keine Ahnung von LED-Matrix, Webservern und WebSockets, einschließlich ihrer Pinbelegungen, Funktionen und Programmierung? Entdecke unten umfassende Tutorials zu diesen Themen:
- Arduino Nano ESP32 - LED Matrix tutorial
- Arduino Nano ESP32 - Web Server tutorial
- Arduino Nano ESP32 - WebSocket tutorial
Verdrahtungsdiagramm
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Arduino Nano ESP32 Code
Der Inhalt der Webseite (HTML, CSS, JavaScript) wird separat in einer index.h-Datei gespeichert. Wir werden also zwei Code-Dateien in der Arduino-IDE haben:
- Eine .ino-Datei, die Arduino Nano ESP32-Code enthält und einen Webserver sowie einen WebSocket-Server erstellt
- Eine .h-Datei, die den Inhalt der Webseite enthält
Schnelle Schritte
- Wenn dies das erste Mal ist, dass Sie Arduino Nano ESP32 verwenden, siehe wie man die Umgebung für Arduino Nano ESP32 in der Arduino IDE einrichtet.
- Verbinden Sie das Arduino Nano ESP32-Board über ein Micro-USB-Kabel mit Ihrem PC.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das richtige Arduino Nano ESP32-Board (z. B. Arduino Nano ESP32) und den COM-Port.
- Öffnen Sie den Bibliotheksverwalter, indem Sie auf das Symbol Bibliotheksverwalter in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie „ESPAsyncWebServer“, dann finden Sie den ESPAsyncWebServer, der von lacamera erstellt wurde.
- Klicken Sie auf die Installieren-Schaltfläche, um die ESPAsyncWebServer-Bibliothek zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Schaltfläche Alle installieren.
- Suchen Sie “WebSockets”, dann finden Sie die WebSockets, die von Markus Sattler erstellt wurden.
- Klicken Sie auf die Schaltfläche Install, um die WebSockets-Bibliothek zu installieren.
- Suche “MD_Parola”, dann finde die MD_Parola-Bibliothek
- Klicke auf die Installieren Schaltfläche.
- Sie werden aufgefordert, die „MD_MAX72XX“ Bibliothek zu installieren
- Klicken Sie auf die Schaltfläche Alle installieren, um die Abhängigkeit zu installieren.
- In der Arduino IDE eine neue Skizze erstellen. Geben Sie ihr einen Namen, zum Beispiel newbiely.com.ino.
- Kopieren Sie den untenstehenden Code und öffnen Sie ihn in der Arduino IDE.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano ESP32 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-esp32/arduino-nano-esp32-led-matrix-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSocketsServer.h>
#include "index.h"
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4 // 4 blocks
#define CS_PIN D10 // The Arduino Nano ESP32 pin
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81); // WebSocket server on port 81
// create an instance of the MD_Parola class
MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);
void webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length) {
switch (type) {
case WStype_DISCONNECTED:
Serial.printf("[%u] Disconnected!\n", num);
break;
case WStype_CONNECTED:
{
IPAddress ip = webSocket.remoteIP(num);
Serial.printf("[%u] Connected from %d.%d.%d.%d\n", num, ip[0], ip[1], ip[2], ip[3]);
}
break;
case WStype_TEXT:
String text = String((char*)payload);
Serial.println("Received: " + text);
ledMatrix.displayClear(); // clear led matrix display
ledMatrix.displayScroll(text.c_str(), PA_CENTER, PA_SCROLL_LEFT, 100);
webSocket.sendTXT(num, "Displayed: " + String((char*)payload) + "on LED Matrix");
break;
}
}
void setup() {
Serial.begin(9600);
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("esp32io.com", PA_CENTER, PA_SCROLL_LEFT, 100);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Initialize WebSocket server
webSocket.begin();
webSocket.onEvent(webSocketEvent);
// Serve a basic HTML page with JavaScript to create the WebSocket connection
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the index.h file
request->send(200, "text/html", html);
});
server.begin();
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
webSocket.loop();
if (ledMatrix.displayAnimate()) {
ledMatrix.displayReset();
}
}
- Erstellen Sie die index.h-Datei im Arduino IDE, indem Sie:
- Entweder klicken Sie auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors 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 OK-Schaltfläche.
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in die index.h ein.
- Jetzt haben Sie den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicken Sie in der Arduino IDE auf die Schaltfläche Upload, um den Code auf den Arduino Nano ESP32 hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Überprüfen Sie das Ergebnis im seriellen Monitor.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Sie sehen die Webseite wie unten dargestellt.
- Klicken Sie auf die CONNECT-Schaltfläche, um die Webseite über WebSocket mit dem Arduino Nano ESP32 zu verbinden.
- Geben Sie einige Wörter ein und senden Sie sie an den Arduino Nano ESP32.
- Sie werden die Antwort vom Arduino Nano ESP32 sehen.
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts in der Datei newbiely.com.ino berühren, wird die Arduino IDE den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den ESP32 nicht aktualisieren.
- Um die Arduino IDE dazu zu bringen, den HTML-Inhalt in diesem Fall zu aktualisieren, nehmen Sie eine Änderung in der newbiely.com.ino Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen ...)
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano ESP32 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-esp32/arduino-nano-esp32-led-matrix-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<!-- saved from url=(0019)http://192.168.0.2/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Arduino Nano ESP32 WebSocket</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
/* Add some basic styling for the chat window */
body {
font-size: 16px;
}
.chat-container {
width: 400px;
margin: 0 auto;
padding: 10px;
}
.chat-messages {
height: 250px;
overflow-y: auto;
border: 1px solid #444;
padding: 5px;
margin-bottom: 5px;
}
.user-input {
display: flex;
margin-bottom: 20px;
}
.user-input input {
flex: 1;
border: 1px solid #444;
padding: 5px;
}
.user-input button {
margin-left: 5px;
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.websocket {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.websocket button {
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.websocket .label {
margin-left: auto;
}
</style>
<script>
var ws;
var wsm_max_len = 4096; /* bigger length causes uart0 buffer overflow with low speed smart device */
function update_text(text) {
var chat_messages = document.getElementById("chat-messages");
chat_messages.innerHTML += text + '<br>';
chat_messages.scrollTop = chat_messages.scrollHeight;
}
function send_onclick() {
if(ws != null) {
var message = document.getElementById("message").value;
if (message) {
document.getElementById("message").value = "";
ws.send(message + "\n");
update_text('<span style="color:navy">' + message + '</span>');
// You can send the message to the server or process it as needed
}
}
}
function connect_onclick() {
if(ws == null) {
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
} else
ws.close();
}
function ws_onopen() {
document.getElementById("ws_state").innerHTML = "<span style='color:blue'>CONNECTED</span>";
document.getElementById("bt_connect").innerHTML = "Disconnect";
document.getElementById("chat-messages").innerHTML = "";
}
function ws_onclose() {
document.getElementById("ws_state").innerHTML = "<span style='color:gray'>CLOSED</span>";
document.getElementById("bt_connect").innerHTML = "Connect";
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
}
function ws_onmessage(e_msg) {
e_msg = e_msg || window.event; // MessageEvent
console.log(e_msg.data);
update_text('<span style="color:blue">' + e_msg.data + '</span>');
}
</script>
</head>
<body>
<div class="chat-container">
<h2>Arduino Nano ESP32 WebSocket</h2>
<div class="websocket">
<button class="connect-button" id="bt_connect" onclick="connect_onclick()">Connect</button>
<span class="label">WebSocket: <span id="ws_state"><span style="color:blue">CLOSED</span></span></span>
</div>
<div class="chat-messages" id="chat-messages"></div>
<div class="user-input">
<input type="text" id="message" placeholder="Type your message...">
<button onclick="send_onclick()">Send</button>
</div>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</div>
</body></html>
)=====";
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
※ Notiz:
Zeilenweise Code-Erklärung
Der oben gezeigte Arduino Nano ESP32-Code enthält eine zeilenweise Erklärung. Bitte lesen Sie die Kommentare im Code!