41
MEMBANGUN GUI DENGAN M-FILE 1 MEMBANGUN GUI DENGAN M MEMBANGUN GUI DENGAN M MEMBANGUN GUI DENGAN M MEMBANGUN GUI DENGAN M-FILE FILE FILE FILE MATLAB TUTORIAL MATLAB TUTORIAL MATLAB TUTORIAL MATLAB TUTORIAL CHANDRA KURNIAWAN CHANDRA KURNIAWAN CHANDRA KURNIAWAN CHANDRA KURNIAWAN [email protected] [email protected] [email protected] [email protected]

Membangun Gui Dengan M-file

Embed Size (px)

Citation preview

Page 1: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

1

MEMBANGUN GUI DENGAN MMEMBANGUN GUI DENGAN MMEMBANGUN GUI DENGAN MMEMBANGUN GUI DENGAN M----FILEFILEFILEFILE

MATLAB TUTORIALMATLAB TUTORIALMATLAB TUTORIALMATLAB TUTORIAL

CHANDRA KURNIAWANCHANDRA KURNIAWANCHANDRA KURNIAWANCHANDRA KURNIAWAN

[email protected]@[email protected]@gmail.com

Page 2: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

2

PENDAHULUAN

Graphical User Interface (GUI) merupakan antar muka pengguna yang

memungkinkan suatu metode interaksi secara grafis antara manusia dan komputer.

GUI menjadi salah satu faktor kemudahan dalam penggunaan komputer. Dalam

bahasa pemrograman MATLAB (Matrix Labolatory), membangun suatu user

interface dapat dilakukan dengan dua cara, yaitu :

• Melalui perintah GUIDE (GUI Designer), dimana perintah ini akan

menampilkan GUI Layout Editor untuk membuat suatu file baru

berekstensi .fig.

• Membangun GUI melalui rutin-rutin program yang diimplementasikan di

dalam M-file

Untuk pembahasan kali ini, penulis akan menggunakan alternatif kedua, yaitu

membangun GUI melalui M-file.

Langkah pertama yang dapat dikerjakan adalah membuat suatu M-file

baru dengan cara pilih File – New – M-File (Ctrl + N). Sebuah Editor baru akan

ditampilkan pada jendela MATLAB seperti gambar di bawah ini.

Gambar 1. Editor M-File

Selanjutnya, suatu GUI dapat dibangun dengan mendefinisikan suatu

fungsi terlebih dahulu. Nama fungsi dapat ditentukan sendiri dengan syarat tidak

boleh mengandung spasi maupun keyword pada MATLAB. Seperti yang telah

diketahui bersama, bahwa nama M-file yang akan disimpan harus sama dengan

nama fungsi yang telah dibuat. Fungsi yang dibuat memiliki suatu argumen

Page 3: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

3

masukan, dalam hal ini nama argumen juga dapat ditentukan sendiri. Berikut di

bawah ini syntax dan contoh penamaan fungsi yang akan dibuat.

Setelah fungsi yang dibuat disimpan dengan ekstensi M-file, maka pada

langkah selanjutnya dapat didefinisikan terlebih dahulu suatu variabel global.

Tujuan dari pendefinisian suatu variabel global adalah agar variabel tersebut dapat

digunakan pada seluruh sub-sub rutin yang terdapat di dalam fungsi tersebut.

Berikut di bawah ini syntax dan contoh pendeklarasian variabel global.

Pada tahap selanjutnya, diperlukan suatu sub rutin yang mampu

menangani berbagai nilai ekspresi yang mungkin diberikan oleh argumen inputan

action. Struktur penanganan kondisi yang dapat digunakan untuk kasus ini adalah

model switch-case. Pada bagian selanjutnya, perancangan antar muka akan

dikerjakan pada bagian ‘initialize’.

Pada saat fungsi yang telah dibuat dieksekusi (pada MATLAB running

menggunakan F5) secara langsung, maka argumen masukan action belum

