Ejemplo de ESP32 WebPlotter - Tutorial de visualización de datos en tiempo real
Visión general
El ejemplo WebPlotter crea una interfaz de visualización de datos en tiempo real accesible desde cualquier navegador web. Diseñado para la plataforma educativa ESP32 con capacidades mejoradas de procesamiento de datos, características de trazado en tiempo real e integración perfecta con sistemas de monitoreo de sensores. Perfecto para visualizar datos de sensores, depurar algoritmos o monitorear el rendimiento del sistema en tiempo real.
Características
- Gráficas de datos en tiempo real: Visualiza los datos del sensor a medida que se transmiten desde Arduino
- Múltiples series de datos: Dibuja hasta 8 flujos de datos diferentes de forma simultánea
- Escalado automático: Escalado automático del eje Y según el rango de datos
- Interfaz interactiva: Zoom, desplazamiento y análisis de tendencias de datos
- Comunicación WebSocket: Actualizaciones instantáneas con baja latencia
- Diseño adaptable: Funciona en escritorio, tableta y dispositivos móviles
- Configuración personalizable: Títulos de gráfico ajustables, etiquetas de ejes y rangos
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 ordenador usando un cable USB.
- Inicia el IDE de Arduino en tu ordenador.
- Selecciona la placa ESP32 adecuada (p. ej. ESP32 Dev Module) y el puerto COM.
- Navega hasta el ícono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busca "DIYables ESP32 WebApps", luego localiza la Biblioteca DIYables ESP32 WebApps de DIYables.
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá que instale algunas dependencias de otras bibliotecas
- Haga clic en el botón Instalar todo para instalar todas las dependencias de la biblioteca.
- En el IDE de Arduino, ve a Archivo Ejemplos DIYables ESP32 WebApps WebPlotter ejemplo, o copia el código anterior y pégalo en el editor del IDE de Arduino
/*
* DIYables WebApp Library - Web Plotter Example
*
* This example demonstrates the Web Plotter feature:
* - Real-time data visualization
* - Multiple data series support
* - Auto-scaling Y-axis
* - Responsive web interface
* - WebSocket communication for instant updates
*
* 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://[IP_ADDRESS]/webplotter
*/
#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;
DIYablesWebPlotterPage webPlotterPage;
// Simulation variables
unsigned long lastDataTime = 0;
const unsigned long DATA_INTERVAL = 1000; // Send data every 1000ms
float timeCounter = 0;
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins and sensors here
Serial.println("DIYables ESP32 WebApp - Web Plotter Example");
// Add home and web plotter pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webPlotterPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Configure the plotter
webPlotterPage.setPlotTitle("Real-time Data Plotter");
webPlotterPage.setAxisLabels("Time (s)", "Values");
webPlotterPage.enableAutoScale(true);
webPlotterPage.setMaxSamples(50);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up callbacks
webPlotterPage.onPlotterDataRequest([]() {
Serial.println("Web client requested data");
sendSensorData();
});
Serial.println("\nWebPlotter is ready!");
Serial.println("Usage Instructions:");
Serial.println("1. Connect to the WiFi network");
Serial.println("2. Open your web browser");
Serial.println("3. Navigate to the Arduino's IP address");
Serial.println("4. Click on 'Web Plotter' to view real-time data");
Serial.println("\nGenerating simulated sensor data...");
}
void loop() {
// Handle web server and WebSocket connections
webAppsServer.loop();
// Send sensor data at regular intervals
if (millis() - lastDataTime >= DATA_INTERVAL) {
lastDataTime = millis();
sendSensorData();
timeCounter += DATA_INTERVAL / 1000.0; // Convert to seconds
}
}
void sendSensorData() {
// Generate simulated sensor data
// In a real application, replace these with actual sensor readings
// Simulated temperature sensor (sine wave with noise)
float temperature = 25.0 + 5.0 * sin(timeCounter * 0.5) + random(-100, 100) / 100.0;
// Simulated humidity sensor (cosine wave)
float humidity = 50.0 + 20.0 * cos(timeCounter * 0.3);
// Simulated light sensor (triangle wave)
float light = 512.0 + 300.0 * (2.0 * abs(fmod(timeCounter * 0.2, 2.0) - 1.0) - 1.0);
// Simulated analog pin reading
float analogValue = analogRead(A0);
// Send data using different methods:
// Method 1: Send individual values (uncomment to use)
// webPlotterPage.sendPlotData(temperature);
// Method 2: Send multiple values at once
webPlotterPage.sendPlotData(temperature, humidity, light / 10.0, analogValue / 100.0);
// Method 3: Send array of values (alternative approach)
// float values[] = {temperature, humidity, light / 10.0, analogValue / 100.0};
// webPlotterPage.sendPlotData(values, 4);
// Method 4: Send raw data string (for custom formatting)
// String dataLine = String(temperature, 2) + " " + String(humidity, 1) + " " + String(light / 10.0, 1);
// webPlotterPage.sendPlotData(dataLine);
// Print to Serial Monitor in Serial Plotter compatible format
// Format: Temperature Humidity Light Analog (tab-separated for Serial Plotter)
Serial.print(temperature, 1);
Serial.print("\t");
Serial.print(humidity, 1);
Serial.print("\t");
Serial.print(light / 10.0, 1);
Serial.print("\t");
Serial.println(analogValue / 100.0, 2);
}
- 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 Plotter Example
INFO: Added app /
INFO: Added app /web-plotter
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 Plotter: http://192.168.0.2/web-plotter
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Si no ves nada, reinicia la placa ESP32.
- Toma nota de la dirección IP que se muestre y escribe esta dirección en la barra de direcciones de un navegador en tu smartphone o PC.
- Ejemplo: http://192.168.0.2
- Verás la página de inicio como se muestra en la imagen a continuación.
- Haga clic en el enlace de Web Plotter; verá la interfaz de usuario de la aplicación Web Plotter como se muestra a continuación:
- O también puedes acceder a la página directamente mediante la dirección IP seguida de /web-plotter. Por ejemplo: http://192.168.0.2/web-plotter
- Observa cómo el ESP32 genera datos de sensor simulados y los grafica en tiempo real. Verás varias líneas de colores que representan diferentes flujos de datos.
Personalización creativa - Visualiza tus datos de forma creativa
Transforma la interfaz de trazado para que se adapte a los requisitos únicos de tu proyecto y crea visualizaciones de datos impresionantes:
Configuración de la fuente de datos
Reemplazar los datos simulados por lecturas reales de sensores:
Método 1: Lectura de un solo sensor
void sendTemperatureData() {
float temperature = analogRead(A0) * (5.0 / 1023.0) * 100; // LM35 temperature sensor
webPlotterPage.sendPlotData(temperature);
}
Método 2: Múltiples sensores
void sendMultipleSensors() {
float temperature = readTemperature();
float humidity = readHumidity();
float light = analogRead(A1) / 10.0;
float pressure = readPressure();
webPlotterPage.sendPlotData(temperature, humidity, light, pressure);
}
Método 3: Arreglo de Valores
void sendSensorArray() {
float sensors[6] = {
analogRead(A0) / 10.0, // Sensor 1
analogRead(A1) / 10.0, // Sensor 2
analogRead(A2) / 10.0, // Sensor 3
digitalRead(2) * 50, // Digital state
millis() / 1000.0, // Time counter
random(0, 100) // Random data
};
webPlotterPage.sendPlotData(sensors, 6);
}
Personalización de gráficos
Apariencia personalizada del gráfico
void setupCustomPlot() {
webPlotterPage.setPlotTitle("Environmental Monitoring Station");
webPlotterPage.setAxisLabels("Time (minutes)", "Sensor Readings");
webPlotterPage.setYAxisRange(0, 100); // Fixed Y-axis range
webPlotterPage.setMaxSamples(100); // Show more data points
}
Configuración dinámica
void setupDynamicPlot() {
webPlotterPage.setPlotTitle("Smart Garden Monitor");
webPlotterPage.setAxisLabels("Sample #", "Values");
webPlotterPage.enableAutoScale(true); // Auto-adjust Y-axis
// Configure callbacks for interactive features
webPlotterPage.onPlotterDataRequest([]() {
Serial.println("Client connected - sending initial data");
sendInitialDataBurst();
});
}
Procesamiento Avanzado de Datos
Filtro de media móvil
float movingAverage(float newValue) {
static float readings[10];
static int index = 0;
static float total = 0;
total -= readings[index];
readings[index] = newValue;
total += readings[index];
index = (index + 1) % 10;
return total / 10.0;
}
void sendFilteredData() {
float rawValue = analogRead(A0);
float filteredValue = movingAverage(rawValue);
webPlotterPage.sendPlotData(rawValue / 10.0, filteredValue / 10.0);
}
Registro de datos con marcas de tiempo
void sendTimestampedData() {
unsigned long currentTime = millis() / 1000;
float sensorValue = analogRead(A0) / 10.0;
// Send time and value as separate data series
webPlotterPage.sendPlotData(currentTime, sensorValue);
// Also log to Serial for debugging
Serial.print("Time: ");
Serial.print(currentTime);
Serial.print("s, Value: ");
Serial.println(sensorValue);
}
Ejemplos de Integración
Monitoreo Ambiental
#include <DHT.h>
#define DHT_PIN 2
#define DHT_TYPE DHT22
DHT dht(DHT_PIN, DHT_TYPE);
void sendEnvironmentalData() {
float temperature = dht.readTemperature();
float humidity = dht.readHumidity();
float lightLevel = analogRead(A0) / 10.0;
if (!isnan(temperature) && !isnan(humidity)) {
webPlotterPage.sendPlotData(temperature, humidity, lightLevel);
Serial.print("T: ");
Serial.print(temperature);
Serial.print("°C, H: ");
Serial.print(humidity);
Serial.print("%, Light: ");
Serial.println(lightLevel);
}
}
Retroalimentación del control motor
void sendMotorData() {
int motorSpeed = analogRead(A0); // Speed potentiometer
int currentDraw = analogRead(A1); // Current sensor
int motorPosition = digitalRead(2); // Position sensor
float speedPercent = (motorSpeed / 1023.0) * 100;
float currentAmps = (currentDraw / 1023.0) * 5.0;
float positionDegrees = motorPosition * 90;
webPlotterPage.sendPlotData(speedPercent, currentAmps, positionDegrees);
}
Visualización del Controlador PID
float setpoint = 50.0;
float kp = 1.0, ki = 0.1, kd = 0.01;
float integral = 0, previousError = 0;
void sendPIDData() {
float input = analogRead(A0) / 10.0;
float error = setpoint - input;
integral += error;
float derivative = error - previousError;
float output = (kp * error) + (ki * integral) + (kd * derivative);
previousError = error;
// Plot setpoint, input, error, and output
webPlotterPage.sendPlotData(setpoint, input, error, output);
}
Optimización del rendimiento
Transmisión de Datos Eficiente
unsigned long lastPlotUpdate = 0;
const unsigned long PLOT_INTERVAL = 100; // Update every 100ms
void efficientDataSending() {
if (millis() - lastPlotUpdate >= PLOT_INTERVAL) {
lastPlotUpdate = millis();
// Only send data at defined intervals
float value1 = analogRead(A0) / 10.0;
float value2 = analogRead(A1) / 10.0;
webPlotterPage.sendPlotData(value1, value2);
}
}
Envío de datos condicional
float lastSentValue = 0;
const float CHANGE_THRESHOLD = 5.0;
void sendOnChange() {
float currentValue = analogRead(A0) / 10.0;
// Only send if value changed significantly
if (abs(currentValue - lastSentValue) > CHANGE_THRESHOLD) {
webPlotterPage.sendPlotData(currentValue);
lastSentValue = currentValue;
}
}
Ideas de Proyectos
Aplicaciones científicas
- Registrador de datos: Registra temperatura, humedad y presión a lo largo del tiempo
- Análisis de vibraciones: Monitorear datos del acelerómetro para sistemas mecánicos
- Monitoreo del pH: Monitorear la calidad del agua en sistemas de acuaponía
- Eficiencia de paneles solares: Monitorear la salida de voltaje y corriente en función de la luz solar
Proyectos Educativos
- Experimentos de Física: Visualizar el movimiento del péndulo, oscilaciones del resorte
- Laboratorio de Química: Monitorear las velocidades de reacción y cambios de temperatura
- Estudios de Biología: Rastrear sensores de crecimiento de plantas, factores ambientales
- Matemáticas: Graficar funciones matemáticas y salidas algorítmicas
Automatización del hogar
- Monitoreo de Energía: Rastrear los patrones de consumo de energía
- Automatización del jardín: Monitorear la humedad del suelo y los niveles de luz
- Control de HVAC: Visualizar las tendencias de temperatura y humedad
- Sistema de Seguridad: Trazar las actividades de los sensores de movimiento
Robótica y Control
- Navegación de robots: Graficar datos de posición y orientación
- Control de motores: Monitorear la velocidad, el par y la eficiencia
- Fusión de sensores: Combinar varias lecturas de sensores
- Planificación de rutas: Visualizar algoritmos de movimiento del robot
Solución de problemas
Problemas Comunes
1. No se muestran datos en el gráfico
- Verificar el estado de la conexión Wi-Fi
- Verificar la conexión WebSocket en la consola del navegador
- Asegurarse de que sendPlotData() se esté llamando regularmente
- Verificar el Monitor Serial en busca de mensajes de error
- El gráfico parece inestable o errático
- Implementar filtrado de datos (media móvil)
- Reducir la frecuencia de envío de datos
- Comprobar el ruido del sensor o problemas de conexión
- Verificar la estabilidad de la fuente de alimentación
3. Problemas de rendimiento del navegador
- Reducir el número máximo de muestras (setMaxSamples())
- Disminuir la tasa de transmisión de datos
- Cerrar otras pestañas del navegador
- Usar la aceleración por hardware en el navegador
- Caídas de la conexión WebSocket
- Verificar la intensidad de la señal WiFi
- Verificar la configuración del router (firewall, bloqueo de puertos)
- Implementar la lógica de reconexión en código personalizado
- Monitorear el uso de memoria del ESP32
Consejos de depuración
Habilitar registro detallado
void debugPlotterData() {
Serial.println("=== Plotter Debug Info ===");
Serial.print("Free RAM: ");
Serial.println(freeMemory());
Serial.print("Connected clients: ");
Serial.println(server.getConnectedClients());
Serial.print("Data rate: ");
Serial.println("Every " + String(DATA_INTERVAL) + "ms");
Serial.println("========================");
}
Generación de datos de prueba
void generateTestPattern() {
static float phase = 0;
float sine = sin(phase) * 50 + 50;
float cosine = cos(phase) * 30 + 70;
float triangle = (phase / PI) * 25 + 25;
webPlotterPage.sendPlotData(sine, cosine, triangle);
phase += 0.1;
if (phase > 2 * PI) phase = 0;
}
Características Avanzadas
Formato de datos personalizado
void sendFormattedData() {
float temp = 25.5;
float humidity = 60.3;
// Create custom formatted data string
String dataLine = String(temp, 1) + "\t" + String(humidity, 1);
webPlotterPage.sendPlotData(dataLine);
}
Integración con otras aplicaciones web
void setupMultipleApps() {
// Add multiple web applications
server.addApp(new DIYablesHomePage());
server.addApp(new DIYablesWebDigitalPinsPage());
server.addApp(new DIYablesWebSliderPage());
server.addApp(&webPlotterPage);
server.addApp(new DIYablesNotFoundPage());
// Configure interactions between apps
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Use slider values to control what gets plotted
float scaleFactor = slider1 / 255.0;
// ... plotting logic
});
}
Control en tiempo real con gráficos
void controlAndPlot() {
// Read control inputs
int targetSpeed = analogRead(A0);
// Control hardware
analogWrite(9, targetSpeed / 4); // PWM output
// Read feedback
int actualSpeed = analogRead(A1);
int motorCurrent = analogRead(A2);
// Plot target vs actual
webPlotterPage.sendPlotData(
targetSpeed / 4.0, // Target speed
actualSpeed / 4.0, // Actual speed
motorCurrent / 10.0 // Current draw
);
}
Próximos pasos
Después de dominar el ejemplo de WebPlotter, explore:
- MultipleWebApps - Combina gráficos con interfaces de control
- WebMonitor - Capacidades de depuración junto a la visualización de gráficos
- Custom Applications - Desarrolla tus propias herramientas de trazado especializadas
- Data Analysis - Implementa análisis estadístico de los datos trazados
Soporte
Para obtener ayuda adicional:
- Consulta la documentación de la API
- Visita los tutoriales de DIYables: https://esp32io.com/tutorials/diyables-esp32-webapps
- Foros de la comunidad ESP32
- Herramientas de depuración de WebSocket en la consola de desarrollo del navegador