ESP8266 - LED-Matrix über das Web
In diesem Tutorial lernen wir, wie man eine LED-Matrixanzeige über eine Weboberfläche mit dem ESP8266 steuert. Genauer gesagt programmieren wir den ESP8266 so, dass er zu einem Webserver wird, der Folgendes ausführt:
- Stellt Benutzern eine Weboberfläche zur Verfügung, wenn eine Anfrage von einem Webbrowser eingeht.
- Stellt die Weboberfläche bereit, über die Benutzer die Nachricht an den ESP8266 senden können.
- Zeigt die Nachrichten auf der LED-Matrix an, sobald sie empfangen werden.
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 ESP8266 zu senden. Allerdings sorgt die Verwendung von WebSocket dafür, dass es reaktionsschneller wirkt und nicht viel Aufwand verursacht. In diesem Tutorial verwenden wir daher WebSocket.
Nicht vertraut mit LED-Matrix, Webserver und WebSocket, einschließlich ihrer Pinbelegungen, Funktionalität und Programmierung? Erkunde unten umfassende Tutorials zu diesen Themen:
- ESP8266 - LED Matrix tutorial
- ESP8266 - Web Server tutorial
- ESP8266 - WebSocket tutorial
Verdrahtungsdiagramm
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Weitere Informationen finden Sie unter ESP8266-Pinbelegung und wie man ESP8266 und andere Komponenten mit Strom versorgt.
ESP8266-Code
Der Inhalt der Webseite (HTML, CSS, JavaScript) wird separat in einer index.h-Datei gespeichert. Daher werden wir zwei Code-Dateien in der Arduino-IDE haben:
- Eine .ino-Datei, die ESP8266-Code enthält und einen Webserver sowie einen WebSocket-Server erstellt.
- Eine .h-Datei, die den Inhalt der Webseite enthält.
Schnelle Schritte
Um mit dem ESP8266 in der Arduino-IDE zu beginnen, befolgen Sie diese Schritte:
- Schau dir das Tutorial zur Einrichtung der ESP8266-Entwicklungsumgebung in der Arduino IDE an, falls dies dein erster Einsatz von ESP8266 ist.
- Verdrahte die Komponenten wie im Diagramm gezeigt.
- Verbinde das ESP8266-Board über ein USB-Kabel mit deinem Computer.
- Öffne die Arduino IDE auf deinem Computer.
- Wähle das richtige ESP8266-Board, z. B. NodeMCU 1.0 (ESP-12E-Modul), und seinen jeweiligen COM-Port.
- Öffne den Bibliotheks-Manager, indem du auf das Bibliotheks-Manager-Symbol in der linken Navigationsleiste der Arduino IDE klickst.
- Suche „WebSockets“, und finde die WebSockets, die von Markus Sattler erstellt wurden.
- Klicke auf die Schaltfläche Installieren, um die WebSockets-Bibliothek zu installieren.
- Suchen Sie “MD_Parola”, und finden Sie dann die MD_Parola-Bibliothek
- Klicken Sie auf die Schaltfläche Installieren.
- Ihnen wird gebeten, die Bibliothek „MD_MAX72XX“ zu installieren
- Klicken Sie auf die Schaltfläche Alle installieren, um die Abhängigkeit zu installieren.
- Erstellen Sie in der Arduino-IDE ein neues Sketch, geben Sie ihm einen Namen, zum Beispiel newbiely.com.ino
- Kopieren Sie den untenstehenden Code und öffnen Sie ihn in der Arduino-IDE
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-led-matrix-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.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 D8 // The ESP8266 pin
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 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);
String echoMessage = "Displayed: " + String((char*)payload) + " on LED Matrix";
webSocket.sendTXT(num, echoMessage));
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("newbiely.com", PA_CENTER, PA_SCROLL_LEFT, 100);
delay(1000);
// 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, []() {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the index.h file
server.send(200, "text/html", html);
});
server.begin();
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
// Handle client requests
server.handleClient();
// Handle WebSocket events
webSocket.loop();
if (ledMatrix.displayAnimate()) {
ledMatrix.displayReset();
}
}
- Erstelle die Datei index.h in der Arduino IDE, indem du:
- Entweder klicke auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wähle Neuer Tab, oder verwende 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 hast du den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicke auf die Upload-Schaltfläche in der Arduino-IDE, um den Code auf den ESP8266 hochzuladen.
- Öffne den seriellen Monitor.
- Schau dir das Ergebnis im seriellen Monitor an.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Sie sehen die unten dargestellte Webseite:
- Klicken Sie auf die CONNECT-Schaltfläche, um die Webseite über WebSocket mit dem ESP8266 zu verbinden.
- Geben Sie einige Wörter ein und senden Sie sie an den ESP8266.
- Sie werden die Antwort vom ESP8266 sehen.
- Wenn Sie den HTML-Inhalt in der index.h-Datei ändern und nichts an der newbiely.com.ino-Datei vornehmen, wird der HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den ESP8266 vom Arduino IDE nicht aktualisiert.
- Um in diesem Fall sicherzustellen, dass der Arduino IDE den HTML-Inhalt aktualisiert, nehmen Sie eine Änderung in der newbiely.com.ino-Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen...).
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-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>ESP8266 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>ESP8266 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
ESP8266 Web Server's IP address IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
※ Notiz:
Zeilenweise Code-Erklärung
Der obige ESP8266-Code enthält eine zeilenweise Erklärung. Bitte lesen Sie die Kommentare im Code!