Membuat GUI dengan guizero

, , Leave a comment

guizero adalah wrapper dari library tkinter yang memungkinkan pemula seperti saya ini untuk membuat elemen-elemen gui dengan cepat dan mudah. Memang wrapper punya plus dan minus, misalnya kurang lengkap, tidak memberitahukan pengetahuan dasar tentang membuat gui dengan Python. Saya memandang wrapper dapat memberikan keuntungan lain, yaitu memberikan pengenalan dan mengajarkan struktur dari library yang sedang diwrap. Jadi saat pengguna ingin mengembangkan gui lebih lanjut, dengan tampilan lebih wah, mereka bisa mendalami library aslinya.

guizero terdapat pada Python3 untuk membuat gui sederhana yang dibuat agar mudah dimengerti oleh anak-anak. Bagi pemula, saya juga merasa menjadi audience dari guizero.

Untuk menginstall guizero di Raspberry Pi, kita hanya perlu mengetikkan perintah ini pada terminal

sudo pip3 install guizero

tidak diperlukan instalasi lain karena tkinter sudah termasuk dalam instalasi Python3. Perlu diingat kalau guizero adalah wrapper, yang artinya bisa dijalankan diluar sistem Raspberry Pi. Bisa dalam Python 3 di Windows atau Mac atau Linux PC/laptop.

Layout

Melalui guizero kita diajarkan tentang konsep master container yang disebut app. App adalah ukuran dari window gui kita. Berbagai macam elemen kontrol terdapat di guizero, mulai dari CheckBox, PushButton, Slider, ButtonGroup, Combo, Alert, Text, TextBox, Waffle, Menu, dan Picture. Pembuatnya menyebut elemen kontrol ini sebagai widget.

Widget ini diletakkan di dalam master container. Layout master container dapat disesuaikan berdasarkan modenya. Mode pertama adalah auto, yaitu setiap elemen akan disusun dari atas kebawah secara berurutan sesuai dengan posisi baris coding. Mode kedua adalah grid. Mode grid memberikan keleluasaan untuk meletakkan widget dimana kita mau dengan menambahkan argumen koordinat. Untuk mempermudah, koordinat ini bukan dalam bentuk satuan pixel, melainkan grid yaitu berdasarkan letak widget sebelumnya.

 

Jika kita ingin mengelompokkan berbagai macam widget dan meletakkan/memindahkan semua widget secara bersama-sama, kita menggunakan container yang lebih kecil, yang disebut dengan box. Box memiliki konsep yang sama dengan app. Box tidak terlihat dalam tampilan.

Untuk membuat master container App, hanya diperlukan 3 baris kode saja. Seluruh widget diletakkan diantara baris 2 dan 3.

Widget

Widget memungkinkan pengguna untuk dapat berinteraksi dengan program yang dibuat. Proses pembuatannya sangat sederhana, bahkan dengan satu baris kode saja. Dalam membuat widget Text, kita perlu mengimport modul Text. Text widget (baris 3) diletakkan setelah object app yang dibuat baris 2. JIka kita perhatikan secara seksama, maka text diletakkan pada master container app. Selanjutnya kita menuliskan teks apa yang ingin ditampilkan, begitu juga dengan beberapa pengaturan teks.

Contoh widget berikutnya adalah PushButton. Dari namanya saja kita sudah bisa menebak jika kita dapat berinteraksi dengan widget ini dan sesuatu bisa muncul saat tombol ditekan.

Perhatikan contoh dibawah ini, untuk membuat widget PushButton. PushButton adalah widget tombol sementara (momentarily push) sama seperti tactile switch. Kita perlu mengimport modul PushButton sebelum menggunakannya. Perintah untuk menampilkan PushButton dituliskan dibaris ke 7. Widget PushButton diletakkan pada master container app, dengan teks ‘click me’, argumen yang terpenting adalah command. Argumen command ini bertujuan untuk menjalankan sebuah fungsi. Dalam contoh ini fungsi bernama do_this akan dijalankan saat tombol ditekan. Fungsi yang akan dijalankan oleh widget dituliskan sebelum baris widget. Jika tidak maka akan muncul error saat script dijalankan.

Berbagai macam penggunaan widget bisa dibaca di sumber yang saya letakkan diakhir tulisan ini. Sebagai penutup, saya tunjukkan video demo penggunaan guizero untuk Physical Computing dari buku yang saya tulis (www.andidinata.com).

 

Selamat mencoba, silahkan comment, like dan share tulisan ini. Terima kasih dan sampai bertemu di tulisan berikutnya.

Source:

“https://lawsie.github.io/guizero/about/”

 

Facebook Comments
 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.