Creating Graphical User

Interfaces (GUI’s) with

MATLAB
 Graphical User Interface
• A graphical user interface (GUI) is a user
interface built with graphical objects, such as
buttons, text fields, sliders, and menus
• Applications that provide GUIs are generally
easier to learn and use since the person using
the application does not need to know what
commands are available or how they work
• The action that results from a particular user
action can be made clear by the design of the
interface
 Topics to be Covered
• How to create GUIs with MATLAB
– Laying out the components
– Programming them to do specific things in
response to user actions
– Saving and launching the GUI

• Will not go into detail on MATLAB scripts

• Will not attempt to cover the "art" of good
user interface design
 Getting Started

Select “Show GUI

Layout Tool” from
“File” menu within
MATLAB
 Guide Control Panel

Press “Add Figure”

to get started
The Process of Implementing a
GUI Involves Two Basic Tasks:
• Laying out the GUI components
– MATLAB implements GUIs as figure windows
containing various styles of uicontrol (User
Interface) objects
• Programming the GUI components
– Must program each object to perform the
intended action when activated by the user of
the GUI
 GUIDE (Graphical User
Interface Development
Environment)
• GUIDE is primarily a set of layout tools
• GUIDE also generates an M-file that
contains code to handle the initialization
and launching of the GUI
– This M-file also provides a framework for the
implementation of the callbacks - the
functions that execute when users activate a
component in the GUI.
 Callbacks
• Routine that executes whenever you
activate the uicontrol object
• Define this routine as a string that is a
valid MATLAB expression or the name of
an M-file
• The expression executes in the MATLAB
workspace.
 uicontrol objects
• Push Buttons • Static Text
• Toggle Buttons • Sliders
• Check Boxes • Frames
• Radio Buttons • List Boxes
• Edit Text • Popup Menus
 Push Buttons
• Push buttons generate an action when
pressed (e.g., an OK button may close a
dialog box and apply settings)
• When you click down on a push button, it
appears depressed; when you release the
mouse, the button's appearance returns to
its non-depressed state; and its callback
executes on the button up event
 Toggle Buttons
• Toggle buttons generate an action and
indicate a binary state (e.g., on or off)
• The callback routine needs to query the
toggle button to determine what state it is in
– You can do this with a statement that uses the
current callback object's handle (gcbo)
• get(gcbo,'Value')
• MATLAB sets the Value property to 1 when
depressed and 0 when not depressed
 Check Boxes

• Generate an action when clicked and indicate

their state as checked or not checked
• Useful when providing the user with a number
of independent choices that set a mode
• The Value property indicates the state of the
check box by taking on the value 1 or 0
• Value = 1, box is checked.
• Value = 0, box is not checked.
 Radio Boxes

• Similar to check boxes, but are intended

to be mutually exclusive within a group of
related radio buttons (i.e., only one button
is in a selected state at any given time)
• To make radio buttons mutually exclusive
within a group, the callback for each radio
button must set the Value property to 0 on
all other radio buttons in the group
 Edit Text
• Fields that enable users to enter or modify
text strings
• Use edit text when you want text as input
• The String property contains the text
entered by the user.
 Static Text
• Displays lines of text
• Typically used to label other controls,
provide directions to the user, or indicate
values associated with a slider
• Users cannot change static text
interactively and there is no way to invoke
the callback routine associated with it.
 Sliders
• Accept numeric input within a specific
range by enabling the user to move a
sliding bar
• The location of the bar indicates a numeric
value
• Can set Current Value, Range, and Step
size
Four Properties that Control the
Range and Step Size of the
Slider
– Value - contains the current value of the slider
– Max - defines the maximum slider value.
– Min - defines the minimum slider value.
– SliderStep - specifies the size of a slider step
with respect to the range.
 Sliders - Value Property
• Contains the numeric value of the slider
• Can set this property to specify an initial
condition and query it in the slider's
callback to obtain the value set by the user
– For example, your callback could contain the
statement:
• slider_value = get(handles.slider1,'Value');
 Sliders - Max and Min
Properties
• The Max and Min properties specify the
slider's range (Max - Min)
 Sliders - SliderStep Property
