MODULE NO.

______

TITLE:

_____________________________________________________________________________
_

______________________ __ ____________________
DATE PERFORMED DATE SUBMITTED

GROUP NO. _________

MEMBERS:
1. _____________________ TERMINAL NO._______SIGNATURE _________________

2. _____________________ TERMINAL NO._______SIGNATURE _________________

3. _____________________ TERMINAL NO._______SIGNATURE _________________

4. _____________________ TERMINAL NO._______SIGNATURE _________________

5. _____________________ TERMINAL NO._______SIGNATURE _________________

______________________________ GRADE
INSTRUCTOR NAME AND SIGNATURE
ESIGPLA – Signals, Spectra and Signal Processing

Experiment Title

Module 7 – GRAPHICAL USER INTERFACE (GUI)

Objectives:

By the end of the session the students should be able to:

• Create a simple single figure dialog to control an application.

• Add menus, figures, text buttons and edit boxes to a dialog.

• Associate Matlab code to events by the dialog controls.

• Retrieve and modify the properties of the dialog controls using property inspector.

• Set-up a single control file for a dialog.

• Create a tool bar for the simple GUI

Introduction:
GUI environment with specific callbacks for each menu in the menu bar.
Is a graphical display that contains devices, or components, that enable a user to perform
interactive tasks. To perform these tasks, the user of the GUI does not have to create a
script or type commands at the command line. Often, the user does not have to know the
details of the task at hand.
Components can be menus, toolbars, push buttons, radio buttons, list boxes, sliders, …

GUI Technique
Dialog box MATLAB provides a selection of standard dialog boxes that you
can create with a single function call.
GUI containing just It is often simpler to create GUIs that contain only a few
a few components components programmatically. Each component can be fully
defined with a single function call.
Moderately complex GUIDE simplifies the creation of such GUIs.
Complex GUIs with many Creating such GUIs programmatically lets you control exact
components, and GUIs placement of the components and provides reproducibility
that require Interaction .
with other GUIs
To access GUI Builder
Go to toolbar, click on “File”
Click on “New”
Click on “GUI”
Click on “Blank GUI Default”

GUI Builder Template

To Resize the design window.

The Gray area is the actual size of the GUI. To resize, see the black marker on the right most
bottom, simply click and drag to the size that you need.
GUI Components
To display the names of the GUI components in the component palette. Select Preferences
from the MATLAB File menu. Then select GUIDE Show names in component palette,
and click OK.

Enumerate the types of buttons found in GUI and their description of fucntion

• Push Button - assigns the specified property values, and assigns default values to the
remaining properties. It is also generates an action when pressed.
• Sliders - accept numeric input within a specific range, and enable to move a sliding
bar.
• Radio buttons - are similar to check boxes, but are intended to be mutually exclusive
within a group of related radio buttons.
• Check box - generate an action when selected, useful when providing the user with a
number of independent choices.
• Edit text - text fields enable users to enter or modify text values. It is where we put a
title for the program
• List box – it displays list of items.
• Pop – up Menu – it displays list of choices, useful when you want to provide users
with a number of mutually exclusive choices, but do not want to take up the amount
of space that a series of radio buttons requires.
• Toggle buttons - are controls that execute callbacks when clicked on and indicate
their state, either on or off.
• Axes – it displays the graph.
 • Button Group - create container object to exclusively manage radio buttons and
toggle buttons.

Placing the components in the GUI template

Using the pallette on the left, simply click drag and drop inside the template. Click on the
button you place to resize and position it on the canvas,(ie buttons, static text windows…)
Aligning the Components
You can use the Alignment Tool to align components with respect to one another, if they
have the same parent. To align the buttons:
1 Select push buttons by pressing Ctrl and clicking them.
2 Select Align Objects from the Tools menu to display the Alignment Tool.
3 Make the settings in the Alignment Tool,

Labeling the Push Buttons

Select Property Inspector from the View menu.

