1. 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 (
Download:
t12.zip
Eilon Sharon, Weizmann 2008 ©

2. Content GUI definition Predefined dialog boxes. GUI terms
Using GUIDE to create a GUI

3. 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

4. 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.

5. Matlab Can Use Operating System Predefined Dialog Boxes For Various Tasks
Filter - can contain *
Example:
[fname, dirpath] = uigetfile('*.m',
'Select a M-file')
Title

6. Useful Dialog Boxes - Examples
% Input Boxes:
[fname, dirpath] =
uigetfile('*.m‘,'Select a M-file')
[fname, dirpath] = uiputfile('*.mat')
c = uisetcolor([ ],'My Select Color')
fc = uisetfont('My Set Font')
% 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'})
Try some of these examples

7. Eilon Sharon, Weizmann 2008 ©
Creating a GUI
40 GUI examples:
Eilon Sharon, Weizmann 2008 ©

8. You Can Either Create a GUI Programmatically or Use GUIDE
Video Example:
Use GUIDE to create a GUI
Graphical User Interface
Development Environment
Use the
GUIDE!

9. The GUI (figure) Contains Components
The GUI contains components.
Types of components:
Buttons:
Push button
Toggle button
Radio Button
Check box
Lists:
Pop up menu
List box
Button Group
Panel
Slider
Axes

10. GUI Work in Event Driven Programming
Component
Each component of the GUI is associated with one or more callback functions
The GUI programmer writes the callback functions:
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
% --- Executes on button press in pushbutton1.
function pushbutton1_Callback(hObject, eventdata, handles)
Callback function

11. Creating a GUI using GUIDE
Activate GUIDE,
two options:
>> guide
Press the icon:
Choose the Blank GUI option
Add components using Drag-and-Drop

12. First Example – A GUI with Exit button
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

13. The Tag Property Is Used as an Identifier of the Component
Set the String property to “Exit”
Set the Tag property to “exitButton”
The Tag property:
Sets the name of the automatically generated callback functions
Sets the name of the component handle

14. 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 GUI (figure)
is the parent of the push button (uicontrol)
The push button is a component of type “uicontrol”
Tag

15. 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”

16. 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
(see GUIDATA)

17. 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

18. The input arguments of the Callback functions are:
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!

19. To Learn About the Callback Functions Input Lets Add Components to Our GUI
Add an axes component
Make sure the tag is “axes1”
Add a push button
Set String to “Surf”
Set tag to “surf”
Add a pop up menu
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

20. 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

21. 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;
% Update handles structure
guidata(hObject, handles);
The new code
guidata – Finds the parent GUI of the hObject (component). Sets handles as a field of the GUI structure (stores handles in the GUI)

22. The guidata Function – Stores or Retrieves GUI Data
guidata(object_handle,data)
data = guidata(object_handle)
hObject
handles
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);

23. 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
contents = get(hObject,'String');
data_str = contents{get(hObject,'Value')};
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);
Retrieving event data from the called object
Remember to use guidata!

24. 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

25. Our GUI is Now Fully Functional!
Run it: >> gui_example

26. Steps of Computing a GUI
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

27. Adding a Menu Add a menu: Lets Add the menu Help Update the callback:
(GUIDE) Tools ->Menu editor
Lets Add the menu Help
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');

28. Exercise Add a push button “Contour” More advance:
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

29. Resources GUI tips GUIDE Demo
GUIDE Demo

31. Summary We have made a very long way: You have all the necessary tools
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!