Butterfly: GUI Matlab

Oke kali ini saya akan membahas mengenai GUI matlab beserta contoh nya..
Here We Go..!!

GUI adalah singkatan dari Graphical User Interface, sebuah aplikasi display dari MATLAB yang mengandung tugas, perintah, atau komponen program yang mempermudah user (pengguna) dalam menjalankan sebuah program dalam MATLAB.

Kenapa sebaiknya menggunakan atau membuat GUI di MATLAB? Ringkasnya, GUI akan membuat program di MATLAB menjadi lebih simpel dan praktis digunakan oleh para end-user.

Proses-proses perubahan nilai variabel tidak perlu dilakukan lagi di dalam core program (m-file) sehingga proses pun akan semakin mudah dan cepat.
Dalam tutorial pertama ini, kita akan membuat sebuah GUI sederhana yang akan menjalankan program menjumlahkan dua angka input.

Tutorial ini akan menunjukkan beberapa penggunaan dasar MATLAB GUI yang akan dapat dikembangkan dalam program-program MATLAB yang lebih kompleks. Lets GUI your MATLAB!

MATLAB GUI Initialization

1. Buka MATLAB dan di command window ketik: guide

atau klik pada icon guide di MATLAB toolbar

2. Tampilan berikut akan muncul pada layar:

Pilih Blank GUI (Default) lalu klik OK.

3. Tampilan sebuah GUI kosong akan muncul di layar.

Bagian dengan kotak-kotak grid adalah area tampilan GUI yang akan didesain, besar area ini dapat diatur dengan men-drag titik sudut kanan bawah area grid tersebut.
Di kolom sebelah kiri, berjajar vertikal komponen-komponen GUI yang dapat ditambahkan dengan cara men-drag icon tersebut ke dalam area grid. Jenis dan fungsi dari komponen-komponen tersebut akan dipelajari secara bertahap melalui sejumlah tutorial.

Preparing MATLAB GUI Visualization

1. Sebelum meletakkan dan menyusun komponen-komponen GUI, sebaiknya sudah disketsa terlebih dahulu bayangan hasil akhir tampilan GUI, hal itu akan mempermudah proses pembuatan GUI.

GUI pada tutorial ini akan memiliki tampilan dasar seperti:

2. Untuk membuat GUI ini, akan digunakan komponen Static Text, Edit Text dan Push Button.

Static Text akan digunakan untuk “Menampilkan tulisan atau character pada GUI” dan “Sebagai tempat untuk menampilkan hasil dari program yang dijalankan”.

Edit Text akan digunakan untuk “Menerima input dari user untuk kemudian digunakan dalam program”.
Push Button akan digunakan sebagai “Eksekusi jalannya program”.
3. Susun sebuah komponen-komponen tersebut seperti pada tampilan dasar di poin no.1 (4 buah Static Text, 2 buah Edit Text dan sebuah Push Button).
4. Properti (String-Tulisan atau character yang akan ditampilkan, Font, dsb.) dari komponen-komponen tersebut dapat dirubah melalui Property Inspector dengan cara klik dua kali pada komponen yang akan dirubah propertinya. Sedangkan ukuran dari komponen, dapat diatur dengan men-drag pada titik sudutnya.

5. Pertama, akan dirubah properti Static Text untuk menjadi tulisan judul pada GUI, pada tutorial ini akan diberi judul “GUI Penjumlahan”.
Klik dua kali pada Static Text yang telah disusun di posisi judul. Pada tampilan Property Inspector, rubah parameter String menjadi “GUI Penjumlahan” dan Font Size menjadi 20. (Parameter-parameter lainnya dapat di-explore lebih lanjut, buka Help pada MATLAB untuk informasi)
Lakukan hal yang sama pada dua buah Static Text lainnya yang akan menjadi character “+” dan “—————”.

