ESP32 - LED Matrix via Web
In deze handleiding leert u hoe u een LED matrix-bord via een webinterface aanstuurt met een ESP32. We programmeren de ESP32 tot een webserver die het volgende doet:
- Een webinterface terugstuurt naar gebruikers wanneer er een verzoek van een webbrowser binnenkomt.
- De webinterface aanbiedt waarmee gebruikers een bericht naar de ESP32 kunnen sturen.
- De berichten op de LED matrix weergeeft zodra ze ontvangen zijn.
Hardware Benodigd
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Over LED Matrix en Webserver
We kunnen pure HTTP gebruiken om tekst van de webinterface naar de ESP32 te sturen. Maar WebSocket zorgt voor een responsievere ervaring zonder veel extra complexiteit toe te voegen. Daarom gebruiken we in deze handleiding WebSocket.
Niet vertrouwd met LED Matrix, Webserver of WebSocket, inclusief hun pinouts, functionaliteit en programmering? Verken onderstaande uitgebreide tutorials over deze onderwerpen:
- ESP32 - LED Matrix tutorial
- ESP32 - Web Server tutorial
- ESP32 - WebSocket tutorial
Bedradingsschema
This image is created using Fritzing. Click to enlarge image
ESP32 Code
De inhoud van de webpagina (HTML, CSS, JavaScript) staat apart in een index.h bestand. We gebruiken dus twee codebestanden in de Arduino IDE:
- Een .ino bestand met de ESP32 code, dat een webserver en WebSocket-server opzet
- Een .h bestand dat de inhoud van de webpagina bevat
Snelle Stappen
- Als u ESP32 voor het eerst gebruikt, bekijk dan hoe u de omgeving instelt voor ESP32 in Arduino IDE.
- Verbind de ESP32 met uw PC via een micro USB-kabel
- Open Arduino IDE op uw PC
- Selecteer het juiste ESP32 bord (bijv. ESP32 Dev Module) en de juiste COM-poort
- Open de Bibliotheekbeheerder door te klikken op het Library Manager-pictogram in de linker navigatiebalk van Arduino IDE.
- Zoek naar “DIYables ESP32 WebServer” en vind de Web Server bibliotheek gemaakt door DIYables.
- Klik op de knop Install om de Web Server bibliotheek te installeren.
- Zoek naar “MD_Parola” en vind de MD_Parola bibliotheek.
- Klik op de knop Install.
- U krijgt de vraag om ook de “MD_MAX72XX” bibliotheek te installeren.
- Klik op Install All om deze afhankelijkheid te installeren.
- Maak een nieuw sketch aan in Arduino IDE en geef het een naam, bijvoorbeeld newbiely.com.ino
- Kopieer onderstaande code en open die met Arduino IDE
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/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 21 // ESP32 pin GPIO21
// 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("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("esp32io.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();
}
}
- Maak het index.h bestand aan in Arduino IDE door:
- Ofwel te klikken op de knop net onder het serial monitor-pictogram en New Tab te kiezen, of gebruik Ctrl+Shift+N.
- Geef het bestand de naam index.h en klik op OK
- Kopieer onderstaande code en plak deze in index.h.
- Nu heeft u de code verspreid over twee bestanden: newbiely.com.ino en index.h
- Klik op de knop Upload in Arduino IDE om de code naar de ESP32 te uploaden
- Open de Seriële Monitor
- Bekijk het resultaat in de Seriële Monitor
- Noteer het weergegeven IP-adres en voer dit adres in de adresbalk in van een webbrowser op uw smartphone of PC
- U ziet dan de webpagina zoals hieronder:
- Klik op de knop CONNECT om de webpagina via WebSocket met de ESP32 te verbinden
- Typ een bericht en stuur dit naar de ESP32
- U ziet de reactie van de ESP32 verschijnen
- Als u de HTML-inhoud in index.h wijzigt maar niets aanpast in newbiely.com.ino, zal Arduino IDE tijdens compileren en uploaden de HTML-inhoud niet bijwerken.
- Om ervoor te zorgen dat Arduino IDE de HTML-inhoud wel bijwerkt, maak dan een wijziging in newbiely.com.ino (bijvoorbeeld een lege regel toevoegen of een commentaarregel).
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/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>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>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
ESP32 Web Server's IP address IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
※ Notiz:
Regelsgewijze Uitleg van de Code
De bovenstaande ESP32-code bevat een regelsgewijze uitleg. Lees de commentaren in de code aandachtig!