Friday, June 3, 2016

KLWP Komponent, Over Laps, dan Stack Group

  No comments
Group dalam KLWP adalah module yang berfungsi sebagai wadah untuk meletakkan module-module lain didalamnya, atau jika anda pernah mendengar tentang xml pada desain aplikasi android, group juga bisa diartikan sebagai layout.

Dalam mendesain preset KLWP penggunaan group sangat disarankan karena termasuk praktik yang baik, selain itu KLWP juga membatasi jumlah module yang bisa diletakkan pada Root, sedangkan animasi hanya bisa diterapkan pada module yang terletak tepat setelah Root, mengapa demikian? perlu diingat bahwa setiap animasi pada sebuah aplikasi baik itu live wallpaper ataupun yang lain akan mengkonsumsi ram, semakin banyak animasi maka akan semakin bayak ruang ram yang dibutuhkan, karena itu jika desain yang dibuat tidak membutuhkan animasi sebaiknya letakkan pada sebuah group.
Group dalam KLWP dibagi menjadi tiga bagian dan tentu saja memiliki fungsi yang berbeda.

Overlaps Group  

Sesuai dengan namanya, Overlaps group bersifat tumpang tindih atau menumpuk setiap module yang berada didalamnya atau bisa disebut relatif layout, lebar dari overlaps group tergantung dari setiap module baik itu panjang, lebar atau jarak (padding), kita buat contoh sederhana seperti gambar berikut.


Pada gambar diatas kita membuat contoh overlaps group dengan lima shape didalamnya, dengan nama Shape 0 - 4 caranya :
  1. klik icon " + " pilih Overlaps Group, Jika tidak mendapati apapun di layar preview jangan khawatir, karena kita belum menambahkan apapun, seperti keterangan diatas group hanyalah wadah atau pembungkus. 
  2. Selanjutnya  klik Overlaps group yang ada di tabel Items, kemudian geser ke table Position, pada bagian anchor pilih center
  3. Geser ke table Item kemudian tambahkan Shape, berinama Shape 0 caranya centang check box yang ada disamping shape kemudian pilih icon pensil.
  4. klik pada Shape 0, ubah value width menjadi 400 
  5. klik tombol back
  6. tambahkan Shape yang ke dua
  7. centang check box pada Shape yang baru ditambahkan kemudian klik icon copy yang berada disebelah icon pensil.
  8. klik icon paste yang ada di pojok kanan atas layar sebanyak tiga kali
  9. beri nama masing-masing Shape sesuai urutannya
  10. klik pada Shape 1, ubah value width : 40, color : red, anchor : top left, lihat penjelasan pada Tab Navigation.
  11. lakukan langkah yang sama pada shape-shape berikutnya, pada anchor kita ubah secara berlawanan contoh : shape 2: Top Right, Shape 3: Bottom Left, Shape 4: Bottom Right.
Sekarang coba kembali pada Shape 0, ubah value width menjadi lebih besar atau lebih kecil.


Seperti pada contoh gambar di atas dapat disimpulkan bahwa :
  • Lebar dari group mengikuti ukuran atau padding yang ditentukan pada module
  • Secara default overlaps group meletakkan module yang ada didalamnya pada posisi center
  • Posisi setiap module pada overlaps group selalu berkaitan antara satu dengan yang lain, sering kali terjadi kebingungan ketika kita merubah posisi module pada overlaps group, module yang lain ikut bergeser atau posisi dari module yang dirubah tidak bergeser karena tidak memahami hal ini.
  • Untuk mengatasi masalah dari point di atas kita bisa menggunakan shape dengan warna transparan sebagai background yang lebarnya bisa kita sesuaikan.   
mudah-mudahan dengan ini kita lebih paham bagaimana menggunakan Overlaps group.

Stack Group

Stack group akan meletakkan setiap module yang ada didalamnya secara tersusun berjejer baik itu vertikal ataupun horizontal, untuk merubah jenis susunan module pada Stack Group, geser pada table Layer kemudian pilih Stacking.


Berbeda dari Overlaps Group, padding dari setiap module pada stack group berdasarkan batas terdekat misalkan module dengan module yang lain atau module dengan batas dari group itu sendiri, contoh kita buat stack group dengan tiga shape rectangle didalamnya, masing-masing dari shape kita ubah width : 160, height : 80, Bpadding : 30, maka akan tampak seperti gambar berikut.


