Animare un grafico a barre

I numeri sono precisi, ma una barra comunica il dato all’istante. Una barra che cresce mostra un valore del sensore in aumento molto più rapidamente della lettura delle cifre. 📊

L’animazione inizia da dati aggiornati. A ogni iterazione legge un nuovo valore del sensore, ad esempio un valore di analogRead compreso tra 0 e 1023.

L’intervallo dei dati grezzi raramente corrisponde a quello dello schermo. Usi map per ridimensionare l’intervallo 0-1023 in 0-128 pixel, così il valore rientra nella larghezza del display.

Una lettura disturbata può superare i limiti. La racchiuda in constrain, così la barra non oltrepasserà mai il bordo dello schermo né comprometterà il layout.

L’animazione consiste semplicemente nel ridisegnare rapidamente. Ogni fotogramma inizia con clearDisplay, così la vecchia barra scompare prima che venga disegnata quella di nuova lunghezza.

Ora disegni la barra con fillRect, usando la larghezza convertita. Mantenere fissi x, y e altezza la stabilizza, mentre la larghezza varia in base ai dati.

Tracci il contorno dell’intera scala con drawRect, così gli utenti vedono il valore massimo. Il riempimento cresce all’interno di questo bordo, fornendo alla barra un contesto chiaro.

Affianchi alla barra il numero esatto. Imposti il cursore sopra di essa e usi print per visualizzare la lettura, così gli utenti ottengono sia la forma sia il valore preciso.

Invii il fotogramma completato con display.display(). Poiché l’intero buffer viene aggiornato in una sola volta, la barra si muove senza sfarfallii o disegni incompleti.

Ridisegnare il più rapidamente possibile produce un movimento tremolante. Un breve delay di 50 millisecondi rende il movimento più uniforme e stabilizza una lettura del sensore irregolare.

Metta tutto insieme: legga, converta, cancelli, disegni, visualizzi e attenda. Questo ciclo in loop() è il motore di ogni animazione OLED in tempo reale che realizzerà.

Ha trasformato le letture in un grafico a barre in tempo reale: leggere, convertire, limitare, cancellare, riempire, incorniciare, etichettare e visualizzare in un ciclo regolato. Questa è visualizzazione in tempo reale.