In the layout area, select the top push button by clicking it.

In the Property Inspector, select the String property and then replace the existing value with
any word.
Entering Pop-Up Menu Items
The pop-up menu provides a choice of three data sets: peaks, membrane, and sinc. These
data sets correspond to MATLAB functions of the same name. This topic shows you how to
list those data sets as choices in the pop-menu.
1 In the layout area, select the pop-up menu by clicking it.
2 In the Property Inspector, click the button next to String. The String dialog box displays.

Saving the GUI Layout

When you save a GUI, GUIDE creates two files, a FIG-file and an M-file. The FIG-file, with
extension .fig, is a binary file that contains a description of the layout. The M-file, with
extension .m, contains the code that controls the GUI.
1 Save and activate your GUI by selecting Run from the Tools menu.
2 GUIDE displays the following dialog box. Click Yes to continue.

Programming the GUI

1. Click on the button you would want GUI to run a program.
2. Display the pop-up menu callback in the M-file editor. Right-click the pop-up menu
component in the Layout Editor to display a context menu. From that menu, select
View Callbacks > Callback.
3. Type in the function or command you wound want the button to do on the callback
space.
Exercise: Making a simple Calculator
1. Drag or copy paste 15 push buttons and one static text as indicated on the figure
2. Double-click on an object to open the properties dialog. Change the captions on the
buttons and remove "Static Text" string from the text window. Set the font size 30 for
the text windows and change horizontal alingment to "right."

3. The GUI is finished. Save the work using the file name “calculatorlastname.m” where
last name is your last name.
4. The design process will take the functionality provided by each GUI component as
shown.
5. Open the matlab editor by typing

>>edit calculatorlastname.m
where calculatorlastname.m is the name of your design

6. Each time you press a button, a callback function is executed.

For example, in this particular case, a click on button "1" will call the following
function:

7. This function will have to be modified to provide required functionality.

Buttons "0"-"9","+","-","*","/" will add corresponding symbol to the text string
displayed on the top. For button "1" the code will look like:
8. Do the same for the rest of the buttons, except "=".
The "=" button should evaluate the text string in the text window and return the
result.

9. Now the calculator is ready to use. Click on the green arrow to run the GUI
MACHINE PROBLEM
Desing a simple GUI with the following specifications:
1. Four (4) push buttons for different frequencies 20 Hz, 50 Hz, 100 Hz and a clear
screen or reset button.
2. One (1) Axes window to the graphs
3. Place a static text to display the following “MODULE 7 GUI MACHINE PROBLEM”
Prepared by “Your name”
4. Requirment. Each time a button indicating the frequency is press, the GUI will
automatically display the frequency in the axes button and the reset to clear the
displayed graph.
5. Label the buttons as such
6. You are to create four programs that you will callback to run the pushbuttons
7. Create a tool bar with help to show how the GUI works and all the 4 buttons. To
create a tool bar, go to the GUI toolbar and click on tools, click on “Menu Editor”. And
the dialog box for menu editor will appear.
 Click on untitled and simply rename the headings as help, buttons and sub-buttons to
indicated the buttons that you have on the GUI. Or click on the button toolbar editor

8. You may be creative in designing and using background colors or text colors or text
fonts and sizes.

SYNTAX:
function varargout = simplemachine(varargin)
% SIMPLEMACHINE M-file for simplemachine.fig
% SIMPLEMACHINE, by itself, creates a new SIMPLEMACHINE or raises the
existing
% singleton*.
%
% H = SIMPLEMACHINE returns the handle to a new SIMPLEMACHINE or the
handle to
% the existing singleton*.
%
% SIMPLEMACHINE('CALLBACK',hObject,eventData,handles,...) calls the local
% function named CALLBACK in SIMPLEMACHINE.M with the given input
arguments.
%
% SIMPLEMACHINE('Property','Value',...) creates a new SIMPLEMACHINE or
raises the
% existing singleton*. Starting from the left, property value pairs are
% applied to the GUI before simplemachine_OpeningFcn gets called. An
% unrecognized property name or invalid value makes property application
% stop. All inputs are passed to simplemachine_OpeningFcn via varargin.
%
% *See GUI Options on GUIDE's Tools menu. Choose "GUI allows only one
% instance to run (singleton)".
%
% See also: GUIDE, GUIDATA, GUIHANDLES

