NOTE: This chapter is an on-line supplement not a part of the printed book.
All Chapters Reverse
15. GUIDE-Based Graphical User Interfaces
The solutions presented here are the ones from the Fifth Edition; this chapter is unchanged from the
old text, but is preserved for users who may need to work with guide.
15.1 The basic steps required to create a MATLAB GUI are:
1. Decide what elements are required for the GUI, and what the function of each element will be. Make
a rough layout of the components by hand on a piece of paper.
2. Use the MATLAB tool called guide (GUI Development Environment) to lay out the components on
a figure. The size of the figure, and the alignment and spacing of components on the figure, can be adjusted
using the tools built into guide.
3. Use a MATLAB tool called the Property Inspector (built into guide) to give each component a name
(a “tag”), and to set the characteristics of each component, such as its color, the text it displays, etc.
4. Save the figure to a file. When the figure is saved, two files will be created on disk with the same
name but different extents. The fig file contains the GUI layout and the components of the GUI, while the
M-file contains the code to load the figure, and also skeleton callback functions for each GUI element.
5. Write code to implement the behavior associated with each callback function.
15.2 The components that can be used in GUIs are shown in the following table, and the functions that create
each one are shown in the table. In the case of uicontrols, the type of component is selected using the
Style property.
GUI Components
Component Created By Description
Graphical Controls
Pushbutton uicontrol A graphical component that implements a pushbutton.
It triggers a callback when clicked with a mouse.
Toggle Button uicontrol A graphical component that implements a toggle button.
A toggle button is either “on” or “off”, and it changes
state each time that it is clicked. Each mouse button
click also triggers a callback.
Radio Button uicontrol A radio button is a type of toggle button that appears as
a small circle with a dot in the middle when it is “on”.
Groups of radio buttons are used to implement mutually
exclusive choices. Each mouse click on a radio button
triggers a callback.
Check Box uicontrol A checkbox is a type of toggle button that appears as a
small square with a check mark in it when it is “on”.
Each mouse click on a check box triggers a callback.
Edit Box uicontrol An edit box displays a text string, and allows the user to
modify the information displayed. A callback is
triggered when the user presses the Enter key, or
when the user clicks on a different object with the
502
, mouse.
List Box uicontrol A list box is a graphical control that displays a series of
text strings. A user may select one of the text strings by
single- or double-clicking on them. A callback is
triggered when the user selects a string.
Popup Menus uicontrol A popup menu is a graphical control that displays a
series of text strings in response to a mouse click. When
the popup menu is not clicked on, only the currently-
selected string is visible.
Slider uicontrol A slider is a graphical control to adjust a value in a
smooth, continuous fashion by dragging the control with
a mouse. Each slider change triggers a callback.
Table uitable Creates a table of data.
Static Elements
Text Field uicontrol Creates a label, which is a text string located at a point
on the figure. Text fields never trigger callbacks.
Menus, Toolbars, Axes
Menu Items uimenu Creates a menu item. Menu items trigger a callback
when a mouse button is released over them.
Context Menus uicontextmenu Creates a context menu, which is a menu that appears
over a graphical object when a user right-clicks the
mouse on that object.
Toolbar uitoolbar Creates a toolbar, which is a bar across the top of the
figure containing quick-access buttons.
Toolbar Pushbutton uipushtool Creates a pushbutton to go in a toolbar.
Toolbar Toggle uitoggletool Creates a toggle button to go in a toolbar.
Button
Axes axes Creates a new set of axes to display data on. Axes never
trigger callbacks.
Toolbar uitoolbar Creates a toolbar, which is a bar across the top of the
figure containing quick-access buttons.
Toolbar Pushbutton uipushtool Creates a pushbutton to go in a toolbar.
Toolbar Toggle uitoggletool Creates a toggle button to go in a toolbar.
Button
Axes axes Creates a new set of axes to display data on. Axes never
trigger callbacks.
15.3 The types of containers that can be used in GUIs are shown in the following table, and the functions that
create each one are shown in the table.
503
, GUI Containers
Component Created By Description
Containers
Figure figure Creates a figure, which is container that can hold
components and other containers. Figures are separate
windows that have title bars, and can have menus.
Panel uipanel Creates a panel, which is container that can hold
components and other containers. Unlike figures,
panels do not have title bars or menus. Panels can be
placed inside figures or other panels.
Button Group uibuttongroup Creates a button group, which is a special kind of panel.
Button groups automatically manage groups of radio
buttons or toggle buttons to ensure that only one item of
the group is on at any given time.
15.4 A callback function is a function that is automatically called by MATLAB in response to the user clicking
on to typing in a GUI element. The name of the function to be called (plus any calling parameters) is
placed in the Callback property of the GUI element (uicontrol, uimenu, or uicontextmenu).
The callback actually occurs in a local function (subfunction) of the M-file that created the GUI in the first
place, and the first argument of the callback contains the name of a specific local function to call to
implement the callback behavior.
A callback function can usually locate the objects that it needs to manipulate using the handles data
structure that is automatically passed to the callback function when it is executed. The handles structure
contains handles for the GUI figure and for every object within the figure.
15.5 To create this GUI, we will first run guide. When guide starts, it will display a palette on which the
GUI can be laid out, and which we can re-size by hand to meet our desires. Once the figure has been re-
sized, start the Menu Editor from guide, and add a new standard menu. Under the standard menu, add
several other menu objects, one for each color that we would like to be able to select. Each menu object
must be given a label to display ('Red', 'Green', etc.), and the Tag property of each menu object must
be set to 'Red', 'Green', etc., so that each callback function has a unique name. Next, we must start
the Property Inspector to set the name of the GUI to “GUI Background Color Demo”, and to associate the
context menu with the figure itself.
In addition, the figure object itself is edited using the Property Editor to assign a title to the figure window
and to suppress the figure number.
504
, Once the ColorGUI.m file is created using guide, it must be edited manually to add the functionality to
each callback. The following code shows function ColorGUI.m after it has been manually edited. Note
that all manual additions are shown in bold face. Note that the initial background color must be set in
the ColorGUI_OpeningFcn, since MATLAB set the figure color to the system default color
automatically, and the programmer must override that setting after the figure is created.
505
All Chapters Reverse
15. GUIDE-Based Graphical User Interfaces
The solutions presented here are the ones from the Fifth Edition; this chapter is unchanged from the
old text, but is preserved for users who may need to work with guide.
15.1 The basic steps required to create a MATLAB GUI are:
1. Decide what elements are required for the GUI, and what the function of each element will be. Make
a rough layout of the components by hand on a piece of paper.
2. Use the MATLAB tool called guide (GUI Development Environment) to lay out the components on
a figure. The size of the figure, and the alignment and spacing of components on the figure, can be adjusted
using the tools built into guide.
3. Use a MATLAB tool called the Property Inspector (built into guide) to give each component a name
(a “tag”), and to set the characteristics of each component, such as its color, the text it displays, etc.
4. Save the figure to a file. When the figure is saved, two files will be created on disk with the same
name but different extents. The fig file contains the GUI layout and the components of the GUI, while the
M-file contains the code to load the figure, and also skeleton callback functions for each GUI element.
5. Write code to implement the behavior associated with each callback function.
15.2 The components that can be used in GUIs are shown in the following table, and the functions that create
each one are shown in the table. In the case of uicontrols, the type of component is selected using the
Style property.
GUI Components
Component Created By Description
Graphical Controls
Pushbutton uicontrol A graphical component that implements a pushbutton.
It triggers a callback when clicked with a mouse.
Toggle Button uicontrol A graphical component that implements a toggle button.
A toggle button is either “on” or “off”, and it changes
state each time that it is clicked. Each mouse button
click also triggers a callback.
Radio Button uicontrol A radio button is a type of toggle button that appears as
a small circle with a dot in the middle when it is “on”.
Groups of radio buttons are used to implement mutually
exclusive choices. Each mouse click on a radio button
triggers a callback.
Check Box uicontrol A checkbox is a type of toggle button that appears as a
small square with a check mark in it when it is “on”.
Each mouse click on a check box triggers a callback.
Edit Box uicontrol An edit box displays a text string, and allows the user to
modify the information displayed. A callback is
triggered when the user presses the Enter key, or
when the user clicks on a different object with the
502
, mouse.
List Box uicontrol A list box is a graphical control that displays a series of
text strings. A user may select one of the text strings by
single- or double-clicking on them. A callback is
triggered when the user selects a string.
Popup Menus uicontrol A popup menu is a graphical control that displays a
series of text strings in response to a mouse click. When
the popup menu is not clicked on, only the currently-
selected string is visible.
Slider uicontrol A slider is a graphical control to adjust a value in a
smooth, continuous fashion by dragging the control with
a mouse. Each slider change triggers a callback.
Table uitable Creates a table of data.
Static Elements
Text Field uicontrol Creates a label, which is a text string located at a point
on the figure. Text fields never trigger callbacks.
Menus, Toolbars, Axes
Menu Items uimenu Creates a menu item. Menu items trigger a callback
when a mouse button is released over them.
Context Menus uicontextmenu Creates a context menu, which is a menu that appears
over a graphical object when a user right-clicks the
mouse on that object.
Toolbar uitoolbar Creates a toolbar, which is a bar across the top of the
figure containing quick-access buttons.
Toolbar Pushbutton uipushtool Creates a pushbutton to go in a toolbar.
Toolbar Toggle uitoggletool Creates a toggle button to go in a toolbar.
Button
Axes axes Creates a new set of axes to display data on. Axes never
trigger callbacks.
Toolbar uitoolbar Creates a toolbar, which is a bar across the top of the
figure containing quick-access buttons.
Toolbar Pushbutton uipushtool Creates a pushbutton to go in a toolbar.
Toolbar Toggle uitoggletool Creates a toggle button to go in a toolbar.
Button
Axes axes Creates a new set of axes to display data on. Axes never
trigger callbacks.
15.3 The types of containers that can be used in GUIs are shown in the following table, and the functions that
create each one are shown in the table.
503
, GUI Containers
Component Created By Description
Containers
Figure figure Creates a figure, which is container that can hold
components and other containers. Figures are separate
windows that have title bars, and can have menus.
Panel uipanel Creates a panel, which is container that can hold
components and other containers. Unlike figures,
panels do not have title bars or menus. Panels can be
placed inside figures or other panels.
Button Group uibuttongroup Creates a button group, which is a special kind of panel.
Button groups automatically manage groups of radio
buttons or toggle buttons to ensure that only one item of
the group is on at any given time.
15.4 A callback function is a function that is automatically called by MATLAB in response to the user clicking
on to typing in a GUI element. The name of the function to be called (plus any calling parameters) is
placed in the Callback property of the GUI element (uicontrol, uimenu, or uicontextmenu).
The callback actually occurs in a local function (subfunction) of the M-file that created the GUI in the first
place, and the first argument of the callback contains the name of a specific local function to call to
implement the callback behavior.
A callback function can usually locate the objects that it needs to manipulate using the handles data
structure that is automatically passed to the callback function when it is executed. The handles structure
contains handles for the GUI figure and for every object within the figure.
15.5 To create this GUI, we will first run guide. When guide starts, it will display a palette on which the
GUI can be laid out, and which we can re-size by hand to meet our desires. Once the figure has been re-
sized, start the Menu Editor from guide, and add a new standard menu. Under the standard menu, add
several other menu objects, one for each color that we would like to be able to select. Each menu object
must be given a label to display ('Red', 'Green', etc.), and the Tag property of each menu object must
be set to 'Red', 'Green', etc., so that each callback function has a unique name. Next, we must start
the Property Inspector to set the name of the GUI to “GUI Background Color Demo”, and to associate the
context menu with the figure itself.
In addition, the figure object itself is edited using the Property Editor to assign a title to the figure window
and to suppress the figure number.
504
, Once the ColorGUI.m file is created using guide, it must be edited manually to add the functionality to
each callback. The following code shows function ColorGUI.m after it has been manually edited. Note
that all manual additions are shown in bold face. Note that the initial background color must be set in
the ColorGUI_OpeningFcn, since MATLAB set the figure color to the system default color
automatically, and the programmer must override that setting after the figure is created.
505
