1

MODUL PERKULIAHAN

Komputasi
Mekanikal
GUI 1

Abstrak Sub-CPMK

Pemrograman GUI: Sub CPMK 2.2

membangun GUI; Menciptakan program Graphical User
komponen-komponen GUI; Interface (GUI)
menulis skrip program

Pendahuluan
Graphical user interface (GUI) adalah tampilan grafis dalam satu atau lebih jendela yang
berisi kontrol, yang disebut komponen, yang memungkinkan pengguna untuk melakukan
tugas-tugas interaktif. Pengguna GUI tidak harus membuat skrip atau mengetik perintah
di baris perintah untuk menyelesaikan tugas. Tidak seperti program pengkodean untuk
menyelesaikan tugas, pengguna GUI tidak perlu memahami rincian tentang bagaimana
tugas dilakukan. Komponen GUI dapat mencakup menu, toolbar, tombol tekan, tombol
radio, kotak daftar, dan slider. GUI yang dibuat menggunakan peralatan Matlab juga
dapat melakukan semua jenis perhitungan, membaca dan menulis berkas data,
berkomunikasi dengan GUI lain, dan menampilkan data sebagai tabel atau sebagai plot.
Kebanyakan GUI menunggu pengguna untuk memanipulasi kontrol, dan kemudian
menanggapi setiap tindakan. Setiap kontrol, dan GUI itu sendiri, memiliki satu atau lebih
rutin (kode Matlab yang dapat dieksekusi) yang dikenal sebagai callbacks, dinamai itu
karena rutin itu "memanggil kembali" ke Matlab untuk memintanya melakukan sesuatu.
Eksekusi setiap callback dipicu oleh tindakan pengguna tertentu seperti menekan tombol
layar, mengklik tombol mouse, memilih item menu, mengetik string atau nilai numerik,
atau melewati kursor di atas komponen. GUI kemudian menanggapi peristiwa ini.
Pencipta GUI, menyediakan callbacks yang menentukan apa yang dilakukan komponen
untuk menangani peristiwa. Jenis pemrograman ini sering disebut sebagai pemrograman
berbasis peristiwa. Sebagai contoh, klik tombol adalah salah satu peristiwa tersebut.
Dalam pemrograman berbasis peristiwa, eksekusi callback bersifat asinkron, yaitu, dipicu
oleh peristiwa di luar perangkat lunak. Dalam kasus GUI Matlab, sebagian besar peristiwa
adalah interaksi pengguna dengan GUI, tetapi GUI dapat menanggapi jenis peristiwa lain
juga, misalnya, pembuatan berkas atau menghubungkan perangkat ke komputer.

Pembangunan GUI
GUI Matlab adalah jendela gambar tempat Anda menambahkan kontrol yang
dioperasikan pengguna. Anda dapat memilih, merubah ukuran, dan memposisikan
komponen-komponen ini sesuka Anda. Menggunakan callbacks Anda dapat membuat
komponen melakukan apa yang Anda inginkan ketika pengguna mengklik atau
memanipulasi komponen-komponen tersebut dengan menekan tombol. Anda dapat
membangun GUI Matlab dengan dua cara:
1. Menggunakan GUIDE (GUI Development Environment), kit konstruksi GUI
interaktif.
2. Membuat berkas kode yang menghasilkan GUI sebagai fungsi atau skrip
(konstruksi GUI terprogram).

2021 Manajemen Energi Terbarukan

2 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Pendekatan pertama dimulai dengan gambar yang Anda isi dengan komponen dari dalam
editor tata letak grafis. GUIDE membuat berkas kode terkait yang berisi callback untuk
GUI dan komponennya. GUIDE menyimpan angka (sebagai berkas fig) dan berkas kode.
Membuka salah satu juga membuka yang lain untuk menjalankan GUI.
Dalam pendekatan kedua, pembangunan GUI terprogram, Anda membuat berkas kode
yang mendefinisikan semua properti komponen dan perilaku; Ketika pengguna
mengeksekusi berkas, program tersebut membuat gambar, mengisinya dengan
komponen, dan menangani interaksi pengguna. Gambar biasanya tidak disimpan di
antara sesi karena kode dalam berkas membuat gambar yang baru setiap kali program
berjalan. Akibatnya, berkas kode dari dua pendekatan tersebut berbeda.
Berkas GUI terprogram umumnya lebih panjang, karena berkas tersebut secara eksplisit
mendefinisikan setiap properti dari gambar dan kontrolnya, serta callbacks. GUI dari
GUIDE mendefinisikan sebagian besar properti dalam gambar itu sendiri. GUI tersebut
menyimpan definisi dalam berkas fig-nya dan bukan di berkas kodenya. Berkas kode
berisi callbacks dan fungsi lain yang menginisialisasi GUI ketika terbuka.

