SENSORES/ATUADORES

INTERNET DAS COISAS (IoT)

Arduino Nano ESP32 - Ethernet

Referência da API da Biblioteca DIYables ESP32 WebApps para Arduino Nano ESP32

Visão Geral

Esta página documenta a API completa da Biblioteca DIYables ESP32 WebApps usada na placa Arduino Nano ESP32. A biblioteca segue uma arquitetura modular — cada aplicação web é uma classe independente que você registra no servidor. Inclua apenas as classes de página que o seu projeto precisa; classes não usadas não consomem flash nem RAM.

A biblioteca cuida da conexão WiFi, do serviço HTTP e da comunicação WebSocket. O seu sketch interage com ela inteiramente por meio de callbacks e métodos de envio.

Recursos da Biblioteca

Sistema de páginas modular: Registre apenas os apps de que você precisa; cada um é independente
Memória controlada: A inclusão por app significa que você controla o uso de flash e RAM
11 aplicações web integradas: Prontas para usar, sem nenhuma programação web
Classe base extensível: Derive de DIYablesWebAppPageBase para criar páginas personalizadas
Design voltado ao WebSocket: Toda a troca de dados em tempo real usa WebSocket na porta 81
Interface responsiva: Todas as páginas integradas funcionam em desktop, tablet e celular
API baseada em callbacks: Registro simples de funções — sem necessidade de polling
Suporte a apps simultâneos: Várias páginas podem funcionar ao mesmo tempo em um único servidor

Classes Principais

DIYablesWebAppServer

A classe central do servidor. Ela gerencia o roteamento HTTP, as conexões WebSocket e despacha as mensagens recebidas para o tratador da página registrada correta.

Construtor

DIYablesWebAppServer(int httpPort = 80, int websocketPort = 81)

Cria uma instância do servidor com os números de porta informados.

httpPort: Porta para requisições HTTP (padrão: 80)
websocketPort: Porta para conexões WebSocket (padrão: 81)

Métodos de Conexão

bool begin()

Inicia o servidor presumindo que o WiFi ou o Ethernet já foi configurado externamente.

Retorna: true em caso de sucesso, false em caso de falha

bool begin(const char* ssid, const char* password)

Conecta ao WiFi com as credenciais informadas e depois inicia os servidores HTTP e WebSocket.

ssid: Nome da rede
password: Senha da rede
Retorna: true em caso de sucesso, false em caso de falha

void loop()

Processa as requisições HTTP e os eventos WebSocket pendentes. Chame dentro de loop() a cada iteração.

bool isConnected()

Retorna true quando a placa tem uma conexão WiFi ativa.

String getIPAddress()

Retorna o endereço IP atual da placa como uma String.

Registro de Páginas

void addApp(DIYablesWebAppPageBase* app)

Registra uma instância de página no servidor. O caminho de URL da página é definido no seu construtor.

app: Ponteiro para um objeto de página

void removeApp(const String& path)

Cancela o registro da página no caminho de URL informado.

path: String do caminho (por exemplo, "/chat")

DIYablesWebAppPageBase* getApp(const String& path)

Retorna um ponteiro para a página registrada no caminho informado, ou nullptr se não for encontrada.

void setNotFoundPage(const DIYablesNotFoundPage& page)

Define uma página 404 personalizada, exibida quando nenhuma página registrada corresponde a uma requisição.

Acessadores de Páginas Tipadas

DIYablesWebDigitalPinsPage* getWebDigitalPinsPage()

Retorna a página de pinos digitais registrada, ou nullptr se não foi adicionada.

DIYablesWebSliderPage* getWebSliderPage()

Retorna a página de slider registrada, ou nullptr se não foi adicionada.

DIYablesWebJoystickPage* getWebJoystickPage()

Retorna a página de joystick registrada, ou nullptr se não foi adicionada.

Classe Base

DIYablesWebAppPageBase

Todas as classes de página, integradas e personalizadas, estendem esta base abstrata. Ela oferece utilitários de resposta HTTP, transmissão por WebSocket e ganchos do ciclo de vida da página.

Construtor

DIYablesWebAppPageBase(const String& pagePath)

Registra a página no caminho de URL especificado.

pagePath: Rota de URL desta página (por exemplo, "/web-joystick")

Métodos Abstratos — Obrigatórios em Páginas Personalizadas

virtual void handleHTTPRequest(IWebClient& client) = 0

Chamado quando um navegador solicita esta página por HTTP.

client: Interface para escrever a resposta HTTP

virtual void handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) = 0

Chamado quando chega uma mensagem WebSocket cujo prefixo corresponde a esta página.

ws: A conexão WebSocket que enviou a mensagem
message: Conteúdo bruto da mensagem
length: Tamanho da mensagem em bytes

virtual const char* getPageInfo() const = 0

Retorna uma string de rótulo curta exibida na saída de inicialização do Serial Monitor (por exemplo, "🕹️ Web Joystick: ").

