Setelah identitas sistem terpampang di tengah layar melalui koordinat teks pada bagian sebelumnya, kita akan menambahkan elemen visual dinamis. Kehadiran loading bar bukan hanya pemanis, tetapi juga berfungsi sebagai indikator visual kepada pengguna bahwa sistem sedang bekerja dan tidak dalam keadaan hang.
Bagian ini akan membedah logika penempatan objek grafis, kalkulasi titik tengah layar untuk objek piksel, serta pemilihan skema warna modern yang kontras di atas latar belakang hitam.
1. Kembali ke Dunia Piksel (Coordinate Re-mapping)
Berbeda dengan penulisan teks yang menggunakan baris dan kolom (80×25), pembuatan loading bar mengharuskan kita kembali menggunakan koordinat piksel murni. Kita harus menentukan posisi bar secara presisi agar tidak menabrak teks yang sudah kita buat sebelumnya.
// 6. ANIMASI LOADING BAR (Modern Style)
UINT32 BarY = (Height / 2) + 50;
UINT32 BarWidth = 300;
UINT32 BarHeight = 4;
UINT32 BarXStart = (Width - BarWidth) / 2;
Analisis Parameter Geometri:
BarY(Posisi Vertikal): Kita mengambil titik tengah layar (Height / 2) lalu menambahkannya dengan 50 piksel. Ini dilakukan agar batang pemuat berada tepat di bawah teks identitas, memberikan ruang napas (padding) yang cukup secara estetika.BarWidth&BarHeight: Kita menetapkan lebar batang sebesar 300 piksel dan tinggi (ketebalan) hanya 4 piksel. Desain yang tipis ini memberikan kesan minimalis dan modern, berbeda dengan loading bar jadul yang biasanya tebal dan kaku.BarXStart(Aljabar Penengah): Untuk membuat objek berada tepat di tengah secara horizontal, kita menggunakan rumus:(Lebar Layar - Lebar Objek) / 2. Rumus ini memastikan bahwa sisa ruang di kiri dan kanan objek adalah sama besar.
2. Skema Warna: Format BGR dan Efek Neon
Warna memegang peranan penting dalam user experience. Dalam kode ini, kita mendefinisikan dua warna utama untuk sistem pemuatan:
UINT32 WarnaLoading = 0x00FFFF00;
UINT32 WarnaBackgroundBar = 0x00333333;
Analisis Warna (Format BGR):
- Cyan/Neon Blue (
0x00FFFF00): Dalam format BGR (Blue-Green-Red), nilai ini berarti Biru Maksimal (FF), Hijau Maksimal (FF), dan Merah Nol (00). Hasilnya adalah warna Cyan cerah yang memberikan kesan teknologi modern. - Dark Gray (
0x00333333): Digunakan sebagai “track” atau jalur latar belakang bar. Dengan memberikan warna abu-abu gelap, pengguna bisa melihat seberapa jauh proses telah berjalan dan berapa banyak sisa ruang yang harus diisi.
3. Konstruksi Jalur (Background Track)
Sebelum bar utama “berjalan”, kita harus menggambar jalurnya terlebih dahulu. Tanpa jalur ini, bar hijau yang berjalan akan terlihat seperti melayang di kegelapan.
for (UINT32 y = 0; y < BarHeight; y++) {
for (UINT32 x = 0; x < BarWidth; x++) {
UINT32 Index = ((BarY + y) * PixelsPerScanLine) + (BarXStart + x);
VideoBuffer[Index] = WarnaBackgroundBar;
}
}
Analisis Teknis Iterasi:
- Nested Loop: Kita menggunakan dua perulangan (Y untuk tinggi, X untuk lebar). Ini adalah cara standar untuk menggambar area persegi (kotak) pada framebuffer.
- Indeks Memori: Perhatikan penggunaan
PixelsPerScanLine. Rumus ini memastikan setiap baris piksel yang kita gambar di memori video sejajar dengan baris piksel yang tampil di monitor fisik. Jika kita salah menghitung indeks ini, bar yang kita gambar akan terlihat “miring” atau pecah.
Kesimpulan Bagian 8
Bagian ini menunjukkan bahwa desain antarmuka pada level rendah (low-level) adalah perpaduan antara estetika desain dan ketepatan matematika. Dengan menghitung posisi piksel secara relatif terhadap resolusi layar, RezaOS mampu menampilkan antarmuka yang konsisten dan seimbang, apa pun resolusi monitor yang digunakan oleh pengguna.
Kita telah menyiapkan “jalur” dan parameter geometri; kini sistem siap untuk menggerakkan indikator kemajuan tersebut.
Langkah Selanjutnya:
Pada bagian kesembilan, kita akan membedah Logika Animasi dan Stall (Delay). Kita akan melihat bagaimana RezaOS memanipulasi waktu untuk menciptakan efek pergerakan bar yang halus dan memberikan konfirmasi status “[ OK ]” di akhir proses.