Sri Lanka Institute of Information Technology

Faculty of Engineering
Department of Electrical and Computer Engineering

EC247: Computing for Engineers

Graphical User Interface (GUI) Design - Assignment

Contents
List of Figures ................................................................................................................................. 2
Introduction ..................................................................................................................................... 3
GUI Design ..................................................................................................................................... 3
Coding ............................................................................................................................................. 4
Opening Function: ...................................................................................................................... 5
PlaySound function: .................................................................................................................... 5
Matrix Concatenation: ................................................................................................................ 6
Functions of piano note buttons: ................................................................................................. 6
Function of the Play button: ........................................................................................................ 7
Function of the Reset button: ...................................................................................................... 7
Testing............................................................................................................................................. 8
References ....................................................................................................................................... 9

List of Figures
Figure 1: GUI of the piano .............................................................................................................. 4
Figure 2: Tested frequencies ........................................................................................................... 8

Introduction
Matlab is a powerful tool for Graphical User Interface (GUI) designing. A user interface (UI) is a
graphical display in one or more windows containing controls, called components that enable a
user to perform interactive tasks. The user does not have to create a script or type commands at
the command line to accomplish the tasks. Unlike coding programs to accomplish tasks, the user
does not need to understand the details of how the tasks are performed.
UI components can include menus, toolbars, push buttons, radio buttons, list boxes, and sliders
just to name a few. UIs created using Matlab tools can also perform any type of computation, read
and write data files, communicate with other UIs, and display data as tables or as plots.
In this assignment we were about to create a basic piano using the Matlab GUI.

GUI Design
First of all open Matlab and then go to New -> Graphical User Interface. Now a new window
appears. In that select Blank GUI (Default) then click OK. After that open the GUIDE and add
fourteen pushbuttons and one toggle button. Additionally created a static text on top. The basic
user interface is shown below. (Colours and Strings are customized)

Figure 1: GUI of the piano

Tag
C
C_Sharp
D
D_Sharp
E
F
F_Sharp
G
G_Sharp
A
A_Sharp
Record
Play
Reset
text2

Style
pushbutton
pushbutton
pushbutton
pushbutton
pushbutton
pushbutton
pushbutton
pushbutton
pushbutton
pushbutton
pushbutton
togglebutton
pushbutton
pushbutton
text
Table 1: Object styles

Coding
After designing the user interface we have to program how those buttons works. For this we need
to use various functions in Matlab. Main functions are,
4

Opening function
PlaySound function
Functions of pushbuttons
o Piano notes
o Play
o Reset

Now lets understand these functions step by step.

Opening Function:
The opening function is the first callback in every UI code file. It is executed just before the UI is
made visible to the user, but after all the components have been created, i.e., after the components'
CreateFcn callbacks, if any, have been run. This function is used for perform initialization tasks.
Opening function of our piano is shown below.
function piano_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 piano (see VARARGIN)

% Choose default command line output for piano

handles.output
= hObject;
handles.SampleRate = 1/30000;
handles.SoundVector = 0;
handles.TimeValue
= 0.4;
% Update handles structure
guidata(hObject, handles);

SampleRate, SoundVector and Time duration of a note (TimeValue) is initialized in this function.
SampleRate is the number of samples of audio carried per second, measured in Hz. SoundVector
is a matrix of frequencies. At the beginning we initialize it to zero.

PlaySound function:
This is the most important function in the program. To play corresponding notes, to record and
play is programmed in here.
function PlaySound(handles,f)
SampleRate
TimeValue
Samples

= handles.SampleRate;
= handles.TimeValue;
= 0:SampleRate:TimeValue;

soundVector = sin(2*pi*f*Samples);
sound(soundVector, 1/SampleRate)
if get(handles.Record, 'Value') == 1
%Record button is pressed
SoundVectorLong = handles.SoundVector;
if SoundVectorLong == 0
SoundVectorLong = soundVector;
else
SoundVectorLong = cat(2, SoundVectorLong, soundVector);
end
handles.SoundVector = SoundVectorLong;
guidata(handles.figure1, handles);
end

SampleRate and TimeValue explained above. Samples = 0:SampleRate:TimeValue; means

