SENSORES/ATUADORES

INTERNET DAS COISAS (IoT)

Arduino Nano ESP32 - Ethernet

Biblioteca DIYables ESP32 WebApps para Arduino Nano ESP32

Biblioteca DIYables ESP32 WebApps

A Biblioteca DIYables ESP32 WebApps oferece um conjunto de interfaces prontas, baseadas em navegador, para o Arduino Nano ESP32. Em vez de escrever código HTML, JavaScript e WebSocket do zero, você inclui a biblioteca, registra as páginas de que precisa e conecta callbacks à lógica do seu sketch.

A placa executa um servidor HTTP e um servidor WebSocket ao mesmo tempo. Os navegadores abrem uma página via HTTP e depois passam para uma conexão WebSocket para todas as atualizações em tempo real. A biblioteca encaminha automaticamente as mensagens recebidas para a página registrada correta.

Você pode interagir com o seu Arduino Nano ESP32 por meio de um navegador em um celular ou PC usando três abordagens:

Apps pré-prontos: Use qualquer um dos 11 aplicativos fornecidos, sem precisar de programação web
Apps personalizados: Modifique o HTML, CSS ou JavaScript das páginas pré-prontas para atender às suas necessidades
Apps customizados: Crie suas próprias páginas estendendo DIYablesWebAppPageBase

Principais Recursos

Design modular — inclua apenas as páginas de que o seu projeto precisa
11 aplicativos web prontos para uso, cobrindo monitoramento, controle e visualização
HTML/CSS/JS minificados para reduzir o uso de flash; o código-fonte não minificado é fornecido para edição
Modelo de app customizado com roteamento de mensagens WebSocket já integrado
Atualizações em tempo real baseadas em WebSocket, com reconexão automática do navegador
Layout responsivo — as páginas funcionam em desktop, tablet e celular
API de callbacks — sem polling; a biblioteca chama o seu código quando os eventos ocorrem
Várias páginas ativas ao mesmo tempo em uma única instância de servidor

Instalação

Instale a biblioteca pelo Library Manager da Arduino IDE:

Abra a Arduino IDE
Vá até o ícone Libraries na barra à esquerda da Arduino IDE.
Pesquise por "DIYables ESP32 WebApps" e encontre a DIYables ESP32 WebApps Library, de DIYables
Clique no botão Install para instalar a biblioteca.

Search for DIYables ESP32 WebApps created by DIYables and click the Install button.

Newbiely | Arduino IDE 2.3.8

──

☐

Library Manager

DIYables ESP32 WebApps

All

DIYables ESP32 WebApps by DIYables

A comprehensive library designed for ESP32 that provides multiple professional web applications including Web Monitor, Chat, Digital Pin Control, Sliders, Joystick, Analog Gauge, Rotator Control, and Temperature Display via WebSocket communication. Features modular architecture for memory efficiency, automatic config handling, and perfect for IoT projects, robotics, sensor monitoring, servo/stepper control, temperature monitoring, and remote ESP32 control. More info

1.0.1

INSTALL

Newbiely.ino

···