Latihan Membuat GUI

GUI yang akan dibangun berisi:
• Komponen sumbu
• Menu pop-up yang mencantumkan tiga set data berbeda yang sesuai dengan
fungsi Matlab: peaks, membrane, dan sinc
• Komponen teks statis untuk memberi label menu pop-up
• Tiga tombol tekan, yang masing-masing menampilkan jenis plot yang berbeda:
permukaan, jaring, dan kontur

2021 Manajemen Energi Terbarukan

3 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Peryusunan tata letak GUI dengan GUIDE

• Mulai GUIDE dengan mengetik:

>> guide
pada prompt Matlab. Dialog Mulai Cepat GUIDE ditampilkan, seperti yang
ditunjukkan pada gambar berikut.

2021 Manajemen Energi Terbarukan

4 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
 • Dalam dialog Mulai Cepat, pilih templat GUIi Kosong (Default). Klik OK untuk
menampilkan GUI kosong di Editor Tata Letak, seperti yang ditunjukkan pada
gambar berikut.

2021 Manajemen Energi Terbarukan

5 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
 • Tampilkan nama komponen GUI dalam palet komponen. Pilih Preferensi dari
menu Berkas Matlab. Kemudian pilih GUIDE > Tampilkan nama dalam palet
komponen, dan klik OK. Editor Tata Letak kemudian muncul seperti yang
ditunjukkan pada gambar berikut.

2021 Manajemen Energi Terbarukan

6 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
 • Atur ukuran GUI dengan mengukur ulang area grid di Editor Tata Letak. Klik sudut
kanan bawah dan seret sampai GUI tingginya sekitar 10 cm dan lebar 15 cm. Jika
perlu, buat jendela lebih besar.

2021 Manajemen Energi Terbarukan

7 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
• Tambahkan tiga tombol tekan, area teks statis, menu pop-up, dan sumbu ke GUI.
Pilih entri yang sesuai dari palet komponen di sisi kiri Editor Tata Letak dan seret
ke area tata letak. Posisikan semua kontrol kira-kira seperti yang ditunjukkan pada
gambar berikut.

• Jika beberapa komponen memiliki bentuk yang sama, Anda dapat menggunakan
Alat Perataan untuk menyelaraskannya satu sama lain. Untuk menyelaraskan tiga
tombol tekan:
1. Pilih ketiga tombol tekan dengan menekan Ctrl dan mengkliknya.
2. Pilih Ratakan Objek dari menu Alat untuk menampilkan Alat Perataan.
3. Buat pengaturan ini di Alat Perataan, seperti yang ditunjukkan pada
gambar berikut:
 Jarak 20 piksel antara tombol tekan ke arah menegak.
 Kiri sejajar dalam arah mendatar.

2021 Manajemen Energi Terbarukan

8 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
 • Gunakan Alat Penyelarasan untuk menyelaraskan dan mendistribusikan semua
kontrol dalam gambar.
• Tombol tekan, menu pop-up, dan teks statis memiliki label default saat Anda
membuatnya. Teks dalam komponen-komponen tersebut generik, misalnya Push
Button 1. Ubah teks untuk menjadi spesifik untuk GUI Anda, sehingga
menjelaskan untuk apa komponen itu.
• Untuk mengubah teks Tombol Tekan pertama:
1. Pilih Inspektur Properti dari menu Tampilan.
2. Di area tata letak, klik Tombol Tekan yang ingin Anda ubah.
3. Di Inspektur Properti, pilih properti String lalu ganti nilai yang ada
dengan kata Permukaan
4. Pilih masing-masing tombol tekan yang tersisa secara bergantian
dan ulangi langkah 2 dan 3. Beri label tombol tekan tengah Jaring,
dan Kontur untuk tombol bawah.

2021 Manajemen Energi Terbarukan

9 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
 • Menu pop-up menyediakan pilihan tiga set data: peaks, membrane, dan sinc.
