Tutorial MATLAB : MATLAB GUI (Terakhir)

UI dengan Terprogram

Berbeda dengan pembuatan Graphical User Interface (GUI) MATLAB sebelumnya yang menggunakan GUIDE. Bagi yang belum membacanya dapat mengakses melalui link berikut : GUI MATLAB dengan GUIDE. Perbedaan yang mendasar adalah semua parameter dan variabel yang terkait dengan UI dengan GUIDE disimpan di file tersendiri dengan extension *.fig, sedangkan proses dan perilaku disimpan pada file dengan extension *.m. Sehingga untuk membuat dan menjalankan program ini dibutuhkan dua file yaitu *.fig dan *.m. Bagaimana jika salah satunya hilang? Sudah pasti tidak dapat dijalankan, bukan?

UI MATLAB dengan Terprogram, membuat GUI MATLAB baik secara tampilan antarmuka pengguna dan proses yang ada didalamnya semuanya disimpan dalam satu file yaitu *.m. Sehingga lebih aman dan tidak kawatir hilang atau corrupt salah satunya, karena hanya satu file.

Bagaimana Membuat UI Terprogram

Sebagaimana dissampaikan di bahasan sebelumnya, bahwa kita akan membuat GUI dengan terporgram untuk tampilan seperti berikut :

Berikut ini adalah langkah-langkah yang diperlukan untuk membuat GUI terprogram di MATLAB :

  1. Jalankan MATLAB
  2. Ketik edit pada MATLAB command prompt, sehingga diperoleh tampilan sebagai berikut :
  3. Sebelum memulai untuk mengetikkan perintah untuk UI, ada baiknya melihat struktur tampilan UI dengan MATLAB seperti gambar berikut :
  4. Dari gambar diatas, maka kita tahu bahwa untuk membuat sebuah tampilan dengan Figure, maka ada beberapa komponen yang ada dibawah seguah figure. Untuk selanjutnya perintah-perintah untuk GUI MATLAB dapat dituliskan disini :
  5. Ada 2 kata kunci yang sering digunakan yaitu set dan get, bagaimana penggunaanya?
  6. Apa yang dihasilkan dari sebuah perintah sebagai berikut :
    btnleft=0.10;
    btnbot=0.15;
    btnwidth=0.8;
    btnheight=0.8;
  7. Perintah diatas hanya mendefinisikan 4 varibel, sebagai batas dari jendela yang akan kita buat, dengan perintah berikut :
    set(gcf,...
    'Name','LABORATORIUM PEMBELAJARAN IOT UNTUK SMK MENGGUNAKAN MIKROKONTROLER & MATLAB',...
    'NumberTitle','off',...
    'MenuBar','none',...
    'Color',[0 0.7 0.5],...
    'units','normalized','outerposition',[btnleft btnbot btnwidth btnheight],...
    'Resize','Off');
  8. Perintah diatas, akan memberikan tampilan sebagai berikut :
  9. Selanjutnya untuk memberikan tampilan menu, kita bisa menambahkan perintah uimenu sebagai berikut :
    b = uimenu('Parent',gcf, ...
    'Label','File', ...
    'Tag','Helpuimenu1');
    c = uimenu('Parent',b, ...
    'Callback','open', ...
    'Label','Open', ...
    'Tag','buka');
    c = uimenu('Parent',b, ...
    'Callback','close', ...
    'Label','Keluar', ...
    'Tag','keluar');
    b = uimenu('Parent',gcf, ...
    'Label','Help', ...
    'Tag','help');
    c = uimenu('Parent',b, ...
    'Callback','iot_gue(''aboutus'')', ...
    'Label','Tentang Kami', ...
    'Tag','aboutus');
  10. Berikut adalah tampilan dari kode MATLAB diatas :
  11. Selanjutnya menambahkan axes kedalam program seperti berikut :
    axes1=axes('Position',[.005 .01 0.99 0.98],...
    'Units','normalized',...
    'Xcolor','black',...
    'LineWidth',0.5,...
    'XTick',[],...
    'YTick',[]);
    y=imread('iot.png');
    axes(axes1)
    image(y), axis off;
  12. Berikut adalah tampilan dari perintah diatas :
  13. Selanjutnya menambahkan layar diatas gambar diatas, dengan program sebagai berikut :

    logp = uipanel('FontSize',12,...
    'ForegroundColor','white',...
    'Visible','On',...
    'BackgroundColor',[0 0.5 0.7],...
    'Position',[.3 0.3 0.4 0.4]);
    utex=uicontrol('Parent',gcf,...
    'Style','Text',...
    'Units','normalized',...
    'FontSize',12,...
    'Visible','on',...
    'FontWeight','Bold',...
    'HorizontalAlignment','left',...
    'BackgroundColor',[0 0.5 0.7],...
    'ForegroundColor',[1 1 1],...
    'Position',[.45 0.625 0.09 0.03],...
    'String',':: LOGIN ::');

    utex=uicontrol('Parent',gcf,...
    'Style','Text',...
    'Units','normalized',...
    'FontSize',12,...
    'Visible','on',...
    'HorizontalAlignment','left',...
    'BackgroundColor',[0 0.5 0.7],...
    'ForegroundColor',[1 1 1],...
    'Position',[.325 0.525 0.09 0.03],...
    'String','Username :');

    user=uicontrol('Parent',gcf,...
    'Style','Edit',...
    'Units','normalized',...
    'FontSize',12,...
    'Visible','on',...
    'HorizontalAlignment','left',...
    'BackgroundColor',[0 0.5 0.7],...
    'ForegroundColor',[1 1 1],...
    'Position',[.425 0.515 0.22 0.04],...
    'String','');
    utex=uicontrol('Parent',gcf,...
    'Style','Text',...
    'Units','normalized',...
    'FontSize',12,...
    'Visible','on',...
    'HorizontalAlignment','left',...
    'BackgroundColor',[0 0.5 0.7],...
    'ForegroundColor',[1 1 1],...
    'Position',[.325 0.45 0.09 0.03],...
    'String','Password :');
    pass=uicontrol('Parent',gcf,...
    'Style','Edit',...
    'Units','normalized',...
    'FontSize',12,...
    'Visible','on',...
    'HorizontalAlignment','left',...
    'BackgroundColor',[0 0.5 0.7],...
    'ForegroundColor',[1 1 1],...
    'Position',[.425 0.440 0.22 0.04],...
    'String','');
    utex=uicontrol('Parent',gcf,...
    'Style','PushButton',...
    'Units','normalized',...
    'FontSize',12,...
    'Visible','on',...
    'Callback','iot_gue(''login'')', ...
    'HorizontalAlignment','left',...
    'BackgroundColor',[0 0.5 0.7],...
    'ForegroundColor',[1 1 1],...
    'Position',[.425 0.35 0.09 0.05],...
    'String','Sign In');

  14. Sehingga diperoleh tampilan sebagai berikut :

Bagaimana menarik bukan? Pastinya masih banyak yang bisa kita diskusikan disini. Baiklah Pantengin terus tulisan ini, untuk diskusi ebih lanjut hubungi : suyatno.budiharjo@gmail.com atau Nomor WA : 081286943974. Terima kasih

 

Suyatno Budiharjo

Suyatno Budiharjo

IKatlah Ilmu dengan Menuliskannya...

Leave a Reply

Your email address will not be published. Required fields are marked *