Home
ESP32

Biblioteca DIYables ESP32 WebApps - Framework Completo de Aplicações Web para ESP32

Biblioteca DIYables ESP32 WebApps

Uma biblioteca ESP32 completa para criar aplicações web baseadas em WebSocket no ESP32. Esta biblioteca oferece vários web apps prontos para usar, para monitorar, controlar e interagir com seus projetos ESP32 por meio de uma interface web moderna.

Com esta biblioteca, você pode interagir com o seu ESP32 por um navegador web no celular ou no PC de uma destas formas:

  • Use os web apps prontos entre as 11 aplicações fornecidas, sem nenhum conhecimento de programação web
  • Personalize os web apps prontos para atender aos requisitos específicos do seu projeto
  • Crie e adicione seus próprios web apps usando a arquitetura flexível do framework
DIYables ESP32 WebApps

🚀 Recursos

  • Arquitetura Modular: Adicione apenas os web apps de que você precisa para otimizar o uso de memória
  • Eficiente em Memória: Cada web app pode ser ativado/desativado de forma independente
  • Memória Otimizada: Os códigos HTML, JavaScript e CSS são minificados para reduzir o tamanho do código, mantendo a interface e a funcionalidade. O código-fonte original sem minificação está incluído na biblioteca para referência e personalização
  • 11 Aplicações Web Prontas: Controle completo do ESP32 sem exigir conhecimento de programação web
    • Home Page: Central com links para todas as aplicações web
    • Web Monitor: Serial monitor em tempo real no seu navegador via WebSocket
    • Web Chat: Interface de chat interativa com o seu Arduino
    • Web Digital Pins: Controle e monitore todos os pinos digitais pela interface web
    • Web Slider: Controles deslizantes duplos para saídas analógicas/PWM
    • Web Joystick: Joystick interativo para controle de robôs e veículos
    • Web Analog Gauge: Medidor circular para monitoramento de sensores
    • Web Rotator: Controle de disco giratório com modos contínuo/limitado
    • Web Temperature: Visualização de termômetro com faixas configuráveis
    • Web RTC: Relógio de tempo real com sincronização de horário e tratamento de fuso horário
    • Web Table: Tabela de atributo-valor com duas colunas e atualizações em tempo real
    • Web Plotter: Visualização e plotagem de dados em tempo real
  • Template de Web App Personalizado: Template completo para criar suas próprias aplicações web com comunicação WebSocket em tempo real
  • Design Responsivo: Funciona em computadores e dispositivos móveis
  • Comunicação em Tempo Real: Baseada em WebSocket para atualizações instantâneas
  • Integração Fácil: API simples baseada em callbacks
  • Suporte a Vários Apps: Permite adicionar vários web apps ao mesmo tempo
  • Integração Automática com a Home Page: O web app adicionado aparece automaticamente como um link na home page

📦 Instalação - Gerenciador de Bibliotecas da Arduino IDE

  • Abra a Arduino IDE
  • Vá até o ícone Libraries na barra lateral esquerda da Arduino IDE.
  • Pesquise "DIYables ESP32 WebApps" e encontre a biblioteca DIYables ESP32 WebApps da DIYables
  • Clique no botão Install para instalar a biblioteca.
DIYables ESP32 WebApps Library
  • Você será solicitado a instalar algumas outras bibliotecas de dependência
  • Clique no botão Install All para instalar todas as dependências da biblioteca.
DIYables ESP32 WebApps dependency

🔧 Dependências

Esta biblioteca requer o seguinte:

  • Biblioteca DIYables_ESP32_WebServer (para suporte a WebSocket)

🎯 Início Rápido

Para instruções de configuração detalhadas e exemplos de código, consulte:

📱 Aplicações Web

1. Home Page (`/`)

  • Central de navegação
  • Links para todas as aplicações web
  • Apenas os apps ativados/adicionados são exibidos na home page
  • Exibição do status da conexão
  • Design responsivo

2. Web Monitor (`/web-monitor`)

  • Serial monitor no navegador
  • Comunicação bidirecional em tempo real
  • Marcação de horário e contagem das mensagens
  • Entrada de comandos com histórico

