Anime um gráfico de barras

Os números são precisos, mas uma barra transmite a informação instantaneamente. Uma barra crescente mostra um valor de sensor em alta muito mais rápido do que a leitura dos dígitos. 📊

A animação começa com dados recentes. A cada repetição, obtenha um novo valor do sensor; por exemplo, um analogRead entre 0 e 1023.

O intervalo bruto raramente corresponde ao tamanho da tela. Use map para redimensionar 0-1023 para 0-128 pixels, fazendo o valor caber na largura do display.

Uma leitura com ruído pode ultrapassar os limites. Envolva-a em constrain, para que a barra nunca seja desenhada além da borda da tela nem prejudique o layout.

Animação é simplesmente redesenhar rapidamente. Cada quadro começa com clearDisplay, para que a barra antiga desapareça antes de a nova extensão ser desenhada.

Agora pinte a barra com fillRect, usando a largura convertida. Um x, um y e uma altura fixos mantêm a barra estável, enquanto a largura acompanha os dados.

Contorne a trilha completa com drawRect, para que os usuários vejam o máximo. O preenchimento cresce dentro dessa borda, dando um contexto claro à barra.

Associe a barra ao número exato. Posicione o cursor acima dela e use print para exibir a leitura, oferecendo aos usuários tanto a forma quanto o valor preciso.

Envie o quadro concluído com display.display(). Como o buffer inteiro é atualizado de uma vez, a barra se move suavemente, sem cintilação nem desenho incompleto.

Redesenhar o mais rápido possível deixa a imagem tremida. Um pequeno atraso de 50 milissegundos suaviza o movimento e estabiliza uma leitura instável do sensor.

Junte tudo: ler, mapear, limpar, desenhar, exibir e pausar. Esse ciclo em laço() é o mecanismo por trás de toda animação OLED ao vivo que você criar.

Você transformou leituras em um gráfico de barras ao vivo: ler, mapear, limitar, limpar, preencher, enquadrar, rotular e exibir em um ciclo ritmado. Isso é visualização em tempo real.