Kumpulan data ini sesuai dengan fungsi Matlab dengan nama yang sama. Untuk
mencantumkan kumpulan data tersebut sebagai pilihan di menu pop:
1. Di area tata letak, pilih menu pop-up dengan mengkliknya.
2. Di Inspektur Properti, klik tombol di samping String. Kotak dialog
String ditampilkan.
3. Ganti teks yang ada dengan nama tiga set data: Peaks, Membrane,
dan Sinc. Tekan Enter untuk pindah ke baris berikutnya.
4. Setelah Selesai mengedit item, klik OK. Item pertama dalam daftar
Anda, Peaks, muncul di menu pop-up di area tata letak.

2021 Manajemen Energi Terbarukan

10 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
 • Dalam GUI ini, teks statis berfungsi sebagai label untuk menu pop-up. Pengguna
tidak dapat mengubah teks ini. Bahasan ini menunjukkan kepada Anda cara
mengubah teks statis menjadi terbaca Pilih Data.
1. Di area tata letak, pilih teks statis dengan mengkliknya.
2. Di Inspektur Properti, klik tombol di samping String. Dalam kotak
dialog String yang ditampilkan, ganti teks yang ada dengan frasa
Pilih Data.
3. Klik OK. Frasa Pilih Data muncul di komponen teks statis di atas
menu pop-up.

2021 Manajemen Energi Terbarukan

11 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
 • Di Editor Tata Letak, GUI Anda sekarang terlihat seperti dalam gambar berikut,
dan langkah selanjutnya adalah menyimpan tata letak.
•

• Saat Anda menyimpan GUI, GUIDE membuat dua berkas, berkas fig, dan berkas
kode. Berkas fig, dengan ekstensi .fig, adalah berkas biner yang berisi deskripsi
tata letak. Berkas kode, dengan ekstensi .m, berisi fungsi Matlab yang mengontrol
GUI.
• Untuk menyimpan GUI, Anda dapat memilih Simpan sebagai... dari menu Berkas
atau Jalankan (dari menu Peralatan). Jika Anda mencoba menjalankan Gambar
yang belum disimpan, GUIDE akan meminta Anda untuk menyimpannya terlebih
dahulu. Simpan Gambar sebagai Latihan_GUI.fig (di jalur saat ini): GUIDE
menyimpan berkas Latihan_GUI.fig dan Latihan_GUI.m. Berkas yang terakhir
dibuka di Editor.
• Jalankan gambar dengan memilih Tools > Run atau dari konsol Matlab, dengan
mengetik:
>> Latihan_GUI

2021 Manajemen Energi Terbarukan

12 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
 • Sekarang GUI telah dirancang, tetapi belum bisa melakukan apa-apa. Perlu
ditambahkan kode untuk bisa berjalan.

Menambahkan kode ke dalam GUI

Ketika Anda menyimpan GUI Anda di bagian sebelumnya, GUIDE membuat dua berkas:
Berkas fig Latihan_GUI.fig yang berisi tata letak GUI dan berkas Latihan_GUI.m, yang
berisi kode yang mengontrol bagaimana GUI berperilaku. Kode ini terdiri dari satu set
fungsi Matlab (bukan skrip). Tetapi GUI tidak menanggapi karena fungsinya belum berisi
pernyataan yang melakukan tindakan. Di sini kita akan melihat cara menambahkan kode
ke berkas untuk membuat GUI melakukan sesuatu.

Menghasilkan data untuk plot