play sound until the duration of TimeValue with increments of SampleRate.
Next step is where we initialize our soundVector (soundVector and SoundVector are not the same).
It defines the sinusoid of the sound. After that sound() function (inbuilt in Matlab) initialized.
This function can play vector as sound. (sound(Y,FS) sends the signal in vector Y (with sample
frequency FS) out to the speaker on platforms that support sound).
After that we used if function to manage the recording part. When we press record button, value
of it become 1. If we press it once again value become 0. Basic idea of recording is after toggle
(press) Record button, notes (ex. C, C#...) we press are save in the SoundVector. Also another
vector called SoundVectorLong is used here. This is used to concatenate matrixes previously
generated. Which means if we recorded a sequence before, it get added to the next sequence we
record unless press Reset. Final sequence is initialized to SoundVector.

Matrix Concatenation:
Matrix concatenation is the process of joining one or more matrices to make a new matrix.
This example constructs a new matrix C by concatenating matrices A and B in a vertical direction:
A = ones(2, 5) * 6;
B = rand(3, 5);

% 2-by-5 matrix of 6's

% 3-by-5 matrix of random values

C = [A; B]
C =
6.0000
6.0000
0.9501
0.2311
0.6068

% Vertically concatenate A and B

6.0000
6.0000
0.4860
0.8913
0.7621

6.0000
6.0000
0.4565
0.0185
0.8214

6.0000
6.0000
0.4447
0.6154
0.7919

6.0000
6.0000
0.9218
0.7382
0.1763

Functions of piano note buttons:

Lets consider a function of one note because all notes have the similar functions.
6

% --- Executes on button press in C.

function C_Callback(hObject, eventdata, handles)
% hObject
handle to C (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles
structure with handles and user data (see GUIDATA)
PlaySound(handles,523.25);

Above function executes when we press C note. This is pretty straightforward because only thing
did here is calling the PlaySound(handles,f) function. f is the frequency of the note C (523.25
Hz). Other notes have almost same functions, only the frequency is changed.

Function of the Play button:

% --- Executes on button press in Play.
function Play_Callback(~, eventdata, handles)
% hObject
handle to Play (see GCBO)
SoundVector
= handles.SoundVector;
SampleRate
= handles.SampleRate;
sound(SoundVector, 1/SampleRate)

In here imported SoundVector and SampleRate then called sound( ) function with corresponding
SoundVector and 1/SampleRate. This will play the sequences if recorded.

Function of the Reset button:

% --- Executes on button press in Reset.
function Reset_Callback(hObject, eventdata, handles)
% hObject
handle to Reset (see GCBO)
handles.SoundVector = 0;
guidata(handles.figure1, handles);

This function will clear the SoundVector. All sequences recorded are deleted by pressing clear
button.

Additionally colour of the Record button and colour of the String is changing when pressed.
% --- Executes on button press in Record.
function Record_Callback(hObject, eventdata, handles)
% hObject
handle to Record (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles
structure with handles and user data (see GUIDATA)
if get(hObject,'Value')
set(hObject, 'BackgroundColor',[1 0 0])
set(hObject, 'ForegroundColor',[1 1 1])
else
set(hObject, 'BackgroundColor',[0.94 0.94 0.94])

set(hObject, 'ForegroundColor',[1 0 0])

end

Record button ON Background colour is red, String is white

Record button OFF - Background colour is gray, String is black

Testing
The interface was tested to check for errors in its functioning. All errors found were debugged so
the graphical piano could be used properly.
First the sound generation of the piano was tested. Some of the results obtained are shown below.
A Flat with Eighth note

A Flat with Half note

C Flat with Half note

D Flat with Half note

Figure 2: Tested frequencies

As shown by the results, the sound generation occurs properly allowing the user to enter the
required note (duration of the sound).

References
[1] "Matlab and Simulink for Technical Computing," [Online]. Available: in.mathworks.com.
[Accessed 09 2015].
[2] "Sample Rates - Audacity Wiki," [Online]. Available:
http://wiki.audacityteam.org/wiki/Sample_Rates. [Accessed 09 2015].