Arduino - Matriz de LED via Web
Neste tutorial, vamos aprender a controlar uma matriz de LED por meio de uma interface web, usando um navegador no PC ou no smartphone, com o Arduino Uno R4 WiFi. Em detalhes, o Arduino Uno R4 WiFi será programado para funcionar como um servidor web. Vamos supor que o endereço IP do Arduino Uno R4 WiFi seja 192.168.0.2. Veja os detalhes de como funciona:
- Quando você digita 192.168.0.2 no navegador, o navegador envia uma requisição para o Arduino, e o Arduino responde com uma página web que contém uma caixa de mensagem.
- Você digita uma mensagem na caixa de mensagem e clica no botão de enviar. A mensagem é enviada para o Arduino.
- O Arduino mostra a mensagem na matriz de LED.
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables STEM V4B IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Sobre a Matriz de LED e o Arduino Uno R4
Se você não conhece a matriz de LED e o Arduino Uno R4 (pinagem, como funciona, como programar ...), aprenda sobre eles nos seguintes tutoriais:
Diagrama de Ligação
This image is created using Fritzing. Click to enlarge image
Código Arduino
Passos Rápidos
- Se esta é a primeira vez que você usa o Arduino Uno R4, veja como configurar o ambiente para o Arduino Uno R4 no Arduino IDE.
- Abra o Arduino IDE.
- Abra o Library Manager clicando no ícone Library Manager no lado esquerdo do Arduino IDE.
- Pesquise Web Server for Arduino Uno R4 WiFi e encontre a biblioteca Web Server criada pela DIYables.
- Clique no botão Install para adicionar a biblioteca Web Server.
- Pesquise “MD_Parola” e encontre a biblioteca MD_Parola
- Clique no botão Install.
- Será pedido que você instale a biblioteca MD_MAX72XX como dependência. Clique no botão Install All.
- Crie um novo sketch. Dê um nome a ele, por exemplo, ArduinoGetStarted.com.ino.
- Copie o código fornecido abaixo e cole no arquivo criado.
/*
* Este código de Arduino foi desenvolvido por pt.newbiely.com
* Este código de Arduino é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.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();
}
}
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Crie o arquivo index.h no Arduino IDE assim:
- Clique no botão logo abaixo do ícone do serial monitor e escolha New Tab, ou use as teclas Ctrl+Shift+N.
- Dê ao arquivo o nome index.h e clique no botão OK
- Copie o código abaixo e cole no index.h.
/*
* Este código de Arduino foi desenvolvido por pt.newbiely.com
* Este código de Arduino é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.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>
)=====";
- Agora você tem o código em dois arquivos: ArduinoGetStarted.com.ino e index.h
- Clique no botão Upload no Arduino IDE para carregar o código no Arduino
- Veja o resultado no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
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
- Você vai ver um endereço IP, por exemplo: 192.168.0.254. Este é o endereço IP do Servidor Web do Arduino
- Abra um navegador e digite o endereço IP na barra de endereços.
- Saiba que o endereço IP pode variar. Verifique o valor atual no Serial Monitor.
- Você também vai ver a saída abaixo no Serial Monitor
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
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
- Você vai ver a página web da placa Arduino no navegador, como abaixo
- Digite uma mensagem e clique no botão de enviar para mandar a mensagem para o Arduino.
- Confira o display de matriz de LED.
※ Nota:
- Se forem feitas alterações no conteúdo HTML do arquivo index.h sem nenhuma modificação no arquivo ArduinoGetStarted.com.ino, o Arduino IDE não vai atualizar automaticamente o conteúdo HTML durante a compilação e o upload do código para o Arduino Uno R4 WiFi.
- Para obrigar o Arduino IDE a atualizar o conteúdo HTML nesse caso, é preciso fazer uma modificação no arquivo ArduinoGetStarted.com.ino. Por exemplo, você pode adicionar uma linha vazia ou inserir um comentário. Isso faz o IDE reconhecer as mudanças no projeto, garantindo que o conteúdo HTML revisado seja incluído no upload.