1 void setup() {

Output

Serial Monitor

Ln 1, Col 1

Arduino Nano ESP32 on COM15

Será solicitado que você instale algumas outras dependências da biblioteca
Clique no botão Install All para instalar todas as dependências da biblioteca.

Dependências

DIYables_ESP32_WebServer — fornece o servidor HTTP e WebSocket subjacente

Aplicativos Web Disponíveis

Página Inicial (`/`)

Página central de navegação que mostra links para todos os aplicativos registrados. Exibe o status da conexão e é atualizada automaticamente quando apps são adicionados ou removidos.

Web Monitor (`/webmonitor`)

Serial monitor baseado em navegador, com texto bidirecional. Suporta entrada de comandos com histórico, horário das mensagens e contagem de mensagens.

Web Chat (`/webchat`)

Interface de mensagens bidirecional entre o navegador e a placa. Cada lado pode enviar e receber mensagens de texto simples.

Web Digital Pins (`/webdigitalpins`)

Controle e leitura dos pinos digitais 0–13. Cada pino é habilitado individualmente no código como WEB_PIN_INPUT ou WEB_PIN_OUTPUT. A página mostra apenas os pinos habilitados e suporta operações em lote.

Web Slider (`/webslider`)

Dois sliders independentes com faixa de 0–255. Adequado para ciclo de trabalho PWM, brilho, velocidade ou qualquer outra saída analógica de 8 bits.

Web Joystick (`/webjoystick`)

Joystick 2D virtual que retorna valores X/Y na faixa de –100 a +100. Suporta entrada por toque e por mouse. O retorno automático ao centro é configurável no código.

Web Analog Gauge (`/web-gauge`)

Medidor circular para monitoramento de sensores em tempo real. A faixa, as unidades e a precisão são definidas uma única vez no construtor. Zonas coloridas indicam as regiões de operação.

Web Rotator (`/web-rotator`)

Disco rotativo para controlar a posição de um servo ou motor de passo. Suporta os modos contínuo (0–360°) e de faixa limitada. Retorna o ângulo atual via WebSocket.

Web Temperature (`/web-temperature`)

Visualização de termômetro no estilo de mercúrio. A faixa de temperatura e a unidade (°C, °F ou K) são configuradas no construtor. Atualiza em tempo real via WebSocket.

Web RTC (`/web-rtc`)

Exibição de relógio em tempo real. O navegador pode sincronizar o horário local com a placa com um clique. Mostra a diferença de horário entre os relógios do navegador e da placa.

Web Table (`/web-table`)

Tabela de atributo-valor com duas colunas. Os nomes das colunas e os rótulos das linhas são definidos no setup; os valores são atualizados durante a execução, sem recarregar a página. Suporta até 20 linhas por padrão.

Web Plotter (`/webplotter`)

Gráfico de linhas em fluxo que suporta até 8 séries de dados. O eixo Y se ajusta automaticamente ou usa limites fixos. O título e os rótulos dos eixos são configuráveis.

Modelo de App Web Customizado (`/custom`)

Ponto de partida para páginas definidas pelo usuário. O modelo cuida do roteamento de mensagens WebSocket, da reconexão e do registro do card na página inicial. Modifique o HTML, o CSS e os tratadores de mensagens para o seu caso de uso.

Referência de URLs

\| Aplicativo \| Caminho da URL \|
\|---\|---\|
\| Página Inicial \| / \|
\| Web Monitor \| /webmonitor \|
\| Web Chat \| /webchat \|
\| Web Digital Pins \| /webdigitalpins \|
\| Web Slider \| /webslider \|
\| Web Joystick \| /webjoystick \|
\| Web Analog Gauge \| /web-gauge \|
\| Web Rotator \| /web-rotator \|
\| Web Temperature \| /web-temperature \|
\| Web RTC \| /web-rtc \|
\| Web Table \| /web-table \|
\| Web Plotter \| /webplotter \|
\| Custom (modelo) \| /custom \|

Acesse qualquer página em http://[board-ip][path] depois que a placa se conectar ao WiFi.

Arquitetura Modular

A biblioteca é estruturada de modo que cada aplicativo web seja uma classe independente. Apenas as classes que você instancia e registra são compiladas no seu binário. Se você não chamar addApp(&joystickPage), o código dessa página não é executado e o HTML dela não ocupa memória flash.

Este exemplo registra apenas uma página de slider e uma de medidor, omitindo as demais:

DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; DIYablesWebSliderPage webSliderPage; DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); void setup() { webAppsServer.addApp(&homePage); webAppsServer.addApp(&webSliderPage); webAppsServer.addApp(&gaugePage); webAppsServer.begin("WiFi_SSID", "password"); }

As páginas também podem ser adicionadas ou removidas durante a execução usando addApp() e removeApp().

Referência da API

Documentação completa das classes e métodos: Referência da API da Biblioteca DIYables ESP32 WebApps

Tutoriais de Exemplo

Uso Avançado

Gerenciamento de Páginas em Tempo de Execução

As páginas podem ser registradas condicionalmente, com base na presença de hardware ou no estado em tempo de execução:

// Add dynamically when a sensor is detected if (sensorConnected && !webAppsServer.getApp("/webmonitor")) { webAppsServer.addApp(new DIYablesWebMonitorPage()); } // Remove a page to reclaim memory webAppsServer.removeApp("/chat"); // Retrieve a typed page pointer for direct method calls DIYablesWebDigitalPinsPage* pinsPage = webAppsServer.getWebDigitalPinsPage(); if (pinsPage) { pinsPage->enablePin(2, WEB_PIN_OUTPUT); }

Páginas Customizadas

Estenda DIYablesWebAppPageBase para criar uma página com qualquer HTML e qualquer formato de mensagem WebSocket:

class MySensorDashboard : public DIYablesWebAppPageBase { public: MySensorDashboard() : DIYablesWebAppPageBase("/sensors") {} void handleHTTPRequest(WiFiClient& client) override { sendHTTPHeader(client); client.print("<h1>Sensor Dashboard</h1>"); client.print("<p>Temperature: " + String(getTemperature()) + " C</p>"); } void handleWebSocketMessage(WebSocket& ws, const String& message) override { if (message == "get_data") { sendWebSocketMessage(ws, "temp:" + String(getTemperature())); } } }; webAppsServer.addApp(new MySensorDashboard());

Solução de Problemas

O WiFi não conecta

Confirme se o SSID e a senha estão corretos
A placa suporta apenas redes de 2,4 GHz; redes de 5 GHz não são suportadas
Verifique a intensidade do sinal no local físico da placa

O navegador não consegue acessar a página

Confirme o endereço IP exibido no Serial Monitor
Verifique se o navegador e a placa estão na mesma rede
Desative a VPN, se estiver ativa

O WebSocket desconecta com frequência

Verifique se webAppsServer.loop() está sendo chamado a cada iteração de loop()
Evite chamadas bloqueantes (delay(), leituras I2C lentas) que travam o loop de eventos
Verifique a memória heap disponível no Serial Monitor

Alto uso de memória

Remova as páginas que o projeto não precisa
Reduza setMaxSamples() na página do plotter
Reduza o número máximo de linhas na página da tabela

Tutoriais Relacionados

※ NOSSAS MENSAGENS

Fique à vontade para compartilhar o link deste tutorial. Porém, por favor, não use nosso conteúdo em outros sites. Investimos muito esforço e tempo para criar este conteúdo, por favor respeite nosso trabalho!