ESP8266 - Matriz LED a través de la web
En este tutorial, aprenderemos a controlar un cartel de matriz de LEDs a través de una interfaz web utilizando ESP8266. En detalle, programaremos el ESP8266 para que se convierta en un servidor web que haga lo siguiente:
- Devuelve una interfaz web a los usuarios cuando se recibe una solicitud desde un navegador web.
- Proporciona la interfaz web a través de la cual los usuarios pueden enviar el mensaje al ESP8266.
- Muestra los mensajes en la matriz de LED una vez que se recibe el mensaje.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Acerca de la Matriz LED y del Servidor Web
Podemos usar HTTP puro para enviar un texto desde la interfaz web al ESP8266. Sin embargo, usar WebSocket lo hace parecer más receptivo y no añade mucha dificultad. Por lo tanto, en este tutorial usaremos WebSocket.
¿No está familiarizado con la Matriz LED, el servidor web y WebSocket, incluyendo sus conexiones de pines, funcionamiento y programación? Explora tutoriales completos sobre estos temas a continuación:
- ESP8266 - LED Matrix tutorial
- ESP8266 - Web Server tutorial
- ESP8266 - WebSocket tutorial
Diagrama de Cableado
This image is created using Fritzing. Click to enlarge image
Para obtener m\u00e1s informaci\u00f3n, consulte Pines del ESP8266 y c\u00f3mo alimentar ESP8266 y otros componentes.
Código ESP8266
El contenido de la página web (HTML, CSS, JavaScript) se almacena por separado en un archivo index.h. Por lo tanto, tendremos dos archivos de código en el IDE de Arduino:
- Un archivo .ino con código para ESP8266, que crea un servidor web y un servidor WebSocket
- Un archivo .h que contiene el contenido de la página web
Pasos R\u00e1pidos
Para empezar con ESP8266 en el IDE de Arduino, siga estos pasos:
- Consulta el tutorial de cómo configurar el entorno para ESP8266 en Arduino IDE si es la primera vez que usa ESP8266.
- Conecte los componentes tal como se muestran en el diagrama.
- Conecte la placa ESP8266 a su computadora mediante un cable USB.
- Abra Arduino IDE en su computadora.
- Elija la placa ESP8266 correcta, como (p. ej. NodeMCU 1.0 (ESP-12E Module)), y su puerto COM respectivo.
- Abra el Administrador de Bibliotecas haciendo clic en el icono Administrador de Bibliotecas en la barra de navegación izquierda de Arduino IDE.
- Busque “WebSockets”, luego localice la biblioteca WebSockets creada por Markus Sattler.
- Haga clic en el botón Instalar para instalar la biblioteca WebSockets.
- Busca “MD_Parola”, luego localiza la biblioteca MD_Parola
- Haz clic en el botón Instalar.
- Se le pedirá instalar la biblioteca “MD_MAX72XX”
- Haz clic en el botón Instalar todo para instalar la dependencia
- En Arduino IDE, crea un nuevo sketch y ponle un nombre, por ejemplo, newbiely.com.ino
- Copia el código de abajo y ábrelo con Arduino IDE
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-led-matrix-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.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
DIYables_ESP32_WebSocket* webSocket;
// 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();
}
}
- Crea el archivo index.h en el IDE de Arduino haciendo:
- Ya sea hacer clic en el botón justo debajo del icono del monitor serie y elegir Nueva pestaña, o usar las teclas Ctrl+Shift+N
- Introduce el nombre del archivo index.h y haz clic en el botón Aceptar
- Copia el código que se muestra abajo y pégalo en index.h.
- Ahora tienes el código en dos archivos: newbiely.com.ino y index.h
- Haz clic en el botón Subir en el IDE de Arduino para cargar el código al ESP8266.
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial.
- Toma nota de la dirección IP que se muestra y escribe esa dirección en la barra de direcciones de un navegador web en tu teléfono inteligente o PC.
- Verás la página web como se muestra a continuación:
- Haz clic en el botón Conectar para conectar la página web al ESP8266 a través de WebSocket.
- Escribe algunas palabras y envíalas al ESP8266.
- Verás la respuesta del ESP8266.
- Si modifica el contenido HTML en el index.h y no toca nada en el archivo newbiely.com.ino, al compilar y subir el código al ESP8266, el IDE de Arduino no actualizará el contenido HTML.
- Para que el IDE de Arduino actualice el contenido HTML en este caso, haga un cambio en el newbiely.com.ino (p. ej. añadir una línea en blanco, añadir un comentario...)
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/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
※ Nota:
Explicación del código línea por línea
El código anterior de ESP8266 contiene una explicación línea por línea. ¡Por favor lea los comentarios en el código!