Introduction to Matlab
& Data Analysis
Tutorials 12:
Graphical User Interface (GUI)
Please change directory to directory E:\Matlab (cd E:\Matlab;)
From the course website
(http://www.weizmann.ac.il/feinberg/courses/EranEden/course_outline.htm)
Download:
t12.zip
Eilon Sharon, Weizmann 2008 ©
1
Content




GUI definition
Predefined dialog boxes.
GUI terms
Using GUIDE to create a GUI
2
GUI - Definition


UI (user interface): The point of contact or
method of interaction between a person and a
computer or computer program.
The UI defines the “look and feel” of the
application

Windows 1.0
3
GUI - Definition



(Matlab help) A graphical user interface (GUI) is
a graphical display that contains devices, or
components, that enable a user to perform
interactive tasks.
To perform these tasks, the user of the GUI
does not have to create a script or type
commands at the command line.
Often, the user does not have to know the
details of the task at hand.
4
Matlab Can Use Operating System
Predefined Dialog Boxes For Various Tasks

Example:
Filter - can contain *
[fname, dirpath] = uigetfile('*.m',
'Select a M-file')
Title
5
Useful Dialog Boxes - Examples
% Input Boxes:
 [fname, dirpath] =
uigetfile('*.m‘,'Select a M-file')
 [fname, dirpath] = uiputfile('*.mat')
 c = uisetcolor([0.5 0 0.5],'My Select Color')
 fc = uisetfont('My Set Font')
Try some of
these examples
% Dialog boxes (Dialog == dlg)
 msgbox('message box');
 errordlg('This is an error Message');
 helpdlg('Help:This is a help dialog box');
 [selection,ok] =
listdlg('ListString',{'a','b','c'})
6
Creating a GUI
40 GUI examples:
http://www.mathworks.com/matlabcentral/fileexchange/24861-41-complete-guiexamples
Eilon Sharon, Weizmann 2008 ©
7
You Can Either Create a GUI
Programmatically or Use GUIDE

Create a GUI Programmatically

Video Example:

http://blogs.mathworks.com/pick/2007/12/28/matlab-basics-guis-without-guide/
Use the
GUIDE!

Use GUIDE to create a GUI

Graphical User Interface
Development Environment
8
The GUI (figure) Contains
Components


The GUI contains components.
Types of components:

Buttons:





Lists:






Push button
Toggle button
Radio Button
Check box
Pop up menu
List box
Button Group
Panel
Slider
Axes
9
GUI Work in Event
Driven Programming

Each component of the GUI is associated Component
with one or more callback functions

The GUI programmer writes the callback
functions:
% --- Executes on button press in pushbutton1.
function pushbutton1_Callback(hObject, eventdata, handles)

The callback function execution is
triggered by a particular user action
(=event) such as:




A button push
A mouse click
A selection of a menu item
cursor passing over a component
Callback
function
10
Creating a GUI using GUIDE

Activate GUIDE,
two options:

>> guide
Press the icon:
Choose the Blank
GUI option
Add components
using Drag-and-Drop



11
First Example –
A GUI with Exit button
1.
2.
Drag and Drop a “push button”.
Double Click on the button to
open the “Inspector”.
The inspector lets you edit the
properties of each component
12
The Tag Property Is Used as an
Identifier of the Component
1.
2.
Set the String property to “Exit”
Set the Tag property to
“exitButton”
The Tag property:
1. Sets the name of the
automatically generated
callback functions
2. Sets the name of the
component handle
13
The GUI Object Contain The
GUI Components Objects



The GUI object contains the components objects
The objects are stored in a hierarchical manner
We can browse through the objects using the
object browser:
The GUI object is
of type figure
The push button
is a component of
type “uicontrol”
Tag
The GUI (figure)
is the parent of
the push button
(uicontrol)
14
First Run of the GUI Generates
the GUI Figure and a M-file

At the first run GUIDE generates:


A Figure file – hold the GUI figure.
A M-file – contains:



The GUI main function. Running this function will
create and run the GUI
The callback functions
Lets Run the GUI

Save the file as “gui_example1”
15
The Callback Functions Define
the Respond to the Events


Our code is now active and we can run it by typing in
the command line:
>> gui_example1
We now need to add to the automatically generated
code the implementation of the callback functions

In GUIDE - Right click on the component
View callback -> callback
% --- Executes on button press in exitButton.
function exitButton_Callback(hObject, eventdata, handles)
% hObject
handle to exitButton (see GCBO)
% eventdata reserved –
to be defined in a future version of MATLAB
% handles
structure with handles and user data
16
(see GUIDATA)

Adding our Respond to the Click
Inside the Callback Function
% --- Executes on button press in exitButton.
function exitButton_Callback(hObject, eventdata, handles)
% hObject
handle to exitButton (see GCBO)
% eventdata reserved –
to be defined in a future version of MATLAB
% handles
structure with handles and user data
(see GUIDATA)
close();
In response to a click on the Exit
button we will close the GUI (figure)
Notice that the function name contains
the tag of the component:
exitButton_Callback
17
The Callback Input Arguments Contain
Information About the Event, Application
Shared Data and Components Handles

The input arguments of the Callback functions
are:

hObject – handle of the called object:




The object contains information about the call (event).
We retrieve the data using the get function, example:
get(hObject,'String')
eventdata – reserved - to be defined in a future
version of MATLAB…
handles - structure with handles and user data
Handles is used to pass data between functions!
18
To Learn About the Callback Functions
Input Lets Add Components to Our GUI

Add an axes component


Add a push button



Set String to “Surf”
Set tag to “surf”
Add a pop up menu



Make sure the tag is “axes1”
Set tag to “dataSelection”
Set string to “peaks
membrane”
Extra - Add a static text

Set string to “Select Data”
(you can also change font to 14)
Play with the color
and font properties
19
Our GUI Maintains Data Inside The Handles
Structure and Pass It Between Functions

Goal:

Our GUI will choose between two types of
data –




Peaks
Membrane
A press on the Surf button will draw the
selected data in the axes
Implementation:


The selected data will be save as
handles.cur_data
Surf will draw the cur_data
20
Our GUI Maintains Data Inside The Handles
Structure and Pass It Between Functions

In the M-file go to:
function gui_example_OpeningFcn(hObject, eventdata, handles,
varargin)
Add:
% Choose default command line output for gui_example
handles.output = hObject;

handles.peaks = peaks(35);
handles.membrane = membrane;
handles.cur_data = handles.peaks;
The new code
% Update handles structure
guidata(hObject, handles);
guidata – Finds the parent GUI of the hObject (component). Sets
handles as a field of the GUI structure (stores handles in the GUI)
21
The guidata Function –
Stores or Retrieves GUI Data
guidata(object_handle,data)
hObject
handles
data = guidata(object_handle)
The guidata function knows also to retrieve
data, but we won’t use this option since GUIDE
automatically generated code does this for us
Remember: always after you update the handles
call: guidata(hObject, handles);
22
Updating the Current Data at
the Data Selection Callback
% --- Executes on selection change in dataSelection.
function dataSelection_Callback(hObject, eventdata, handles)
% Hints: contents = get(hObject,'String') returns dataSelection
contents as cell array
% contents{get(hObject,'Value')} returns selected item from
dataSelection
Retrieving event data
contents = get(hObject,'String');
data_str = contents{get(hObject,'Value')}; from the called object
switch data_str
case 'peaks'
handles.cur_data = handles.peaks;
case 'membrane'
handles.cur_data = handles.membrane;
otherwise
errordlg('unknown data selected');
end
guidata(hObject, handles);
Remember to use guidata!
23
Use the Axes Handle to Draw the Plot in
Response to a Press on the Surf Button
% --- Executes on button press in surf.
function surf_Callback(hObject, eventdata, …
handles)
surf(handles.axes1,handles.cur_data);
The axes handle
The current data
24
Our GUI is Now Fully Functional!
Run it:
>> gui_example
25
Steps of Computing a GUI
1.
2.
3.
4.
Draw the GUI on a piece of paper
Create the GUI using GUIDE
Create the code of the GUI (callback functions)
DEBUG the GUI by using it in various scenarios
26
Adding a Menu

Add a menu:


Lets Add the menu Help



(GUIDE) Tools ->Menu editor
Inside Help add sub-menu about
Change its tag to about
Update the callback:
function about_Callback(hObject, eventdata,
handles)
msgbox('A GUI Example. Tutorial 12', 'About');
27
Exercise

Add a push button “Contour”



When push the button will draw contour plot
Put both the contour and the surf button
inside a panel
More advance:


Add a button that saves the current GUI as a
jpg.
Make the selection of the data, redraw the
plot using the selected data and the last
selected plot type
28
Resources

GUI tips


http://www.mathworks.com/matlabcentral/
fileexchange/loadFile.do?objectId=5439&re
f=rssfeed&id=mostDownloadedFiles
GUIDE Demo


http://www.mathworks.com/support/2007
a/matlab/7.4/demos/CreatingaGUIwithGUI
DE_viewlet_swf.html
http://blogs.mathworks.com/pick/2007/12/
28/matlab-basics-guis-without-guide/
29
30
Summary

We have made a very long way:



Matlab syntax
Array manipulation, Cells, Structures
Programming:








Functions
Writing efficient code
Files & strings manipulation
Data analysis
GUI
You have all the necessary tools
Enjoy using Matlab
Thanks!
31