Creating Graphical User

Interfaces (GUI’s) with

MATLAB
By Jeffrey A. Webb
OSU Gateway Coalition Member
 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 of sub-functions
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
Thank You!

Jeff Webb