Autor: saviodiow
Vizualizações: 230
Data de publicação: 25 de Junho de 2024 às 11:42
Controle de Variáveis no Arduino Uno R4 WiFi com Página Web
Neste tutorial, vamos aprender como controlar variáveis no Arduino Uno R4 WiFi utilizando uma página web gerada pelo próprio Arduino. Este projeto faz uso da matriz de LEDs integrada do Arduino Uno R4 WiFi. O objetivo é criar uma interface web que permita controlar o estado de cada LED individualmente.
Materiais Necessários
- Arduino Uno R4 WiFi
- Cabo USB para conexão com o computador
Passo a Passo
1. Configuração Inicial
Primeiro, vamos configurar nosso ambiente de desenvolvimento. Certifique-se de ter a biblioteca WiFiS3 instalada, assim como a biblioteca Arduino_LED_Matrix.
2. Código do Arduino
Aqui está o código completo. Vamos analisar cada parte em detalhes a seguir:
#include "WiFiS3.h"
#include "arduino_secrets.h"
#include "Arduino_LED_Matrix.h"
// Dados confidenciais na aba Secret/arduino_secrets.h
char ssid[] = SECRET_SSID; // seu SSID de rede (nome)
char pass[] = SECRET_PASS; // sua senha de rede (use para WPA ou como chave para WEP)
int keyIndex = 0; // seu número de índice de chave de rede (necessário apenas para WEP)
int status = WL_IDLE_STATUS;
ArduinoLEDMatrix matrixLed;
WiFiServer server(80);
const int rows = 8;
const int cols = 12;
uint8_t matrix[rows][cols] = { 0 }; // Matriz interna para armazenar os estados das células
void setup() {
Serial.begin(9600);
while (status != WL_CONNECTED) {
Serial.print("Tentando conectar ao SSID: ");
Serial.println(ssid);
status = WiFi.begin(ssid, pass);
delay(10000);
}
server.begin();
printWifiStatus();
matrixLed.begin();
}
void loop() {
WiFiClient client = server.available();
if (client) {
Serial.println("Novo cliente");
boolean currentLineIsBlank = true;
String httpRequest = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
httpRequest += c;
Serial.write(c);
if (c == '\n' && currentLineIsBlank) {
if (httpRequest.startsWith("GET /update")) {
int row = -1, col = -1, state = -1;
sscanf(httpRequest.c_str(), "GET /update?row=%d&col=%d&state=%d", &row, &col, &state);
if (isValidRequest(row, col, state)) {
matrix[row][col] = state;
printMatrix();
sendResponse(client, "Atualização recebida");
} else {
sendResponse(client, "Parâmetros inválidos");
}
} else {
sendHTML(client);
}
break;
}
if (c == '\n') {
currentLineIsBlank = true;
} else if (c != '\r') {
currentLineIsBlank = false;
}
}
}
delay(1);
client.stop();
Serial.println("Cliente desconectado");
}
printMatrix();
}
void printMatrix() {
matrixLed.renderBitmap(matrix, 8, 12);
}
void printWifiStatus() {
Serial.print("SSID: ");
Serial.println(WiFi.SSID());
IPAddress ip = WiFi.localIP();
Serial.print("Endereço IP: ");
Serial.println(ip);
long rssi = WiFi.RSSI();
Serial.print("Intensidade do sinal (RSSI): ");
Serial.print(rssi);
Serial.println(" dBm");
}
bool isValidRequest(int row, int col, int state) {
return (row >= 0 && row < rows && col >= 0 && col < cols && (state == 0 || state == 1));
}
void sendResponse(WiFiClient& client, const char* message) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/plain");
client.println("Connection: close");
client.println();
client.println(message);
}
void sendHTML(WiFiClient& client) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE html>");
client.println("<html lang='pt'>");
client.println("<head>");
client.println("<meta charset='UTF-8'>");
client.println("<meta name='viewport' content='width=device-width, initial-scale=1.0'>");
client.println("<title>Matriz Colorida</title>");
client.println("<style>");
client.println(" table {");
client.println(" border-collapse: collapse;");
client.println(" margin: 20px auto;");
client.println(" }");
client.println(" td {");
client.println(" width: 50px;");
client.println(" height: 50px;");
client.println(" border: 1px solid #ccc;");
client.println(" cursor: pointer;");
client.println(" }");
client.println("</style>");
client.println("</head>");
client.println("<body>");
client.println(" <table id='matrix'>");
client.println(" </table>");
client.println(" <script>");
client.println(" document.addEventListener('DOMContentLoaded', function() {");
client.println(" const matrixContainer = document.getElementById('matrix');");
client.println(" const rows = 8;");
client.println(" const cols = 12;");
client.println(" const matrix = " + getMatrixJSON() + ";");
client.println(" for (let i = 0; i < rows; i++) {");
client.println(" let row = document.createElement('tr');");
client.println(" for (let j = 0; j < cols; j++) {");
client.println(" let cell = document.createElement('td');");
client.println(" if (matrix[i][j] === 1) {");
client.println(" cell.style.backgroundColor = 'black';");
client.println(" }");
client.println(" cell.addEventListener('click', function() {");
client.println(" let newState = 0;");
client.println(" if (this.style.backgroundColor === 'black') {");
client.println(" this.style.backgroundColor = '';");
client.println(" } else {");
client.println(" this.style.backgroundColor = 'black';");
client.println(" newState = 1;");
client.println(" }");
client.println(" fetch(`/update?row=${i}&col=${j}&state=${newState}`);");
client.println(" });");
client.println(" row.appendChild(cell);");
client.println(" }");
client.println(" matrixContainer.appendChild(row);");
client.println(" }");
client.println(" });");
client.println(" </script>");
client.println("</body>");
client.println("</html>");
}
String getMatrixJSON() {
String json = "[";
for (int i = 0; i < rows; i++) {
json += "[";
for (int j = 0; j < cols; j++) {
json += String(matrix[i][j]);
if (j < cols - 1) {
json += ",";
}
}
json += "]";
if (i < rows - 1) {
json += ",";
}
}
json += "]";
return json;
}
3. Explicação do Código
Importação de Bibliotecas
#include "WiFiS3.h"
#include "arduino_secrets.h"
#include "Arduino_LED_Matrix.h"
Estas linhas importam as bibliotecas necessárias para conexão WiFi e controle da matriz de LEDs.
Configuração das Credenciais de Rede no arquivo arduino_secrets.h
char ssid[] = SECRET_SSID; // seu SSID de rede (nome)
char pass[] = SECRET_PASS; // sua senha de rede (use para WPA ou como chave para WEP)
Substitua SECRET_SSID e SECRET_PASS com o nome e senha de sua rede WiFi.
Inicialização do Servidor
WiFiServer server(80);
Cria um servidor web na porta 80, que é a padrão usada no navegador.
Setup
void setup() {
Serial.begin(9600);
while (status != WL_CONNECTED) {
Serial.print("Tentando conectar ao SSID: ");
Serial.println(ssid);
status = WiFi.begin(ssid, pass);
delay(10000);
}
server.begin();
printWifiStatus();
matrixLed.begin();
}
Configura a comunicação serial e tenta conectar à rede WiFi. Após a conexão, inicializa o servidor e a matriz de LEDs.
Loop Principal
void loop() {
WiFiClient client = server.available();
if (client) {
Serial.println("Novo cliente");
boolean currentLineIsBlank = true;
String httpRequest = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
httpRequest += c;
Serial.write(c);
if (c == '\n' && currentLineIsBlank) {
if (httpRequest.startsWith("GET /update")) {
int row = -1, col = -1, state = -1;
sscanf(httpRequest.c_str(), "GET /update?row=%d&col=%d&state=%d", &row, &col, &state);
if (isValidRequest(row, col, state)) {
matrix[row][col] = state;
printMatrix();
sendResponse(client, "Atualização recebida");
} else {
sendResponse(client, "Parâmetros inválidos");
}
} else {
sendHTML(client);
}
break;
}
if (c == '\n') {
currentLineIsBlank = true;
} else if (c != '\r') {
currentLineIsBlank = false;
}
}
}
delay(1);
client.stop();
Serial.println("Cliente desconectado");
}
printMatrix();
}
Esta função aguarda por conexões de clientes, lê as solicitações HTTP e processa as atualizações na matriz de LEDs conforme necessário.
Funções Auxiliares
void printMatrix() {
matrixLed.renderBitmap(matrix, 8, 12);
}
Renderiza a matriz de LEDs com base no estado atual armazenado em matrix.
void printWifiStatus() {
Serial.print("SSID: ");
Serial.println(WiFi.SSID());
IPAddress ip = WiFi.localIP();
Serial.print("Endereço IP: ");
Serial.println(ip);
long rssi = WiFi.RSSI();
Serial.print("Intensidade do sinal (RSSI): ");
Serial.print(rssi);
Serial.println(" dBm");
}
Imprime o status da conexão WiFi no console serial.
bool isValidRequest(int row, int col, int state) {
return (row >= 0 && row < rows && col >= 0 && col < cols && (state == 0 || state == 1));
}
Valida as solicitações HTTP para garantir que os parâmetros estão dentro dos limites.
void sendResponse(WiFiClient& client, const char* message) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/plain");
client.println("Connection: close");
client.println();
client.println(message);
}
Envia uma resposta simples ao cliente(navegador).
void sendHTML(WiFiClient& client) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE html>");
client.println("<html lang='pt'>");
client.println("<head>");
client.println("<meta charset='UTF-8'>");
client.println("<meta name='viewport' content='width=device-width, initial-scale=1.0'>");
client.println("<title>Matriz Colorida</title>");
client.println("<style>");
client.println(" table {");
client.println(" border-collapse: collapse;");
client.println(" margin: 20px auto;");
client.println(" }");
client.println(" td {");
client.println(" width: 50px;");
client.println(" height: 50px;");
client.println(" border: 1px solid #ccc;");
client.println(" cursor: pointer;");
client.println(" }");
client.println("</style>");
client.println("</head>");
client.println("<body>");
client.println(" <table id='matrix'>");
client.println(" </table>");
client.println(" <script>");
client.println(" document.addEventListener('DOMContentLoaded', function() {");
client.println(" const matrixContainer = document.getElementById('matrix');");
client.println(" const rows = 8;");
client.println(" const cols = 12;");
client.println(" const matrix = " + getMatrixJSON() + ";");
client.println(" for (let i = 0; i < rows; i++) {");
client.println(" let row = document.createElement('tr');");
client.println(" for (let j = 0; j < cols; j++) {");
client.println(" let cell = document.createElement('td');");
client.println(" if (matrix[i][j] === 1) {");
client.println(" cell.style.backgroundColor = 'black';");
client.println(" }");
client.println(" cell.addEventListener('click', function() {");
client.println(" let newState = 0;");
client.println(" if (this.style.backgroundColor === 'black') {");
client.println(" this.style.backgroundColor = '';");
client.println(" } else {");
client.println(" this.style.backgroundColor = 'black';");
client.println(" newState = 1;");
client.println(" }");
client.println(" fetch(`/update?row=${i}&col=${j}&state=${newState}`);");
client.println(" });");
client.println(" row.appendChild(cell);");
client.println(" }");
client.println(" matrixContainer.appendChild(row);");
client.println(" }");
client.println(" });");
client.println(" </script>");
client.println("</body>");
client.println("</html>");
}
Gera e envia uma página HTML com uma tabela interativa que representa a matriz de LEDs. Cada célula da tabela pode ser clicada para alterar seu estado.
String getMatrixJSON() {
String json = "[";
for (int i = 0; i < rows; i++) {
json += "[";
for (int j = 0; j < cols; j++) {
json += String(matrix[i][j]);
if (j < cols - 1) {
json += ",";
}
}
json += "]";
if (i < rows - 1) {
json += ",";
}
}
json += "]";
return json;
}
Converte o estado atual da matriz em uma string JSON para ser utilizada na página HTML.
4. Testando o Projeto
- Compile e envie o código para o Arduino Uno R4 WiFi.
- Abra o Monitor Serial para visualizar o status da conexão WiFi.
- Conecte-se ao endereço IP exibido no monitor serial usando um navegador web.
- Interaja com a matriz de LEDs clicando nas células da tabela para ligar ou desligar os LEDs.
Agora você tem um sistema interativo para controlar uma matriz de LEDs através de uma página web, utilizando o Arduino Uno R4 WiFi. Aproveite para explorar e personalizar o projeto conforme suas necessidades!