Pada Stack group setiap module yang ditambahkan tidak akan pernah menimpa module yang lain, Contoh :

  • Ubah stacking menjadi Center Horizontal
  • pada setiap shape ubah Rpadding menjadi 25
  • keluar dari Stack group, kemudian tambahkan Stack groub baru pada layer Root.
  • Cut Stack group yang pertama dengan cara centang pada check box, klik pada icon three dots yang ada diatas layar kemudian pilih Cut.
  • kita buka Stack group yang baru kemudian klik icon paste
  • kemudian lakukan copy paste sebanyak 3x pada Stack group tersebut (lihat contoh shape pada Overlaps group)
Hasilnya akan seperti gambar di bawah ini.


Komponent

Komponent merupakan Overlaps group spesial yang dapat di export secara terpisah, misalkan kita mempunya beberapa bagian desain seperti jam weather atau yang lain, dan kita tidak ingin membagikan semua, maka komponent merupakan wadah yang tepat, Komponent juga bisa disebut widget pada KLWP, seperti halnya preset, komponen juga memiliki variable global tersendiri.
Komponent juga dapat di Export dalam bentuk APK sepeerti preset. jadi kita bisa menggunakan komponent di beberapa Preset.
Menambahkan komponent sama dengan menambahkan module yang lain, hanya saja setelah menambahkan komponent kita akan dibawa pada halaman seperti ketika memilih preset.


Seperti contoh gambar di atas, KLWP juga memiliki Buil-in komponent yang bisa digunakan' atau jika memiliki komponent berupa nama_komponent.komp.zip, letakkan file tersebut pada /sdcard/Kustom/komponents.
Ketika memuat komponent yang telah jadi, kita tidak akan melihat module apapaun di dalamnya karna terkunci, jadi ketika ingin melihat atau mengedit, buka kunci komponent yang berada di atas layar, variable global pada komponent hanya bisa di akses oleh komponent itu sendiri.

Export Komponent
Cara mengexport komponent berbeda dengan mengeksport Preset, misalkan kita memiliki sebuah komponent yang siap dibagikan.

  • Pastikan komponent tidak dalam keadaan terkunci
  • Lihat deretan menu pada atas layar
  • klik icon export yang berada disebelah icon gembok
  • isi Title, Diskripsi dan yang lain kemudian klik Export

Letak komponent yang di export berada pada folder /sdcard/Kustom/komponents/ berupa nama.komp.zip

KLWP User Interface

  No comments
Setelah kita menginstall KLWP dan membukanya, tampilan utama akan terlihat seperti gambar dibawah ini, semoga dengan ini kita dapat memahami banyak kurangnya dalam menggunakan KLWP.
Pada deretan bagian kanan atas terdapat icon :
  •  +  : berguna menambahkan module KLWP diantaranya Komponent, Shape,Text, Image dan sebaginya
  • Restore point : berguna mengembalikan desain yang kita buat pada poin tertentu, misalkan dari auto save atau yang lain
  • Floppy disk : jika kita melakukan perubahan pada desain, jangan lupa untuk memilih icon ini sebelum keluar dari aplikasi KLWP, tujuannya untuk menyimpan hasil dari desain kita dan menerapkan pada homescreen  

Pada deretan sebelah kanan screen terdapat beberapa icon yaitu :
  • Screen Count : mengindikasikan jumlah halaman yang disiapkan untuk desain live wallpaper yang akan dibuat, pengaturan jumlah halaman ini biasanya diartikan dengan jumlah "Page Setup", dalam KLWP Page Setup ini akan berpengaruh pada halaman homescreen yang kita geser (scroll)
  • Automatic Zoom : berguna mengotomatiskan zoom level pada module yang kita pilih
  • Preview Lock : berguna mungunci tampilan module yang dipilih pada table Preview, misalkan module yang kita pilih menggunakan animasi tertentu, maka table Preview hanya akan mengikuti module tersebut
  • Hiding and Unhiding Selected Module : berfungsi untuk menampilkan semua module atau hanya menampilkan module yang kita pilih
  • Pause Clock Animation : mematikan atau menghidupkan animasi pada jam
  • Magnetic Sensor : mematikan atau menghidupkan fungsi magnetic sensor