virtual String getNavigationInfo() const = 0

Retorna um fragmento HTML para o card desta página na página inicial.

Métodos de Sobrescrita Opcionais

virtual void onWebSocketConnection(IWebSocket& ws)

Chamado quando um novo cliente WebSocket se conecta. Sobrescreva para enviar o estado inicial.

virtual void onWebSocketClose(IWebSocket& ws)

Chamado quando um cliente WebSocket se desconecta.

Métodos Utilitários

const char* getPagePath() const

Retorna o caminho de URL registrado desta página.

bool isEnabled() const

Retorna true se esta página está ativa e responderá às requisições.

void setEnabled(bool enable)

Ativa ou desativa a página sem removê-la do servidor.

void sendHTTPHeader(IWebClient& client, const char* contentType = "text/html")

Escreve no cliente os cabeçalhos HTTP 200 OK padrão.

void sendWebSocketMessage(IWebSocket& ws, const char* message)

Envia uma mensagem para uma única conexão WebSocket.

void broadcastToAllClients(const char* message)

Entrega uma mensagem a todos os clientes WebSocket conectados no momento.

void sendLargeHTML(IWebClient& client, const char* html)

Transmite grandes volumes de HTML usando codificação de transferência em blocos (chunked).

Exemplo de Página Personalizada

class CustomPage : public DIYablesWebAppPageBase { public: CustomPage() : DIYablesWebAppPageBase("/custom") {} void handleHTTPRequest(IWebClient& client) override { sendHTTPHeader(client); client.println("<html><body>Custom Page</body></html>"); } void handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) override { sendWebSocketMessage(ws, "Response: " + String(message)); } const char* getPageInfo() const override { return " 🔧 Custom Page: "; } String getNavigationInfo() const override { return "<a href=\"/custom\" class=\"app-card custom\">" "<h3>🔧 Custom</h3><p>Custom functionality</p></a>"; } };

Classes de Página Integradas

DIYablesHomePage

Central de navegação que lista todas as aplicações registradas.

Construtor

DIYablesHomePage()

URL

---

DIYablesWebChatPage

Troca de mensagens de texto de duas vias entre o navegador e a placa.

Construtor

DIYablesWebChatPage()

URL

/webchat

Métodos

void onWebChatMessage(std::function<void(const String&)> callback)

Registra um tratador chamado cada vez que o navegador envia uma mensagem de chat.

void sendToWebChat(const String& message)

Envia uma mensagem da placa para a visualização de chat do navegador.

---

DIYablesWebMonitorPage

Monitor serial acessível pelo navegador para registro de saída e entrada de comandos.

Construtor

DIYablesWebMonitorPage()

URL

/webmonitor

Métodos

void onWebMonitorMessage(std::function<void(const String&)> callback)

Registra um tratador chamado quando o navegador envia um comando.

void sendToWebMonitor(const String& message)

Envia uma mensagem de log da placa para o monitor do navegador.

---

DIYablesWebDigitalPinsPage

Interface web para ler e escrever os pinos digitais 0–13.

Construtor

DIYablesWebDigitalPinsPage()

URL

/webdigitalpins

Métodos

void enablePin(int pin, int mode)

Torna o pino visível e controlável na interface web.

pin: Número do pino (0–13)
mode: WEB_PIN_OUTPUT ou WEB_PIN_INPUT

void onPinWrite(std::function<void(int, int)> callback)

Tratador chamado quando o navegador alterna um pino de saída. Recebe (pin, state).

void onPinRead(std::function<int(int)> callback)

Tratador chamado quando o navegador solicita o estado de um pino de entrada. Retorna o estado atual.

void onPinModeChange(std::function<void(int, int)> callback)

Tratador chamado quando o navegador altera a direção de um pino.

void updatePinState(int pin, int state)

Envia um estado de pino atualizado a todos os clientes de navegador conectados.

---

DIYablesWebSliderPage

Dois sliders de faixa 0–255, adequados para controle PWM e analógico.

Construtor

DIYablesWebSliderPage()

URL

/webslider

Métodos

void onSliderValueFromWeb(std::function<void(int, int)> callback)

Tratador chamado quando qualquer um dos sliders se move. Recebe (slider1, slider2) na faixa de 0–255.

void onSliderValueToWeb(std::function<void()> callback)

Tratador chamado quando um navegador recém-conectado solicita as posições atuais dos sliders.

void sendToWebSlider(int slider1, int slider2)

Envia os valores dos sliders ao navegador, atualizando as posições exibidas.

---

DIYablesWebJoystickPage

Joystick virtual 2D que retorna coordenadas X/Y para controle direcional.

Construtor

DIYablesWebJoystickPage(bool autoReturn = true, float sensitivity = 10.0)

autoReturn: Quando true, o joystick volta ao centro ao ser solto
sensitivity: Porcentagem mínima de deslocamento necessária antes de uma atualização ser enviada

URL

/webjoystick

Métodos

