EGR 115 Introduction to Computing for
Engineers
Graphical User Interface Design in MATLAB - Part 1
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Lecture Outline
• Graphical User Interface Design in MATLAB
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 2 of 17
Graphical User Interface Design in MATLAB
• What is a Graphical User Interface (GUI)?
 A GUI is a graphical display which allows users to interact
via icons and controls with a computer (i.e., code)
o
It is a high-level alternative to typing commands
o
Your Windows desktop is an example of a GUI!!
 As opposed to the pre-GUI DOS
(textual based interface)
o
Your web browser has a GUI
o
Sometimes GUIs interact with hardware
 E.g., phone, UAV, printer, …
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 3 of 17
Graphical User Interface Design in MATLAB
• There are two methods to create a GUI in MATLAB
 Programmatic GUI construction
o
Direct coding of scripts and functions
 More challenging (more coding)
 Higher fidelity control of the GUI
 Using the guide (GUI Development Environment)
o
o
o
A GUI to create GUIs in MATLAB
Graphical construction of the GUI’s layout
Provides a code “skeleton” with functional connectivity to a
figure
 Uses callback functions and data structures to manipulate data
and create plots
 Objects in the GUI are “connected” to callback functions!!
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 4 of 17
Graphical User Interface Design in MATLAB
• Introduction to guide in MATLAB
1. Define and construct the layout
>> guide
o
select Blank GUI
Build GUI using provided
components
• File -> preferences ->
show names in
component palette
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 5 of 17
Graphical User Interface Design in MATLAB
• Many component choices are available
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 6 of 17
Graphical User Interface Design in MATLAB
• First very simple GUI
 Behavior: Display “Hello” when a button is pressed
o
Add a push button
 Modify property “String” to
» Push to say Hello
 Modify property “Tag”
» Give a meaningful name: my_button
o
Add an edit text box
 Modify property “String” to
» ????
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 7 of 17
Graphical User Interface Design in MATLAB
 Now, edit the code to perform the desired actions
o
Find the callback function for my_button
 This function is called when the button is pressed
o
When button pressed we want to set the “String” property of
the object edit_text to ‘Hello’
 handles is a structure with fields
 Each field is a handle to an object
» We want: handles.edit_text
K>> handles
handles =
figure1:
edit_text:
my_button:
output:
176.0070
1.0076
177.0070
176.0070
...
% --- Executes on button press in my_button.
function my_button_Callback(hObject, eventdata, handles)
% hObject
handle to my_button (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles
structure with handles and user data (see GUIDATA)
set(handles.edit_text,'String','Hello' )
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 8 of 17
Graphical User Interface Design in MATLAB
 Save the file(s)
o
Run the GUI
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 9 of 17
Graphical User Interface Design in MATLAB
• A second Example:




Lets build a GUI to plot a sinusoid
Use a slider to vary the frequency from 1 to 10 Hz
Use a pop-up menu to select the line color
Use a check box to turn on the grid
 Plot from t = 0:0.001:1 (seconds)
 Provide an initial plot:
o
o
o
freq = 1 Hz
Grid off
Line color blue
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 10 of 17
Graphical User Interface Design in MATLAB
 Set axes property:
o Tag: axes_sin
 Set slider property:
o Tag: slider_freq
o Min: 0.0 and Max: 10.0
o Value: 1.0
 Set static text property:
o String: Select the frequency (in Hz)
o FontSize: 12
 Set pop-up menu property:
o String: black, red, green, cyan
o FontSize: 12
o Tag: popupmenu_color
 Set checkbox property:
o Tag: checkbox_grid
o String: Grid?
o FontSize: 12
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 11 of 17
Graphical User Interface Design in MATLAB
 Locate the opening callback function
% --- Executes just before sin_gui is made visible.
function sin_gui_OpeningFcn(hObject, eventdata, handles, varargin)
% This function has no output args, see OutputFcn.
...
o
In this function add the code to create the initial plot
...
t = 0:0.001:1; % Time vector (sec)
f = 1;
% Initial freq (Hz)
plot(t, sin(2*pi*f*t)); % Initial Plot
...
 Should we test small pieces or wait
until we are finished coding?
 Run a simple test!!
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 12 of 17
Graphical User Interface Design in MATLAB
 Locate the slider callback function (Tag: slider_freq)
% --- Executes on slider movement.
function slider_freq_Callback(hObject, eventdata, handles)
% hObject
handle to slider_freq (see GCBO)
...
o
We want to plot with the freq from the slider
t = 0:0.001:1; % Time vector (sec)
f = get(handles.slider_freq, 'Value'); % Obtain freq (Hz)
plot(t, sin(2*pi*f*t)); % Plot Function
...
 Run a simple test!!
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 13 of 17
Graphical User Interface Design in MATLAB
 Stay inside the slider callback function (Tag: slider_freq)
o
If the checkbox Value = 1 turn on grid
if get(handles.checkbox_grid, 'Value')
grid on
else
grid off
end
...
 Run a simple test!!
o
Why does the grid not turn on when you check the box?
 Also, add this code to the checkbox callback function (Tag:
checkbox_grid)
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 14 of 17
Graphical User Interface Design in MATLAB
 Finally, inside the slider callback function (Tag: slider_freq)
o
Based on the color selected set Color property of the plot
 Need handle to Tag: popupmenu_color
color_choice = get(handles.popupmenu_color,'Value');
switch color_choice
case 1
set(h1,'Color','k'); % Black
case 2
set(h1,'Color','r'); % Red
case 3
set(h1,'Color','g'); % Green
case 4
set(h1,'Color','c'); % Cyan
otherwise
error('Wrong color!!');
end
...
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 15 of 17
Graphical User Interface Design in MATLAB
• Final product:
MATLAB Code:
sin_gui.m
sin_gui.fig
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 16 of 17
Next Lecture
• More Graphical User Interface Design in MATLAB
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 17 of 17