memiliki nilai ekspresi yang akan digunakan pada bagian penanganan switch-

case. Untuk menangani permasalahan tersebut, maka argument action dapat

diberikan nilai ekspresi ‘initialize’, dimana jika jumlah argumen masukkan

switch action

case 'initialize'

otherwise

end

Syntax : global namavariabel;

Contoh : global P;

Syntax : function namafungsi(argumen)

Contoh : function GUIdenganMFILE(action)

Page 4: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

4

bernilai nol, maka program akan menjalankan sekumpulan perintah pada bagian

‘initialize’.

Secara lengkap mulai dari awal pembahasan hingga bagian ini, source

code yang dapat dituliskan dapat dilihat seperti pada gambar di bawah ini.

Gambar 2. Source code program

MENGENAL KOMPONEN GUI

Sebelum dapat menggunakan komponen-komponen GUI dengan benar,

maka diperlukan pemahaman konsep mengenai Pemrograman Berbasis Objek

(PBO) di MATLAB dengan benar. Pada Pemrograman Berbasis Objek, setiap

komponen diartikan sebagi objek yang dapat diberikan pekerjaan maupun

melakukan pekerjaan tertentu. Dalam konteks pemrograman MATLAB sendiri,

setiap objek tersebut memiliki hirarki objek yang dijabarkan dalam konsep

parent-children. Berikut adalah diagramnya.

if nargin == 0

action = 'initialize';

end

Page 5: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

5

Gambar 3. Diagram hirarki objek

Root adalah objek grafik yang berhubungan dengan screen komputer. Root

tidak memiliki parent, tetapi memiliki children yaitu figure. Selanjutnya, figure

adalah suatu jendela yang dapat digunakan untuk menampilkan keluaran-keluaran

grafis. Figure memiliki children yang dapat terdiri dari axes maupun uiobject.

Uiobject sendiri merupakan kontrol-kontrol yang dapat diletakkan pada figure.

FIGURE WINDOW

Perintah figure digunakan untuk membuat suatu jendela yang di dalamnya

dapat diletakkan berbagai uiobject nantinya. Contoh source code pembuatan

figure adalah :

Figure1 = figure('unit',Figure1 = figure('unit',Figure1 = figure('unit',Figure1 = figure('unit', 'pixel','pixel','pixel','pixel', 'position','position','position','position', [250 100 800 600],[250 100 800 600],[250 100 800 600],[250 100 800 600], 'color','color','color','color', [0.1 0.2 0.3],[0.1 0.2 0.3],[0.1 0.2 0.3],[0.1 0.2 0.3],

'menubar','menubar','menubar','menubar', 'none','none','none','none', name',name',name',name', 'GUIdenganMFILE','GUIdenganMFILE','GUIdenganMFILE','GUIdenganMFILE', 'numbertitle','numbertitle','numbertitle','numbertitle', 'off','off','off','off',

'resize','resize','resize','resize', 'off','off','off','off', 'toolbar','toolbar','toolbar','toolbar', 'none');'none');'none');'none');

Penjelasan :

• Properti unit merupakan suatu properti yang digunakan untuk menentukan

skala pengukuran yang digunakan pada properti position. Nilai pixel

dipilih berarti penempatan posisi dan penskalaan figure pada screen akan

digunakan skala pixel.

RRRRootootootoot

FigureFigureFigureFigure

UiobjectUiobjectUiobjectUiobject AxesAxesAxesAxes

Page 6: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

6

• Properti position digunakan untuk menentukan posisi figure pada screen.

Nilai properti adalah empat buah elemen vektor, yang masing-masing

[left, bottom, width, height]

• Properti color digunakan untuk menentukan warna figure. Nilai properti

adalah tiga buah elemen vektor, yang masing-masing [red, green, blue].

Warna figure akan ditentukan oleh percampuran dari ketiga komponen