void onJoystickValueFromWeb(std::function<void(int, int)> callback)

Tratador chamado no movimento do joystick. Recebe (x, y), cada um na faixa de –100 a +100.

void onJoystickValueToWeb(std::function<void()> callback)

Tratador chamado quando um navegador solicita a posição atual do joystick.

void sendToWebJoystick(int x, int y)

Envia a posição atual do joystick aos navegadores conectados.

void setAutoReturn(bool autoReturn)

Atualiza em tempo de execução o comportamento de retorno automático ao centro.

void setSensitivity(float sensitivity)

Atualiza em tempo de execução o limite de sensibilidade de movimento.

---

DIYablesWebPlotterPage

Plotter de dados em tempo real com suporte a até 8 séries de dados simultâneas.

Construtor

DIYablesWebPlotterPage()

URL

/webplotter

Métodos

void setPlotTitle(const String& title)

Define o título do gráfico exibido acima do plot.

void setAxisLabels(const String& xLabel, const String& yLabel)

Define os rótulos do eixo X e do eixo Y.

void enableAutoScale(bool enable)

Quando true, a faixa do eixo Y se ajusta automaticamente aos dados recebidos.

void setMaxSamples(int maxSamples)

Limita o número de pontos de dados mantidos por série antes de os pontos mais antigos serem descartados.

void addDataPoint(const String& seriesName, float x, float y)

Acrescenta um único ponto (x, y) à série nomeada.

void clearPlot()

Remove todos os dados de todas as séries.

---

DIYablesNotFoundPage

Página de resposta 404 opcional, exibida para rotas não registradas.

Construtor

DIYablesNotFoundPage()

Uso Básico

O sketch a seguir demonstra como adicionar uma página de chat e uma de monitor a um projeto com Arduino Nano ESP32:

#include <DIYablesWebApps.h> const char* ssid = "YOUR_WIFI_SSID"; const char* password = "YOUR_WIFI_PASSWORD"; DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; DIYablesWebChatPage chatPage; DIYablesWebMonitorPage monitorPage; void setup() { Serial.begin(9600); webAppsServer.addApp(&homePage); webAppsServer.addApp(&chatPage); webAppsServer.addApp(&monitorPage); webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); if (webAppsServer.begin(ssid, password)) { Serial.println("Server started"); Serial.print("IP: "); Serial.println(webAppsServer.getIPAddress()); } chatPage.onWebChatMessage([](const String& message) { Serial.println("Chat received: " + message); chatPage.sendToWebChat("Board reply: " + message); }); } void loop() { webAppsServer.loop(); delay(10); }

Referência de URLs das Aplicações Web

Aplicação	URL Padrão
Página Inicial	http	//[board-ip]/
Chat	http	//[board-ip]/webchat
Web Monitor	http	//[board-ip]/webmonitor
Pinos Digitais	http	//[board-ip]/webdigitalpins
Slider	http	//[board-ip]/webslider
Joystick	http	//[board-ip]/webjoystick
Plotter	http	//[board-ip]/webplotter

Protocolo WebSocket

Toda a comunicação em tempo real passa por um único servidor WebSocket na porta 81.

Endpoint WebSocket: ws://[board-ip]:81
Reconexão: Os navegadores se reconectam automaticamente após uma desconexão
Formato da mensagem: Baseado em texto; cada app integrado usa um prefixo único para identificar suas mensagens

Padrões de Mensagem por App

Chat — texto simples nos dois sentidos

Monitor — texto simples nos dois sentidos

Pinos Digitais

Navegador → Placa: {"pin": 13, "state": 1}
Placa → Navegador: {"pin": 13, "state": 1}

Slider

Navegador → Placa: {"slider1": 128, "slider2": 255}
Placa → Navegador: {"slider1": 128, "slider2": 255}

Joystick

Navegador → Placa: {"x": 50, "y": -25}
Placa → Navegador: {"x": 50, "y": -25}

Plotter

Navegador → Placa: não se aplica (somente exibição)
Placa → Navegador: {"series": "temp", "x": 10.5, "y": 23.4}

Referência de Memória

Inclua apenas as páginas que o seu projeto usa. Consumo aproximado por componente:

Componente	Flash	RAM
DIYablesWebAppServer	~8 KB	~2 KB
DIYablesHomePage	~3 KB	~1 KB
DIYablesWebChatPage	~6 KB	~1.5 KB
DIYablesWebMonitorPage	~5 KB	~1.5 KB
DIYablesWebDigitalPinsPage	~8 KB	~2 KB
DIYablesWebSliderPage	~6 KB	~1.5 KB
DIYablesWebJoystickPage	~7 KB	~1.5 KB
DIYablesWebPlotterPage	~10 KB	~2 KB
Buffer WebSocket (por cliente)	—	~1 KB

Projeto mínimo (servidor + home + um app): ~17 KB de Flash, ~4.5 KB de RAM

Todos os apps habilitados: ~53 KB de Flash, ~12 KB de RAM

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!