CS 211 Lesson 29
Graphical User Interfaces (GUI's) and guide
Quote:
Opportunity is missed by most because is it dressed in overalls and looks like work. Thomas Edison
Lesson Objectives:
Understand the purpose of a MATLAB graphical user interface (GUI)
Know the range of components which can make up a GUI
Understand the concept of event-driven programming
Understand the concept of a container object
Understand the concept of a callback function
Be able to use guide to develop a simple GUI
Lesson:
I. MATLAB Concepts
A. GUIs and event-driven programming
A Graphical User Interface (GUI) allows the user of a program to give commands by clicking on icons (i.e., small pictures) on the screen.
GUIs can make it much easier for users to interact with a program.
GUIs require a style of programming called event-driven programming.
An event is a mouse click or key press carried out by the user to trigger some behavior.
In event-driven programming, the programmer writes functions to carry out a desired behavior if and when a particular event occurs.
Since a user can generate events in many different sequences, functions that process events are often more complicated to implement.
B. Elements of a MATLAB GUI
The three principle elements required to create a MATLAB GUI are:
components - graphical elements with which the user can interact, including:
push buttons
toggle buttons
radio buttons
check boxes
edit boxes
list boxes
popup menus
sliders
static text (display only)
axes
menus
toolbars
containers - graphical elements which can contain components, including:
figures - the primary object in which components are placed and displayed.
panels - typically used to organized related components within a figure.
button groups - typically used to group mutually exclusive radio buttons.
callback functions - functions triggered by events that carry out user-requested behavior
Each component of a GUI has one (or more) associated callback functions.
When an event occurs, the operating system recognizes the event, passes the event to MATLAB, and MATLAB invokes the callback function that is registered to process that event.
C. Components and triggering callbacks
Each component defines the types of events which cause its callback function to be executed. For example:
Component Type Its callback is triggered static text
(has no callbacks)
edit box
on an ESC key or clicks outside of edit box (inside of its parent figure)
push button
when the button is clicked on (with the mouse)
toggle button
when the button is clicked on (has two states - on/off)
check boxes and radio buttons
when it is clicked on (checked/unchecked or selected/deselected)
popup menus
when a menu item is selected
list boxes
when a selection is made
sliders
after the slider is dragged and then released
D. GUI Objects
In addition to figure and axes object, GUIs may involve the following objects:
Name Description uicontrol
one of the many kinds of components list above
uipanel
a container for other components
uibuttongroup
a group of mutually exclusive radio or toggle buttons
uimenu
a menu (typically located below the figure's title bar)
uicontextmenu
a context menu associated with a graphical object (triggered by right click)
uitoolbar
a tool bar on a figure (a series of icons, typically located below a menu)
uipushtool
a pushbutton on a tool bar
uitoggletool
a toggle-button on a tool bar
The above GUI objects are children of a figure object (except for the last 2 which are children of uitoolbar).
Like the objects we've seen before, each of these graphic objects have many properties.
You can use the Property Inspector within guide to view and alter properties of these objects. Or, your program can get() and set() the values of the properties of these objects.
E. Using MATLAB's guide tool
To help ease the inherent complexity in developing a GUI, MATLAB provides a tool called guide.
guide (GUI Development Environment) helps you create the code required for a GUI program.
For a good (10 minute video) introduction to guide, run MATLAB's Creating Graphical User Interfaces demo.
guide does the following:
Provides a drag and drop GUI layout capability.
Creates a figure file (*.fig) that contains the screen image of the GUI you build.
Creates (and hides from the programmer) much of the code required to run a GUI.
Creates shells for callback functions which the programmer must complete to implement the GUI
warning - guide does not place end statements at the end of each function
The steps required for creating a GUI using guide are:
- Using a pencil and scratch paper, design your GUI based on the program's I/O needs.
- Then, use guide to layout the elements of your GUI within a figure. (If your program needs multiple figures, each figure is built separately).
Set the properties of the components in your GUI. As a minimum,
set the component's tag field to a descriptive name. This name is used as the callback function name. The tag name must be a valid MATLAB identifier (start with a letter and contain only letters, digits, and the underscore).
set the component's Position field to normalized.
Create GUI figure and code files by selecting the Run command in guide.
Add code to implement callback functions in the m-file created by guide.
Add appropriate comments to your guide-generated GUI m-file.
Thoroughly test your GUI program.
II. Good Programming Practices
Always set the tag
property of GUI objects to a descriptive and appropriate name. This name
will be used as the callback function name, so it must conform to the rules
for creating variable names (start with a letter, use only letters, digits,
and underscore with no spaces).
Always set the Position
property of GUI objects to 'normalized'
so that their location and size will be screen independent.
Always design your GUI layout on paper before you use the
guide tool to create it.
If you make changes to a GUI (i.e., you change the *.fig file created by guide), manually delete callback functions that are no longer needed in your *.m file.
III. Algorithms
(none for this lesson)
Lab Work: Lab 29
References: Chapman Textbook: section 10.1-10.2