warna tersebut. Sedangkan skala yang dapat diberikan antara 0 hingga 1.

• Properti menubar merupakan properti yang mengatur apakah menubar

standar pada figure ditampilkan atau tidak. Nilai properti dapat bernilai

‘none’ atau ‘figure’, dimana ‘none’ berarti menubar tidak ditampilkan.

• Properti name merupakan properti yang menentukan caption dari title bar

pada figure.

• Properti numbertitle merupakan properti yang mengatur penomoran figure

berdasarkan urutan kemunculannya. Jika nilai ‘on’ diberikan, maka

penomoran pada title bar akan ditampilkan.

• Properti resize merupakan properti yang mengatur apakah figure dapat

diatur ulang ukurannya. Jika nilai ‘off’, maka pengubahan ukuran dengan

mouse maupun dengan button maximize tidak dapat dilakukan

• Properti toolbar merupakan properti yang digunakan untuk mengatur

apakah toolbar standar pada figure diampilkan atau tidak. Nilai properti

bisa ‘none’ atau ‘figure’, dimana ‘none’ berarti toolbar tidak ditampilkan.

Page 7: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

7

Masukkan source code tersebut pada bagian ‘initialize’ seperti pada

gambar di bawah ini :

Gambar 4. Source code pembuatan figure

Maka, setelah file dieksekusi (pada MATLAB dengan menekan tombol

F5) akan menghasilkan keluaran seperti pada gambar di bawah ini :

Gambar 5. Figure hasil running source code

Page 8: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

8

UIOBJECT

Uiobject merupakan kontrol-kontrol yang dapat diletakkan di dalam

jendela figure. Komponen atau kontrol ini bisa beragam, seperti menu,

pushbutton, text, listbox dan lain sebagainya. Selanjutnya komponen-komponen

ini diperlukan untuk berinteraksi dengan program. Secara umum, uiobject dapat

terdiri dari :

• Uicontrol

• Uimenu

• Uitoolbar

• Uipanel

• Uipushtool

• Uicontextmenu

• Uibuttongroup

1. UICONTROL

Uicontrol merupakan objek yang paling dibutuhkan untuk

berinteraksi dengan program. Uicontrol berisi komponen-komponen yang

dibutuhkan untuk mendesain form sebagai media interaksi. Uicontrol

memiliki beberapa tipe dan properti. Properti-properti yang dimiliki oleh

suatu uicontrol secara umum dapat dilihat pada tabel di bawah ini.

Tabel 1. Properti-properti pada uicontrol

Properti Deskripsi Nilai

backgroundcolor warna latar belakang kontrol [R G B]

cdata citra berwarna yang ditampilkan

pada kontrol

matriks

foregroundcolor warna teks pada kontrol [R G B]

string teks yang akan ditampilkan

pada kontrol

string

Page 9: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

9

visible visibilitas kontrol on, off

enable kemampuan suatu kontrol untuk

digunakan

on, off

parent menyatakan objek yang menjadi

parent dari kontrol.

figure, uipanel

style menyatakan tipe/model dari

uicontrol

pushbutton,

radiobutton,

checkbox, edit,

text, slider,

listbox,

popupmenu

tooltipstring berisi komentar tooltip dari

kontrol

string

position menyatakan posisi dari control

dalam figure

[left, bottom,

width, height]

unit bagian untuk menentukan skala

pengukuran yang digunakan

untuk meletakkan posisi dan

menentukkan ukuran control

dalam figure (berkaitan dengan

position)

pixel, inches,

centimeters,

points

fontname menyatakan jenis/nama font

yang digunakan teks pada

kontrol

“Times New

Roman”

fontsize menyatakan ukuran font ukuran font

fontweight menyatakan ketebalan dari

karakter teks

light, normal,

bold

callback menyatakan aksi yang dilakukan

oleh kontrol

fungsi

Page 10: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

10

A. PUSH BUTTON

