Exemplo ESP32 WebAnalogGauge - Tutorial de Interface de Medidor Profissional
Visão Geral
O exemplo WebAnalogGauge cria uma interface de medidor circular profissional, acessível de qualquer navegador web. Projetado para a plataforma educacional ESP32, com recursos avançados de monitoramento de sensores, entradas analógicas embutidas e integração perfeita com módulos educacionais de medição. Perfeito para monitorar valores de sensores, níveis de tensão, leituras de pressão ou qualquer medição analógica que precise de feedback visual.
Assista a este tutorial em vídeo passo a passo mostrando como usar um potenciômetro com o app Web Analog Gauge:
Recursos
- Medidor Circular Profissional: Display de medidor interativo pela interface web
- Faixa Configurável: Valores mínimo e máximo personalizados, com unidades
- Atualizações em Tempo Real: Exibição ao vivo do valor do sensor com animação suave do ponteiro
- Zonas Coloridas: Indicação visual de status (zonas verde, amarela e vermelha)
- Controle de Precisão: Precisão decimal configurável para os valores exibidos
- Comunicação WebSocket: Atualizações instantâneas sem recarregar a página
- Responsivo para Celular: Funciona perfeitamente em desktop, tablet e celular
- Configuração Automática: Defina a faixa uma só vez no construtor - sem configuração manual
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.
Instruções de Configuração
Passos Rápidos
Siga estas instruções passo a passo:
- Se esta é a sua primeira vez usando o ESP32, consulte o tutorial sobre como configurar o ambiente para ESP32 na Arduino IDE.
- Conecte a placa ESP32 ao seu computador usando um cabo USB.
- Abra a Arduino IDE no seu computador.
- Selecione a placa ESP32 apropriada (por exemplo, ESP32 Dev Module) e a porta COM.
- 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.
- 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.
- Na Arduino IDE, vá em File Examples DIYables ESP32 WebApps WebAnalogGauge, ou copie o código acima e cole no editor da Arduino IDE
/*
* DIYables WebApp Library - Web Analog Gauge Example
*
* This Serial.println("\nWebAnalogGauge is ready!");
Serial.print("IP Address: ");
Serial.println(webAppsServer.getLocalIP());
Serial.println("Open your web browser and navigate to:");
Serial.print("1. http://");
Serial.print(webAppsServer.getLocalIP());
Serial.println("/ (Home page)");
Serial.print("2. http://");
Serial.print(webAppsServer.getLocalIP());
Serial.println("/webanalogGauge (Analog Gauge)");
Serial.println("\nSimulating sensor data...");monstrates the Web Analog Gauge application:
* - Real-time analog gauge visualization
* - Simulated sensor data with smooth animation
* - WebSocket communication for live updates
* - Beautiful analog gauge with tick marks and smooth pointer movement
*
* Features:
* - Automatic gauge value simulation
* - Smooth animation between values
* - Range: 0° to 280° (customizable)
* - Real-time WebSocket updates
* - Professional analog gauge appearance
*
* Hardware: ESP32 Boards
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[esp32-ip]/web-gauge in your web browser
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
// Gauge configuration constants
const float GAUGE_MIN_VALUE = 0.0;
const float GAUGE_MAX_VALUE = 100.0;
const String GAUGE_UNIT = "%";
DIYablesWebAnalogGaugePage webAnalogGaugePage(GAUGE_MIN_VALUE, GAUGE_MAX_VALUE, GAUGE_UNIT); // Range: 0-100%
// Other examples:
// DIYablesWebAnalogGaugePage webAnalogGaugePage(-50.0, 150.0, "°C"); // Temperature: -50°C to 150°C
// DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 1023.0, ""); // Analog sensor: 0-1023 (no unit)
// DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 5.0, "V"); // Voltage: 0-5V
// Simulation variables
unsigned long lastUpdateTime = 0;
const unsigned long UPDATE_INTERVAL = 500; // Update every 500ms (0.5 second)
const float STEP_SIZE = 1.0; // Step size for simulation
float currentGaugeValue = GAUGE_MIN_VALUE; // Start at minimum value
float step = STEP_SIZE; // Positive step means increasing, negative means decreasing
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - Web Analog Gauge Example");
// Add web applications to the server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webAnalogGaugePage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
setupCallbacks();
}
void setupCallbacks() {
// Handle gauge value requests (when web page loads/reconnects)
webAnalogGaugePage.onGaugeValueRequest([]() {
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
Serial.println("Web client requested gauge value - Sent: " + String(currentGaugeValue, 1) + GAUGE_UNIT);
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Update gauge with simulated sensor data
if (millis() - lastUpdateTime >= UPDATE_INTERVAL) {
lastUpdateTime = millis();
Serial.println("Updating gauge value..."); // Debug message
// Simple linear simulation: step changes direction at boundaries
currentGaugeValue += step;
// Change direction when reaching boundaries
if (currentGaugeValue >= GAUGE_MAX_VALUE || currentGaugeValue <= GAUGE_MIN_VALUE) {
step *= -1; // Reverse direction
}
// Ensure value stays within bounds (safety check)
if (currentGaugeValue < GAUGE_MIN_VALUE) currentGaugeValue = GAUGE_MIN_VALUE;
if (currentGaugeValue > GAUGE_MAX_VALUE) currentGaugeValue = GAUGE_MAX_VALUE;
// Send the new value to all connected web clients
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
// Print to serial for debugging
Serial.println("Gauge: " + String(currentGaugeValue, 1) + GAUGE_UNIT + " (" + (step > 0 ? "↑" : "↓") + ")");
}
delay(10);
}
- Configure as credenciais de WiFi no código atualizando estas linhas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Clique no botão Upload na Arduino IDE para carregar o código no ESP32
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor. Ele será parecido com o abaixo
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
DIYables WebApp Library
Platform: ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
⏲️ Web Analog Gauge: http://192.168.0.2/web-gauge
==========================================
- Abra um navegador web no seu PC ou celular.
- Digite no navegador o endereço IP mostrado no Serial Monitor
- Exemplo: http://192.168.1.100
- Você verá a home page como na imagem abaixo:
- Clique no link Web Analog Gauge e você verá a interface do app Web Analog Gauge como abaixo:
- Você também pode acessar a página diretamente pelo endereço IP seguido de /web-analog-gauge. Por exemplo: http://192.168.1.100/web-analog-gauge
- Você verá um display de medidor circular profissional mostrando os valores do sensor em tempo real
Recursos da Interface Web
Display do Medidor Analógico
- Medidor Circular: Medidor profissional com animação suave do ponteiro
- Faixa de Valores: Exibe os valores mínimo e máximo configurados
- Leitura Atual: Exibição do valor em tempo real com unidades
- Zonas de Cor: Indicação visual de status com base nas faixas de valores
- Precisão: Casas decimais configuráveis para leituras precisas
Atualizações em Tempo Real
- Dados ao Vivo: Os valores são atualizados automaticamente via conexão WebSocket
- Animação Suave: O ponteiro se move suavemente entre os valores
- Feedback de Status: Indicador do status da conexão
- Otimizado para Celular: Interface amigável ao toque para todos os dispositivos
Configuração do Código
Configuração do Medidor
// Configure gauge range and units
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // 0-100 Volts
// Set up value request callback
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
Enviando Valores
void onGaugeValueRequested() {
// Read sensor value (example with potentiometer)
int sensorValue = analogRead(A0);
float voltage = (sensorValue / 1023.0) * 5.0;
// Send to gauge
gaugePage.sendGaugeValue(voltage);
}
Opções de Personalização
Configuração da Faixa
- Valor Mínimo: Defina a menor leitura esperada
- Valor Máximo: Defina a maior leitura esperada
- Unidades: Texto da unidade exibida (V, A, °C, PSI etc.)
- Precisão: Controle as casas decimais na exibição
Integração com Sensores
- Sensores Analógicos: Sensores de tensão, corrente, pressão e luz
- Sensores Digitais: Sensores de temperatura, umidade e gás via I2C/SPI
- Valores Calculados: Medições derivadas de vários sensores
- Leituras Calibradas: Aplique fatores de calibração para maior precisão
ESP32 Web Analog Gauge com Potenciômetro
Abaixo está o código completo para adaptar este web app com um potenciômetro:
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Define pin
#define PIN_ANALOG 36
// Create WebApp server and page instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
// Gauge configuration constants
const float GAUGE_MIN_VALUE = 0.0;
const float GAUGE_MAX_VALUE = 100.0;
const String GAUGE_UNIT = "%";
DIYablesWebAnalogGaugePage webAnalogGaugePage(GAUGE_MIN_VALUE, GAUGE_MAX_VALUE, GAUGE_UNIT); // Range: 0-100%
// variables
unsigned long lastUpdateTime = 0;
const unsigned long UPDATE_INTERVAL = 500; // Update every 500ms (0.5 second)
const float STEP_SIZE = 1.0; // Step size for simulation
float currentGaugeValue = GAUGE_MIN_VALUE; // Start at minimum value
float step = STEP_SIZE; // Positive step means increasing, negative means decreasing
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - Web Analog Gauge Example");
// Add web applications to the server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webAnalogGaugePage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
setupCallbacks();
}
void setupCallbacks() {
// Handle gauge value requests (when web page loads/reconnects)
webAnalogGaugePage.onGaugeValueRequest([]() {
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
Serial.println("Web client requested gauge value - Sent: " + String(currentGaugeValue, 1) + GAUGE_UNIT);
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Update gauge with simulated sensor data
if (millis() - lastUpdateTime >= UPDATE_INTERVAL) {
lastUpdateTime = millis();
Serial.println("Updating gauge value..."); // Debug message
// Simple linear simulation: step changes direction at boundaries
//currentGaugeValue += step;
currentGaugeValue = analogRead(PIN_ANALOG);
currentGaugeValue = map(currentGaugeValue,0,4095,0,100);
// Change direction when reaching boundaries
if (currentGaugeValue >= GAUGE_MAX_VALUE || currentGaugeValue <= GAUGE_MIN_VALUE) {
step *= -1; // Reverse direction
}
// Ensure value stays within bounds (safety check)
if (currentGaugeValue < GAUGE_MIN_VALUE) currentGaugeValue = GAUGE_MIN_VALUE;
if (currentGaugeValue > GAUGE_MAX_VALUE) currentGaugeValue = GAUGE_MAX_VALUE;
// Send the new value to all connected web clients
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
// Print to serial for debugging
Serial.println("Gauge: " + String(currentGaugeValue, 1) + GAUGE_UNIT + " (" + (step > 0 ? "↑" : "↓") + ")");
}
delay(10);
}
Abaixo está um tutorial em vídeo passo a passo mostrando como usar um potenciômetro com o app Web Analog Gauge:
Casos de Uso Comuns
Projetos Educacionais
- Monitoramento de Tensão: Tensão de bateria, leituras de fonte de alimentação
- Sensoriamento Ambiental: Temperatura, umidade, níveis de luz
- Experimentos de Física: Medições de força, pressão e aceleração
- Aprendizado de Eletrônica: Análise de circuitos, teste de componentes
Aplicações Práticas
- Automação Residencial: Monitoramento do sistema, controle ambiental
- Robótica: Feedback de sensores, diagnóstico do sistema
- Projetos IoT: Monitoramento remoto, visualização de dados
- Industrial: Controle de qualidade, monitoramento de processos
Solução de Problemas
O Medidor Não Atualiza
- Verifique a conexão WiFi e o status do WebSocket
- Confirme se a função de callback foi definida corretamente
- Garanta que o valor do medidor esteja dentro da faixa configurada
- Verifique o Serial Monitor em busca de mensagens de conexão
Valores Incorretos
- Verifique a ligação e as conexões do sensor
- Confira as configurações de tensão de referência analógica
- Calibre as leituras do sensor, se necessário
- Garanta o escalonamento correto na função de callback
Problemas de Conexão
- Confira o endereço IP no navegador
- Verifique as configurações de firewall
- Garanta que a rede WiFi seja de 2.4GHz (5GHz não é suportada)
- Tente atualizar a página do navegador
Recursos Avançados
Vários Medidores
Você pode criar várias instâncias de medidor para diferentes sensores:
DIYablesWebAnalogGaugePage voltageGauge(0.0, 5.0, "V");
DIYablesWebAnalogGaugePage currentGauge(0.0, 2.0, "A");
DIYablesWebAnalogGaugePage tempGauge(-40.0, 85.0, "°C");
server.addApp(&voltageGauge);
server.addApp(¤tGauge);
server.addApp(&tempGauge);
Registro de Dados
Combine com o Web Plotter para visualização de dados históricos:
// Send same value to both gauge and plotter
gaugePage.sendGaugeValue(voltage);
plotterPage.sendData("Voltage", voltage);
Integração Educacional
Objetivos de Aprendizagem STEM
- Visualização de Dados: Entender a conversão analógico-digital
- Física de Sensores: Aprender os princípios de medição
- Tecnologias Web: Conceitos de comunicação em tempo real
- Programação: Funções de callback, tratamento de dados
Atividades em Sala de Aula
- Comparação de Sensores: Compare diferentes tipos de sensores e faixas
- Exercício de Calibração: Aprenda sobre exatidão e precisão de medição
- Integração de Sistemas: Combine vários sensores e displays
- Resolução de Problemas: Diagnostique problemas de sensores e displays
Este exemplo oferece uma base completa para monitoramento e visualização de sensores analógicos, perfeita tanto para aplicações educacionais quanto práticas.