WebApp Personalizado com Arduino Nano ESP32 e a Biblioteca DIYables ESP32 WebApps
Visão Geral
O exemplo CustomWebApp da Biblioteca DIYables ESP32 WebApps oferece um modelo inicial para criar interfaces no navegador que se integram ao ecossistema de web apps DIYables existente no Arduino Nano ESP32. O modelo estabelece uma comunicação WebSocket de duas vias entre um navegador e a placa: o navegador pode enviar comandos de texto para a placa, e a placa pode enviar dados de volta ao navegador a qualquer momento.
O exemplo é composto por quatro arquivos que devem ficar juntos na mesma pasta do sketch:
- CustomWebApp.ino — sketch principal com a lógica do aplicativo
- CustomWebApp.h — cabeçalho que define a interface da classe da página
- CustomWebApp.cpp — implementação da classe e roteamento das mensagens WebSocket
- custom_page_html.h — HTML, CSS e JavaScript embutidos da página do navegador
O Que Este Tutorial Aborda
- Executar o modelo de app personalizado padrão no Arduino Nano ESP32
- Entender o sistema de identificador de app que isola as mensagens entre vários apps
- Modificar o modelo para tratar comandos de hardware personalizados
- Enviar dados de sensores ao navegador em tempo de execução
- Personalizar o HTML, o CSS e o JavaScript da página web embutida
- Gerenciar vários apps personalizados em um projeto sem conflitos de mensagens
Hardware Necessário
Or you can buy the following kits:
| 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.
Passos
Siga estas instruções passo a passo:
- Se esta é a primeira vez que você usa o Arduino Nano ESP32, consulte o tutorial sobre como configurar o ambiente de desenvolvimento do Arduino Nano ESP32.
- Conecte a placa Arduino Nano ESP32 ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa apropriada (por exemplo, Arduino Nano ESP32) e a porta COM.
- Vá até o ícone Libraries na barra à esquerda do Arduino IDE.
- Pesquise "DIYables ESP32 WebApps" e encontre a Biblioteca DIYables ESP32 WebApps da DIYables
- Clique no botão Install para instalar a biblioteca.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Você será solicitado a instalar algumas outras dependências da biblioteca
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- No Arduino IDE, vá até File Examples DIYables ESP32 WebApps CustomWebApp. O IDE abre quatro arquivos: CustomWebApp.ino, CustomWebApp.h, CustomWebApp.cpp e custom_page_html.h.
- Atualize as credenciais de WiFi em CustomWebApp.ino:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Clique no botão Upload no Arduino IDE para fazer o upload do código para o Arduino Nano ESP32
- Abra o Serial Monitor
- A saída do Serial Monitor deve ser parecida com esta:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Starting Custom WebApp...
INFO: Added app /
INFO: Added app /custom
DIYables WebApp Library
Platform: Arduino Nano ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
Web Interface: http://192.168.0.2
WebSocket: ws://192.168.0.2:81
Available Applications:
Home Page: http://192.168.0.2/
Custom WebApp: http://192.168.0.2/custom
==========================================
- Se nada aparecer, pressione o botão de reset da placa.
- Digite o endereço IP exibido no Serial Monitor em um navegador na mesma rede.
- Exemplo: http://192.168.0.2
- A página inicial mostra um card para o aplicativo personalizado:
- Selecione o card Custom WebApp para abrir a página:
- A página também pode ser acessada diretamente em http://192.168.0.2/custom.
Verificando o Modelo Padrão
O modelo padrão demonstra a comunicação básica de duas vias:
- Digite qualquer texto no campo de entrada da página e clique em Send. A placa recebe a mensagem e a devolve como eco. A página web exibe: Echo: <your message>
- A placa envia uma mensagem de tempo de atividade a todos os navegadores conectados a cada 5 segundos: Arduino uptime: X seconds
- Todas as mensagens recebidas são impressas no Serial Monitor.
Sistema de Identificador de App
A biblioteca permite que vários web apps compartilhem um único servidor WebSocket na porta 81. Cada app é isolado por uma pequena string de prefixo chamada identificador de app. O identificador é adicionado no início de cada mensagem, nos dois sentidos.
Lado da placa (CustomWebApp.h / CustomWebApp.cpp)
// CustomWebApp.h
class CustomWebAppPage : public DIYablesWebAppPageBase {
private:
static const String APP_IDENTIFIER;
};
// CustomWebApp.cpp
const String CustomWebAppPage::APP_IDENTIFIER = "CUSTOM:";
// Receiving: strip identifier before passing to callback
void CustomWebAppPage::handleWebSocketMessage(const String& message) {
if (message.startsWith(APP_IDENTIFIER)) {
String payload = message.substring(APP_IDENTIFIER.length());
// invoke user callback with payload
}
}
// Sending: prepend identifier before broadcasting
void CustomWebAppPage::sendToWeb(const String& message) {
broadcastToAllClients(APP_IDENTIFIER + message);
}
Lado do navegador (custom_page_html.h)
const APP_IDENTIFIER = 'CUSTOM:';
// Receiving
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// display message
}
};
// Sending
ws.send(APP_IDENTIFIER + userInput);
O valor do identificador no arquivo .cpp e no arquivo .h deve ser exatamente o mesmo. Ao criar apps personalizados adicionais, atribua um identificador diferente a cada um.
Identificadores reservados — os seguintes já são usados pelos apps integrados e não devem ser reutilizados:
- Identificadores de app: CHAT:, MONITOR:, PLOTTER:, DIGITAL_PINS:, JOYSTICK:, SLIDER:, TABLE:, RTC:, ROTATOR:, GAUGE:
- Identificadores de subprotocolo: TIME:, DATETIME:, JOYSTICK_CONFIG:, PLOTTER_DATA:, PLOTTER_CONFIG:, SLIDER_VALUES:, TABLE_CONFIG:, TABLE_DATA:, VALUE_UPDATE:, PIN_CONFIG:, PIN_STATES:, PIN_UPDATE:
Adaptando o Modelo
Tratando Comandos de Hardware
Amplie o callback em CustomWebApp.ino para responder a comandos específicos:
customPage.onCustomMessageReceived([](const String& message) {
Serial.println("Received: " + message);
if (message == "led_on") {
digitalWrite(LED_BUILTIN, HIGH);
customPage.sendToWeb("LED turned ON");
}
else if (message == "led_off") {
digitalWrite(LED_BUILTIN, LOW);
customPage.sendToWeb("LED turned OFF");
}
else if (message.startsWith("servo:")) {
int angle = message.substring(6).toInt();
// servo.write(angle);
customPage.sendToWeb("Servo moved to " + String(angle) + " degrees");
}
else if (message == "get_temperature") {
float temp = readTemperatureSensor();
customPage.sendToWeb("Temperature: " + String(temp) + " C");
}
});
Enviando Dados de Sensores a Partir do Loop
void loop() {
webAppsServer.loop();
static unsigned long lastSend = 0;
if (millis() - lastSend > 3000) {
int lightLevel = analogRead(A0);
customPage.sendToWeb("Light: " + String(lightLevel));
lastSend = millis();
}
}
Personalizando a Página Web (HTML)
Edite custom_page_html.h para adicionar botões e elementos de exibição:
<div>
<h3>Device Control</h3>
<button onclick="send('led_on')">LED ON</button>
<button onclick="send('led_off')">LED OFF</button>
<label>Servo Angle:</label>
<input type="range" id="servoSlider" min="0" max="180" value="90"
onchange="send('servo:' + this.value)">
</div>
<div>
<h3>Sensor Data</h3>
<div>Temperature: <span id="tempValue">--</span></div>
<div>Light Level: <span id="lightValue">--</span></div>
</div>
Personalizando o Processamento de Mensagens (JavaScript)
Atualize ws.onmessage em custom_page_html.h para interpretar campos específicos:
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
if (message.startsWith('Temperature:')) {
document.getElementById('tempValue').textContent = message.split(':')[1].trim();
}
else if (message.startsWith('Light:')) {
document.getElementById('lightValue').textContent = message.split(':')[1].trim();
}
}
};
Personalizando o Caminho da URL
Altere o caminho em que a página é servida modificando o construtor em CustomWebApp.cpp:
// Default: accessible at /custom
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") {}
// Change to a descriptive path
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/temperature") {}
O caminho deve começar com / e não deve duplicar caminhos usados pelos apps integrados (/chat, /monitor, /plotter, /web-digital-pins, /web-joystick, /web-slider, /web-table, /web-rtc, /web-rotator, /web-gauge).
Gerenciando Vários Apps Personalizados
Ao adicionar mais de uma página personalizada, cada uma deve ter um identificador único, um caminho único e um nome de classe único.
Estrutura de Arquivos
MyProject/
├── MyProject.ino
├── TemperatureApp.h
├── TemperatureApp.cpp
├── temperature_page_html.h
├── MotorApp.h
├── MotorApp.cpp
├── motor_page_html.h
├── SensorApp.h
├── SensorApp.cpp
└── sensor_page_html.h
Registrando Vários Apps
#include "TemperatureApp.h"
#include "MotorApp.h"
#include "SensorApp.h"
DIYablesHomePage homePage;
TemperatureMonitorPage tempPage;
MotorControllerPage motorPage;
SensorDashboardPage sensorPage;
void setup() {
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&tempPage);
webAppsServer.addApp(&motorPage);
webAppsServer.addApp(&sensorPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
tempPage.onTemperatureMessageReceived([](const String& message) {
// handle temperature commands
});
motorPage.onMotorMessageReceived([](const String& message) {
// handle motor commands
});
}
Identificadores Únicos por App
// TemperatureApp.cpp
const String TemperatureMonitorPage::APP_IDENTIFIER = "TEMP:";
// MotorApp.cpp
const String MotorControllerPage::APP_IDENTIFIER = "MOTOR:";
// SensorApp.cpp
const String SensorDashboardPage::APP_IDENTIFIER = "SENSOR:";
As constantes JavaScript correspondentes em cada arquivo *_page_html.h devem usar os mesmos valores de string.