Button adalah suatu kontrol yang mengerjakan suatu aksi melalui

pemanggilan suatu prosedur atau fungsi. Contoh source code untuk

membuat push button adalah sebagai berikut :

Button1Button1Button1Button1 ==== uicontrol('unit',uicontrol('unit',uicontrol('unit',uicontrol('unit', 'pixel','pixel','pixel','pixel', 'position','position','position','position', [100 150 200 50],[100 150 200 50],[100 150 200 50],[100 150 200 50],

'foregroundcolor','foregroundcolor','foregroundcolor','foregroundcolor', [0 0 0],[0 0 0],[0 0 0],[0 0 0], 'backgroundcolor','backgroundcolor','backgroundcolor','backgroundcolor', [1 1 [1 1 [1 1 [1 1

1],1],1],1], 'style','style','style','style', 'pushbutton','pushbutton','pushbutton','pushbutton', 'fontsize','fontsize','fontsize','fontsize', 12,12,12,12, 'fontname','fontname','fontname','fontname',

'Agency FB', 'Agency FB', 'Agency FB', 'Agency FB', 'fontweight','fontweight','fontweight','fontweight', 'bol'bol'bol'bold',d',d',d', 'string','string','string','string', 'BUTTON','BUTTON','BUTTON','BUTTON',

'callback','callback','callback','callback', 'GUIdenganMFILE(1)');'GUIdenganMFILE(1)');'GUIdenganMFILE(1)');'GUIdenganMFILE(1)');

Gambar 6. Source code membuat button

Button tersebut memiliki aksi mencetak kalimat ‘CONTOH

BUTTON’ ketika dieksekusi. Dalam hal ini, button tersebut memanggil

suatu fungsi, yaitu fungsi GUIdenganMFILE dengan argumen masukan 1

(case 1).

Gambar 7. Hasil running pada command window

Page 11: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

11

Gambar 8. Contoh kontrol push button

B. RADIO BUTTON

Radio button merupakan kontrol yang bekerja dengan properti

value sebagai penanda apakah suatu alternatif dipilih atau tidak. Contoh

source code untuk membuat radio button adalah sebagai berikut :

Gambar 9. Source code membuat radio button

Suatu kontrol pada MATLAB dapat dibuat menjadi objek

berindeks seperti pada bahasa pemrograman lainnya. Sehingga apabila

Page 12: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

12

ingin dibuat sejumlah kontrol dengan tipe yang sama, tidak perlu

menuliskan source code program yang berulang-ulang.

Gambar 10. Contoh kontrol radio button

Gambar 11. Hasil running pada command window

C. CHECK BOX

Check box merupakan kontrol yang bekerja hampir mirip dengan

radio button. Hanya saja, sekelompok kontrol check box yang terhubung

mampu memilih lebih dari satu alternatif pada saat yang bersamaan.

Gambar 12. Contoh kontrol check box

Page 13: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

13

Gambar 13. Source code membuat check box

D. EDIT

Edit merupakan kontrol yang dapat dipergunakan untuk

memberikan inputan kepada program. Pada kotak edit dapat dimasukkan

sebuah teks (string) yang selanjutnya akan diolah oleh program. Contoh

source code untuk membuat Edit adalah sebagai berikut :

Gambar 14. Source code membuat edit

Page 14: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

14

Gambar 15. Contoh kontrol edit

E. TEXT

Berbeda dengan edit, text adalah kontrol yang dapat digunakan

untuk menampilkan suatu teks. Karakter atau string di dalam text tidak

dapat diubah oleh pengguna, melainkan hanya dapat ditentukan melalui

properti string.

Gambar 16. Source code membuat text

Gambar 17. Contoh kontrol text

Page 15: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

15

F. SLIDER

Slider merupakan kontrol yang digunakan untuk menambah atau

mengurangi nilai suatu variabel tertentu. Kontrol slider memiliki properti

