Anda di sini

Pemrograman

[TUTORIAL] Pemrograman GUI pada Processing (Part - 1)

Kusuma Wardana - 05 Maret 2016 13:00:55 0

Pendahuluan

Untuk pemrograman yang sifatnya interaktif, Processing dapat menjadi pilihan yang tepat. Telah banyak karya menakjubkan yang dapat dihasilkan menggunakan Processing. Untuk beberapa penerapan, misalnya menghubungkan Processing dengan Arduino, penggunaan Graphical User Interface (GUI) dapat mempermudah pengguna dalam mengontrol aplikasi yang telah dibuatnya. Pada tutorial ini, kita akan memanfaatkan pustaka untuk membuat GUI yang telah dibuat oleh Peter Lager yang dikenal sebagai G4P (GUI for Processing).

Instalasi Pustaka G4P

Kita akan melakukan instalasi pustaka G4P langsung dari Processing. Pertama, pastikan komputer kita terhubung dengan internet. Kemudian, bukalah program Processing kita, dan carilah di menu Sketch - Import Library... - Add Library... . Selanjutnya, akan muncul jendela Contribution Manager, seperti yang terlihat pada Gambar 1. Pada kolom Filter, ketiklah kata kunci G4P, dan klik tombol Install.

Gambar 1. Jendela Contribution Manager

Tunggulah beberapa saat sampai instalsi benar-benar selesai. Jika telah selesai, tutuplah jendela tersebut dan Restart jendela Processing kita. Ketika program Processing dibuka kembali, periksalah di menu File - Examples... . Selanjutnya, akan muncul jendela Java Example, seperti pada Gambar 2. Pastika pustaka G4P telah dimasukkan pada folder Contributed Libraries. Untuk belajar semua fitur yang dimiliki, kita dapat membuka beberapa contoh yang telah disediakan.

Gambar 2. Jendela Java Examples

Menggunakan Slider

Mari kita awali dengan pemrograman sederhana, yaitu menggunakan Slider. Kita akan menggambar sebuah lingkaran dengan besarnya diameter diatur berdasarkan nilai pada Slider. Ketiklah skrip berikut:

import g4p_controls.*;
GCustomSlider sliderku;

void setup()
{
  size(600, 400);
  sliderku = new GCustomSlider(this, 100, 300, 400, 50, "red_yellow18px");
  sliderku.setShowDecor(false, true, true, true);
  sliderku.setNbrTicks(5);
  sliderku.setLimits(0, 0, 255);
 
}

void draw() {
  background(#E1F022);
  ellipse(300, 160, sliderku.getValueI(), sliderku.getValueI());
 
}

void handleSliderEvents(GSlider slider) {
  println("integer value:" + slider.getValueI() + " float value:" + slider.getValueF());
}

Untuk menggunakan pustaka ini, kita harus menyertakannya menggunakan perintah import g4p_controls.*;. objek Slider ditempatkan pada GCustomSlider dan kita beri nama sliderku. Pertama kita buat Slider dengan mengatur posisi dan panjang dari Slider tersebut. Input "red_yellow18px" memang telah disediakan oleh pembuat library. Pada OS Windows, kita dapat melihatnya di folder \Documents\Processing\libraries\G4P\src\data. Pilihan lainnya adalah blue18px, green_red20px, grey_blue dan purple18px.

Skrip sliderku.setShowDecor(false, true, true, true) akan mengatur tampilan dari Slider kita. Kita dapat memodifikasinya dengan mengisi kata true atau false dengan rincian input sebagai berikut: sliderku.setShowDecor(transparansi, perlihatkan ticks, perlihatkan nilai Slider, perlihatkan batas-batas Slider). Selanjutnya, kita dapat mengatur jumlah ticks dan mengatur batas-batas nilai Slider kita menggunakan sintaks sliderku.setNbrTicks(5) dan sliderku.setLimits(0, 0, 255), yang berarti bahwa jumlah tick sebanyak lima, dan nilai Slider berada pada rentang 0 - 255, dengan posisi awal di 0. Terdapat metode untuk meng-handle event pergeseran dari Slider yaitu void handleSliderEvents(GSlider slider). Sintaks ini sebaiknya kita biarkan saja secara default. Objek lingkaran dibuat dengan menggunakan fungsi ellipse, dengan nilai tinggi dan lebar diperoleh dari nilai integer dari slider yaitu sliderku.getValueI().

Ketika program kita jalankan, maka akan tampil jendela seperti Gambar 3. Atur-aturlah posisi Slider sesuai keinginan kita, dan lihatnya perubahan pada lingkaran.

Gambar 3. Mengatur Diameter Lingkaran Menggunakan Slider

Demikian tutorial kali ini. Pemrograman GUI lainnya akan kita lanjutkan pada tutorial selanjutnya. Semoga bermanfaat I-m so happy

Referensi

G4P Library : http://www.lagers.org.uk/g4p/index.html

4.224
Daftar Artikel Terkait
Image

Kusuma Wardana

I Nyoman Kusuma Wardana, yang akrab dipanggil Kusuma, lahir dan besar di Bali. Ia tinggal di Desa Wisata Ubud, dan lebih banyak melaksanakan aktivitasnya di Denpasar. Profesinya adalah sebagai staf pengajar di Jurusan Teknik Elektro, Politeknik Negeri Bali. Saat ini Ia menjadi salah satu penulis di tutorkeren.com.

Artikel Menarik Lainnya
Mari Gabung

Halo Emo 51 , Ada yang ingin disampaikan? Jangan sungkan untuk gabung diskusi ini. Silahkan Login dulu atau Daftar baru.