Sunday, March 19, 2017

KLWP Custom Progress Bar

  1 comment
Bagi kita penggemar dunia digital tentu tidak asing dengan namanya progress bar, yaitu suatu elemen yang mengindikasikan seuatu proses sedang berjalan atau persentase dari suatu level, dengan melihatnya saja tentu kita paham bagaimana kondisi dari proses tersebut misalkan ketika mendownload sesuatu atau ketika melihat level baterai ponsel.


Dalam KLWP module progress bar secara default menyediakan beberapa pilihan yang dapat langsung kita gunakan seperti jam, menit, detik, music play time dan volume, tapi jika ingin menggunakan untuk yang lain kita dapat menggunakan pilihan custom yang memerlukan suatu formula agar dapat berjalan sesuai proses yang di inginkan, nah bagi yang belum tau bagaimana membuatnya kita akan jelaskan disini.

Custom progress bar memiliki beberapa menu yang akan terlihat seperti gambar berikut


yang perlu kita perhatikan pada menu-menu di atas adalah bagian max, level dan section sedangkan pada bagian min kita biarkan 0 untuk yang lain sesuaikan dengan keinginan.
dari menu diatas yang perlu kita sisipi formula adalah bagian level, silahkan lihat pada Tutorial sebelumnya bagaimana menambahkan formula pada KLWP, misalkan disini kita membuat progress bar signal selluler, agar lebih mudah kita ganti menjadi Split Progress pada bagian mode.
ubah value max: 4, section: 4 (ketik secara manual), sedangkan level kita beri formula $nc(csig)$.


Progress bar memory used:
max: 100, section: 100, level: $rm(mused)/rm(mtot)*100$
Progress bar memory free:
max: 100, section: 100, level: $rm(mfree)/rm(mtot)*100$
Untuk yang lain silahkan dicoba sendiri.

Membuat Shape mengikuti Progress Bar

Untuk membuat shape mengikuti jalannya progress bar kita perlu menggunakan overlaps group dan menambahkan formula pada bagian padding shape.


misalkan pada contoh gambar diatas kita gunakan overlaps group dan shape retangle dengan width: 580, height: 179 sebagai background.
  • tambahkan progress bar detik agar lebih mudah dengan size: 520, height: 15, fgcolor: hijau
  • tambahkan shape circle, width: 40 color: hijau
  • pada bagian position dari shape circle, kita ubah anchor menjadi "center left"
  • pada bagian "LPadding" posisikan pada pangkal progress bar untuk menyesuaikan contoh: 10
  • beri formula pada LPadding: $10+(520/60*df(s))$
Note:
- anka 10 kita ambil dari LPadding sebelum di beri formula 
- angka 520 kita ambil dari size progress bar
- angka 60 adalah total detik selama 1 menit