Animar un gráfico de barras

Los números son precisos, pero una barra comunica la información al instante. Una barra que crece muestra un valor de sensor ascendente mucho más rápido que leer cifras. 📊

La animación comienza con datos nuevos. En cada iteración obtiene un valor nuevo del sensor, por ejemplo, un analogRead que se encuentra entre 0 y 1023.

El intervalo original rara vez coincide con el de la pantalla. Use map para convertir 0-1023 en 0-128 píxeles y hacer que el valor quepa en el ancho de la pantalla.

Una lectura con ruido puede excederse. Envuélvala en constrain para que la barra nunca se dibuje más allá del borde de la pantalla ni altere el diseño.

Animar consiste simplemente en volver a dibujar rápidamente. Cada fotograma comienza con clearDisplay para que la barra anterior desaparezca antes de dibujar la nueva longitud.

Ahora pinte la barra con fillRect, usando el ancho convertido. Una x, una y y una altura fijas la mantienen estable mientras el ancho varía con los datos.

Dibuje el contorno de la pista completa con drawRect para que los usuarios vean el máximo. El relleno crece dentro de este borde, lo que proporciona un contexto claro.

Combine la barra con el número exacto. Coloque el cursor encima y use print para imprimir la lectura, de modo que los usuarios obtengan tanto la forma como la cifra precisa.

Envíe el fotograma terminado con display.display(). Como todo el búfer se actualiza de una vez, la barra se mueve limpiamente y sin parpadeos parciales.

Redibujar tan rápido como sea posible produce una imagen temblorosa. Un pequeño delay de 50 milisegundos suaviza el movimiento y estabiliza una lectura de sensor inestable.

Reúna todos los pasos: leer, convertir, borrar, dibujar, mostrar y pausar. Este ciclo en loop() es el motor de cualquier animación OLED en tiempo real que cree.

Convirtió lecturas en un gráfico de barras en tiempo real: leer, convertir, limitar, borrar, rellenar, enmarcar, etiquetar y mostrar en un bucle con ritmo controlado. Eso es visualización en tiempo real.