Graphical User Interface

BAB 12 Graphical User Interface

12.1 Tujuan Pengajaran

Setelah mengikuti unit praktikum ini, maka praktikan diharapkan :

1. Mahasiswa mampu mengenal pemrograman grafis di dalam MATLAB

2. Mahasiswa dapat membuat program sederhana dengan GUI

12.2 Alat dan Bahan

1. Komputer

2. Software MATLAB versi 5 atau sesudahnya.

3. White Board (untuk penjelasan oleh dosen)

4. Proyektor Komputer (untuk demonstrasi)

5. Spidol (untuk white board)

6. Kertas

7. Buku/Modul/Handout/Petunjuk Praktikum

12.3 Dasar Teori GUI

MATLAB menyediakan tool untuk pembuatan GUI (Graphical User Interface). Fasilitas ini dinamakan GUIDE (GUI Development Environment). Untuk pembuatan GUI, ketikkan perintah guide di command window. Atau dengan mengclick icon GUI.

Gambar 12.1 Guide Quick Start

Pada Quick Start dialog, select Blank GUI (Default) template. Click OK maka akan menampilakn Layout Editor, terlihat dibawah ini.

Gambar 12.2 Layout Editor

GUIDE Toolset :

Layout Editor

: tempat untuk menambah dan menyusun objek di jendela GUI

Alignment Tools

: untuk mengatur posisi masing-masing objek

Property Inspector

: memeriksa dan mengeset nilai-nilai (sifat) objek

Object Browser

: memantau hirarki objek-objek yang telah ada do layout

Menu Editor

: membuat menu dan submenu dari GUI

Untuk memudahkan pemahaman, buatlah GUI sederhana berikut. Pembuatan GUI ini di bagi dalam 3 tahap yakni :

1. Perancangan GUI akan lebih baik jika tampilan GUI digambar terlebih dahulu dalam kertas

2. Penempatan dan pengaturan objek seperti pushbutton, axis dll

3. Pemrograman GUI membuat program bagi objek-objek GUI di M-File

Ketika kita membuat layout GUI kemudian menyimpannya, maka MATLAB akan membuat M-File secara otomatis yang nantinya akan digunakan untuk pemrograman. Nama M-File harus sama dengan nama figure dari GUI tersebut.

Langkah-langkah :

1. Silahkan anda membuat plot seperti dibawah ini.

a. 3 buah push button

b. 1 buah axes

c. 1 buah static text

d. 1 buah pop-up menu

Gambar 12.3 Tampilan desain

2. Rapihkan push button dengan menekan CRTL dan menclick push button ketiganya. Kemudian pilih Tools dan Align Object. Atur align object sehingga mengikuti gambar dibawah ini. Set spacing 20 pixel.

Gambar 12.4 Merapikan tampilan desain

Click 2 kali : Push Button 1 lalu pilih string.. Ganti Push Button 1 menjadi Surf

Gambar 12.5 Memberikan atribut Push Button

Click 2 kali : Push Button 2 lalu pilih string.. Ganti Push Button 2 menjadi Mesh Click 2 kali : Push Button 3 lalu pilih string.. Ganti Push Button 3 menjadi Contour

Gambar 12.6 Tampilan Push Button setelah diganti

Click 2 kali : Pop-up Menu lalu pilih string.. Ganti Pop-up Menu menjadi

Peaks Membrane Sinc

Gambar 12.7 Memberikan atribut Pop-up Menu

Click 2 kali : Static Text lalu pilih string.. Ganti Static Text menjadi Select Data

Gambar 12.8 Memberikan atribut Static text

SAVE dan ACTIVATE

1 Save and activate your GUI by selecting Run from the Tools menu.OK.

Gambar 12.9 Tampilan GUI

Setelah di RUN, maka akan terbentuk 2 file sebagai berikut :

Gambar 12.10 Tampilan file GUI.fig

Gambar 12.11 Tampilan file GUI.m

Programming a Simple GUI

The code uses the MATLAB functions peaks, membrane, and sinc.

1. Display the opening function in the M-file editor. If the GUI M-file, simple_gui.m, is not already open in your editor, open it by selecting M-file Editor from the View menu. In the editor, click the function icon on the toolbar, then select simple_gui_OpeningFcn in the pop-up menu that displays.

Gambar 12.12 Tampilan mfile GUI.m

2. Create data for the GUI to plot by adding the following code to the opening function immediately after the comment that begins % varargin...

% Create the data to plot. handles.peaks=peaks(35); handles.membrane=membrane; [x,y] = meshgrid(-8:.5:8); r = sqrt(x.^2+y.^2) + eps; sinc = sin(r)./r; handles.sinc = sinc; % Set the current data value. handles.current_data = handles.peaks; % Create the data to plot. handles.peaks=peaks(35); handles.membrane=membrane; [x,y] = meshgrid(-8:.5:8); r = sqrt(x.^2+y.^2) + eps; sinc = sin(r)./r; handles.sinc = sinc; % Set the current data value. handles.current_data = handles.peaks;

Gambar 12.13 Tampilan fig GUI.m

Programming the Pop-Up Menu

1. Display the pop-up menu callback in the M-file editor. Right-click the pop-up menu component in the Layout Editor to display a context menu. From that menu, select

View Callbacks > Callback

Gambar 12.14 Memanggil callback 1

2 Add the following code to the popupmenu1_Callback after the comment that begins % handles...

% Determine the selected data set. str = get(hObject, 'String'); val = get(hObject,'Value'); % Set current data to the selected data set. switch str{val}; case 'Peaks' % User selects peaks. handles.current_data = handles.peaks; case 'Membrane' % User selects membrane. handles.current_data = handles.membrane; case 'Sinc' % User selects sinc. handles.current_data = handles.sinc; end % Save the handles structure. guidata(hObject,handles)

Programming the Push Buttons

1. Display the Surf push button callback in the M-file editor. Right-click the Surf push button in the Layout Editor to display a context menu. From that menu, select View Callbacks > Callback.

Gambar 12.15 Memanggil callback 2

2 Add the following code to the callback immediately after the comment that begins % handles...

% Display surf plot of the currently selected data. surf(handles.current_data);

3 Repeat steps 1 and 2 to add similar code to the Mesh and Contour push button callbacks.

• Add this code to the Mesh push button callback, pushbutton2_Callback: % Display mesh plot of the currently selected data.

mesh(handles.current_data);

• Add this code to the Contour push button callback, pushbutton3_Callback: % Display contour plot of the currently selected data. contour(handles.current_data);