EGR 115 Introduction to Computing for
Engineers
Graphical User Interface Design in MATLAB - Part 2
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Lecture Outline
• Graphical User Interface Design in MATLAB
 A 3D animation inside a GUI
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 2 of 13
Graphical User Interface Design in MATLAB
• Lets create a more sophisticated GUI
 Create a GUI that animates the rotation of a coordinate
frame
o
Allow multiple rotations in sequence
 Each could be about either about the x, y, or z axes
o
User should enter the angle for each rotation using sliders
 Angle in degrees
o
Extra: Add a few standard UI controls
 Zoom, …
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 3 of 13
Graphical User Interface Design in MATLAB
• Upon startup draw initial x, y, and z axes
 Use code from lecture: Complex Numbers & 3D Plots3
o
Mon, Nov 10
 Start with a new empty GUI
o
Add the code from plot 3D to the beginning of the Opening
function
% --- Executes just before Rot_3D is made visible.
function Rot_3D_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 Rot_3D (see VARARGIN)
-- Add your code here!!!
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 4 of 13
Graphical User Interface Design in MATLAB
• Test your initialization code before proceeding
• Next add sliders
to control x, y, and
z-axis rotation
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 5 of 13
Graphical User Interface Design in MATLAB
• Create the three sliders
 Set slider property:
o Tag: slider_thetaX
o Min: 0.0 and Max: 360.0
o Value: 0.0
 Set slider property:
o Tag: slider_thetaY
o Min: 0.0 and Max: 360.0
o Value: 0.0
 Set slider property:
o Tag: slider_thetaZ
o Min: 0.0 and Max: 360.0
o Value: 0.0
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 6 of 13
Graphical User Interface Design in MATLAB
• How can we update the lines and text using the slider
angles?
 Set the XData, Ydata, and Zdata properties of the lines and
‘Position’ of the text
o
Need handles to the objects!!
 They must all be unique!!
 Also store the current location of the x, y, and z-axes
o
hlx
htx
hly
hty
hlz
htz
=
=
=
=
=
=
Store in a matrix “R_mat”
line([0 1], [0 0], [0 0],'Color','r', 'LineWidth', 3);
text(1.2, 0, 0, 'X','Color','r','FontSize',14);
line([0 0], [0 1], [0 0],'Color','g', 'LineWidth', 3);
text( 0, 1.2, 0,'Y','Color','g','FontSize',14);
line([0 0], [0 0], [0 1],'Color','b', 'LineWidth', 3);
text(0, 0, 1.2,'Z','Color','b','FontSize',14);
R_mat = eye(3,3);% The current x, y, and z axis vectors (cols)
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 7 of 13
Graphical User Interface Design in MATLAB
 We need to share those handles with the three callback
functions
 Add to the variable names “handles” structure in the Opening
Function!!
o
Lets place all of those handles (and R_mat) into a single structure
% Create a structure to contain all of our handles and R_mat
my_plot = struct('lineX', hlx, 'lineY', hly, 'lineZ', hlz, ...
'textX', htx, 'textY', hty, 'textZ', htz, ...
'XYZ', R_mat);
 Now add this structure to the “handles” data structure
% Choose default command line output for Rot_3D
handles.output = hObject;
handles.my_3Dframe = my_plot;
The “handles” data structure is available to all of the functions!!!
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 8 of 13
Graphical User Interface Design in MATLAB
• Now add code to each of the slider callback functions
 For example the slider ThetaX
o
Use the rotate_x function from past homework assignment
% Get the rotational angle and convert to rad
theta = get(hObject, 'Value') * pi/180;
% Update R_mat based on the requested rotation
handles.my_3Dframe.XYZ = handles.my_3Dframe.XYZ*rotate_x(theta);
o
%
x
y
z
“Pull-out” the x, y, and z axes for more readable code
For ease of use define the current x, y, and z axes
= handles.my_3Dframe.XYZ(:,1);
% Col 1
= handles.my_3Dframe.XYZ(:,2);
% Col 2
= handles.my_3Dframe.XYZ(:,3);
% Col 3
Use the debugger to test along the way!!
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 9 of 13
Graphical User Interface Design in MATLAB
 For example, for the slider ThetaX
o
Only need to rotate the y and z axes!!
% Update the location of lines and text
% Update y-axis (second col of R matrix)
set(handles.my_3Dframe.lineY,'XData', ...
[0 y(1)], 'YData', [0 y(2)], 'ZData', [0 y(3)]);
set(handles.my_3Dframe.textY,'Position', [1.2*y(1), 1.2*y(2), 1.2*y(3)]);
% Update z-axis (third col of R matrix)
set(handles.my_3Dframe.lineZ,'XData', ...
[0 z(1)], 'YData', [0 z(2)], 'ZData', [0 z(3)]);
set(handles.my_3Dframe.textZ,'Position', [1.2*z(1), 1.2*z(2), 1.2*z(3)]);
Test along the way!!
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 10 of 13
Graphical User Interface Design in MATLAB
• Finally, we must update the “handles” to store our
updated R_matrix
% Update handles structure
guidata(hObject, handles);
Test along the way!!
Do the same for slider ThetaY and slider ThetaZ
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 11 of 13
• Want to apply change in  and not the absolute value
of  for each slider!!
persistent theta_k_1
if isempty(theta_k_1)
theta_k_1 = 0.0;
end
% Get the rotational angle and convert to rad
theta_k = get(hObject, 'Value') * pi/180;
theta = theta_k - theta_k_1;
theta_k_1 = theta_k;
MATLAB code of our GUI
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 12 of 13
Next Lecture
• An open review
 Work on our Battleship GUI?
Monday 24 Nov 2014
EGR 115 Introduction to Computing for Engineers
Slide 13 of 13