Arduino - Matriz de LEDs vía Web
En este tutorial, vamos a aprender cómo controlar una matriz de LEDs a través de una interfaz web usando un navegador en un PC o un teléfono inteligente, utilizando el Arduino Uno R4 WiFi. En detalle, el Arduino Uno R4 WiFi se programará para funcionar como un servidor web. Tomemos como suposición que la dirección IP del Arduino Uno R4 WiFi es 192.168.0.2. A continuación se muestran los detalles de cómo funciona:
- Cuando ingresas 192.168.0.2 en el navegador web, el navegador envía una solicitud al Arduino, y el Arduino responde con una página web que contiene un cuadro de mensaje.
- Escribes un mensaje en el cuadro de mensaje y haces clic en el botón de enviar. El mensaje se envía al Arduino.
- Arduino muestra el mensaje en la Matriz LED.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 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 de LEDs y Arduino Uno R4
Si no conoces la matriz LED y el Arduino Uno R4 (disposición de pines, cómo funciona, cómo programar ...), aprende sobre ellos en los siguientes tutoriales:
Diagrama de Cableado
This image is created using Fritzing. Click to enlarge image
Código de Arduino
Pasos R\u00e1pidos
- Si es la primera vez que usas Arduino Uno R4, consulta cómo configurar el entorno para Arduino Uno R4 en Arduino IDE.
- Abre el IDE de Arduino.
- Abre el Administrador de Bibliotecas haciendo clic en el icono Administrador de Bibliotecas en el lado izquierdo del IDE de Arduino.
- Busca Web Server for Arduino Uno R4 WiFi y localiza la biblioteca Web Server creada por DIYables.
- Haz clic en el botón Instalar para añadir la biblioteca Web Server.
- Busca “MD_Parola”, y luego localiza la biblioteca MD_Parola
- Haz clic en el botón Instalar.
- Se le pedirá que instale la biblioteca MD_MAX72XX como dependencia. Haga clic en el botón Instalar todo.
- Crea un nuevo sketch. Dale un nombre, por ejemplo, ArduinoGetStarted.com.ino.
- Copia el código proporcionado a continuación y pégalo en el archivo creado.
/*
* Este código de Arduino fue desarrollado por es.newbiely.com
* Este código de Arduino se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino/arduino-led-matrix-via-web
*/
#include <UnoR4WiFi_WebServer.h>
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include "index.h"
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4 // 4 blocks
#define CS_PIN 3
// create an instance of the MD_Parola class
MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
// Create web server instance
UnoR4WiFi_WebServer server;
// Handler for LED matrix control
void handleMatrix(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Check for message parameter in query string
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "message") {
String message = params.params[i].value;
Serial.print("message: ");
Serial.println(message);
ledMatrix.displayClear(); // clear led matrix display
ledMatrix.displayScroll(message.c_str(), PA_CENTER, PA_SCROLL_LEFT, 100);
break;
}
}
String html = String(HTML_CONTENT);
server.sendResponse(client, html.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
// Initialize LED matrix
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("Hello, DIYables", PA_CENTER, PA_SCROLL_LEFT, 100);
Serial.println("Arduino Uno R4 WiFi - LED Matrix Web Control");
// Connect to WiFi
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println(" connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Configure routes
server.addRoute("/", handleMatrix);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
if (ledMatrix.displayAnimate()) {
ledMatrix.displayReset();
}
}
- Cambia la información de WiFi (SSID y contraseña) en el código por la tuya
- Crea el archivo index.h en el IDE de Arduino mediante:
- Haz clic en el botón justo debajo del icono del monitor serie y elige Nueva pestaña, o usa Ctrl+Shift+N teclas.
- Introduce el nombre del archivo index.h y haz clic en el botón Aceptar
- Copie el código que se muestra a continuación y péguelo en el index.h.
/*
* Este código de Arduino fue desarrollado por es.newbiely.com
* Este código de Arduino se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino/arduino-led-matrix-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino LED Matrix Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body {
font-size: 16px;
}
.user-input {
margin-bottom: 20px;
}
.user-input input {
flex: 1;
border: 1px solid #444;
padding: 5px;
}
.user-input input[type="submit"] {
margin-left: 5px;
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Arduino - LED Matrix via Web</h2>
<form class="user-input" action="" method="GET">
<input type="text" id="message" name="message" placeholder="Message to LED Matrix...">
<input type="submit" value="Send">
</form>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</body>
</html>
)=====";
- Ahora tienes el código en dos archivos: ArduinoGetStarted.com.ino y index.h
- Haz clic en el botón Subir en el IDE de Arduino para subir el código al Arduino
- Ve el resultado en el Monitor Serial.
COM6
Arduino Uno R4 WiFi - LED Matrix Web Control
Connecting to YOUR_WIFI_SSID
connected!
IP address: 192.168.0.254
Starting web server on IP: 192.168.0.254
=== Web Server Ready! ===
Visit: http://192.168.0.254
Autoscroll
Clear output
9600 baud
Newline
- Verá una dirección IP, por ejemplo: 192.168.0.254. Esta es la dirección IP del servidor web de Arduino.
- Abra un navegador web e introduzca una de las direcciones IP en la barra de direcciones.
- Tenga en cuenta que la dirección IP podría variar. Por favor, verifique el valor actual en el Monitor Serial.
- También verá la siguiente salida en el Monitor Serial.
COM6
Arduino Uno R4 WiFi - LED Matrix Web Control
Connecting to YOUR_WIFI_SSID
connected!
IP address: 192.168.0.254
Starting web server on IP: 192.168.0.254
=== Web Server Ready! ===
Visit: http://192.168.0.254
Method: GET
Requested path: /
Query param: message=Hello
message: Hello
Client disconnected
Autoscroll
Clear output
9600 baud
Newline
- Verá la página web de la placa Arduino en el navegador web como se muestra a continuación
- Escribe un mensaje y haz clic en el botón Enviar para enviar el mensaje a Arduino.
- Echa un vistazo a la pantalla de la matriz LED.
※ Nota:
- Si se realizan modificaciones en el contenido HTML dentro del archivo index.h sin ninguna modificación en el archivo ArduinoGetStarted.com.ino, el IDE de Arduino no actualizará ni refrescará automáticamente el contenido HTML durante la compilación y la carga del código al ESP32.
- Para obligar al IDE de Arduino a actualizar el contenido HTML en tal escenario, es necesario realizar una modificación en el archivo ArduinoGetStarted.com.ino. Por ejemplo, puedes añadir una línea en blanco o insertar un comentario. Esta acción provoca que el IDE reconozca los cambios en el proyecto, asegurando que el contenido HTML revisado se incluya en la carga.