% Edit the above text to modify the response to help simplemachine

% Last Modified by GUIDE v2.5 26-Aug-2009 09:56:19

% Begin initialization code - DO NOT EDIT
gui_Singleton = 1;
gui_State = struct('gui_Name', mfilename, ...
'gui_Singleton', gui_Singleton, ...
'gui_OpeningFcn', @simplemachine_OpeningFcn, ...
'gui_OutputFcn', @simplemachine_OutputFcn, ...
'gui_LayoutFcn', [] , ...
'gui_Callback', []);
if nargin && ischar(varargin{1})
gui_State.gui_Callback = str2func(varargin{1});
end

if nargout
[varargout{1:nargout}] = gui_mainfcn(gui_State, varargin{:});
else
gui_mainfcn(gui_State, varargin{:});
end
% End initialization code - DO NOT EDIT

% --- Executes just before simplemachine is made visible.

function simplemachine_OpeningFcn(hObject, eventdata, handles, varargin)
% This function has no output args, see OutputFcn.
% hObject handle to figure
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
% varargin command line arguments to simplemachine (see VARARGIN)

% Choose default command line output for simplemachine

handles.output = hObject;

% Update handles structure

guidata(hObject, handles);

% UIWAIT makes simplemachine wait for user response (see UIRESUME)

% uiwait(handles.figure1);

% --- Outputs from this function are returned to the command line.
function varargout = simplemachine_OutputFcn(hObject, eventdata, handles)
% varargout cell array for returning output args (see VARARGOUT);
% hObject handle to figure
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)

% Get default command line output from handles structure

varargout{1} = handles.output;

% --- Executes on button press in pushbutton1.