• Controls the amount the slider Value
property changes when you click the
mouse on the arrow button or on the
slider trough
• Specify SliderStep as a two-element
vector
– The default, [0.01 0.10], provides a 1
percent change for clicks on an arrow and a
10 percent change for clicks in the trough
– The actual step size is a function of the
slider step and the slider range
 Frames
• Boxes that enclose regions of a figure
window
• Can make a user interface easier to
understand by visually grouping related
controls
• Have no callback routines associated with
them and only uicontrols can appear within
frames (axes cannot)
 List Boxes
• Display a list of items (defined using the
String property) and enable users to select
one or more items
• By default, the first item in the list is
highlighted when the list box is first
displayed
– If you do not want any item highlighted, then
set the Value property to empty, []
 List Boxes (cont’d) -
Single or Multiple Selections
• The values of the Min and Max properties
determine whether users can make single
or multiple selections:
– If Max - Min > 1, then list boxes allow multiple
item selection
– If Max - Min <= 1, then list boxes do not allow
multiple item selection
List Box Example
 Popup Menus
• Open to display a list of choices (defined using
the String property) when users press the arrow
• When not open, a popup menu displays the
current choice, which is determined by the index
contained in the Value property
– The first item in the list has an index of 1
• You can query the Value property in the callback
routine to determine which choice the user made
• Can be used in place of Radio Buttons
 Implementation of a GUI
• Use GUIDE to lay out the components
interactively
• Generate two files that save and launch
the GUI
 GUIDE - Primarily a Set of
Layout Tools
• Control Panel - add and arrange objects in
the figure window
• Alignment Tool - align objects
• Property Editor - inspect and set property
values
• Object Browser - observe a hierarchical list
of the Handle Graphics objects
• Menu Editor - create window menus and
context menus
 Control Panel
• Enables you to select GUI components
from a palette and arrange them in a figure
window
• The component palette contains the GUI
components (uicontrol objects) that are
available for you to use in your user
interface
Control Panel (cont’d)
 Alignment Tool
• Enables you to position objects with
respect to each other and to adjust the
spacing between selected objects
• The specified alignment operations apply
to all components that are selected when
you press the “Apply” button
 Alignment Tool (cont’d)

Object Browser
(highlighted ones
have been selected)

Alignment Options
 Property Editor
• Enables you to set the properties of the
components in your layout
• Provides a list of all settable properties
and displays the current value
 Property Editor (cont’d)

Object Browser
(highlighted ones have
been selected)

Properties with
corresponding values
 Menu Editor
• Allows menus on figures to be interactively
modified
• The Label, Tag, and Callback properties
can be modified directly on the tool
Menu Editor (cont’d)
 Two Files
• A FIG-file - contains a • An M-file - contains
complete description the functions that
of the GUI figure and launch and control the
all of its children GUI and the callbacks,
(uicontrols and axes), which are defined as
as well as the values sub-functions
of all object properties
 FIG-files
• Binary files created as a result of saving a
figure
• Contains a serialized figure object
– A complete description of the figure object
and all of its children
• All of the objects property values are set to
the values they were saved with when the
figure is recreated
 M-files

• MATLAB generates the application M-file

to provide a framework for the program
that controls the GUI
• All code, including the callbacks, is
contained in the application M-file
– Each callback is implemented as a sub-
function in the M-file
 Example - Launching a Dialog
to Confirm an Operation
• Illustrates how to display a dialog when
users attempt to close a GUI
• The purpose of the dialog is to force the
user to confirm that they really want to
proceed with the close operation
 Objective of Dialog Box

• Want it to be launched by the application's

“Close” button
• Ask the user to confirm the close operation (i.e.,
respond yes or no)
• Block MATLAB execution until the user responds
• Handle the case where the user closes the
dialog from the window manager close box
without responding
 Launching Dialog
• The “Close” button's callback needs to
launch a dialog that asks for confirmation
of the impending close operation
• This callback must then wait for a dialog to
return a value
– To accomplish this, the dialog's application
M-file assigns an output argument and the
“Close” button's callback waits for it to be
returned
Illustration of a Dialog Box
over a GUI Figure
 Summary
• MATLAB GUI is a very powerful tool when
used correctly
• It takes a lot of experimenting with and a
good background in programming.
• Must have a good understanding of
MATLAB and be able to use the MATLAB
language and commands to create
routines