3. Web Plotter (`/web-plotter`)

  • Visualização e plotagem de dados em tempo real
  • Suporte a várias séries de dados (até 8 linhas)
  • Eixo Y com escala automática ou faixas fixas
  • Títulos de gráfico e rótulos de eixo personalizáveis
  • Streaming via WebSocket para latência mínima
  • Perfeito para monitoramento de sensores e depuração

4. WebChat (`/chat`)

  • Interface de chat interativa
  • Respostas em linguagem natural
  • Controle de LED por comandos de chat
  • Interações divertidas e educativas

5. Web Digital Pins (`/web-digital-pins`)

  • Controle individual dos pinos (pinos 0-13)
  • Cada pino pode ser ativado no modo INPUT ou OUTPUT
  • Apenas os pinos ativados são exibidos na interface web
  • Monitoramento de pinos de entrada e saída
  • Operações em lote (Todos ON/OFF, Alternar)
  • Feedback em tempo real do estado dos pinos

6. Web Slider (`/web-slider`)

  • Controles deslizantes duplos (0-255)
  • Controle de saída PWM
  • Botões de valores predefinidos
  • Opções de controle sincronizado

7. Web Joystick (`/web-joystick`)

  • Controle interativo de joystick com suporte a toque/mouse
  • Valores de coordenadas X/Y (-100 a +100)
  • Feedback de posição em tempo real
  • O retorno automático ao centro pode ser ativado/desativado pelo código do ESP32
  • Perfeito para controle de robôs e veículos

8. Web Analog Gauge (`/web-gauge`)

  • Display de medidor circular profissional para monitoramento de sensores em tempo real
  • Faixa de valores, unidades e precisão configuráveis
  • Animação suave do ponteiro com feedback visual
  • Zonas coloridas (verde, amarelo, vermelho) para indicar o status
  • Tratamento automático de configuração - defina a faixa uma só vez no construtor
  • Perfeito para sensores de pressão, monitoramento de tensão e leituras analógicas

9. Web Rotator (`/web-rotator`)

  • Controle interativo de disco giratório com feedback visual
  • Dois modos de operação: Contínuo (0-360°) e Limitado (faixa personalizada)
  • Feedback do ângulo em tempo real com rotação suave
  • Suporte a toque e mouse para desktop e celular
  • Design profissional com gradiente cônico e indicador de posição
  • Perfeito para servo motores, motores de passo e controle rotacional

10. Web Temperature (`/web-temperature`)

  • Display visual de termômetro com monitoramento de temperatura em tempo real
  • Faixa de temperatura e unidades configuráveis (°C, °F, K)
  • Visualização interativa do termômetro com animação estilo mercúrio
  • Tratamento automático de configuração - defina a faixa uma só vez no construtor
  • Atualizações de valores em tempo real via WebSocket
  • Perfeito para sensores de temperatura e monitoramento ambiental

11. Web RTC (`/web-rtc`)

  • Exibição do relógio de tempo real tanto do RTC do ESP32 quanto do horário do dispositivo cliente
  • Sincronização de horário com um clique do navegador web para o RTC do ESP32
  • Indicador visual da diferença de horário mostrando a precisão da sincronização em minutos
  • Formato de horário em duas linhas com exibição AM/PM de 12 horas e data completa
  • Atualizações em tempo real via WebSocket para sincronização de horário instantânea
  • Interface moderna com gradiente e layout responsivo em estilo de cartões
  • Sincronização com fuso horário usando o horário local do dispositivo
  • Suporte a RTC integrado especificamente para o ESP32
  • Monitoramento do status da conexão com indicadores visuais de WebSocket
  • Solicitações automáticas de horário ao carregar a página para exibição imediata
  • Perfeito para marcação de horário, registro de dados, agendamento e automação baseada em tempo

12. Web Table (`/web-table`)

  • Tabela de dados com duas colunas com pares atributo-valor para exibição organizada de dados
  • Atualizações de valores em tempo real via WebSocket para atualização instantânea dos dados
  • Estrutura de tabela configurável definida uma só vez na função setup() do ESP32
  • Atualizações dinâmicas de valores durante a execução, sem recarregar a página
  • Design moderno e responsivo com efeitos de hover e feedback visual
  • Monitoramento do status da conexão com indicadores visuais de WebSocket
  • Tratamento de estado vazio com mensagens amigáveis quando não há dados disponíveis
  • Atualização manual com um botão de atualização dedicado
  • Tipos de dados flexíveis com suporte a strings, números e valores formatados
  • Armazenamento eficiente em memória com número máximo de linhas configurável (padrão: 20)
  • Solicitações automáticas de dados ao carregar a página para preencher a tabela imediatamente
  • Perfeito para monitoramento de sensores, status do sistema, exibição de configuração e dashboards em tempo real

