Introduction to Computing
Graphical User Interface
(GUI)
A Graphical User Interface (GUIs) is a pictorial interface to a
program.
A good GUI can make programs easier to use by providing them
with a consistent appearance and with intuitive controls such as
pushbuttons, edit boxes, list boxes, sliders, and menus.
Introduce the basic elements of the Matlab GUIs to provide the
basics required to create functional GUIs for
your programs.
A graphical user interface provides the user with a familiar
environment in which to work. It contains:
Pushbuttons,
Toggle buttons,
Lists,
Menus,
Text boxes,
….
Three principle elements required to create Matlab graphical user
interface:
1. Components
2. Containers
3. Callbacks
COMPONENTS
Each item on a Matlab GUI is a graphical component.
The types of components include:
Graphical controls: pushbuttons, toggle buttons, edit boxes, lists,
sliders, … uicontrol
Static elements: text boxes
Menus uimenu, uicontextmenu
Toolbars uitoolbar
Axes axes
CONTAINERS
The components of GUI must be arranged within a container
(a window on the computer screen).
The most common container is a figure .
A figure: a window on the computer screen, has a title bar along
the top and menus attached, can be created by plotting data or
using function figure hold any combinations of components and
other containers.
CONTAINERS
The other types of containers are:
Panels (uipanel): can contain components or other containers,
not have title bar and menus attached.
Button groups (uibuttongroup): special panels, manage groups of
radio buttons or toggle buttons so that no more than one button
in the group is on at any time.
CALLBACKS
A user clicks a mouse on a button or types information on a
keyboard there must be some way to perform an action.
A response should be done from an event.
The code executed in response to an event is known as
callbacks.
There must be a callback to implement the function of each
graphical component on the GUI.
Figure 10.1
Matlab GUIs are created using a tool called guide , the GUI
Development Environment.
Lay out the GUI
Select and align the GUI components to be placed in it.
Once the components are placed, the programmer can edit their
properties: name, color, size, font, text,…
When guide saves the GUI create a working program,
including skeleton functions that programmer can modify to
implement the behavior of the GUI.
When guide is executed create the Layout Editor.
Align Menu Tab Order Property Object
Objects Editor Editor Inspector Browser
GUI
Components
Design
Area
Drag to
Resize
Design
Area
A guide tool window
The basic steps required to create a MATLAB GUI:
1. Decide what elements are required for GUI and what the
function of each element will be.
2. Use the Matlab tool called guide (GUI Development
Environment) to layout the components on a figure.
3. Use a Matlab tool called 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 or the text
it displays.
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.
The M-file contains the code to load the figure as well as
skeleton callback functions for each GUI element.
5. Write code to implement the behavior associated with each
callback function.
Example:
Create a GUI that contains a single pushbutton ans a single text
string. Each time the pushbutton is clicked, the text string will be
updated to show the total number of clicks since the GUI started.
Step 1:
The GUI contains a single pushbutton and a single text field. The
callback from the pushbutton will cause the number displayed in
the text field to increase by one each time the button is pressed.
Figure
Text Field
Pushbutton
Step 2:
To layout the component on the GUI, run the Matlab function guide
. When guide is executed, it creates the window as in figure below.
Step 2:
In this step, you can:
Set the size the layout area, the pushbutton and the shape of the text
field.
Adjust the alignment of these two elements using the Alignment Tool, if
desired.
Step 3:
Set the properties of the pushbutton:
Click on the button in the layout area
“Property Inspector” from the toolbar.
(or right-click on the button “Property Inspector” from the
popup menu)
Color, size, font, text and alignment (optional).
String property and Tag property must be set in this case.
MyFirstButton
Click Here
(the name of the button, as default)
(the text to be displayed)
The Property Inspector showing the properties of the pushbutton.
String is set to “Click Here’ and the Tag is set to ‘MyFirstButton’
Step 3:
Set the properties of the text filed
String property and Tag property must be set in this case.
Total Clicks: 0
(the text to be displayed) MyFirstText
(the name of the button, as default.
This name will be needed by the callback
function to locate and update the text field)
The Property Inspector showing the properties of the static text.
String is set to “Total Clicks’ and the Tag is set to ‘MyFirstText’
It is possible to set the properties of the figure itself by clicking
on a clear spot in the Layout Editor and using the Property
Inspector to examine and set the figure’s properties.
The figure’s Name property should be set, not required.
The string in the Name property will be displayed in the title bar
of the resulting GUI when it is executed.
MyFirstGUI (in this example)
Step 4:
Save the layout area under the name MyFirstGUI.
Select the “File/Save As” menu item type the name
MyFirstGUI as the file name click “Save”.
Create 2 files: MyFirstGUI.fig and MyFirstGUI.m
Complete the GUI, but not yet do the job.
Start this GUI by typing MyFirstGUI in the Command Window.
Click on the button of this GUI nothing happens.
Typing MyFirstGUI in the Command Window starts the GUI
A portion of the M-file automatically created by guide , containing:
The main function MyFirstGUI.
Sub-functions to specify the behavior of the active GUI
components.
A dummy callback function for every active GUI component that
you defined.
In this example, the only active GUI component was the pushbutton
a callback function called MyFirstButton_Callback is executed
when the user clicks
on the button
Main Function
Figure Opening
Function
Data Output
Function
Button
Callback
Function
If function MyFirstGUI is called without arguments
the function displays the GUI contained in file MyFirstGUI.fig.
If function MyFirstGUI is called with arguments
the function assumes that the first argument is the name of a
sub-function, and it calls that sub-functions using feval , passing
the other arguments on to that
sub-functions.
Each callback function handles events from a single GUI component.
A mouse click/keyboard input for edit fields occurs in GUI
the component’s callback function will be automatically created.
The value in the Tag property of the GUI plus the characters “_Callback”
is the name of the callback function
The callback function for MyFirstButton is named
MyFirstButton_Callback.
Callbacks for each active GUI component don’t do anything.
Step 5:
Write the function code for the pushbutton.
To count the number of clicks
OBJECTS PROPERTIES
Every GUI object includes an extensive list of properties that can
be used to customize the object.
Object properties can be modified using either the Property
Inspector or the get and set function.
During GUI design: use Property Inspector.
Within a program: use get and set.
Static Text Fields Radio Buttons
Edit Boxes Popup Menus
Pushbuttons List Boxes
Toggle Buttons Slider
Checkboxes
STATIC TEXT FIELDS
A graphical object, displays one or more text strings specified in the text
field’s String property.
The String property accepts a string or a cell array of strings.
Use horizontal alignment property to align the display area; by default,
horizontally centered.
is created by a uicontrol, style property is ‘text’.
Text fields do not create a callbacks, but the value can be updated from
another component’s callback function by changing
the text field’s String property.
EDIT BOXES
A graphical object, allows a user to enter one or more text strings.
Created by a uicontrol whose style property is ‘edit’.
min,max property=1the edit box will accept a single line of text.
generate a callback when the user presses the Enter/ESC key after typing a
text.
Number in max > minthe edit box will accept as many lines of text as the
user wishes to enter.
PUSHBUTTONS
A component that a user can click on to trigger a specific action.
Generates a callback when the user clicks on it with the mouse.
Created by a uicontrol whose style property is ‘pushbutton’.
TOGGLE BUTTONS
A type of buttons that has two states:
on (depressed) switch by clicking on the mouse
off (not depressed) generates a callback each time.
‘Value’ property is set to max (1)button is on,
and ‘Value’ property is set to min (0)button is off.
Created by a uicontrol whose style property is ‘toggle button’.
CHECKBOXES AND RADIO BUTTONS
are essentially identical to toggle buttons except that they have different
shapes.
have two states: on and off.
generate a callback each time.
‘Value’ property is set to max (1)button is on,
and ‘Value’ property is set to min (0)button is off.
created by a uicontrol whose style property is ‘checkbox’ or ‘radiobutton’.
POPUP MENUS
are graphical objects that allow a user to select one of mutually exclusive list
of options.
The list of options that the user can select among is specified by a cell array
of strings, and the ‘Value’ property indicates which of the strings is currently
selected.
generate a callback function.
LIST BOXES
are graphical objects that displays many lines of text and allow a user to
select one or more of those lines.
The lines of text that the user can select among are specified by a cell array
of strings, and the ‘Value’ property indicates which of the strings are currently
selected.
created by a uicontrol whose style property is ‘listbox’.
SLIDERS
are graphical objects that allow a user to select values from a continuous
range between a specified minimum value and a specified maximum value by
moving a bar with a mouse.
The ‘Value’ property of the slider is set to a value between min and max
depending on the position of the slider.
created by a uicontrol whose style property is ‘slider’.
EXAMPLE
Write a program that converts temperature from degree Fahrenheit to degrees
Celsius and vice versa over the range 0-100 degree Celsius, using a GUI to
accept data and display results. The program should include an edit box for the
temperature in degrees Fahrenheit, an edit box for the temperature in degree
Celsius, and a slider to allow for the continuous adjustment of temperature. The
user should be able to enter temperatures in either edit box or by moving the
slider, and all GUI elements should adjust to the corresponding values.
to_c.m
to_f.m
PRACTICE
1. Create a GUI to input 3 numbers and then display their sum, average and
product.
2. Create a GUI to input 3 numbers a, b, c and then display the roots of the
equation ax 2 bx c 0
3. Create a GUI to input 3 numbers a, b, c and then display maximum and
minimum.
