Wednesday, October 21, 2015

Zooper Widget User Interface

  1 comment
           Membuat sebuah widget dengan zooper sangatlah mudah seperti halnya widget-widget pada umumnya anda tinggal menambah dan meletakkan widget pada area kosong di layar homescreen anda,  Zooper juga menyediakan banyak ukuran agar sesuai dengan yang dibutuhkan atau anda juga bisa merubah ukuranya dengan cara meresize widget yang sudah ditambahkan, jika anda ingin membuat sebuah widget secara full pada layar homescreen anda perlu menyesuaikan setting pada launcher yang anda gunakan.
Jika anda baru pertama kali menggunakan tidak ada salahnya untuk mencoba dengan beberapa tema atau skin yang juga banyak disediakan di Play Store dari yang free ataupun berbayar, untuk masuk pada editor Zooper, anda cukup mengklik pada widget yang sudah ditambahkan pada homescreen anda, pada tampilan awal akan terlihat seperti contoh gambar berikut


  • Empty : membuat skin/tempate dari awal
  • Builtin : skin/template yang disertakan dalam aplikasi zooper
  • SD card : skin/template yang di simpan pada memori, letaknya di sdcard / ZooperWidget / Templates
  • Autosave : zooper secara otomatis menyimpan skin/template yang di edit, jadi jika lupa menyimpan skin, kmudian widget terhapus tidak perlu khawatir
Selanjutnya pada editor widget akan tampak seperti gambar berikut :


  • pada bagian atas ada beberapa icon yang berfungsi untuk kembali pada menu sebelumnya, save dan help
  • area kosong pada editor berfungsi sebagai preview dari module yang ditambahkan
  • Layout : menambahkan atau mengedit module diantaranya rect, text, bitmap dan lain-lain
  • Widget Background : merubah warna background dari widget
  • Widget OnTap Action : memilih Tab Action pada widget (launch shortcut, membuka aplikasi dan lain-lain)
  • Location : jika zooper tidak mendeteksi lokasi kita saat ini secara otomatis, kita bisa menggunakan fitur ini untuk menambahkan lokasi kita secara manual
  • Global Preferences : setting widget seperti menggunakan temperatur celcius atau fahrenheit, waktu untuk merefresh weather dan lain-lain
  • Force Update : mengupdate widget jika weather,lokasi dan lain-lain tidak terupdate secara otomatis
  • Widget Name : memberi nama pada widget
  • Calendar To Display : memilih kalender event untuk di tampilkan (mengambil dari group, akun, atau yang lain)
  • Scaling : jika kita memasang template kemudian module didalamnya tidak pas dengan ukuran widget, gunakan fitur ini untuk membesarkan atau mengecilkan module (secara keseluruhan)
  • Rate the app dan seterusnya (menuju ke link zooper)

Layout Module

          Pada bagian Layout anda akan dihadapkan pada jendela baru, jika anda memulai dari awal mungkin akan terlihat seperti table kosong, untuk memulainya silahkan anda tambahkan module dengan mengklik icon  pada bagian atas table, Zooper menyediakan beberapa module yang bisa anda gunakan untuk mendesain widget diantaranya :

  • Text
  • Rect
  • Rich Text
  • Series
  • Scalable Icon Set
  • Bitmap Icon Set
  • Progress Bar
  • Bitmap
silahkan anda coba sendiri masing-masing dari kegunaan module tersebut, pada setiap module yang ditambahkan ada kolom seleksi pada bagian kanan yang berfungsi untuk mengcopy atau menghapus dari module yang dipilih, anda juga bisa mengurutkan dari beberapa module ke atas atau ke bawah dengan cara tab geser, editor pada Zooper bersifat seperti layaknya lapisan layer pada photoshop atau editor gambar yang lain, jadi setiap anda menambahkan module akan menimpa module yang lain di posisi yang sama.

Module Editor

          Pada ganbar di atas saya mengambil rect sebagai module editor, dari setiap module memiliki submenu yang fungsinya hampir sama, walupun ada perbedaan anda tidak akan kesulitan untuk memahami, fungsi-fungsi submenu dari module editor antara lain :

  • Module Name : memberi nama pada module (secara default nama module sama dengan jenisnya)
  • Screen Anchor : memposisikan module pada bagian top, bottom, left, right, center dan lain-lain
  • X / Y offset : menggeser posisi ke kiri, kanan, atas, atau bawah
  • Module On Tab : setting tab action pada module
  • Color : menentukan warna
  • Width / Height : menentukan panjang atau lebar
  • Corner : menentukan sudut tumpul
  • Outline : menentukan outline (garis tepi)
  • Rotation
  • Curving : menentukan lengkung
  • Drawing Mode : menentukan mode seperti lapisan layer pada image editor
  • Blur : membuat shadow color
  • Gradient Mode : membuat gradient
  • Advance parameter : pengkondisian module
Untuk yang lain silahkan anda mencoba menambahkan module atau mengedit dari skin/template yang ada sebagai bahan ujicoba.