Hacer gráficas fácilmente en Arduino IDE con Serial Plotter

Ya hemos aprendido a usar el Monitor Serie para depurar nuestros programas. Llenamos el código de Serial.println(variable) y vemos pasar una cascada de números a toda velocidad.

Pero seamos sinceros, a veces más ver una lista gigante de números a 9600 baudios no ayuda mucho a visualizar cómo se está comportando realmente un sensor o un control PID.

Aquí es donde entra el Serial Plotter, una herramienta integrada en el IDE de Arduino que convierte los números en gráficas en tiempo real.

No esperéis que sea MATLAB o una herramienta de análisis profesional. Es sencillo, básico y directo. Pero precisamente esa sencillez es su mayor virtud: no hay que instalar nada, ni configurar nada.

¿Dónde está el Serial Plotter?

Lo encontraréis en el menú Herramientas, justo debajo del Monitor Serie. O, si sois de atajos de teclado como yo, pulsando Ctrl+Shift+L.

Al abrirlo veréis una ventana con un eje X (tiempo) y un eje Y (valor). El plotter se auto-escala verticalmente para adaptarse a los valores que recibe.

Graficando una única variable

Para usar el Serial Plotter solo necesitamos enviar números por el puerto serie terminados en un salto de línea. Es decir, usar Serial.println().

Vamos a ver un ejemplo clásico. En lugar de ruido aleatorio, vamos a generar una onda senoidal. Es el “Hola Mundo” de las gráficas porque nos permite ver si la señal es fluida.

void setup() {
  Serial.begin(9600);
}

void loop() {
  // Generamos una onda senoidal simulada
  // Usamos millis() para avanzar en el tiempo
  float angulo = millis() / 1000.0; 
  float valor = sin(angulo) * 100.0;

  Serial.println(valor);

  delay(10); // Una pequeña pausa para no saturar
}

Si cargáis este código y abrís el Plotter, veréis una onda perfecta dibujándose en pantalla.

Graficando múltiples variables

Aquí es donde el Serial Plotter se vuelve realmente útil. ¿Qué pasa si queremos comparar la temperatura vs la humedad? ¿O el “Setpoint” vs el valor real de un sensor?

Para dibujar varias líneas a la vez, el truco está en el formato de envío. Debemos enviar los valores en la misma línea, separados por comas o espacios, y terminar con un salto de línea.

Vamos a verlo en código. Generaremos dos ondas desfasadas (Seno y Coseno) para ver cómo se dibujan simultáneamente:

void setup() {
  Serial.begin(9600);
}

void loop() {
  float tiempo = millis() / 1000.0;
  
  float variable1 = sin(tiempo) * 100.0;
  float variable2 = cos(tiempo) * 100.0;

  // Enviamos la primera variable
  Serial.print(variable1); 
  
  // Enviamos el separador (coma o espacio)
  Serial.print(",");      
  
  // Enviamos la segunda variable y el SALTO DE LÍNEA final
  Serial.println(variable2); 

  delay(10);
}

Nombrar las variables

Podéis incluso ponerle nombre a las series para que aparezcan en la leyenda, enviando el formato Etiqueta:Valor.

  Serial.print("Seno:");
  Serial.print(variable1); 
  Serial.print(",");      
  Serial.print("Coseno:");
  Serial.println(variable2); 

Esto es súper útil cuando estáis depurando 4 o 5 variables a la vez y ya no sabéis cuál es la línea azul y cuál la roja.