function pushbutton1_Callback(hObject, eventdata, handles)
% hObject handle to pushbutton1 (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
fs=2000;
t=[0:50]/fs;
y=sin(2*pi*50*t*50);
axis auto
plot ([0:50],y)

% --- Executes on button press in pushbutton2.

function pushbutton2_Callback(hObject, eventdata, handles)
% hObject handle to pushbutton2 (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
fs=2500;
t=[0:100]/fs;
y=sin(2*pi*50*t*20);
axis auto
plot ([0:100],y)

% --- Executes on button press in pushbutton4.

function pushbutton4_Callback(hObject, eventdata, handles)
% hObject handle to pushbutton4 (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
cla

% --- Executes on button press in pushbutton5.

function pushbutton5_Callback(hObject, eventdata, handles)
% hObject handle to pushbutton5 (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
fs=100000;
t=[0:50]/fs;
y=sin(2*pi*50*t*100);
axis auto
plot ([0:50],y)

% --------------------------------------------------------------------
function Untitled_1_Callback(hObject, eventdata, handles)
% hObject handle to Untitled_1 (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
help

GUI FIGURE FILE PICTURE:

Machine GUI
Help GUI

OUTPUT WHEN RUN

Discussion:

Based on the syntaxes, functions and commands used in this

experiment, this discussion has been made:
• GUI or the Graphical User Interface of MATLAB is composed
of different buttons that have their own syntaxes and ways
on how to program them. These buttons will be discussed on
the next bullets.
• The edit text is used to enter a certain value to be used by
the program. The following syntaxes may be used to
program the edit text:
function edittext1_Callback(hObject, eventdata, handles)
user_string = get(hObject,'String');
% Proceed with callback
The edit text1_Callback(hObject, eventdata, handles) is the
name of the function. The next line, which is user_string =
get(hObject,'String') is used to get the encoded value. Here
MATLAB will read the encoded value as a string and not as
an integer. To convert the string into integer, we may use
the syntax str2double(get(hObject,'string')). The process of
callback will be presented on the last bullet.
• The pop-up menu is used to create a selection from a range
of choices. This element can be programmed using these
syntaxes:
function popupmenu1_Callback(hObject, eventdata, handles)
val = get(hObject,'Value');
switch val
case 1
% User selected the first item
case 2
% User selected the second item
% Proceed with callback...
On the first line is the function name. The next line is the
syntax in order to extract whatever chosen value to be
 selected. The switch command is used in order that when
the user chooses the first choice case 1 will be performed,
same process when the user opted to chooses case 2.
• The check box, radio button and push button are used to
place a certain program within them. After clicking the said
buttons, the program or the statements are performed. Like
the one used in this experiment, if the user clicks the 50 Hz
push button, these syntaxes will be performed:
fs=2000;
t=[0:50]/fs;
y=sin(2*pi*50*t*50);
axis auto
plot ([0:50],y)
• The sliders accept numeric input within a specific range, and
enable to move a sliding bar. You can determine the current
value of a slider from within its callback by querying its
Value property, as illustrated in the following example:
function slider1_Callback(hObject, eventdata, handles)
slider_value = get(hObject,'Value');
% Proceed with callback...
• The list box is similar to pop-up menu wherein the user has
the option to choose a certain value from a list. The following
syntaxes may be used to program this element.
function listbox1_Callback(hObject, eventdata, handles)
index_selected = get(hObject,'Value');
list = get(hObject,'String');
 item_selected = list{index_selected}; % Convert from cell
array
% to string
The first line is again the function name. The next line is
used to extract the value that has been chosen and saves it
to the indicated variable name. The third line is used to
extract the chosen value as a string. The last line is used to
convert the cell array into string.
• The callback for a toggle button needs to query the toggle
button to determine what state it is in. MATLAB sets the
Value property equal to the Max property when the toggle
button is pressed (Max is 1 by default) and equal to the Min
property when the toggle button is not pressed (Min is 0 by
default).
• The axes element is used to plot the current graph in the
program. In order to plot different graphs on different axes,
we may follow this syntax:
plot(axes2,x,y)
This syntax is used to plot the graph of x and y in axes 2.
• The button group is used in order to group certain number of
buttons in order that for example, when the user choose the
check box 1 and then suddenly changes it to box 2, the
check mark will only appear on the box 2.
• Finally, in order to used a certain value to other function,
these syntaxes may be used:
Fs=11300;
 handles.Fs=Fs;
guidata(hObject,handles)
The handles.Fs is used to make the value in Fs global.

Conclusion:
Based on the discussion presented on the previous bullets,
these conclusions have been made:
• GUI is a special environment of MATLAB wherein the
programmer has the option to choose the graphical
elements that he wants to be present on the interface of the
system that he/she wants to design. The GUIDE (Graphical
User Interface Design Environment) stores GUIs in two files,
which are generated the first time you save or run the GUI.
These files are the fig file and the m file. The fig file contains
a complete description of the GUI figure layout and the
components of the GUI. The m file, on the other hand,
contains the code, syntaxes or program that controls the
GUI.

• These elements or components (push button, pop-up menu,

etc.) may be programmed using the syntaxes that can be
retrieved using the help command of MATLAB.

• Moreover, Graphical User Interface is a way of

communicating with a computer that uses visual feedback to

the user as much as possible. Features of a GUI include the

use of icons to represent commands and options, pull-down

menus that appear when called for and then disappear when

no longer needed, and the use of a mouse to move a pointer

around the screen. By pointing to the appropriate icons or

menu items and clicking a mouse button, various commands

 can be activated. It is also possible to use the mouse in

drawing programs.

• The elements or components, as we observe the m file, has

their own function or in other words each element is a
function. Under this function are programs for a certain
element.