Animasikan Grafik Batang

Angka memang tepat, tetapi batang menyampaikan informasi secara langsung. Batang yang bertambah panjang menunjukkan kenaikan nilai sensor jauh lebih cepat daripada membaca digit. 📊

Animasi dimulai dari data terbaru. Pada setiap perulangan, Anda mengambil nilai sensor baru, misalnya hasil analogRead yang berada di antara 0 dan 1023.

Rentang mentah biasanya tidak sesuai dengan layar. Gunakan pemetaan untuk mengubah skala 0-1023 menjadi 0-128 piksel agar nilainya sesuai dengan lebar display.

Pembacaan yang berisik dapat melampaui batas. Bungkus nilainya dengan pembatasan agar batang tidak pernah digambar melewati tepi layar dan merusak tata letak.

Animasi hanyalah proses menggambar ulang dengan cepat. Setiap bingkai dimulai dengan clearDisplay agar batang lama menghilang sebelum panjang baru digambar.

Sekarang gambar batang dengan fillRect menggunakan lebar yang telah dipetakan. x, y, dan tinggi yang tetap membuatnya stabil, sementara lebarnya berubah mengikuti data.

Gambar garis tepi seluruh jalur dengan drawRect agar pengguna melihat nilai maksimumnya. Isian bertambah di dalam tepi ini, sehingga konteks batang menjadi jelas.

Pasangkan batang dengan angka yang tepat. Atur kursor di atasnya dan cetak pembacaan tersebut agar pengguna mendapatkan bentuk sekaligus angka pastinya.

Kirim bingkai yang telah selesai dengan display.display(). Karena seluruh penyangga diperbarui sekaligus, batang bergerak dengan mulus tanpa kedipan akibat gambar yang setengah selesai.

Menggambar ulang secepat mungkin tampak bergetar. Jeda kecil selama 50 milidetik akan memperhalus gerakan dan menstabilkan pembacaan sensor yang berfluktuasi.

Gabungkan semuanya: baca, petakan, hapus, gambar, tampilkan, lalu jeda. Siklus dalam perulangan() ini adalah mesin di balik setiap animasi OLED langsung yang Anda buat.

Anda mengubah pembacaan menjadi grafik batang langsung: baca, petakan, batasi, hapus, isi, bingkai, beri label, dan tampilkan dalam perulangan yang kecepatannya diatur. Itulah visualisasi waktu nyata.