MATLAB

Lecture-5
Introduction to Graphic User
Interface (GUI)

Graphical User Interface

A Graphical User Interface (GUI) 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

Steps to create a GUI

1. Launch guide from the command window.
2. A figure window opens before you for the
components to be placed on it.
3. After placing all the relevant components
save the file. The saving of this file creates
two different files of the same name one
with .fig and second with .m extension.
4. Make the relevant changes in the M file and
run it. This launches the GUI you have just
created.

Launch GUI by typing following in the command

window:
>> guide

Backend & Frontend

Front end refers to what is visible to the user or the
customer. It is essentially the execution of the .exe files
that generate the environment in which the user wants to
work. E.g.- Figure window in guide, the web pages we
access daily, etc..
Backend refers to the source code that is generating
the user application and through which we can control
the outlook of the User application. E.g.- mfile in guide,
The server of the web page running the application
source code.

Events
GUI based programs
are prepared for
mouse clicks (or
possibly keyboard
inputs) for any GUI
element at any time.
Such inputs are
known as events
and a program that
responds to events
is said to be event
driven.

GUI Composition:
The three principal elements required to create a
MATLAB GUI are:Components Containers Callbacks

Components
Each item on a MATLAB GUI (e.g.,
pushbuttons, labels, edit boxes) is a
graphical component.
The types of components include
graphical controls (pushbuttons,
toggle buttons, edit boxes, lists,
sliders, etc..), static elements
(text boxes), menus, toolbars &
axes.

Containers
The components of a GUI
must be arranged within a
container, which is a
window on the computer
screen.
The most common
container is the figure. It
has a title bar along the top
and can optionally have
menus attached.
Other Ex- Button Groups
and Panels.

Callbacks
There must be some way to perform
an action if a user clicks a mouse
on a button or types information
on a keyboard.
A mouse click or a key press is an
event and the MATLAB program
must respond to each event if the
program is to perform its function.
The code executed in response to an
event is known as a callback.

A simple exercise on GUI

Launch guide:
drag and drop static text box and push button
Change tag and string of these components by
double clicking over component and from
property inspector changing its tag and string.
save the file with the name demo1
now open the MATALB file and run it.
b
u
Do

lic
c
e

Keynotes on the M file generated

The main function uses varargin to represent its input
arguments and varargout to represent its output result.
The main function creates a structure in it. The structure
contains some control information plus function handles
for some of the subfunctions in the file.
The value gui_singleton specifies whether there can be
one (if its value is 1) and multiple copies (if its value is 0).
Other functions are generally either callbacks to the
components or called for GUI creation.

Obtaining Callback & its Structure

Standard form:
function
ComponentTag_Callback(hObject,
eventdata, handles)

Where ComponentTag is the name of

the component generating the
callback.

Arguments are as follows:hObject- The handle of the parent

figure.
eventdata- A currently unused
array.
handles- The handle structure
contains the handles of all GUI
components on the figure.

It will
look like

Practice Exercise 1:

Figure should
look like
Write code in
callback of edit
box

More about callbacks

Note that each callback function has full
access to the handles structure, therefore
each call back can modify any GUI
component in the figure.
We are taking advantage of this structure in
the callback function for the pushbutton,
where the callback function for the
pushbutton modified the text displayed in the
text field.
set(handles.text2,'String',str)

Event Handling flow in

previous example:
Original Event: mouse
click on button
Total Clicks

Button

Push Button

Calls G
ui
pushb _Demo1 wit
h
u tton 1
_Callb argument
ack

Gui_Demo1

Gui_Demo1_Callback

Function updates string

in one (Text Box name)

Gui_Demo1 calls subfunction

pushbutton1_Callback

Total Clicks:1
Push Button

GUI components in Detail

Static Text Field

Edit Boxes
Push Buttons
Toggle Buttons
Check Box & Radio Button
Popup Menu
List Box
Sliders

Static Text Field

It is a graphical object that displays one or
more text strings, which are specified in the
text fields STRING property.
The STRING property accepts a string or a
cell array of strings. If the input value is a
string, it will be displayed on a single line else
the first array of cell element is displayed on
first line, second array on second line, etc
It never triggers a callback function & is
created by the uicontrol.

Edit Boxes
It is a graphical object that allows a user to enter
one or more text strings. It is created by the
uicontrol.
If the min property and max property are both
set to 1, then the edit box will accept a single line
of text, and it will generate a callback when the
user presses the Enter key after typing the text.
If the max property is set to a number greater
than the min property, the edit box will accept as
many lines of text as the user wishes to and puts
a vertical scrollbar

Assignment-1
Create a simple Echo of an Edit Box on
the Static Text Box.

Write code in
callback of edit box
It should look like

Push Buttons
It is a component that a user can click on
to trigger a specific action. Push Buttons
retain their original click position after
clicked by the mouse.
It generates a callback when the user
clicks on it with the mouse.
Pushbutton is created by the uicontrol.

Toggle Buttons
It is a type of button that has two states:
on (depressed) & off (not depressed).
A toggle button switches between these
two states whenever the mouse clicks on
it and it generates a callback each time.
The Value property of the toggle button
is set to max (usually 1) when the button
is on and min (usually 0) when the button
is off.

Assignment-2

Demonstrate the use of a Toggle button by