yang berbeda dengan kontrol-kontrol sebelumnya :

• min : merupakan batasan nilai terendah dari slider

• max : merupakan batasan nilai tertinggi dari slider

• value : merupakan nilai saat ini dari slider

• slider step : merupakan ukuran dari besarnya nilai pada tiap kali

slider digeser

Gambar 18. Source code membuat slider

Gambar 19. Contoh kontrol slider

Page 16: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

16

G. LISTBOX

Listbox merupakan kontrol yang digunakan untuk menampung

sejumlah pilihan atau variabel nilai yang akan digunakan untuk menset

nilai sesuatu. Properti value pada listbox tidak hanya bernilai nol dan satu

saja seperti radio button maupun checkbox, melainkan memungkinkan

lebih dari satu sesuai jumlah alternatif di dalam listbox itu sendiri.

Gambar 20. Source code membuat listbox

Gambar 21. Contoh kontrol listbox

H. POPUPMENU

Popupmenu merupakan kontrol bekerja mirip dengan listbox.

Kontrol popupmenu menampilkan daftar alternatif. Popupmenu sangat

Page 17: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

17

tepat bila pengguna menginginkan sejumlah alternatif ditampilkan tetapi

keberadaan kontrol di dalam figure tidak menyita banyak tempat.

Gambar 22. Source code membuat popupmenu

Gambar 23. Contoh kontrol popupmenu

Page 18: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

18

2. UIMENU

MATLAB juga menyediakan fasilitas untuk membuat menu di

dalam perancangan user interface. Menu memiliki children yang disebut

dengan sub-sub menu. Sub-sub menu ini tidak akan ditampilkan sebelum

menu induk dipanggil.

Tabel 2. Properti-properti pada uimenu

Properti Deskripsi Nilai

checked indicator menu check on, off

label label menu string

foregroundcolor warna teks pada menu [R G B]

separator menambahkan mode garis

separator (pemisah)

on, off

visible visibilitas menu on, off

enable kemampuan suatu menu untuk

digunakan

on, off

parent menyatakan objek yang menjadi

parent dari menu

handel

accelerator shortcut (kombinasi penekanan

tombol) pada keyboard

karakter

callback menyatakan aksi yang dilakukan

oleh menu

fungsi

Selanjutnya, kita dapat langsung bereksperimen dengan source

code di bawah ini. Pada percobaan kali ini, source code pada pembahasan

sebelumnya dapat dihapus dari M-file atau dengan menjadikannya sebagai

komentar yang tidak akan dieksekusi oleh program. Pada MATLAB,

pemberian komentar dapat dilakukan dengan menambahkan tanda % di

depan kalimat yang akan dijadikan komentar.

% ini adalah baris komentar

% disp(‘ini adalah komentar’)

Page 19: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

19

Tambahkan source code ini di bawah source code program yang

sebelumnya.

Gambar 24. Source code pembuatan uimenu bagian I

Gambar 25. Contoh uimenu pada figure

Pada bagian di atas, kita hanya sekedar mencoba untuk membuat

tampilan menu tanpa adanya pemanggilan aksi di dalamnya. Pada bagian

selanjutnya, kita akan mencoba bagaimana memberikan aksi pada

komponen sub menu, yaitu dengan menggunakan properti ‘callback’.

Selanjutnya, tambahkan source code ini di bawah source code

program yang sebelumnya.

Page 20: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

20

Gambar 26. Source code pembuatan uimenu bagian II

Gambar 27. Contoh pemanggilan aksi pada menu

3. UITOOLBAR

Uitoolbar merupakan bagian dari uiobject yang berfungsi untuk

meletakkan komponen-komponen children yang juga merupakan bagian

dari uiobject, yaitu uipushtool. Parent dari uitoolbar sendiri adalah figure

window.

Selanjutnya, tambahkan source code berikut ini pada program.

Page 21: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

21

Gambar 28. Source code pembuatan toolbar

Gambar 29. Sebuah toolbar baru telah ditambahkan

Toolbar baru yang telah ditambahkan ke dalam figure ini belum

memiliki komponen-komponen di dalamnya. Oleh karena itu, pada

pembahasan selanjutnya akan dibahas mengenai uipushtool yang

merupakan komponen-komponen yang dapat ditambahkan ke dalam

toolbar tersebut.

4. UIPUSHTOOL

Seperti yang telah dibahas pada bagian sebelumnya, uipushtool

merupakan komponen-komponen yang dapat diletakkan pada toolbar.

Uipushtool memiliki parent suatu toolbar.

Page 22: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

22

Tabel 3. Properti-properti pada uipushtool

Properti Deskripsi Nilai

cdata citra berwarna yang ditampilkan

pada uipushtool

array m×n×3

separator menambahkan mode garis

separator (pemisah)

on, off

visible visibilitas uipushtool on, off

enable kemampuan suatu uipushtool

untuk digunakan

on, off

parent menyatakan objek yang menjadi

parent dari uipushtool

uitoolbar

tooltipstring berisi komentar tooltip dari

uipushtool

string

clickedcallback menyatakan aksi yang dilakukan

oleh uipushtool

fungsi handel

Source code di bawah ini akan menambahkan tiga uipushtool baru

ke dalam toolbar. Oleh karena itu, P.toolbar diset sebagai parent dari

ketiganya.

Gambar 30. Source code pembuatan uipushtool

Page 23: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

23

Gambar 31. Tiga buah uipushtool ditambahkan ke toolbar

Perlu diingat bahwa icon yang ditampilkan pada uipushtool tidak

serta merta muncul begitu saja. Oleh karena itu, kita harus terlebih dahulu

membuat citra berektensi .png. Untuk ukuran citra bisa diset 25×25 pixel.

Apabila ukuran yang dipakai lebih besar, maka uipushtool hanya akan

menampilkan sebagian area saja dari citra.

Gambar 32. Tiga buah citra berekstensi .png

Pada bagian sebelumnya, uipushtool yang dibuat belum memuat

aksi yang mampu mengerjakan sekumpulan perintah program. Pada

pembahasan ini, akan dibuat sekumpulan uipushtool yang akan melakukan

aksi mencetak isi dari tooltipstring ke layar berdasarkan indeksnya.

Page 24: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

24

Komponen pushtool yang dibuat merupakan obyek berindeks.

Fungsi gcbo disini adalah mengembalikan kendali objek mana yang

sedang mengeksekusi properti callback. Selanjutnya, tambahkan source

code berikut ini ke dalam program.

Gambar 33. Contoh pemanggilan aksi yang dilakukan uipushtool

Gambar 34. Tampilan uipushtool yang dibuat

Ketika salah satu dari sekumpulan pushtool ditekan, maka pada

command window akan dicetak properti tooltip komponen tersebut.

tooltiptooltiptooltiptooltip

Page 25: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

25

Gambar 35. Tampilan command window saat runtime

5. UIPANEL

Uipanel digunakan untuk mengelompokkan sejumlah komponen-

komponen yang terdapat di dalamnya. Parent dari uipanel umumnya

adalah figure atau uipanel sendiri. Apabila parent dari suatu uipanel adalah

uipanel, maka uipanel tersebut bisa dikatakan merupakan sub panel dari

main panel yang berlaku sebagai parentnya.

Tabel 4. Properti-properti pada uipanel

Properti Deskripsi Nilai

backgroundcolor Merupakan warna latar

belakang dari uipanel

[R G B]

bordertype jenis border yang mengelilingi

uipanel

none, etchedin,

etchedout,

beveledin,

beveledout,

line

borderwidth nilai ketebalan dari border integer

foregroundcolor menyatakan warna teks pada

uipanel

[R G B]

shadowcolor menyatakan warna bayangan

border pada frame 3D

[R G B]

highlightcolor menyatakan warna border pada

frame 3D

[R G B]

parent menyatakan objek yang menjadi figure, uipanel

Page 26: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

26

parent dari uipanel

position menyatakan posisi dari uipanel

pada objek parent

[left bottom

width height]

unit menyatakan penskalaan pada

properti position

pixel, inches,

centimeters,

points,

normalized

fontname menyatakan jenis font string

fontsize menyatakan ukuran font integer

fontweight menyatakan ketebalan font light, normal,

demi, bold

title menyatakan judul/caption pada

uipanel

string

titleposition menyatakan penempatan posisi

judul uipanel

lefttop,

centertop,

righttop,

leftbottom,

centerbottom,

rightbottom

Selanjutnya, tambahkan source code di bawah ini.

Gambar 36. Source code uipanel

Page 27: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

27

Gambar 37. Hasil running program

6. UIBUTTONGROUP

Uibuttongroup digunakan untuk mengelompokkan komponen-

komponen dan mengatur seleksi yang bersifat eksklusif seperti yang

terdapat pada komponen radio button. Uibuttongroup mampu menampung

komponen-komponen lain seperti axes, uipanel, uibuttongroup.

Tabel 5. Properti-properti pada uibuttongroup

Properti Deskripsi Nilai

backgroundcolor merupakan warna latar belakang

dari uibuttongroup

[R G B]

bordertype jenis border yang mengelilingi

uibuttongroup

none, etchedin,

etchedout,

beveledin,

beveledout,

line

borderwidth nilai ketebalan dari border integer

foregroundcolor menyatakan warna teks pada

uibuttongroup

[R G B]

shadowcolor menyatakan warna bayangan

border pada frame 3D

[R G B]

highlightcolor menyatakan warna border pada [R G B]

Page 28: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

28

frame 3D

parent menyatakan objek yang menjadi

parent dari uibuttongroup

figure, uipanel,

uibuttongroup

position menyatakan posisi dari

uibuttongroup pada objek

parent

[left bottom

width height]

unit menyatakan penskalaan pada

properti position

pixel, inches,

centimeters,

points,

normalized

fontname menyatakan jenis font string

fontsize menyatakan ukuran font integer

fontweight menyatakan ketebalan font light, normal,

demi, bold

title menyatakan judul/caption pada

uibuttongroup

string

Selanjutnya, tambahkan source code di bawah ini.

Gambar 38. Source code penggunaan uibuttongroup

Page 29: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

29

Gambar 39. Hasil running penggunaan uibuttongroup

Bandingkan hasil running penggunaan kontrol radiobutton dengan

uibuttongroup dengan yang tanpa uibuttongroup. Penggunaan

uibuttongroup mampu menangani seleksi yang bersifat eksklusif, artinya

tidak akan terjadi pemilihan lebih dari satu alternatif pada radio button

yang terkoneksi.

Pemberian aksi juga tidak lagi ditempatkan pada kontrol

radiobutton lewat properti callback seperti biasanya, melainkan melalui

properti SelectionChangeFcn pada uibuttongroup.

7. UICONTEXTMENU

Uicontextmenu merupakan komponen yang digunakan untuk

membuat menu konteks. Menu konteks merupakan menu yang

ditampilkan pada saat user melakukan klik kanan pada objek yang

dimaksud.

Tabel 6. Properti-properti pada uicontextmenu

Properti Deskripsi Nilai

visible visibilitas uicontextmenu on, off

parent menyatakan objek yang menjadi

parent dari uicontextmenu

figure, uipanel,

uibuttongroup

Page 30: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

30

position menyatakan lokasi

uicontextmenu pada saat

ditampilkan.

[0 0]

callback aksi yang dilakukan

uicontextmenu

fungsi

Selanjutnya, tambahkan source code di bawah ini.

Gambar 40. Source code penggunaan uicontextmenu

Gambar 41. Hasil running penggunaan uicontextmenu

Page 31: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

31

AXES

Perintah axes di dalam MATLAB digunakan untuk menciptakan sumbu

dari objek-objek grafis. Dalam penggunaannya, axes selalu berhubungan dengan

grafis, baik 2D maupun 3D.

Tabel 8. Properti-properti pada axes

Properti Deskripsi Nilai

box menyatakan apakah mode box

pada axis ditampilan atau tidak

on, off

gridlinestyle menyatakan model garis yang

digunakan untuk menggambar

grid-grid pada axis

- , -- , : , -. ,

none

linewidth menyatakan nilai ketebalan dari

garis axis (penskalaan dalam

point)

0.5

visible menyatakan visibilitas axis on, off

xgrid, ygrid, zgrid menyatakan apakah garis-garis

grid pada axis ditampilkan atau

tidak

on, off

parent menyatakan objek yang menjadi

parent dari axis

figure, uipanel

position menyatakan posisi dari axis

pada objek parent

[left bottom

width height]

unit menyatakan penskalaan pada

properti position

pixel, inches,

centimeters,

points,

normalized

fontname menyatakan jenis font string

fontsize menyatakan ukuran font integer

fontweight menyatakan ketebalan font light, normal,

Page 32: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

32

demi, bold

color menyatakan warna latar

belakang dari axis

[R G B]

xcolor, ycolor,

zcolor

menyatakan warna dari garis

axis

[R G B]

Selanjutnya, tambahkan source code di bawah ini.

Gambar 42. Source code penggunaan axes

Gambar 43. Hasil running program

Page 33: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

33

CONTOH KASUS

Pada bagian ini, Anda sekalian diajak untuk mempraktekkan sendiri apa

yang telah dipelajari pada bagian-bagian sebelumnya. Contoh kasus yang diambil

penulis adalah membuat aplikasi sederhana yang dapat dipergunakan untuk

mengolah citra. Berikut di bawah ini adalah lampiran source code lengkap

pembuatan aplikasi tersebut.

Bagian Pembuatan Fungsi dan Figure

Bagian Pembuatan Menu

Page 34: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

34

Bagian Pembuatan Toolbar

Bagian Pembuatan Panel dan Axes

Bagian Pembuatan Kontrol

Page 35: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

35

Bagian Pembuatan Preferences dan Info

Bagian Main Menu

Page 36: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

36

Page 37: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

37

Page 38: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

38

Page 39: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

39

Page 40: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

40

TAMPILAN APLIKASI

Untuk membuat aplikasi tersebut, terlebih dahulu dibutuhkan sebuah file

berekstensi *.MAT yang berisi ikon-ikon yang dipergunakan dalam pembuatan

aplikasi. File beserta dengan source codenya dapat di download pada alamat di

bawah ini :

File *.MAT : http://www.4shared.com/file/ZwSFJyvc/GUIDE.html

M-FILE : http://www.4shared.com/file/lRjVapMP/IMG.html

Hal-hal lebih lanjut mengenai tutorial ini, dapat menghubungi penulis pada

alamat email berikut : [email protected]

Page 41: Membangun Gui Dengan M-file

MEMBANGUN GUI DENGAN M-FILE

41

REFERENSI

[1] Abdia Away, Gunaidi. 2010. The Shortcut of MATLAB Programming.

Bandung: Informatika.

[2] MATLAB 7.0 Help

BIOGRAFI PENULIS

Nama : Chandra Kurniawan

Tempat Lahir : Tulungagung

Tanggal Lahir : 22 Maret 1990

Alamat : Jl. Ir. H. Juanda V/2407 Malang

E-mail : [email protected]

Pendidikan : - SLPTK Santa Maria II Malang

- SMAK Santa Maria Malang

- S1 Institut Teknologi Nasional

Malang Teknik Informatika