Ejemplo de ESP32 WebAnalogGauge - Tutorial de Interfaz de Medidores Profesional
Vista general
El ejemplo WebAnalogGauge crea una interfaz de indicador circular profesional accesible desde cualquier navegador web. Diseñado para la plataforma educativa ESP32 con capacidades mejoradas de monitoreo de sensores, características de entrada analógica integradas y una integración perfecta con módulos educativos de medición. Perfecto para monitorear valores de sensores, niveles de voltaje, lecturas de presión o cualquier medición analógica que requiera retroalimentación visual.
Características
- Medidor Circular Profesional: Visualización interactiva del medidor a través de una interfaz web
- Rango Configurable: Valores mínimo y máximo personalizados con unidades
- Actualizaciones en tiempo real: Visualización en vivo del valor del sensor con animación suave de la aguja
- Zonas codificadas por colores: Indicación visual del estado (zonas verde, amarilla y roja)
- Control de Precisión: Precisión decimal configurable para los valores mostrados
- Comunicación WebSocket: Actualizaciones instantáneas sin recargar la página
- Adaptable a dispositivos móviles: Funciona perfectamente en computadoras de escritorio, tabletas y dispositivos móviles
- Configuración automática: Establece el rango una vez en el constructor - no se necesita configuración manual
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Instrucciones de configuración
Pasos Rápidos
Sigue estas instrucciones paso a paso:
- Si es la primera vez que usas el ESP32, consulta el tutorial sobre configurar el entorno para ESP32 en el IDE de Arduino.
- Conecta la placa ESP32 a tu computadora mediante un cable USB.
- Inicia el Arduino IDE en tu computadora.
- Selecciona la placa ESP32 adecuada (p. ej. ESP32 Dev Module) y el puerto COM.
- Navega al ícono Bibliotecas en la barra izquierda del Arduino IDE.
- Busca "DIYables ESP32 WebApps", luego localiza la DIYables ESP32 WebApps Library de DIYables
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá instalar algunas dependencias de otras bibliotecas.
- Haga clic en el botón Instalar todo para instalar todas las dependencias de la biblioteca.
- En Arduino IDE, vaya a Archivo Ejemplos DIYables ESP32 WebApps WebAnalogGauge como ejemplo, o copie el código anterior y péguelo en el editor de 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);
}
- Configura las credenciales de WiFi en el código actualizando estas líneas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Haz clic en el botón Subir en el IDE de Arduino para subir el código al ESP32
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial. Se muestra a continuación
COM6
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
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Abre un navegador web en tu PC o teléfono móvil.
- Escribe la dirección IP que se muestra en el Monitor Serie en el navegador web.
- Ejemplo: http://192.168.1.100
- Verás la página de inicio como en la imagen a continuación:
- Haz clic en el enlace de Web Analog Gauge; verás la interfaz de usuario de la aplicación Web Analog Gauge como se muestra a continuación:
- También puedes acceder a la página directamente mediante la dirección IP seguida de /web-analog-gauge. Por ejemplo: http://192.168.1.100/web-analog-gauge
- Verás una pantalla de medidor circular profesional que muestra valores de sensores en tiempo real
Características de la interfaz web
Pantalla de medidor analógico
- Medidor Circular: Medidor profesional con animación suave de la aguja
- Rango de Valores: Muestra los valores mínimo y máximo configurados
- Lectura Actual: Visualización en tiempo real del valor con unidades
- Zonas de Color: Indicación visual del estado basada en rangos de valores
- Precisión: Decimales configurables para lecturas precisas
Actualizaciones en tiempo real
- Datos en tiempo real: Los valores se actualizan automáticamente a través de una conexión WebSocket
- Animación suave: La aguja se mueve suavemente entre valores
- Retroalimentación de estado: Indicador de estado de la conexión
- Optimizado para dispositivos móviles: Interfaz táctil para todo tipo de dispositivos
Configuración de código
Configuración de la galga
// 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);
}
Opciones de Personalización
Configuración de rango
- Valor mínimo: Establecer la lectura esperada más baja
- Valor máximo: Establecer la lectura esperada más alta
- Unidades: Cadena de unidades de visualización (V, A, °C, PSI, etc.)
- Precisión: Controlar la cantidad de decimales que se muestran en la pantalla
Integración de sensores
- Sensores analógicos: sensores de voltaje, corriente, presión y luz
- Sensores digitales: sensores de temperatura, humedad y sensores de gas a través de I2C/SPI
- Valores calculados: mediciones derivadas de múltiples sensores
- Lecturas calibradas: aplicar factores de calibración para la precisión
Casos de Uso Comunes
Proyectos educativos
- Monitoreo de voltaje: Lecturas de voltaje de la batería y de la fuente de alimentación
- Sensado ambiental: Temperatura, humedad, niveles de luz
- Experimentos de física: Mediciones de fuerza, presión y aceleración
- Aprendizaje de electrónica: Análisis de circuitos, pruebas de componentes
Aplicaciones Prácticas
- Domótica: Monitoreo del sistema, control ambiental
- Robótica: Retroalimentación de sensores, diagnóstico del sistema
- Proyectos de IoT: Monitoreo remoto, visualización de datos
- Industria: Control de calidad, monitoreo de procesos
Solución de problemas
Medidor no se actualiza
- Verificar la conexión WiFi y el estado de WebSocket
- Verificar que la función de devolución de llamada esté correctamente configurada
- Asegúrese de que el valor del medidor esté dentro del rango configurado
- Verifique el Monitor Serial para mensajes de conexión
Valores incorrectos
- Verificar el cableado y las conexiones del sensor
- Verificar los ajustes de la tensión de referencia analógica
- Calibrar las lecturas del sensor si es necesario
- Asegurar el escalado adecuado en la función de devolución de llamada
Problemas de conexión
- Verifique la dirección IP en el navegador
- Verifique la configuración del cortafuegos
- Asegúrese de que la red Wi-Fi sea de 2.4 GHz (no se admite 5 GHz)
- Intente actualizar la página del navegador
Características avanzadas
Múltiples medidores
Puede crear varias instancias de medidores 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 datos
Combina con Web Plotter para la visualización de datos históricos:
// Send same value to both gauge and plotter
gaugePage.sendGaugeValue(voltage);
plotterPage.sendData("Voltage", voltage);
Integración educativa
Objetivos de Aprendizaje STEM
- Visualización de datos: Comprensión de la conversión analógico-digital
- Física de sensores: Aprendizaje de los principios de medición
- Tecnologías web: Conceptos de comunicación en tiempo real
- Programación: Funciones de devolución de llamada, manejo de datos
Actividades en el aula
- Comparación de sensores: Compara diferentes tipos y rangos de sensores
- Ejercicio de calibración: Aprende la exactitud y la precisión de las mediciones
- Integración de sistemas: Combina múltiples sensores y pantallas
- Resolución de problemas: Soluciona problemas de sensores y pantallas
Este ejemplo ofrece una base integral para el monitoreo y la visualización de sensores analógicos, perfecto tanto para aplicaciones educativas como prácticas.