reflecting its state (ON/OFF) to a static text box.
function togglebutton1_Callback(hObject, eventdata,
handles)
state=get(handles.togglebutton1,'Value');
if state==0
set(handles.TextBox,'String','Off');
else
set(handles.TextBox,'String','On');
end

Write code in
callback of edit box
It should look like

Check Box & Radio Button

These are essentially identical to toggle buttons except
that they have different shapes. Like toggle buttons,
they have two states: ON and OFF.
They switch between these two states whenever the
mouse clicks on them, generating a callback each time.
The Value property of the checkbox or radio button
is set to max (usually 1) when they are on and min
(usually 0) when they are off.
Checkboxes are traditionally used to display on/off
options and groups of radio buttons are
traditionally used to select among mutually
exclusive options.

Assignment-3
1.
2.

Design a GUI such that on click on a checkbox a message

is displayed of its state of selection.
Design a GUI which displays the radio button selected out
of a group of 3 radio buttons.

Write code in callback

of Check box

function CheckBox_Callback(hObject, eventdata,

handles)
state=get(handles.CheckBox,'Value');
if state==0
set(handles.TextBox,'String','Off');
else
set(handles.TextBox,'String','On');
end

Figure should look like

2.

Design a GUI which displays the radio button selected out

of a group of 3 radio buttons.

function Option1_Callback(hObject, eventdata,

handles)
set(handles.TextBox,'String','Option 1');
set(handles.Option1,'Value',1);
set(handles.Option2,'Value',0);
set(handles.Option3,'Value',0);
function Option2_Callback(hObject, eventdata,
handles)
set(handles.TextBox,'String','Option 2');
set(handles.Option1,'Value',0);
set(handles.Option2,'Value',1);
set(handles.Option3,'Value',0);
function Option3_Callback(hObject, eventdata,
handles)
set(handles.TextBox,'String','Option 3');
set(handles.Option1,'Value',0);
set(handles.Option2,'Value',0);
set(handles.Option3,'Value',1);

Figure should look like

Write code in
callback of
radio buttons

Popup Menu
These are graphical objects that allow a user
to select one of a 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.
In guide to add more options in Popup Menu,
go to String option and press the icon to add
more elements to it.

Assignment-4
Demonstrate the use of Popup Menu by
displaying which option of popup menu is
selected on the screen.
function Popup1_Callback(hObject, eventdata,
handles)
value=get(handles.Popup1,'Value');
str = ['Option' num2str(value)];
set(handles.TextBox,'String',str);

Write code in callback

of Popup1 menu

Figure should look like

List Box
These are graphical objects that displays many
lines of text and allow a user to select one or
more of those lines.
List boxes can be used to select a single item
from a selection of possible choices. In
normal GUI usage , a single mouse click on a
list item selects that item but does not cause
an action to occur.
Instead the action waits on some external trigger
like pushbutton. However, a double mouse
click causes an action to happen
immediately.

List Box (Cont.)

Single click and double click events can be
distinguished using the SelectionType
property of the figure in which the clicks occurred.
A single mouse click will place the string
normal in the SelectionType property and a
double mouse click will place the string open
in the SelectionType property.
It is also possible to have multiple selections from
the list when the difference between max and min
property is greater than one.

Example of Invoking List Box Selection

function ListBox_Callback(hObject, eventdata,
handles)
selectiontype=get(gcbf,'SelectionType');
if selectiontype(1)=='o'
value=get(handles.ListBox,'Value');
str=['Option' num2str(value)];
set(handles.TextBox,'String',str);
end
function PushButton_Callback(hObject, eventdata,
handles)
value=get(handles.ListBox,'Value');
str=['Option' num2str(value)];
set(handles.TextBox,'String',str);

Write code in callback

of List box
Figure should look like

Explanation of gcbf
fig = gcbf returns the handle of the figure
that contains the object whose callback is
currently executing.
This object can be the figure itself, in
which case, gcbf returns the figure's
handle.
When no callback is executing,
gcbf returns the empty matrix, [].

Explanation of Invocation
If a selection is made in the list box, function
ListBox1_Callback will be executed. This function
will check the figure producing the callback (using
function gcbf) to see whether the selection made
was single or double click.
For a single click it does nothing. For a double click,
the function gets the selected value from the list box
and writes an appropriate string into the text field.
If the pushbutton is selected, the callback function is
accordingly executed. The function gets the selected
value from the listbox and writes an appropriate
string into the text field.

Sliders
These 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 Min and Max fields need to be set for
slider to show the min. & Max. values.

Assignment-5

Demonstrate the use of Sliders by displaying the value

of the slider at any given time on a GUI.
function slider2_Callback(hObject, eventdata, handles)
value=get(handles.slider2,'Value');
str = sprintf('%.2f',value);
set(handles.TextBox,'String',str);

Write code in callback

of Slider2

Figure should look like

Creating your own menus

A menu allows a user to select an action without
additional components appearing on the GUI
display. There are two types of menus as
discussed under.
Standard Menu- These are pulled down from
the menu bar at the top of a figure.
Context Menu- These are pop up over the
figure when a user right clicks the mouse over a
graphical object.
MATLAB provides a user friendly Menu Editor on
the Figure window to create user choice menus.

Modifying the Previous GUI

In order to make the GUI perform certain
intelligent operations, the M file generated
needs to be modified accordingly,
generally the callback function.
Every component has an associated
callback, which can suitably be used in
case of more than one active components
are present.