13. Template CustomWebApp (`/custom`)

  • Template completo para criar suas próprias aplicações web personalizadas
  • Comunicação WebSocket em tempo real com filtragem automática de mensagens
  • Design profissional baseado em classes com sistema APP_IDENTIFIER encapsulado
  • Template amigável para iniciantes com mensagens de texto simples entre a web e o Arduino
  • Reconexão automática para conexões WebSocket confiáveis
  • Design responsivo para celular funcionando em celulares, tablets e computadores
  • Orientações para evitar conflitos no desenvolvimento de vários apps personalizados
  • Estrutura de arquivos modular com HTML, lógica do ESP32 e integração com a biblioteca separados
  • Framework extensível - modifique o template para criar aplicações sofisticadas
  • Pronto para integração - funciona perfeitamente com os outros DIYables ESP32 WebApps
  • Perfeito para interfaces IoT personalizadas, dashboards de sensores, painéis de controle de dispositivos e projetos educacionais

🧩 Arquitetura Modular

Otimização de Memória: A biblioteca DIYables ESP32 WebApps tem um design modular que permite incluir apenas as aplicações web de que você realmente precisa, reduzindo bastante o uso de memória no seu Arduino.

Principais Benefícios:

  • Integração Seletiva: Adicione ao projeto apenas os web apps necessários
  • Eficiente em Memória: Cada web app é independente e opcional
  • Escalável: Comece pequeno e adicione mais recursos conforme a necessidade
  • Desempenho Otimizado: Menos apps ativos = melhor desempenho

Como Funciona:

// Basic setup - include only what you need DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; // Always recommended DIYablesWebSliderPage webSliderPage; // Only if you need sliders DIYablesWebJoystickPage webJoystickPage; // Only if you need joystick DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // Only if you need analog gauge DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS); // Only if you need rotator DIYablesWebTemperaturePage tempPage(-10.0, 50.0, "°C"); // Only if you need temperature DIYablesWebRTCPage webRTCPage; // Only if you need time sync // Add only the apps you want webAppsServer.addApp(&homePage); webAppsServer.addApp(&webSliderPage); // Skip apps you don't need webAppsServer.addApp(&gaugePage); // Add only what you use webAppsServer.addApp(&tempPage); // to save memory webAppsServer.addApp(&webRotatorPage); // Customize as needed webAppsServer.addApp(&webRTCPage); // Add time synchronization // Start server - choose appropriate method webAppsServer.begin("WiFi_SSID", "password"); // WiFi connection // OR // webAppsServer.begin(); // For Ethernet or pre-configured connections (future) // Runtime management (advanced) if (sensorConnected) { webAppsServer.addApp(&webJoystickPage); // Add dynamically }

Flexibilidade em Tempo de Execução:

  • Gerenciamento Dinâmico: Adicione ou remova apps durante a execução usando addApp() e removeApp()
  • Carregamento Condicional: Carregue apps conforme o hardware ou a configuração
  • Apps Personalizados: Crie aplicações web personalizadas herdando de DIYablesWebAppPageBase
  • Sem Recompilação: Altere os apps disponíveis sem recompilar

🔌 Referência da API

Para a documentação completa da API, incluindo todas as classes, métodos e exemplos de uso, veja:

Documentação de Referência da API

📋 Exemplos

A biblioteca inclui tutoriais de exemplo completos:

Cada tutorial de exemplo inclui:

  • Instruções de configuração passo a passo
  • Diagramas de conexão do hardware
  • Exemplos de código completos
  • Guias de solução de problemas
  • Ideias de projetos e dicas de integração

🌐 URLs da Interface Web

