1. More on Graphical User Interfaces
Blind to Change
More on Graphical User Interfaces
today learn more about how to create graphical user
interfaces for our programs -

2. Exploring “change blindness”
The human visual system can be “blind” to changes in a scene, unless we draw our attention to the area undergoing change
This GUI-based program displays a pair of alternating images on the left, until the user notices the change and presses the stop button
The user can select which pair to view, the amount of time each image is displayed, and the time between image frames
Results on the total time needed to detect the change for each pair can be viewed on the right
GUIs

3. Functions defined in blindGUI.m
blindGUI: top-level function at the beginning of the file that is called from the Command Window. This function initializes the GUI program and opens the GUI window. This function is not modified
blindGUI_OpeningFcn: executed just before the GUI window is made visible. Code is added to this function to set up an initial pair of images for testing, and to create a vector to store the experimental results
blindGUI_OutputFcn: returns outputs to the Command Window. This function is not modified
- similar to energyGUI program, many functions
automatically created
GUIs 3

4. Changes to blindGUI_OpeningFcn
% --- Executes just before blindGUI is made visible.
function blindGUI_OpeningFcn (hObject,eventdata,handles,varargin)
% variables to store image pair, initialized to airplane images
handles.im1 = imread('plane1.bmp’);
handles.im2 = imread('plane2.bmp’);
% results of tests: number of repeats needed to detect change, for
% each pair of images (currently four image pairs)
handles.results = zeros(1,4);
% Choose default command line output for blindGUI
handles.output = hObject;
% Update handles structure
guidata(hObject, handles);
- sets up initial pair of airplane images and vector
to store experimental results
- creates new fields for handles structure and assigns
initial values - multiple Callback functions will need to
access images and results, so put it in handles
structure that is passed to every function as input
GUIs 4

5. global handles structure!
imagesMenu_Callback
function imagesMenu_Callback(hObject, eventdata, handles)
% loads selected image pair
imageChoice = get(handles.imagesMenu, 'Value');
if (imageChoice == 1)
handles.im1 = imread('plane1.bmp');
handles.im2 = imread('plane2.bmp');
elseif (imageChoice == 2)
handles.im1 = imread('dinner1.bmp');
handles.im2 = imread('dinner2.bmp');
elseif (imageChoice == 3)
handles.im1 = imread('farm1.bmp');
handles.im2 = imread('farm2.bmp');
else
handles.im1 = imread('market1.bmp');
handles.im2 = imread('market2.bmp');
end
% update handles structure
guidata(hObject, handles);
- when user selects a new image pair in the pop-up
menu of image names, the corresponding images are
loaded into handles.im1 and handles.im2
- guidata command is also added, because a change
is made to the handles structure
Don’t forget to update
global handles structure!
GUIs 5

6. demoButton_Callback (part 1)
function demoButton_Callback(hObject, eventdata, handles)
% create blank frame of the same size as the image pair
[rows cols rgb] = size(handles.im1);
blank = 0.8*ones(rows, cols, rgb);
% get presentation and gap times from the GUI
presentTime = str2double(get(handles.presentTextbox, ‘String’));
gapTime = str2double(get(handles.gapTextbox, ‘String’));
% switch to testAxes display area and enable the stop button
axes(handles.testAxes);
set(handles.stopButton, ‘Enable’, ‘on’);
% initialize number of repetitions needed to detect change
nreps = 0; …
- blank frame placed between two images as they
are alternated (to avoid direct detection of motion)
- text entered into edit text boxes is returned as a
string - str2double used to convert string to number
- uses axes function to specify which display area
- sometimes don’t want user to be able to interact
with a certain GUI component at a particular time,
so can disable it using the “Enable” property, which
exists for any type of component – grays out
GUIs 6

7. demoButton_Callback (part 2)
% keep alternating between the two images, with blank frame in
% between, until the user clicks on the stop button
while (get(handles.stopButton, ‘Value’) == 0)
imshow(handles.im1);
pause(presentTime);
imshow(blank);
pause(gapTime);
imshow(handles.im2);
nreps = nreps + 1;
end
% record results (number of repeats needed to detect change)
handles.results(get(handles.imagesMenu, ‘Value’)) = nreps;
% reset and disable the stop button
set(handles.stopButton, ‘Value’, 0);
set(handles.stopButton, ‘Enable’, ‘off’);
% update handles structure
guidata(hObject, handles);
- loop: image1, blank, image2, blank, with pauses
in between (MATLAB pause function, input seconds)
- each time increment nreps – 4 image names in
menu, 4 locations in results vector, can use index
of selected image name as index for results
- reset stopButton to be off and disabled
- changed something in handles structure, so
need to call guidata!
GUIs 7

8. resultsButton_Callback
function resultsButton_Callback(hObject, eventdata, handles)
% display results of tests as a bar graph of the number of
% repeats needed to detect change for each image pair
axes(handles.resultsAxes);
bar(handles.results);
axis([ max(handles.results)])
set(gca, ‘XTickLabel’, {‘plane’ ‘dinner’ ‘farm’ ‘market’});
ylabel(‘number of repeats’);
title(‘time needed to detect change’);
- when press “show results”, display bar graph of
results in right display area – use axes function to
direct graph there, set x/y range with axis
- remember how words on axis with e.g.
set(gca, ‘XTickLabel’, {…}) cell array
GUIs 8

9. Bells and whistles
Other things you may want to explore in a GUI for your final project:
- adding animation
- other GUI components
Slider
Listbox
Radio Buttons
- dialog boxes
- pull-down menus
- mouse control
- multi-line text boxes
- we can help you figure out these things
GUIs 9