1. Pendahuluan
GUIDE atau GUI builder merupakan sebuah graphical user interface (GUI) yang dibangun dengan
obyek grafik seperti tombol (button), kotak teks, slider, menu dan lain-lain. Aplikasi yang
menggunakan GUI umumnya lebih mudah dipelajari dan digunakan karena orang yang
menjalankannya tidak perlu mengetahui perintah yang ada dan bagaimana kerjanya.
Sampai saat ini, jika kita membicarakan pemrograman berorientasi visual, yang ada di benak kita
adalah sederetan bahasa pemrograman, seperti visual basic, Delphi, visual C++, visual Fox Pro,
dan lainnya yang memang didesai secara khusus untuk itu. Matlab merintis ke arah
pemrograman yang menggunakan GUI dimulai dari versi 5, yang terus disempurnkan sampai
sekarang (Matlab 7).
GUIDE Matlab mempunyai kelebihan tersendiri dibandingkan dengan bahasa pemrogram lainnya,
diantaranya:
1) GUIDE Matlab banyak digunakan dan cocok untuk aplikasi-aplikasi berorientasi sains,
sehingga banyak peneliti dan mahasiswa menggunakan GUIDE Matlab untuk
menyelesaikan riset atau tugas akhirnya.
2) GUIDE Matlab mempunyai fungsi built-in yang siap digunakan dan pemakai tidak perlu
repot membuatnya sendiri.
3) Ukuran file, baik FIG-file maupun M-file, yang dihasilkan relatif kecil.
4) Kemampuan grafisnya cukup andal dan tidak kalah dibandingkan dengan bahasa
pemrograman lainnya.
2. Memulai GUIDE MATLAB
Memulai GUIDE Matlab dapat dilakukan dengan dua cara, yaitu:
1) Melalui command matlab dengan mengetikkan: >> guide
2) Klik tombol Start Matlab dan pilihlah MATLAB, lalu pilih GUIDE (GUI Bulder)
Gambar 1: Memulai GUIDE
EEPIS-ITS | Praktikum Pengolahan Sinyal Digital 1
[pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict]
Selanjutnya akan muncul tampilan kotak dialog pilihan GUIDE Quick Start.
Gambar 2: GUIDE Quick Start
GUIDE Quick Start memiliki dua buah pilihan, yaitu Create New GUI dan Open Existing GUI. Create
New GUI digunakan jika kita memang belum pernah membuat aplikasi GUI Matlab atau jika kita
memang ingin membuat sebuah figure baru, sedangkan Open Existing GUI digunakan jika kita
sudah memiliki file figure matlab atau akan memodifikasi file figure yang telah kita simpan.
Pada pilihan Create New GUI terdapat menu GUIDE templates yang memiliki beberapa tipe dasar
dari GUI, sehingga kita dapat melakukan modifikasi pada template agar menjadi GUI seperti yang
kita harapkan. Sebagai pemula, kita gunakan Blank GUI (Default) yang merupakan sebuah GUI
dengan figure kosong dan merupakan kondisi default dari GUIDE dan diplih jika kita memang akan
membuat sebuah aplikasi dengan komponen yang layout-nya tidak terdapat pada GUI template
yang lain. Setelah kita memilih Blank GUI templates, maka akan muncul tampilan Menu Utama
GUIDE.
Running
Alignment
tool Property
inspector
M-file editor
Menu editor
Component
Pallete
Layout editor
Gambar 3. Tampilan GUIDE
EEPIS-ITS | Praktikum Pengolahan Sinyal Digital 2
[pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict]
Komponen palet pada GUIDE Matlab terdiri dari beberapa uicontrol (kontrol user interface),
seperti pada bahasa pemrograman visual lainnya, yaitu: pushbutton, togglebutton, radiobutton,
chexkboxes, edit text, static text, slider, frames, listboxes, popup menu, dan axes. Kita dapat
meletakkan semua kontrol pada layout editor dan selanjutnya hanya tinggal mengaturnya melalui
property inspector.
Pushbutton
Toggle button
Radio button
Checkbox
Edit Text
Static Text
Slider Frame
Popup Menu
Listbox
Axes
Gambar 4 : Komponene GUIDE
Semua kontrol pada GUIDE dapat dimunculkan pada layout/figure dengan cara mendrag
kiri kontrol yang diinginkan ke figure. Adapun penjelasan fungsi masing-masing kontrol adalah
sebagai berikut:
1) Pushbutton
Pushbutton merupakan jenis kontrol berupa tombol tekan yang akan menghasilkan
tindakan jika diklik, misanya tombol OK, Cancel, Hitung, Hapus, dan sebagainya. Untuk
menampilkan tulisan pada pushbutton kita dapat mengaturnya melalui property inspector
dengan mengklik obeyek pushbutton pada figure, lalu mengklik toolbar property
inspector atau menggunakan klik kanan lalu pilih property inspector. Selanjutnya isilaha
tab string dengan label yang diinginkan, misalnya Hitung.
Gambar 5: Pushbutton
EEPIS-ITS | Praktikum Pengolahan Sinyal Digital 3
[pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict]
2) Toggle Button
Toggle button memiliki fungsi yang sama dengan pushbutton. Perbedaanya adalah saat
pushbutton ditekan, maka tombol akan kembali pada posisi semula jika tombol mouse
dilepas, sedangkan pada toggle button, tombol tidak akan kembali ke posisi semula,
kecuali kita menekannya kembali. Contoh aplikasi Radio button dapat dilihat pada
Gambar 6.
3) Radio Button
Radio button digunakan untuk memilih atau menandai satu pilihan dari beberapa pilihan
yang ada. Misalnya, sewaktu kita membuat aplikasi operasi Matematika (penjumlahan,
pengurangan, perkalian, dan pembagian). Contoh aplikasi Radio button dapat dilihat pada
Gambar 6.
4) Edit Text dan Static Text
Edit text digunakan untuk memasukkan atau memodifikasi suatu text yang diinputkan dari
keyboard, sedangkan static text hanya berguna untuk menampilkan text/tulisan, sehingga
kita tidak bisa memodifikasi/mengedit text tersebut kecuali memalui property inspector.
Contoh edit dan static text dapat dilihat pada Gambar 6.
5) Frames
Frames merupakan kotak tertutup yang dapat digunakan untuk mengelompokkan
kontrol-kontrol yang berhubungan. Tidak seperti kontrol lainnya, frames tidak memiliki
rutin callback.
Static text
Radio
Edit text
button
Toggle
button
frames
Gambar 6: Aplikasi Beberapa UIControl
6) Checkboxes
Kontrol checkboxes berguna jika kita menyediakan beberapa pilihan mandiri atau tidak
bergantung dengan pilihan-pilihan lainnya. Contoh aplikasi penggunaan checkboxes
adalah ketika kita diminta untuk memilih hobi. Karena hobi bisa lebih dari satu, maka kita
dapat mengklik checkboxes lebih dari satu kali.
EEPIS-ITS | Praktikum Pengolahan Sinyal Digital 4
[pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict]
7) Slider
Slider berguna jika kita menginginkan inputan nilai tidak menggunakan keyboarad, tatapi
hanya dengan cara menggeser slider secara vertical maupun horizontal ke nilai yang kita
inginkan. Dengan menggunakan slider, kita lebih fleksibel dalam melakukan pemasukan
nilai data karena kita dapat mengatur sendiri nilai max, nilai min, serta sliderstep.
Gambar 7: Aplikasi Slider Control
8) Popup Menu
Popop menu berguna menampilkan daftar pilihan yang didefinisikan pada String
Propoerty ketika mengklik tanda panah pada aplikasi dan memiliki fungsi yang sama
seperti radio button. Ketika tida dibukak, popup menu hanya menampilkan satu item
yang menjadi pilihan pertama pada String Property. Popupmenu sangat bermanfaat
ketika kita ingin memberi sebuah pilihan tanpa jarak, tidak seperti radiobutton.
9) Axes
Axes berguna untuk menampilkan sebuah grafik atau gambar (image). Axes sebenarnya
tidak masuk dalam UIControl, tetapi axes dapat deprogram agar pemakai dapat
berinteraksi dengan axes dan obyek grafik yang ditampilkan melalui axes.
3. Membuat GUI dengan MATLAB
MATLAB mengimplementasikan GUI sebagai sebuah figure yang berisi barbagai style obyek
UIControl. Selanjutnya kita harus memprogram masing-masing obyek agar dapat bekerja ketika
diaktifkan oleh pemakai GUI.
Langkah dasar yang harus dikerjakan dalam membuat GUI adalah :
1) Mengatur layout komponen GUI
Setelah kita membuka GUIDE Matlab dan telah menentukan template GUI, langkah
selanjutnya adalah adalah mendesai figure dengan menggunakan komponen palet sesuai
dengan kebutuhan, seperti p ushbutton, radiobutton, chexkboxes, edit text, static text, slider,
frames, popup menu, axes, dan sebagainya. Selanjutnya kita dapat mengatur layout masing-
masing komponen, baik string(caption), font, color, size, dan sebagainya menggunakan
property inspector. Jika kita telah selesai mendesain, jangan lupa untuk menyimpan file figure
yang secara default akan memiliki ekstensi *.fig. Dari sini, matlab secara otomatis akan
membuatkan sebuah m-file dengan nama yang sama, yaitu file berekstensi *.m.
2) Memprogram Komponen GUI
M-file yang telah dibuat pada langkah sebelumnya, akan otomatis terbuka dan kita harus
menulis programnya agar komponen kontrol dapat bekerja secara simultan. Untuk membuat
program dalam m-file kita cukup memperhatikan fungsi-fungsi matlab bertanda callback
dimana perintah disispkan.
Dari langah-langkah dasar diatas, secara sederhana sebenarnya GUI Matlab dibentuk oleh dua
buah file, yaitu fig-file dan m-file.
EEPIS-ITS | Praktikum Pengolahan Sinyal Digital 5
[pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict]
4. Membuat Contoh Aplikasi GUIDE MATLAB
Pada modul ini akan diberikan cara membuat aplikasi GUIDE Matlab untuk kasus-kasus yang
sederhana. Diharapkan dengan beberapa contoh ini mahasiswa dapat mengembangkan sendiri
dalam menggunakan GUIDE Matlab.
4.1 Menghitung Luas dan Keliling Lingkaran
Contoh aplikasi yang dibuat adalah menghitung luas dan keliling lingkaran. Langkah-langkah yang
harus kita kerjakan adalah:
a. Mendesain Figure
Dalam mendesain figure, kita harus dapat membayangkan komponen apa saja yang perlu kita
tampilkan. Seperti dalam membuat aplikasi menghitung luas dan keliling lingkaran, variabel input
yang dibutuhkan adalah jari-jari, kemudian variabel outputnya adalah luas dan keliling lingkaran,
maka kita memerlukan 3 edit text yang digunakan menampilkan variabel-variabel tersebut.
Kemudian kita juga memerlukan 1 tombol pushbutton/togglebutton untuk mulai melakukan
proses perhitungan. Kita juga bisa menambahkan komponen lain untuk memperjelas dan
mempercantik desian figure yang akan kita buat.
Desainlah figure seperti pada Gambar 8. Gunakan 4 buah static text, 3 buah edit text, dan 2 buah
pushbutton. Dalam meletakkan komponen pallete boleh tidak sesuai dengan gambar.
Static
Text
Edit text
Pushbutton
Gambar 8: Desaim Figure
EEPIS-ITS | Praktikum Pengolahan Sinyal Digital 6
[pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict]
b. Mengatur Layout Komponen
Setelah kita selesai mendesain figure, aturlah masing-masing komponen menggunakan property
inspector.
Property Inspector
Komponen
FontSize FontWeight String Tag
Menghitung Luas
Static text 1 12 `Bold dan Keliling text1
Lingkaran
Normal
Static text 2 10 Jar-Jari text2
(default)
Normal
Static text 3 10 Luas text3
(default)
Normal
Static text 4 10 Keliling text4
(default)
Normal
Edit text 1 10 Kosongkan edit1
(default)
Normal
Edit text 2 10 Kosongkan edit2
(default)
Normal
Edit text 3 10 Kosongkan edit3
(default)
Pushbutton 1 10 `Bold Hitung btn_hitung
Pushbutton 2 10 `Bold Edit btn_exit
c. Menyimpan Figure
Setelah selesai mendesain figure, langkah selanjutnya adalah menyimpan figure, beri nama
lingkaran.fig, secara otomatis kita akan dibuatkan kerangka m-file dengan nama yang sama, yaitu
lingkaran.m.
Dari beberapa fungsi yang muncul di m-file. Kita cukup memperhatikan fungsi yang memiliki
callback, yaitu edit1_Callback, edit2_Callback, edit3_Callback, btn_hitung_Callback, dan
btn_edit_Callback.
edit1
Di bawah function edit1_callback, tambahkan program menjadi berikut:
jari=str2num(get(handles.edit1, 'String'));
handles.jari=jari;
guidata(hObject, handles)
edit2 dan edit3
untuk function edit1_callback dan function edit2_callback, kita tidak perlu menambahkan
kode apapun dibawahnya, karena hanya berfungsi untuk menampilkan hasil dari perhitungan.
btn_hitung
Di bawah function btn_hitung_callbck, tambahkan program menjadi berikut:
%kode ini diekskusi jika kita menekan tombol hitung
jari=handles.jari;
luas=pi*jari*jari;
kel=2*pi*jari;
%menampilkan hasil perhitungan
set(handles.edit2, 'string', luas);
set(handles.edit3, 'string', kel);
btn_exit
%untuk keluar dari apalikasi
delete(handles.figure1)
EEPIS-ITS | Praktikum Pengolahan Sinyal Digital 7
[pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict]
d. Running GUI
Setelah langkah-langkah diatas dijalankan, langkah terakhir adalah menjalankan aplikasi yang
telah dibuat dengan mengklik tombol Run dari jendela figure atau dari jendela debug m-file (tekan
F5), sehingga akan muncul tampilan berikut.
Gambar 9: Tampilan Aplikasi Lingkaran
4.2 Menggambar fungsi trigonometri dengan beberapa pilihan sudut, amplitudo, dan phase.
Langkah-langkah yang harus kita kerjakan adalah:
a. Mendesain Figure
Desain figure seperti dalam Gambar 10. Dalam meletakkan komponen pallete boleh tidak sesuai
dengan gambar (sesuai selera).
Static
Text Frame
Radio
button
axes
Buttongroup
Popupmenu
Edittext
Pushbutton
Gambar 10: Desaim Figure
EEPIS-ITS | Praktikum Pengolahan Sinyal Digital 8
[pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict]
b. Mengatur Layout Komponen
Setelah kita selesai mendesain figure, aturlah masing-masing komponen menggunakan property
inspector.
Property Inspector
Komponen
FontSize FontWeight String/Title Tag
Gambar
Trigonometri
Static text 1 12 `Bold text1
y=Asin(Tx+r) dan
y=Acos(Tx+r)
Tetap Tetap
Static text 2 Amplitudo text2
(default 8) (default Normal)
Static text 3 tetap tetap Phase text3
Static text 4 tetap tetap) Sudut text4
Edit text 1 tetap tetap 5 edit1
Edit text 2 tetap tetap 0 edit2
Popupmenu tetap tetap 1, 2, 3, 4 popupmenu
Pushbutton 1 tetap `Bold Run pushbutton1
Pushbutton 2 tetap `Bold Edit pushbutton2
Radiobutton 1 tetap tetap Sinus radiobutton1
Radiobutton 1 tetap tetap Cosinus radiobutton2
Button Group tetap tetap Parameter
c. Menyimpan Figure
Setelah selesai mendesain figure, langkah selanjutnya adalah menyimpan figure, beri nama
trigonometri.fig, secara otomatis kita akan dibuatkan kerangka m-file dengan nama yang sama,
yaitu trigonometri.m.
Dari beberapa fungsi yang muncul di m-file. Kita cukup memperhatikan fungsi yang memiliki
callback, yaitu edit1_Callback, edit2_Callback, edit3_Callback, btn_hitung_Callback, dan
btn_edit_Callback.
Pupupmenu1
Di bawah function popupmenu1_callbck, tambahkan program menjadi berikut:
indeks=get(handles.popupmenu1,'Value');
handles.indeks=indeks;
guidata(hObject, handles)
Radiobutton1
set(handles.radiobutton2,'Value',0);
pilih = 1;
handles.pilih=pilih;
guidata(hObject,handles)
Radiobutton2
set(handles.radiobutton1,'Value',0);
pilih = 2;
handles.pilih=pilih;
guidata(hObject,handles)
Pushbutton2
set(handles.edit1, 'string', ''); %mengosongkan string pada edit1
set(handles.edit2, 'string', ''); %mengosongkan string pada edit2
axes(handles.axes1);
plot(0); %membersihkan gambar pada axees
EEPIS-ITS | Praktikum Pengolahan Sinyal Digital 9
[pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict]
Pushbutton1
indeks=get(handles.popupmenu2,'Value'); %mengambil nilai
if indeks == 1 %jika menekan pilihan 1
T=1; %Maka T=1;
else if indeks==2 %jika menekan pilihan 2
T=2; %maka T=2, dst
else if indeks==3
T=3;
else if indeks==4
T=4;
end
end
end
end
A=str2num(get(handles.edit1, 'string')); %mengambil nilai pada edit1
r=str2num(get(handles.edit2, 'string')); %mengambil nilai pada edit2
x=-10:0.1:10; %membangkitkan sumbu x
pilih=handles.pilih %berhubungan dg pilihan pada radiobutton
switch handles.pilih
case 1 %jika radiobutton1 yang ditekan
y=A*sin(T*x+r); %maka menghitung nilai sinus
case 2 %jika radiobutton2 yang ditekan
y=A*cos(T*x+r); %maka menghitung nilai cosinus
end
axes(handles.axes1);
a=0; %membuat garis, seperti sumbu x dan sumbu y
plot(x,y,'r', a, x, 'b', x, a, 'b');
grid on
d. Running GUI
Setelah langkah-langkah diatas dijalankan, langkah terakhir adalah menjalankan aplikasi yang
telah dibuat dengan mengklik tombol Run dari jendela figure atau dari jendela debug m-file (tekan
F5), sehingga akan muncul tampilan berikut.
Gambar 11: Tampilan Gui Trigonometri
EEPIS-ITS | Praktikum Pengolahan Sinyal Digital 10
[pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict][pict]
Tugas!
Buat Guide untuk praktikum dalam membangkitkan sinyal
EEPIS-ITS | Praktikum Pengolahan Sinyal Digital 11