6. Ada hal sedikit berbeda untuk Static Text yang akan menjadi tampilan hasil pada GUI, karena komponen ini akan berkaitan langsung dengan program yang akan dijalankan.
Klik dua kali pada komponen ini, pada Property Inspector rubah String menjadi “0″ (nol).
Rubah parameter Tag menjadi output1. Penamaan ini tergantung kepada setiap desainer GUI, namun perlu diperhatikan: Ingatlah dan catat nama parameter Tag dari setiap komponen yang akan berkaitan dengan program.
Parameter Tag ini akan menjadi deskripsi komponen tersebut dalam program yang akan dijalankan, oleh karena itu setiap ketidaksamaan penamaan antara nama pada parameter Tag dengan nama yang dituju di program akan mengakibatkan error.

7. Untuk Edit Text, rubah parameter String menjadi “0″ (nol) dan Tag menjadi input1 dan input2.

8. Untuk Push Button, rubah parameter String menjadi “Add!!” dan Tag menjadi add_button.

9. Aturlah komponen-komponen tersebut di atas menjadi seperti tampilan dasar.

10. Save GUI tersebut dengan nama yang diinginkan. Sebaiknya gunakan nama yang mudah dan simpel karena nama tersebut akan menjadi command untuk memanggil GUI melalui command window.
Pada tutorial ini, GUI di-save dengan nama “penjumlahan” dan kemudian MATLAB akan menghasilkan dua buah file, yaitu “penjumlahan.fig” dan “penjumlahan.m”.
File “*.fig” adalah file yang memuat graphical interface dan file “*.m” adalah file yang memuat m-file berisi semua kode terkait dengan GUI.

Creating Programming Code For Your GUI

1. Buka file “*.m” yang terkait dengan GUI (dalam tutorial ini: “penjumlahan.m”). Klik icon function pada MATLAB Toolbar.

2. Klik pada pilihan input1_Callback. Tampilan m-file akan langsung menuju letak baris kode input1_Callback.

3. Tambahkan kode di bawah ini pada function input1_Callback.

Baris kode di atas akan memastikan input yang diambil terdefinisi dengan baik, memastikan hanya angka yang akan menjadi input.
Baris kode terakhir memberi perintah pada GUI untuk meng-update struktur handles setelah function Callback tersebut selesai. Handles akan menyimpan semua data-data relevan yang terkait dengan GUI.
Sangat disarankan untuk memasukkan baris kode terakhir ini di akhir kode yang dimasukkan pada setiap Callback Function.
4. Tambahkan kode tersebut di atas pada input2_Callback.
5. Sekarang, untuk menjalankan program utama, yaitu proses menjumlahkan, akan ditambahkan baris kode pada komponen add_button. Klik icon function pada MATLAB Toolbar

Klik pada pilihan add_button_Callback.
6. Tambahkan baris kode di bawah ini pada function add_button_Callback.

7. Perintah get akan mengambil variabel yang dimasukkan pada komponen Edit Text. Variabel yang diambil akan berupa String, oleh karena itu perlu di-convert terlebih dahulu menjadi Number dengan perintah str2num (baris kode berikutnya) sehingga operasi penjumlahan dapat dijalankan (operasi matematik tidak dapat dilakukan pada String).
8. Hasil dari penjumlahan yang ingin ditampilkan pada GUI perlu dirubah kembali menjadi String. Hal ini perlu dilakukan karena komponen Static Text tidak dapat menampilkan variabel dengan tipe Number. Peringatan error akan muncul apabila hasil yang ingin ditampilkan tidak dirubah ke dalam bentuk String.
9. Perintah set akan memasukkan variabel hasil penjumlahan ke dalam komponen Static Text yang memiliki parameter Tag output1.
10. CONGRATS!! GUI telah jadi dan siap digunakan. Jangan lupa untuk save m-file yang telah dibuat.

Launch the GUI
1. Ada dua cara untuk menjalankan GUI yang telah dibuat.
- cara pertama. Buka GUIDE Editor dan klik pada ikon Run seperti di bawah ini

-cara kedua. Yaitu menjalankan GUI melalui MATLAB command prompt.
Pertama set MATLAB current directory menjadi directory dimana file *.fig dan *.m dari GUI disimpan.
Kemudian ketik nama file GUI pada command prompt, tanpa memasukkan file extension (*.fig dan *.m). Dalam tutorial ini, untuk menjalankan GUI di atas cukup dengan mengetik “penjumlahan”