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 (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 „DIYables ESP32 WebServer“, dann finden Sie den DIYables ESP32 WebServer, der von DIYables erstellt wurde.
- Klicken Sie auf die Installieren-Schaltfläche, um die DIYables ESP32 WebServer-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 <DIYables_ESP32_WebServer.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
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
DIYables_ESP32_WebSocket* webSocket;
// create an instance of the MD_Parola class
MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);
// Web Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
// Send welcome message
const char welcome[] = "Connected to ESP32 WebSocket Server!";
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
Serial.print("WebSocket Received (");
Serial.print(length);
Serial.print(" bytes): ");
Serial.println(message);
ledMatrix.displayClear(); // clear led matrix display
ledMatrix.displayScroll(message, PA_CENTER, PA_SCROLL_LEFT, 100);
// Broadcast response to all connected clients using the library
if (webSocket != nullptr) {
String response = "Displayed: " + String(message) + "on LED Matrix";
webSocket->broadcastTXT(response);
Serial.print("WebSocket sent (");
Serial.print(response.length());
Serial.print(" bytes): ");
Serial.println(response);
}
}
void onWebSocketClose(net::WebSocket& ws, const net::WebSocket::CloseCode code, const char* reason, uint16_t length) {
Serial.println("WebSocket client disconnected");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("Arduino Nano ESP32 Web Server and WebSocket Server");
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("newbiely.com", PA_CENTER, PA_SCROLL_LEFT, 100);
// Configure web server routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Enable WebSocket functionality
webSocket = server.enableWebSocket(81);
if (webSocket != nullptr) {
// Set up WebSocket event handlers
webSocket->onOpen(onWebSocketOpen);
webSocket->onMessage(onWebSocketMessage);
webSocket->onClose(onWebSocketClose);
} else {
Serial.println("Failed to start WebSocket server");
}
}
void loop() {
// Then handle HTTP requests
server.handleClient();
// Handle WebSocket
server.handleWebSocket();
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>
)=====";
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address IP address: 192.168.0.2
※ 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!