Ejemplo de Arduino 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 a través de cualquier navegador web. Diseñado para la plataforma educativa Arduino Uno R4 WiFi y STEM V4 IoT de DIYables con capacidades mejoradas de procesamiento de datos, funciones de trazado en tiempo real y una 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: Graficar hasta 8 flujos de datos diferentes de forma simultánea
- Escalado automático: Ajuste automático del eje Y según el rango de datos
- Interfaz interactiva: Haz zoom, desplázate y analiza las tendencias de los datos
- Comunicación WebSocket: Actualizaciones instantáneas con latencia mínima
- Diseño adaptable: Funciona en escritorio, tabletas y dispositivos móviles
- Configuración personalizable: Títulos de gráfico ajustables, etiquetas de ejes y rangos
- Plataforma extensible: Actualmente implementado para Arduino Uno R4 WiFi, pero se puede ampliar para 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
Siga estas instrucciones paso a paso:
- Si es la primera vez que utiliza el Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulte el tutorial sobre configurar el entorno para Arduino Uno R4 WiFi/DIYables STEM V4 IoT en el IDE de Arduino.
- Conecte la placa Arduino Uno R4/DIYables STEM V4 IoT a su computadora usando un cable USB.
- Inicie el IDE de Arduino en su computadora.
- Seleccione la placa Arduino Uno R4 adecuada (por ejemplo, Arduino Uno R4 WiFi) y el puerto COM.
- Vaya al icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busque "DIYables WebApps", luego localice la biblioteca DIYables WebApps de DIYables.
- Haga 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 el IDE de Arduino, vaya a Archivo Ejemplos DIYables WebApps WebPlotter ejemplo, o copie el código anterior y péguelo 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: 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://[IP_ADDRESS]/webplotter
*/
#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;
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 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 a Arduino UNO R4/DIYables STEM V4 IoT
- Abre el Monitor serie
- Consulta el resultado en el Monitor serie. Se ve como lo siguiente
COM6
DIYables WebApp - Web Plotter Example
INFO: Added app /
INFO: Added app /web-plotter
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 Plotter: http://192.168.0.2/web-plotter
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Si no ves nada, reinicia la placa Arduino.
- Toma nota de la dirección IP que se muestra y escribe esta dirección en la barra de direcciones de un navegador web en tu teléfono inteligente o PC.
- Ejemplo: http://192.168.0.2
- Verás la página de inicio como se muestra en la imagen a continuación:
- Haz clic en el enlace de Web Plotter; verás la interfaz de usuario de la aplicación Web Plotter como la que 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 Arduino genera datos simulados de sensores y los representa 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 ajuste 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 de Datos Avanzado
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 condicional de datos
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: Registro de temperatura, humedad y presión a lo largo del tiempo
- Análisis de vibraciones: Monitorear datos del acelerómetro para sistemas mecánicos
- Monitoreo de 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 y las oscilaciones del resorte
- Laboratorio de Química: Monitorear las velocidades de reacción y los cambios de temperatura
- Estudios de Biología: Monitorear sensores de crecimiento de plantas y factores ambientales
- Matemáticas: Representar gráficas de funciones matemáticas y salidas algorítmicas
Automatización del hogar
- Monitoreo de energía: Seguimiento de los patrones de consumo de energía
- Automatización del jardín: Monitorear la humedad del suelo y los niveles de luz
- Control de climatización: Visualizar las tendencias de temperatura y humedad
- Sistema de seguridad: Registrar las actividades del sensor de movimiento
Robótica y Control
- Navegación del robot: Trazar datos de posición y orientación
- Control de motores: Monitorear velocidad, par y eficiencia
- Fusión de sensores: Combinar lecturas de múltiples sensores
- Planificación de trayectorias: Visualizar algoritmos de movimiento del robot
Solución de problemas
Problemas comunes
1. No aparecen datos en el gráfico
- Verifica el estado de la conexión WiFi
- Verifica la conexión WebSocket en la consola del navegador
- Asegúrate de que sendPlotData() se llame regularmente
- Verifica el Monitor Serial para 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
- Verificar 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 de hardware en el navegador
4. Caídas de la conexión WebSocket
- Verificar la intensidad de la señal WiFi
- Verificar la configuración del router (cortafuegos, bloqueo de puertos)
- Implementar la lógica de reconexión en código personalizado
- Monitorear el uso de memoria del Arduino
Consejos de depuración
Activar 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 - Combinar gráficos con interfaces de control
- WebMonitor - Añadir capacidades de depuración junto a la visualización
- Custom Applications - Construye tus propias herramientas de visualización especializadas
- Data Analysis - Implementar análisis estadístico de los datos trazados
Soporte
Para ayuda adicional:
- Consulta la documentación de la API
- Visita los tutoriales de DIYables: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Foros de la comunidad de Arduino
- Herramientas de depuración de WebSocket en la consola de desarrollo del navegador