Ejemplo de Arduino WebAnalogGauge - Tutorial de Interfaz de Medidores Profesional
Visión general
El ejemplo WebAnalogGauge crea una interfaz de medidor circular profesional accesible desde cualquier navegador web. Diseñado para Arduino Uno R4 WiFi y DIYables STEM V4 IoT plataforma educativa con capacidades mejoradas de monitoreo de sensores, entradas analógicas 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 de un medidor circular interactivo mediante una interfaz web
- Rango configurable: Valores mínimos y máximos personalizables con unidades
- Actualizaciones en tiempo real: Visualización en vivo del valor del sensor con una animación suave de la aguja
- Zonas codificadas por colores: Indicación visual del estado (zonas verde, amarillo y rojo)
- Control de precisión: Precisión decimal configurable para los valores mostrados
- Comunicación WebSocket: Actualizaciones instantáneas sin recargar la página
- Responsive móvil: Funciona perfectamente en computadoras de escritorio, tabletas y dispositivos móviles
- Configuración automática: Establezca el rango una vez en el constructor; no se necesita configuración manual
- Plataforma extensible: Actualmente implementada para Arduino Uno R4 WiFi, pero puede extenderse a otras plataformas de hardware. Ver DIYables_WebApps_ESP32
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino 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 esta es la primera vez que usas el Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulta el tutorial sobre configurar el entorno para Arduino Uno R4 WiFi/DIYables STEM V4 IoT en el IDE de Arduino.
- Conecta la placa Arduino Uno R4/DIYables STEM V4 IoT a tu computadora usando un cable USB.
- Inicia el IDE de Arduino en tu computadora.
- Selecciona la placa adecuada Arduino Uno R4 (p. ej., Arduino Uno R4 WiFi) y el puerto COM.
- Dirígete al icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busca "DIYables WebApps", luego encuentra la biblioteca DIYables WebApps de DIYables
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá instalar algunas otras dependencias de la biblioteca
- Haga clic en el botón Instalar todo para instalar todas las dependencias de la biblioteca.
- En Arduino IDE, ve a Archivo Ejemplos DIYables WebApps WebAnalogGauge como ejemplo, o copia el código anterior y pégalo 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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://[arduino-ip]/web-gauge in your web browser
*/
#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
UnoR4ServerFactory 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 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 Arduino UNO R4/DIYables STEM V4 IoT
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial. Parece lo siguiente:
COM6
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
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 Serial en el navegador web.
- Ejemplo: http://192.168.1.100
- Verás la página de inicio como en la imagen de abajo.
- Haz clic en el enlace Web Analog Gauge; verás la interfaz de usuario de la aplicación Web Analog Gauge como se muestra a continuación:
- O 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 visualización profesional de un medidor circular 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: Indicador visual del estado basado en rangos de valor.
- Precisión: Número de decimales configurables para lecturas precisas.
Actualizaciones en tiempo real
- Datos en tiempo real: Los valores se actualizan automáticamente mediante 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 todos los dispositivos
Configuración del código
Configuración del medidor
// Configure gauge range and units
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // 0-100 Volts
// Set up value request callback
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
Envío de 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 mínima esperada
- Valor máximo: Establecer la lectura máxima esperada
- Unidades: Mostrar cadena de unidades (V, A, °C, PSI, etc.)
- Precisión: Controlar los decimales que se muestran
Integración de sensores
- Sensores Analógicos: Sensores de voltaje, corriente, presión y luz
- Sensores Digitales: Temperatura, humedad, 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 mayor 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
- Automatización del hogar: 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
El medidor no se está actualizando
- Verificar la conexión WiFi y el estado de WebSocket
- Verificar que la función de devolución de llamada esté correctamente configurada
- Verificar que el valor del indicador esté dentro del rango configurado
- Verificar el Monitor Serial para mensajes de conexión
Valores Incorrectos
- Verificar el cableado y las conexiones del sensor
- Verificar la configuración de la tensión de referencia analógica
- Calibrar las lecturas del sensor si es necesario
- Asegurar el escalado correcto en la función de devolución de llamada
Problemas de conexión
- Verifica la dirección IP en el navegador
- Verifica la configuración del firewall
- Asegúrate de usar una red WiFi de 2.4 GHz (no se admite 5 GHz)
- Intenta actualizar la página del navegador
Funcionalidades avanzadas
Múltiples manómetros
Puedes crear varias instancias de gauge 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
Combinar 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 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 de sensores y rangos
- Ejercicio de calibración: Aprende la precisión y la exactitud 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 proporciona una base integral para el monitoreo y la visualización de sensores analógicos, perfecto para aplicaciones tanto educativas como prácticas.