1. 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

2. 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

3. 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)
It is a high-level alternative to typing commands
Your Windows desktop is an example of a GUI!!
As opposed to the pre-GUI DOS (textual based interface)
Your web browser has a GUI
Sometimes GUIs interact with hardware
E.g., phone, UAV, printer, …
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers

4. Graphical User Interface Design in MATLAB
There are two methods to create a GUI in MATLAB
Programmatic GUI construction
Direct coding of scripts and functions
More challenging (more coding)
Higher fidelity control of the GUI
Using the guide (GUI Development Environment)
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

5. Graphical User Interface Design in MATLAB
Introduction to guide in MATLAB
Define and construct the layout
>> guide
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

6. Graphical User Interface Design in MATLAB
Many component choices are available
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers

7. Graphical User Interface Design in MATLAB
First very simple GUI
Behavior: Display “Hello” when a button is pressed
Add a push button
Modify property “String” to
Push to say Hello
Modify property “Tag”
Give a meaningful name: my_button
Add an edit text box
????
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers

8. Graphical User Interface Design in MATLAB
Now, edit the code to perform the desired actions
Find the callback function for my_button
This function is called when the button is pressed
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:
...
% --- 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

9. Graphical User Interface Design in MATLAB
Save the file(s)
Run the GUI
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers

10. 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:
freq = 1 Hz
Grid off
Line color blue
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers

11. Graphical User Interface Design in MATLAB
Set axes property:
Tag: axes_sin
Set slider property:
Tag: slider_freq
Min: 0.0 and Max: 10.0
Value: 1.0
Set static text property:
String: Select the frequency (in Hz)
FontSize: 12
Set pop-up menu property:
String: black, red, green, cyan
Tag: popupmenu_color
Set checkbox property:
Tag: checkbox_grid
String: Grid?
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers

12. Graphical User Interface Design in MATLAB
Locate the opening callback function
In this function add the code to create the initial plot
Should we test small pieces or wait until we are finished coding?
Run a simple test!!
% --- Executes just before sin_gui is made visible.
function sin_gui_OpeningFcn(hObject, eventdata, handles, varargin)
% This function has no output args, see OutputFcn.
...
...
t = 0:0.001:1; % Time vector (sec)
f = 1; % Initial freq (Hz)
plot(t, sin(2*pi*f*t)); % Initial Plot
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers

13. Graphical User Interface Design in MATLAB
Locate the slider callback function (Tag: slider_freq)
We want to plot with the freq from the slider
Run a simple test!!
% --- Executes on slider movement.
function slider_freq_Callback(hObject, eventdata, handles)
% hObject handle to slider_freq (see GCBO)
...
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
...
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers

14. Graphical User Interface Design in MATLAB
Stay inside the slider callback function (Tag: slider_freq)
If the checkbox Value = 1 turn on grid
Run a simple test!!
Why does the grid not turn on when you check the box?
Also, add this code to the checkbox callback function (Tag: checkbox_grid)
if get(handles.checkbox_grid, 'Value')
grid on
else
grid off
end
...
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers

15. Graphical User Interface Design in MATLAB
Finally, inside the slider callback function (Tag: slider_freq)
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

16. 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

17. EGR 115 Introduction to Computing for Engineers
Next Lecture
More Graphical User Interface Design in MATLAB
Friday 21 Nov 2014
EGR 115 Introduction to Computing for Engineers