Exemplo de Servidor Web com Várias Páginas no ESP32
Exemplo de WebServer - Servidor Web com Várias Páginas
Visão Geral
Este exemplo mostra como criar um servidor web com várias páginas no ESP32, com várias páginas conectadas entre si: início, monitoramento de temperatura e controle de LED.
Recursos
- Navegação entre várias páginas com transições suaves
- Página inicial com menu de navegação e informações do sistema
- Página de monitoramento de temperatura com exibição da temperatura em tempo real e opção de atualização
- Página de controle de LED com função de ligar/desligar
- HTML baseado em templates com substituição dinâmica de conteúdo
- Funções auxiliares para um código limpo e fácil de manter
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 included) | |
| 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.
Instalação da Biblioteca
Siga estas instruções passo a passo:
- Se esta é a sua primeira vez usando o ESP32, consulte o tutorial sobre como configurar o ambiente do ESP32 no Arduino IDE.
- Conecte a placa ESP32 ao seu computador com um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa ESP32 apropriada (por exemplo, ESP32) e a porta COM.
- Abra o Library Manager clicando no ícone Library Manager no lado esquerdo do Arduino IDE.
- Pesquise por Web Server for ESP32 e encontre a mWebSockets da DIYables.
- Clique no botão Install para adicionar a biblioteca mWebSockets.
Exemplo de Web Server
- No Arduino IDE, vá em File Examples Web Server for ESP32 WebServer para abrir o código do exemplo
Conexão do Circuito
Não são necessários componentes externos - este exemplo usa o LED integrado no pino 13.
Estrutura do Código
- home.h: Template HTML da página inicial
- temperature.h: Template da página de monitoramento de temperatura
- led.h: Template da página de controle de LED
- WebServer.ino: Lógica principal do servidor
Instruções de Configuração
1. Configuração da Rede
Edite as credenciais de WiFi diretamente no arquivo WebServer.ino:
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
2. Faça o Upload do Código e Monitore a Saída
- Conecte o ESP32 ao seu computador
- Selecione a placa e a porta corretas no Arduino IDE
- Faça o upload do sketch WebServer.ino
- Abra o Serial Monitor (9600 baud)
- Aguarde a conexão WiFi
- Anote o endereço IP exibido
- Se você não vir o endereço IP no Serial Monitor, pressione o botão de reset na placa ESP32
Uso
Abra o navegador e digite o endereço IP exibido no Serial Monitor para acessar o servidor web do ESP32.
Teste a Função de Monitoramento de Temperatura:
- Clique no menu "Temperature".
- Veja a temperatura exibida.
Teste a Função de Controle de LED:
- Clique no menu "LED Control". Você verá a interface web como a abaixo:
- Ligue e desligue o LED usando os botões fornecidos.
- Observe o status do LED integrado na placa ESP32 mudar instantaneamente.
Páginas Disponíveis
Página Inicial (`/`)
- URL: http://your-esp32-ip/
- Recursos:
- Mensagem de boas-vindas com informações do sistema
- Menu de navegação para todas as páginas
- Layout limpo e profissional
- URL: http://your-esp32-ip/temperature
- Recursos:
- Exibição da temperatura em tempo real em Celsius
- Atualização automática a cada 5 segundos
- Botão de atualização manual
- Navegação de volta para a página inicial
- URL: http://your-esp32-ip/led
- URL para LIGAR: http://your-esp32-ip/led/on
- URL para DESLIGAR: http://your-esp32-ip/led/off
- Recursos:
- Exibição do status atual do LED
- Rotas separadas para as ações de LIGAR e DESLIGAR
- Atualização imediata do status após a mudança de estado
- Navegação de volta para a página inicial
- %TEMP_C%: Substituído pelo valor atual da temperatura em Celsius
- %LED_STATUS%: Substituído pelo status atual do LED ("ON" ou "OFF")
- Crie o template HTML em um novo arquivo de cabeçalho
- Adicione o tratador de rota no loop principal
- Atualize o menu de navegação nas páginas existentes
- Verifique o SSID e a senha no arquivo WebServer.ino
- Confirme que a rede WiFi está disponível
- Verifique se o ESP32 está dentro do alcance do WiFi
- Verifique o endereço IP no Serial Monitor
- Confirme que a URL no navegador corresponde ao endereço IP do ESP32
- Tente atualizar a página
- Confirme que o LED está conectado ao pino 13
- Verifique as mensagens de depuração no Serial Monitor
- Confirme que os tratadores de rota estão registrados
- Explore o exemplo WebServerJson.ino para o desenvolvimento de APIs REST
- Experimente o WebServerQueryStrings.ino para um tratamento avançado de parâmetros
- Confira o WebServerWithWebSocket.ino para comunicação em tempo real
Página de Temperatura (`/temperature`)
Página de Controle de LED (`/led`)
Explicação do Código
Rotas do Servidor
// Configure routes with custom handler functions
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
server.addRoute("/led", handleLed);
server.addRoute("/led/on", handleLedOn);
server.addRoute("/led/off", handleLedOff);
// Handler function examples
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HOME_PAGE);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = 25.5; // Simulated temperature value
String response = TEMPERATURE_PAGE;
response.replace("%TEMP_C%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = HIGH;
digitalWrite(LED_PIN, ledState);
sendLedPage(client);
}
void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = LOW;
digitalWrite(LED_PIN, ledState);
sendLedPage(client);
}
Sistema de Templates
O exemplo usa um sistema de substituição de marcadores para o conteúdo dinâmico:
Funções Auxiliares
// Helper function to send LED page with current status
void sendLedPage(WiFiClient& client) {
String ledStatus = (ledState == HIGH) ? "ON" : "OFF";
String response = LED_PAGE;
response.replace("%LED_STATUS%", ledStatus);
server.sendResponse(client, response.c_str());
}
// LED state tracking
int ledState = LOW; // Track LED state (LOW = OFF, HIGH = ON)
Personalização
Adicionando Novas Páginas
Estilização
Modifique o CSS nos templates HTML para mudar a aparência:
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
.container { max-width: 600px; margin: 0 auto; }
/* Add your custom styles here */
</style>
Adicionando Sensores
Substitua o valor simulado de temperatura por leituras de um sensor real:
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Replace with actual sensor reading
// e.g., DHT22, DS18B20, etc.
float tempC = readActualTemperatureSensor(); // Your sensor function here
String response = TEMPERATURE_PAGE;
response.replace("%TEMP_C%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
Solução de Problemas
Problemas Comuns
Falha na Conexão WiFi
Páginas Não Carregam
LED Não Responde
Saída de Depuração
Habilite uma depuração adicional adicionando instruções Serial.println():
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("LED route accessed");
Serial.println("Method: " + method);
Serial.println("Request: " + request);
sendLedPage(client);
}