Home
Arduino UNO R4

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

Biblioteca DIYables WebApps

Uma biblioteca Arduino completa para criar aplicações web baseadas em WebSocket no Arduino Uno R4 WiFi e no DIYables STEM V4 IoT. Esta biblioteca oferece várias aplicações web prontas para usar, para monitorar, controlar e interagir com seus projetos Arduino por meio de uma interface web moderna. Otimizada especialmente para a plataforma educacional DIYables STEM V4 IoT, com recursos IoT avançados e sensores integrados.

Com esta biblioteca, você pode interagir com seu Arduino por um navegador web no celular ou no PC, de duas 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
Arduino UNO R4 DIYables WebApps

🚀 Recursos

  • Arquitetura Modular: Adicione apenas os web apps 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 consulta e personalização
  • 11 Aplicações Web Prontas: Controle completo do Arduino sem precisar de 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: Display de gauge 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 duas colunas com atributo e valor, com 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 desktop e em 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
  • Plataforma Extensível: Atualmente implementada para o Arduino Uno R4 WiFi, mas pode ser estendida para outras plataformas de hardware. Veja DIYables_WebApps_ESP32

📦 Instalação - Library Manager do Arduino IDE

  • Abra o Arduino IDE
  • Navegue até o ícone Libraries na barra esquerda do Arduino IDE.
  • Pesquise "DIYables WebApps" e encontre a biblioteca DIYables WebApps, da DIYables
  • Clique no botão Install para instalar a biblioteca.
Biblioteca DIYables WebApps para Arduino UNO R4
  • Você será perguntado se quer instalar outras bibliotecas das quais ela depende
  • Clique no botão Install All para instalar todas as dependências da biblioteca.
Dependências da biblioteca DIYables WebApps para Arduino UNO R4

🔧 Dependências

Esta biblioteca requer o seguinte:

  • Biblioteca UnoR4WiFi_WebServer (para suporte a WebSocket)

🎯 Início Rápido

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

📱 Aplicações Web

1. Home Page (`/`)

  • Central de navegação
  • Links para todas as aplicações web
  • Somente os apps ativados/adicionados aparecem 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 do gráfico e rótulos dos eixos personalizáveis
  • Streaming por WebSocket com 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 como modo INPUT ou OUTPUT
  • Somente os pinos ativados aparecem na interface web
  • Monitoramento de pinos de entrada e saída
  • Operações em lote (All ON/OFF, Toggle)
  • Retorno do estado dos pinos em tempo real

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 de joystick interativo com suporte a toque/mouse
  • Valores de coordenadas X/Y (-100 a +100)
  • Retorno da posição em tempo real
  • O retorno automático ao centro pode ser ativado/desativado pelo código Arduino
  • Perfeito para controle de robôs e veículos

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

  • Display de gauge circular profissional para monitoramento de sensores em tempo real
  • Faixa de valores, unidades e precisão configuráveis
  • Animação suave do ponteiro com retorno visual
  • Zonas coloridas (verde, amarelo, vermelho) para indicar o status
  • Tratamento automático da configuração - defina a faixa uma 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 retorno visual
  • Dois modos de operação: Contínuo (0-360°) e Limitado (faixa personalizada)
  • Retorno 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 de termômetro com animação estilo mercúrio
  • Tratamento automático da configuração - defina a faixa uma vez no construtor
  • Atualizações de valor em tempo real via WebSocket
  • Perfeito para sensores de temperatura e monitoramento ambiental

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

  • Exibição do relógio em tempo real tanto do RTC do Arduino quanto do horário do dispositivo cliente
  • Sincronização de horário com um clique do navegador web para o RTC do Arduino
  • 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 de 12 horas AM/PM e data completa
  • Atualizações em tempo real via WebSocket para sincronização instantânea de horário
  • Interface moderna com gradiente e layout responsivo em estilo de cartão
  • Sincronização com fuso horário usando o horário local do dispositivo
  • Suporte a RTC integrado especificamente para o Arduino Uno R4 WiFi
  • 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 (data logging), agendamento e automação baseada em tempo

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

  • Tabela de dados de duas colunas com pares de atributo e valor para exibir os dados de forma organizada
  • Atualizações de valor em tempo real via WebSocket para atualização instantânea dos dados
  • Estrutura de tabela configurável, definida uma vez na função setup() do Arduino
  • Atualizações dinâmicas de valor durante a execução, sem recarregar a página
  • Design moderno e responsivo com efeitos de hover e retorno 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 textos, 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ções 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 troca simples de mensagens de texto 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ção para evitar conflitos no desenvolvimento de vários apps personalizados
  • Estrutura de arquivos modular, com HTML, lógica do Arduino 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 outros DIYables 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 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 do seu Arduino.

Principais Benefícios:

  • Integração Seletiva: Adicione ao projeto somente 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 de acordo com o hardware ou a configuração
  • Apps Personalizados: Crie aplicações web personalizadas herdando de DIYablesWebAppPageBase
  • Sem Recompilação: Mude 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)

🔧 Configuração do Hardware

DIYables STEM V4 IoT (Plataforma Recomendada)

  • Capacidade WiFi integrada com design de antena otimizado
  • LEDs e sensores integrados, prontos para usar logo de cara
  • Opções de I/O estendidas com conectividade adicional
  • Design voltado para a educação, perfeito para aprender desenvolvimento IoT
  • Componentes de nível profissional para prototipagem confiável
  • Layout de pinos completo, otimizado para uso em protoboard
  • Gerenciamento de energia aprimorado para operação estável
  • Perfeito para a educação STEM e para o desenvolvimento de projetos IoT

Arduino Uno R4 WiFi

  • Nenhum hardware adicional é necessário para a funcionalidade básica
  • Conecte LEDs aos pinos digitais para retorno visual
  • Conecte sensores aos pinos analógicos para monitoramento
  • Compatibilidade padrão com Arduino

💡 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 os recursos 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 ou 2 web apps e depois 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 do firewall
  • Confirme 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 usados para liberar memória RAM e 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 (delays) adequados no loop()
  • Monitore o uso de memória em aplicações que ficam rodando por muito tempo

📚 Uso Avançado

Gerenciamento Dinâmico de Apps

A biblioteca permite adicionar e remover aplicações web durante a 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 Arduino.

📄 Licença

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

🔗 Links

Feliz codificação com a Biblioteca DIYables 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