Depois de conectado ao WiFi, acesse as aplicações em:

  • Home: http://[IP_ADDRESS]/
  • Web Chat: http://[IP_ADDRESS]/chat
  • Web Monitor: http://[IP_ADDRESS]/web-monitor
  • Web Plotter: http://[IP_ADDRESS]/web-plotter
  • Web Digital Pins: http://[IP_ADDRESS]/web-digital-pins
  • Web Slider: http://[IP_ADDRESS]/web-slider
  • Web Joystick: http://[IP_ADDRESS]/web-joystick
  • Web Analog Gauge: http://[IP_ADDRESS]/web-gauge
  • Web Rotator: http://[IP_ADDRESS]/web-rotator
  • Web Temperature: http://[IP_ADDRESS]/web-temperature
  • Web RTC: http://[IP_ADDRESS]/web-rtc
  • Web Table: http://[IP_ADDRESS]/web-table
  • Custom App: http://[IP_ADDRESS]/custom (ao usar o template CustomWebApp)

💡 Dicas de Uso

  1. Otimização de Memória: Use a arquitetura modular - adicione apenas os web apps de que você precisa para economizar memória
  2. Conexão WiFi: Garanta um sinal WiFi forte para uma comunicação WebSocket estável
  3. Segurança dos Pinos: Sempre verifique as capacidades dos pinos antes de conectar dispositivos externos
  4. Fonte de Alimentação: Use uma fonte de alimentação adequada para os dispositivos conectados
  5. Compatibilidade com Navegadores: Funciona melhor com navegadores modernos (Chrome, Firefox, Safari, Edge)
  6. Amigável para Celular: Todas as interfaces são responsivas e funcionam em dispositivos móveis
  7. Comece Pequeno: Comece com 1-2 web apps e adicione mais recursos conforme o projeto crescer

🔍 Solução de Problemas

Problemas de Conexão WiFi

  • Verifique o SSID e a senha
  • Verifique a intensidade do sinal WiFi
  • Garanta que a rede seja de 2.4GHz (5GHz não é suportada)

Problemas de Conexão WebSocket

  • Verifique as configurações de firewall
  • Confira o endereço IP no navegador
  • Tente atualizar a página web
  • Verifique o Serial Monitor em busca de mensagens de erro

Problemas de Desempenho

  • Otimização de Memória: Remova os web apps não utilizados para liberar RAM e memória Flash
  • Carregamento Seletivo: Use a arquitetura modular para incluir apenas a funcionalidade necessária
  • Limite a frequência de atualização para dados de alta frequência
  • Use atrasos apropriados em loop()
  • Monitore o uso de memória em aplicações de longa duração

📚 Uso Avançado

Gerenciamento Dinâmico de Apps

A biblioteca permite adicionar e remover aplicações web em tempo de execução:

// Add apps dynamically during runtime if (sensorConnected && !webAppsServer.getApp("/webmonitor")) { webAppsServer.addApp(new DIYablesWebMonitorPage()); } // Remove apps to free memory webAppsServer.removeApp("/chat"); // Remove webchat if not needed // Get specific app instances DIYablesWebDigitalPinsPage* pinsPage = webAppsServer.getWebDigitalPinsPage(); if (pinsPage) { pinsPage->enablePin(2, WEB_PIN_OUTPUT); }

Aplicações Web Personalizadas

Crie seus próprios web apps herdando de DIYablesWebAppPageBase:

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())); } } }; // Add your custom app webAppsServer.addApp(new MySensorDashboard());

Páginas HTML Personalizadas

Você pode modificar os arquivos HTML no diretório src/html/ para personalizar a aparência e a funcionalidade da interface web.

Vários Clientes WebSocket

A biblioteca suporta várias conexões WebSocket simultâneas, permitindo que vários usuários controlem o mesmo Arduino.

Integração com Outras Bibliotecas

Integre facilmente com bibliotecas de sensores, controle de servo, drivers de motor e outras bibliotecas do ESP32.

📄 Licença

Esta biblioteca é lançada sob a Licença MIT. Consulte o arquivo LICENSE para mais detalhes.

Feliz programação com a Biblioteca DIYables ESP32 WebApps! 🎉

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!
DIVULGAÇÃO
pt.newbiely.com participa do Programa de Associados da Amazon Services LLC, um programa de publicidade de afiliados criado para oferecer aos sites um meio de ganhar taxas de publicidade ao anunciar e criar links para Amazon.com, Amazon.it, Amazon.de, Amazon.co.uk, Amazon.ca, Amazon.de, Amazon.es, Amazon.nl, Amazon.pl e Amazon.se
Copyright © 2026 pt.newbiely.com. Todos os direitos reservados.
Termos e Condições | Política de Privacidade
Email: newbiely.com@gmail.com