MATLAB GUI – Introduction for Beginners

February 10, 2009

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.

gui
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

command-window_guideatau klik pada icon guide di MATLAB toolbar copy-of-matlab

2. Tampilan berikut akan muncul pada layar:

guide-quick-start

Pilih Blank GUI (Default) lalu klik OK.

3. Tampilan sebuah GUI kosong akan muncul di layar.

untitled_fig2

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:

tampilan-dasar

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

tombolStatic 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.

uicontrol

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.

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.function

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

copy-2-of-function2

3. Tambahkan kode di bawah ini pada function input1_Callback.

input1_funBaris 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 function

Klik pada pilihan add_button_Callback.

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

add_fun

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

tampilan-dasar_play-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”

call12. GUI akan berjalan

gui21

Silahkan coba berbagai macam angka untuk menguji GUI ini. Selamat ber-GUI ria…

Apabila kamu mengalami kesulitan dan ingin bertanya..

Apabila kamu membutuhkan file GUI di atas untuk bahan belajar..

Apabila kamu ingin berdiskusi tentang aplikasi, programming dan simulasi pada MATLAB, Simulink dan GUI…

Silahkan tuliskan di kolom Comment di bawah ini atau jangan ragu untuk kontak kami di ganeshatech@gmail.com.


About these ads

9 Responses to “MATLAB GUI – Introduction for Beginners”

  1. eka Says:

    ass..
    aq butuh file GUI matlab nya dunk.. untuk belajar
    thanks a lot

  2. dayat Says:

    thax ya,,,

  3. nury Says:

    ass…
    gmn caranya mengambil file tersimpan melalui klik pushbutton yg ada pada GUI?makasih sblmnya…

  4. echa Says:

    thanks for the tutorial…

  5. gema Says:

    mas, minta codenya donk…. but ngerjain projek sistem pakar neeh,,,,

  6. Andi Says:

    ??? Reference to non-existent field ‘input1′.

    Error in ==> penjumlah>add_button_Callback at 144
    x = get(handles.input1,’String’);

    Error in ==> gui_mainfcn at 75
    feval(varargin{:});

    Error in ==> penjumlah at 42
    gui_mainfcn(gui_State, varargin{:});

    ??? Error while evaluating uicontrol Callback.

    kok ndak bisa, mohon petunjuknya

  7. recomerz Says:

    Thanks gan, kebetulan ada tugas buat program pake GUI.

  8. mbelungerz Says:

    wah, makasih banyak gan.. akhirnya nemu juga nih solusi buat tugas ane.. :D

  9. rena TIP Says:

    salam kenal, saya mahasiswi lagi ngurus skripsi…

    gini mas/mbak mau nanya,kalau buat program aplikasi dengan judul program aplikasi Analisa Pengaruh Karakteristik dan Desain Pekerjaan terhadap Kepuasan Kerja.. nah programnya itu mau dibandingkan antara analisa Fuzzy dengan analisa regresi,, jadi di menunya nanti ada menu callback 1=data, callback 2=analisa fuzzy, callback 3=analisa regresi… nah saya bingung buat bikinnya dan masukin m filenya ke gui itu.. mohon bantuannya,, terimakasih..

    btw m file itu yang kita bikin di command window bukan ya? maaf merepotkan, masih pemula banget dalam hal pemrograman :)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: