Anda di halaman 1dari 41

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUNMEMBANGUNMEMBANGUNMEMBANGUN GUIGUIGUIGUI DENGANDENGANDENGANDENGAN MM-MM--FILE-FILEFILEFILE

MATLABMATLABMATLABMATLAB TUTORIALTUTORIALTUTORIALTUTORIAL

CHANDRACHANDRACHANDRACHANDRA KURNIAWANKURNIAWANKURNIAWANKURNIAWAN

nasa078@gmail.comnasa078@gmail.comnasa078@gmail.comnasa078@gmail.com

MEMBANGUN GUI DENGAN M-FILE

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.

ditampilkan pada jendela MATLAB seperti gambar di bawah ini. Gambar 1. Editor M-File Selanjutnya, suatu GUI

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

MEMBANGUN GUI DENGAN M-FILE

masukan, dalam hal ini nama argumen juga dapat ditentukan sendiri. Berikut di bawah ini syntax dan contoh penamaan fungsi yang akan dibuat.

Syntax : function namafungsi(argumen) Contoh : function GUIdenganMFILE(action)

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.

Syntax : global namavariabel; Contoh : global P;

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

switch action case 'initialize' otherwise

end

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

MEMBANGUN GUI DENGAN M-FILE

bernilai nol, maka program akan menjalankan sekumpulan perintah pada bagian ‘initialize’.

if nargin == 0 action = 'initialize';

end

Secara lengkap mulai dari awal pembahasan hingga bagian ini, source code yang dapat dituliskan dapat dilihat seperti pada gambar di bawah ini.

dituliskan dapat dilihat seperti pada gambar di bawah ini. Gambar 2. Source code program MENGENAL KOMPONEN

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.

MEMBANGUN GUI DENGAN M-FILE

RRRRootootootoot FigureFigureFigureFigure AxesAxesAxesAxes UiobjectUiobjectUiobjectUiobject
RRRRootootootoot
FigureFigureFigureFigure
AxesAxesAxesAxes
UiobjectUiobjectUiobjectUiobject

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 :

Figure1Figure1Figure1Figure1 ==== figure('unit',figure('unit',figure('unit',figure('unit', 'pixel','pixel','pixel','pixel', 'position','position','position','position', [250[250[250[250 100100100100 800800800800 600],600],600],600], 'color','color','color','color', [0.1[0.1[0.1[0.1 0.20.20.20.2 0.3],0.3],0.3],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.

MEMBANGUN GUI DENGAN M-FILE

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.

dimana ‘none’ berarti menubar tidak ditampilkan. • Properti name merupakan properti yang menentukan

Properti name merupakan properti yang menentukan caption dari title bar pada figure.

properti yang menentukan caption dari title bar pada figure. • Properti numbertitle merupakan properti yang mengatur

Properti numbertitle merupakan properti yang mengatur penomoran figure berdasarkan urutan kemunculannya. Jika nilai ‘on’ diberikan, maka penomoran pada title bar akan ditampilkan.

diberikan, maka penomoran pada title bar akan ditampilkan. • Properti resize merupakan properti yang mengatur apakah
diberikan, maka penomoran pada title bar akan ditampilkan. • Properti resize merupakan properti yang mengatur apakah

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

mouse maupun dengan button maximize tidak dapat dilakukan • Properti toolbar merupakan properti yang digunakan

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.

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

MEMBANGUN GUI DENGAN M-FILE

Masukkan source code tersebut pada bagian ‘initialize’ seperti pada gambar di bawah ini :

bagian ‘initialize’ seperti pada gambar di bawah ini : Gambar 4. Source code pembuatan figure Maka,

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 :

tombol F5) akan menghasilkan keluaran seperti pada gambar di bawah ini : Gambar 5. Figure hasil

Gambar 5. Figure hasil running source code

MEMBANGUN GUI DENGAN M-FILE

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

MEMBANGUN GUI DENGAN M-FILE

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

MEMBANGUN GUI DENGAN M-FILE

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[100[100[100 150150150150 200200200200 50],50],50],50], 'foregroundcolor','foregroundcolor','foregroundcolor','foregroundcolor', [0[0[0[0 0000 0],0],0],0], 'backgroundcolor','backgroundcolor','backgroundcolor','backgroundcolor', [1[1[1[1 1111 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'Agency'Agency'Agency FB',FB',FB',FB', 'fontweight','fontweight','fontweight','fontweight', 'bol'bold','bol'bold',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

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

fungsi, yaitu fungsi GUIdenganMFILE dengan argumen masukan 1 (case 1). Gambar 7. Hasil running pada command

Gambar 7. Hasil running pada command window

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE Gambar 8. Contoh kontrol push button B. RADIO BUTTON Radio button merupakan

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 :

code untuk membuat radio button adalah sebagai berikut : Gambar 9. Source code membuat radio button

Gambar 9. Source code membuat radio button

Suatu kontrol pada MATLAB dapat dibuat menjadi objek berindeks seperti pada bahasa pemrograman lainnya. Sehingga apabila

MEMBANGUN GUI DENGAN M-FILE

ingin dibuat sejumlah kontrol dengan tipe yang sama, tidak perlu menuliskan source code program yang berulang-ulang.

perlu menuliskan source code program yang berulang-ulang. Gambar 10. Contoh kontrol radio button Gambar 11. Hasil
perlu menuliskan source code program yang berulang-ulang. Gambar 10. Contoh kontrol radio button Gambar 11. Hasil

Gambar 10. Contoh kontrol radio button

yang berulang-ulang. Gambar 10. Contoh kontrol radio button Gambar 11. Hasil running pada command window C.

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.

yang terhubung mampu memilih lebih dari satu alternatif pada saat yang bersamaan. Gambar 12. Contoh kontrol

Gambar 12. Contoh kontrol check box

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE Gambar 13. Source code membuat check box D. EDIT Edit merupakan kontrol

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 :

diolah oleh program. Contoh source code untuk membuat Edit adalah sebagai berikut : Gambar 14. Source

Gambar 14. Source code membuat edit

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE Gambar 15. Contoh kontrol edit E. TEXT Berbeda dengan edit, text adalah

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.

melainkan hanya dapat ditentukan melalui properti string. Gambar 16. Source code membuat text Gambar 17. Contoh

Gambar 16. Source code membuat text

hanya dapat ditentukan melalui properti string. Gambar 16. Source code membuat text Gambar 17. Contoh kontrol

Gambar 17. Contoh kontrol text

MEMBANGUN GUI DENGAN M-FILE

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

ukuran dari besarnya nilai pada tiap kali slider digeser Gambar 18. Source code membuat slider Gambar

Gambar 18. Source code membuat slider

besarnya nilai pada tiap kali slider digeser Gambar 18. Source code membuat slider Gambar 19. Contoh
besarnya nilai pada tiap kali slider digeser Gambar 18. Source code membuat slider Gambar 19. Contoh

Gambar 19. Contoh kontrol slider

MEMBANGUN GUI DENGAN M-FILE

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.

satu sesuai jumlah alternatif di dalam listbox itu sendiri. Gambar 20. Source code membuat listbox Gambar

Gambar 20. Source code membuat listbox

listbox itu sendiri. Gambar 20. Source code membuat listbox Gambar 21. Contoh kontrol listbox H. POPUPMENU
listbox itu sendiri. Gambar 20. Source code membuat listbox Gambar 21. Contoh kontrol listbox H. POPUPMENU

Gambar 21. Contoh kontrol listbox

H.

POPUPMENU

Popupmenu

merupakan

kontrol

bekerja

mirip

dengan

listbox.

Kontrol popupmenu menampilkan daftar alternatif. Popupmenu sangat

MEMBANGUN GUI DENGAN M-FILE

tepat bila pengguna menginginkan sejumlah alternatif ditampilkan tetapi keberadaan kontrol di dalam figure tidak menyita banyak tempat.

kontrol di dalam figure tidak menyita banyak tempat. Gambar 22. Source code membuat popupmenu Gambar 23.

Gambar 22. Source code membuat popupmenu

dalam figure tidak menyita banyak tempat. Gambar 22. Source code membuat popupmenu Gambar 23. Contoh kontrol
dalam figure tidak menyita banyak tempat. Gambar 22. Source code membuat popupmenu Gambar 23. Contoh kontrol

Gambar 23. Contoh kontrol popupmenu

MEMBANGUN GUI DENGAN M-FILE

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

on, off

separator (pemisah)

visible

visibilitas menu

on, off

enable

kemampuan suatu menu untuk

on, off

digunakan

parent

menyatakan objek yang menjadi

handel

parent dari menu

accelerator

shortcut (kombinasi penekanan

karakter

tombol) pada keyboard

callback

menyatakan aksi yang dilakukan

fungsi

oleh menu

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’)

MEMBANGUN GUI DENGAN M-FILE

Tambahkan source code ini di bawah source code program yang sebelumnya.

code ini di bawah source code program yang sebelumnya. Gambar 24. Source code pembuatan uimenu bagian

Gambar 24. Source code pembuatan uimenu bagian I

sebelumnya. Gambar 24. Source code pembuatan uimenu bagian I Gambar 25. Contoh uimenu pada figure Pada

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.

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE Gambar 26. Source code pembuatan uimenu bagian II Gambar 27. Contoh pemanggilan

Gambar 26. Source code pembuatan uimenu bagian II

M-FILE Gambar 26. Source code pembuatan uimenu bagian II Gambar 27. Contoh pemanggilan aksi pada menu

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.

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE Gambar 28. Source code pembuatan toolbar Gambar 29. Sebuah toolbar baru telah

Gambar 28. Source code pembuatan toolbar

GUI DENGAN M-FILE Gambar 28. Source code pembuatan toolbar Gambar 29. Sebuah toolbar baru telah ditambahkan

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.

MEMBANGUN GUI DENGAN M-FILE

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.

toolbar. Oleh karena itu, P.toolbar diset sebagai parent dari ketiganya. Gambar 30. Source code pembuatan uipushtool

Gambar 30. Source code pembuatan uipushtool

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE Gambar 31. Tiga buah uipushtool ditambahkan ke toolbar Perlu diingat bahwa icon

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.

hanya akan menampilkan sebagian area saja dari citra. Gambar 32. Tiga buah citra berekstensi .png Pada

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.

MEMBANGUN GUI DENGAN M-FILE

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.

tambahkan source code berikut ini ke dalam program. Gambar 33. Contoh pemanggilan aksi yang dilakukan uipushtool

Gambar 33. Contoh pemanggilan aksi yang dilakukan uipushtool

Gambar 33. Contoh pemanggilan aksi yang dilakukan uipushtool tooltiptooltiptooltiptooltip Gambar 34. Tampilan uipushtool

tooltiptooltiptooltiptooltip

Gambar 34. Tampilan uipushtool yang dibuat

Ketika salah satu dari sekumpulan pushtool ditekan, maka pada command window akan dicetak properti tooltip komponen tersebut.

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE Gambar 35. Tampilan command window saat runtime 5. UIPANEL Uipanel digunakan untuk

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

MEMBANGUN GUI DENGAN M-FILE

 

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.

centerbottom, rightbottom Selanjutnya, tambahkan source code di bawah ini. Gambar 36. Source code uipanel 26

Gambar 36. Source code uipanel

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE Gambar 37. Hasil running program 6. UIBUTTONGROUP Uibuttongroup digunakan untuk

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]

MEMBANGUN GUI DENGAN M-FILE

 

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.

string Selanjutnya, tambahkan source code di bawah ini. Gambar 38. Source code penggunaan uibuttongroup 28

Gambar 38. Source code penggunaan uibuttongroup

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE Gambar 39. Hasil running penggunaan uibuttongroup Bandingkan hasil running penggunaan kontrol
MEMBANGUN GUI DENGAN M-FILE Gambar 39. Hasil running penggunaan uibuttongroup Bandingkan hasil running penggunaan kontrol

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

MEMBANGUN GUI DENGAN M-FILE

position

menyatakan lokasi uicontextmenu pada saat ditampilkan.

[0 0]

callback

aksi yang dilakukan uicontextmenu

fungsi

Selanjutnya, tambahkan source code di bawah ini.

fungsi Selanjutnya, tambahkan source code di bawah ini. Gambar 40. Source code penggunaan uicontextmenu Gambar 41.

Gambar 40. Source code penggunaan uicontextmenu

code di bawah ini. Gambar 40. Source code penggunaan uicontextmenu Gambar 41. Hasil running penggunaan uicontextmenu
code di bawah ini. Gambar 40. Source code penggunaan uicontextmenu Gambar 41. Hasil running penggunaan uicontextmenu

Gambar 41. Hasil running penggunaan uicontextmenu

MEMBANGUN GUI DENGAN M-FILE

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,

MEMBANGUN GUI DENGAN M-FILE

   

demi, bold

color

menyatakan warna latar belakang dari axis

[R

G B]

xcolor, ycolor,

menyatakan warna dari garis axis

[R

G B]

zcolor

 

Selanjutnya, tambahkan source code di bawah ini.

  Selanjutnya, tambahkan source code di bawah ini. Gambar 42. Source code penggunaan axes Gambar 43.

Gambar 42. Source code penggunaan axes

tambahkan source code di bawah ini. Gambar 42. Source code penggunaan axes Gambar 43. Hasil running

Gambar 43. Hasil running program

MEMBANGUN GUI DENGAN M-FILE

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

lampiran source code lengkap pembuatan aplikasi tersebut. Bagian Pembuatan Fungsi dan Figure Bagian Pembuatan Menu 33

Bagian Pembuatan Menu

lampiran source code lengkap pembuatan aplikasi tersebut. Bagian Pembuatan Fungsi dan Figure Bagian Pembuatan Menu 33

MEMBANGUN GUI DENGAN M-FILE

Bagian Pembuatan Toolbar

MEMBANGUN GUI DENGAN M-FILE Bagian Pembuatan Toolbar Bagian Pembuatan Panel dan Axes Bagian Pembuatan Kontrol 34

Bagian Pembuatan Panel dan Axes

MEMBANGUN GUI DENGAN M-FILE Bagian Pembuatan Toolbar Bagian Pembuatan Panel dan Axes Bagian Pembuatan Kontrol 34

Bagian Pembuatan Kontrol

MEMBANGUN GUI DENGAN M-FILE Bagian Pembuatan Toolbar Bagian Pembuatan Panel dan Axes Bagian Pembuatan Kontrol 34

MEMBANGUN GUI DENGAN M-FILE

Bagian Pembuatan Preferences dan Info

MEMBANGUN GUI DENGAN M-FILE Bagian Pembuatan Preferences dan Info Bagian Main Menu 35

Bagian Main Menu

MEMBANGUN GUI DENGAN M-FILE Bagian Pembuatan Preferences dan Info Bagian Main Menu 35

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE 36
MEMBANGUN GUI DENGAN M-FILE 36
MEMBANGUN GUI DENGAN M-FILE 36

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE 37
MEMBANGUN GUI DENGAN M-FILE 37
MEMBANGUN GUI DENGAN M-FILE 37

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE 38
MEMBANGUN GUI DENGAN M-FILE 38
MEMBANGUN GUI DENGAN M-FILE 38

MEMBANGUN GUI DENGAN M-FILE

MEMBANGUN GUI DENGAN M-FILE 39
MEMBANGUN GUI DENGAN M-FILE 39
MEMBANGUN GUI DENGAN M-FILE 39

MEMBANGUN GUI DENGAN M-FILE

TAMPILAN APLIKASI

MEMBANGUN GUI DENGAN M-FILE TAMPILAN APLIKASI Untuk membuat aplikasi tersebut, terlebih dahulu dibutuhkan sebuah file

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 : nasa078@gmail.com

MEMBANGUN GUI DENGAN M-FILE

REFERENSI

[1]

Abdia Away, Gunaidi. 2010. The Shortcut of MATLAB Programming.

[2]

Bandung: Informatika. MATLAB 7.0 Help

BIOGRAFI PENULIS

Bandung: Informatika. MATLAB 7.0 Help BIOGRAFI PENULIS Nama Tempat Lahir : Tulungagung Tanggal Lahir : 22

Nama

Tempat Lahir : Tulungagung Tanggal Lahir : 22 Maret 1990

: Chandra Kurniawan

Alamat

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

E-mail

: nasa078@gmail.com

Pendidikan

: - SLPTK Santa Maria II Malang - SMAK Santa Maria Malang - S1 Institut Teknologi Nasional Malang Teknik Informatika