Di bagian ini kita akan belajar bagaimana menghasilkan data yang akan diplot ketika
pengguna GUI mengklik tombol. Fungsi pembukaan menghasilkan data ini dengan
memanggil fungsi Matlab. Fungsi pembukaan, yang menginisialisasi GUI ketika dibuka,
adalah callback pertama di setiap berkas kode GUI yang dihasilkan GUIDE. Dalam
contoh ini, Anda menambahkan kode yang membuat tiga set data ke fungsi pembukaan.
Kode ini menggunakan fungsi Matlab peaks, membrane, dan sinc. Buka Latihan_GUI.m di
Editor:
>> edit Latihan_GUI
Gulir ke fungsi Latihan_GUI_OpeningFcn (atau pilih di alat Tampilkan fungsi f() di editor
dan tambahkan kode ini untuk membuat data untuk GUI segera setelah komentar yang
dimulai dengan:
% varargin command line arguments to Latihan_GUI (see VARARGIN)

% Menciptakan data untuk diplot.

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 nilai data sekarang
handles.data_sekarang = handles.peaks;
surf(handles.data_sekarang)

2021 Manajemen Energi Terbarukan

13 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Pastikan untuk tidak mengubah kode yang sudah ada setelah baris yang Anda
tambahkan.
Enam baris kode pertama yang dapat dieksekusi membuat data menggunakan fungsi
Matlab peaks, membrane, dan sinc. Kode ini menyimpan data dalam struktur handles,
argumen yang diberikan kepada semua callback. Callback untuk tombol tekan dapat
mengambil data dari struktur handles.
Dua baris terakhir membuat nilai data sekarang dan diset ke peaks, dan kemudian
menampilkan plot permukaan untuk peaks. Gambar berikut menunjukkan bagaimana GUI
sekarang terlihat ketika pertama kali ditampilkan.

Walaupun gambar sudah muncul dalam poros, tetapi tidak terjadi apa-apa jika tombol-
tombol ditekan atau menu pop-up diubah pilihannya. Itu karena belum ada kode untuk
komponen-komponen tersebut. Pada bahasan selanjutnya, kita akan menambahkan kode
untuk komponen-komponen itu.

Memprogram Tombol Tekan

Masing-masing dari tiga tombol tekan membuat jenis plot yang berbeda menggunakan
data yang ditentukan oleh pilihan data sekarang di menu pop-up. Callbacks tombol tekan
memplot data dalam data_sekarang. Tombol-tombol tersebut secara otomatis memiliki

2021 Manajemen Energi Terbarukan

14 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
akses ke data_sekarang karena callbacks tombol-tombol tersebut bersarang pada tingkat
yang lebih rendah.
Tambahkan kode berikut pada:
• callback tomboltekan1
% Tampilkan plot permukaan dari data yang dipilih sekarang.
surf(handles.data_sekarang);
• callback tomboltekan2
% Tampilkan plot jaring dari data yang dipilih sekarang.
mesh(handles.data_sekarang);
• callback tomboltekan3
% Tampilkan plot kontur dari data yang dipilih sekarang.
contour(handles.data_sekarang);

Memprogram menu pop-up

Tambahkan kode berikut pada callback menu pop-up

% Tentukan set data yang dipilih.
str = get(hObject, 'String');
val = get(hObject,'Value');
% Set data sekarang ke set data yang dipilih.
switch str{val}
case 'Peaks' % Pengguna pilih Peaks.
handles.data_sekarang = handles.peaks;
case 'Membrane' % Pengguna pilih Membrane.
handles.data_sekarang = handles.membrane;
case 'Sinc' % Pengguna pilih Sinc
handles.data_sekarang = handles.sinc;
end
% Update handles structure
guidata(hObject, handles);

Sekarang GUI sudah dapat berfungsi sepenuhnya dan semua komponen sudah aktif
seperti pada gambar-gambar berikut ini.

2021 Manajemen Energi Terbarukan

15 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
2021 Manajemen Energi Terbarukan
16 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Daftar Pustaka
Casey, J. (2013). A MATLAB primer in four hours with practical examples. Software guide
for undergraduate students. Technological University Dublin
Dukkipati, R. V. (2010). MATLAB An Introduction with Applications. New Delhi: New Age
International (P) Ltd., Publishers.
Forbes, J. R. (2017). Matlab For Mechanical Engineering Undergraduates. Montreal:
McGill University.
Hansen, J. S. (2011). GNU Octave Beginner's Guide. Birmingham: Packt Publishing.
Linge, S, dan Langtangen, H. P. (2016). Programming for Computations –
MATLAB/Octave. New York: Springer.
Magrab, E. B., Azarm, S., Balachandran, B., Duncan, J. H., Herold, K. E., dan Walsh, G.
C. (2011). An Engineer’s Guide to MATLAB, 3rd Edition. New Jersey: Prentice Hall.
Marchand, P., dan Holland, T. (2002) Graphics and GUIs with MATLAB 3rd Edition. Boca
Raton: Chapman and Hall/CRC.
Scilab Enterprises and Gomez, C. (2013). Scilab for very beginners. Scilab Enterprises.
Simakov, S. (2005). Introduction to MATLAB Graphical User Interfaces. Maritime
Operations Division, DSTO Defence Science and Technology Organisation,
Edinburgh, South Australia.

2021 Manajemen Energi Terbarukan

17 Dr. Ir. Ignatius Agung Wibowo, M.Sc.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/