Bagian bawah screen adalah navigasi editor seperti items, position, animation dan sebagainya, sub menu pada table ini akan berubah-ubah tergantung dari module atau items yang dipilih, sedangkan pada bagian kiri screen menunjukkan susunan dari module.

Pada bagian pojok kiri atas screen terdapat icon hamburger yang merupakan menu dari KLWP, di antaranya :
  • Set as Wallpaper : menerapkan preset KLWP pada layar homescreen (tema atau skin)
  • Load Preset : memilih dan menerapkan preset yang ada pada perangkat.
  • Export Preset : menyimpan atau mengexport preset kedalam penyimpanan perangkat.
  • Settings : merupakan pilihan pengaturan pada KLWP. 

Load Preset

Seperti yang telah di jelaskan, Load Preset merupakan sebuah menu utama untuk memilih Preset baik itu preset build-in atau external.


Pada barisan paling atas terdapat beberapa menu yaitu :
  • Three dots : menu untuk menuju ke Play Store
  • Page view : pilihan view dari table preset
  • New : membuat preset baru
  • Folder : mengambil preset dari folder
  • Search : mencari nama preset
  • Back : kembali ke layar awal
Pada baris berikutnya merupakan navigasi table preset
  • Exported : file preset berupa namaPreset.klwp.zip yang di import kedalam folder /sdcard/Kustom/wallpaper 
  • Installed : preset yang telah terinstall pada perangkat
  • Featured : preset yang di sediakan secara online

Export Preset

Export preset merupakan menu jika ingin membagikan atau membuat preset KLWP beruapa APK, caranya cukup mudah, jika telah siap dengan preset buatan anda,  pilih Export Preset, isi kolom sesuai keterangan yang ada.
setelah selesai dengan keterangan dan optional, klik EXPORT.
preset akan disimpan didalam folder sdcard/Kustom/wallpaper/ berupa nama-template.klwp.zip.


Settings

Pada bagian setting terdapat beberapa menu seperti pada gambar berikut.


General Settings :
  • Clock Mode : mode jam KLWP (12, 24, auto)
  • First Day Of The Week : hari pertama yang dimulai
  • Calendar To Show : menentukan kalender berupa event yang ingin ditampilkan (mengambil dari aplikasi lain misalkan BBM, G+ atau yang lain)
  • App Language : bahasa aplikasi
  • Preferred Music Player : menentukan music player yang ingin dipakai
  • On tab feedback : none / vibrate / vibrate light
Weather :
  • Weather Provider : memilih provider yang ingin digunakan untuk prakiraan cuaca
  • Measurement Unit : unit pengukuran suhu
  • Network Refresh : jarak waktu untuk merefresh weather, RSS dan lain-lain secara online
  • Force Update : refresh secara manual
Location :
  • Location Accuracy : update data secara berkala untuk menetapkan keakuratan lokasi
  •  Primary Location : menetapkan lokasi utama
  •  Alternate Location 1, 2, 3 : lokasi alternatif

Module

Module merupakan komponent-komponent dasar yang disediakan untuk membuat sebuah desain pada KLWP, seperti yang telah di jelaskan, untuk manambahkan module cukup klik pada icon " + " yang ada di atas layar, kemudian pilih yang di inginkan.

  • Komponent : merupakan module sepesial yang dapat di Export secara terpisah, jadi jika mempunyai bebrapa bagian desain dan hanya salah satunya saja yang ingin dibagikan maka gunakan module ini untuk membungkus module yang lain, module juga bisa di artikan widget pada KLWP.
  • Text : menambahkan text element
  • Shape : berguna mumbuat bentuk dasar seperti rectangle, circle, hexagon dan sebagainya.
  • Image : menambahkan gambar berupa png, svg dan lain-lain
  • Font Icon : icon svg berupa font
  • Progress : indikator min, max, value.
  • Morphing Text :  text tunggal dengan banyak transformasi seperti melengkung, terbalik dan lain-lain
  • Series : susunan text berupa tanggal, baterai, jam dan lain-lain yang dapat disesuaikan
  • Overlaps Group : pembungkus dari module lain yang tersusun secara menumpuk.
  • Stack Group : pembungkus dari module lain yang tersusun secara berlapis atau stack.
Untuk penjelasan lain akan kita bahas pada bagian selanjutnya