logo for matrixlab-examples.com
leftimage for matrixlab-examples.com

Matlab GUI - Basics (Hello World!)



 We are going to develop a simple Matlab GUI. We’ll use the Matlab GUIDE (Graphical User Interface Development Environment) which is pretty handy... This article is a super-fast introduction, but very convenient because with some ingenuity you can learn it in 10 minutes... or so.


Let’s start the ride! On the command window type:

>> guide

This will open the ‘Quick Start’ window, where you can study or review their examples, too! For the moment, please follow me and select the fist option: ‘Blank GUI (Default)’.

Matlab GUI introduction

Then, an untitled figure will pop-up. You have some components on the left menu, which you can drag onto your interface.

You can drag components onto your GUI

In this example we are going to use only two ‘push buttons’ and one ‘static text’.

components to be added to your GUI

Drag and drop a ‘static text’ onto your Matlab GUI. You can reduce or increase the size of your interface window by dragging its bottom-right corner, as it’s done in other drawing programs.

a static text box onto your GUI
 
Double click on this ‘static text’ and a ‘Property Inspector’ window will appear. Scroll down and look for the ‘String’ property and delete what's in there. For the moment we want it to be blank.

Then, make the ‘Tag’ property to be ‘output_line’. You can use whatever name you want, but ‘output_line’ seems good to me... (hehehe)

Your windows must look similar to what I’m showing here:

Properties for a static text

Then, drag-and-drop a ‘push button’ onto your interface. Modify its ‘String’ property to read ‘Launch Message’. Let its ‘Tag’ property intact. You could change this tag... it’s the name or identifier of the object as it’s going to be recognized in the rest of the code.

Your windows must look similar to what I’m showing here:

Properties of a push-button
 
Drag-and-drop another ‘push button’. Modify its ‘String’ property to read ‘Clear Message’ and leave its ‘Tag’ as it is. You’ll produce these results.

Properties in a GUI

Now, right-click on the ‘Launch Message’ button and choose ‘View Callbacks’ -> ‘Callback’

right-click to go to the callback-functions


 You’ll be asked to save your figure. A good name (only my suggestion) is hello_world.fig... use the name that you like.

You’ll be taken to the Matlab code (in the editor window) that will drive your interface. Matlab has automatically created functions related to your components. You have to make the final touches... For the moment, don’t worry about the many lines automatically created. Just focus on what we need to do.


The ‘Callback’ functions are the instructions that will be executed when the user pushes the buttons or does something with the components that you have included in your Matlab GUI. In this case, you’ll see something like this code.

% --- Executes on button press in pushbutton1.
function pushbutton1_Callback(hObject, eventdata, handles)
% hObject    handle to pushbutton1 (see GCBO)
% eventdata  reserved - to be defined in a future version of MAT
% handles    structure with handles and user data (see GUIDATA)


A ‘set’ instruction sets the properties of the elements that you indicate. Do you remember that you have a ‘static text’ with the tag (identifier) ‘output_line’? We are going to modify it when the user pushes the button with the string (or label) ‘Launch Message’. This is accomplished with the instruction

set(handles.output_line,'String','Hello World!!')

The first parameter is the object (component) that you’re going to modify. It starts with ‘handles.’. The second argument is the object’s property that you’re going to modify, and in this case is the ‘String’ property. The third argument is the value that you want to assign to the property.

So, the result is that when the user presses the ‘Launch Message’ button, a message reading ‘Hello World!!’ will appear in the ‘output line’ (officialy named ‘handles.output_line’). Add this single line to the code, so that it looks like this:

% --- Executes on button press in pushbutton1.
function pushbutton1_Callback(hObject, eventdata, handles)
% hObject    handle to pushbutton1 (see GCBO)
% eventdata  reserved - to be defined in a future version of MAT
% handles    structure with handles and user data (see GUIDATA)
set(handles.output_line,'String','Hello World!!')


We’ll do something similar to the ‘callback’ corresponding to the ‘Clear Message’ button. So change this original code...

% --- Executes on button press in pushbutton2.
function pushbutton2_Callback(hObject, eventdata, handles)
% hObject    handle to pushbutton2 (see GCBO)
% eventdata  reserved - to be defined in a future version of MAT
% handles    structure with handles and user data (see GUIDATA)

into this...

% --- Executes on button press in pushbutton2.
function pushbutton2_Callback(hObject, eventdata, handles)
% hObject    handle to pushbutton2 (see GCBO)
% eventdata  reserved - to be defined in a future version of MAT
% handles    structure with handles and user data (see GUIDATA)
set(handles.output_line,'String','')


The result is that when the user presses the ‘Clear Message’ button, a blank message will appear in the ‘output line’ (officialy named ‘handles.output_line’).

Magic is about to happen!
 
Now, run your interface by clicking the ‘run’ icon at the top of the editor window...

Run icon in the editor top menu

and... presto! a ‘hello_world’ window has appeared! It’s your first Matlab GUI!

Matlab GUI finished and running!

 
Try, it! Press the ‘Launch Message’ button... and an interesting message appears...

GUI displaying message

then, press the ‘Clear Message’ button...

GUI cleared

 

Well done! You did it!

So, let’s summarize:

  • You can drag-and-drop your components onto your graphic interface to start your Matlab GUI.
  • Matlab will automatically create callback-functions, related to the buttons or other components that you include.
  • The ‘set’ instruction assigns values to properties of the elements that you want to modify. The general format is:

     set(handles.tag_of_your_component, 'Property', value)


 From 'Matlab GUI' to home

 From 'Matlab GUI' to 'GUIs Menu'
   
'Get' function

Video: create GUIs

Top


footer for matlab page