GUI problem with code

Code not working

[Walter Roberson]

Your code appears to be missing

[Walter Roberson]

Please do not close Questions which have an Answer.

Answer 1

[Geoff Hayes]

Neha - without your figure file, we cannot run the GUI and so cannot step through the code (with the debugger) to see what is happening...or observe any errors in the console. Have you seen any errors and, if so, what are they?

Looking at your buttonPress function, I noticed the following

if get(handles.whoseTurn, 'String') == 'x'
    set(hObject,'String') = 'x';
    set(handles.whoseTurn, 'String') = 'o';
else
    set(hObject,'String') = 'o'
    set(handles.whoseTurn,'String') = 'x' ;
    %still need to update turn information data
end

When comparing strings, the == will generally fail when your strings are of different lengths and so you will see an error like

Error using  == 
Matrix dimensions must agree.

To avoid this, use strcmp or strcmpi as

if strcmpi(get(handles.whoseTurn, 'String'), 'x')
   % do something
else
   % do something else
end

And, when setting the (edit) text control, you need to pass in the value rather than using the assignment operator =. So the line

set(hObject,'String') = 'x';

which will generate an error, should become

set(hObject,'String', 'x');

Please try fixing these bugs and re-run your code. If you observe any further errors, please copy and paste the full error message (the red text) to this question.

[Geoff Hayes]

Neha's answer moved here

Thanks. I fixed the code as you stated, now the GUI works but not like its supposed to. It does not place the x's and o's. All it does is turn red when clicked briefly.

I have uploaded the figure file, and here is my updated code.

function varargout = ticTacToe(varargin)

% This code sets up your GUI - DO NOT EDIT
gui_Singleton = 1;
gui_State = struct('gui_Name',       mfilename, ...
                   'gui_Singleton',  gui_Singleton, ...
                   'gui_OpeningFcn', @ticTacToe_OpeningFcn, ...
                   'gui_OutputFcn',  @ticTacToe_OutputFcn, ...
                   'gui_LayoutFcn',  [] , ...
                   'gui_Callback',   []);
if nargin && ischar(varargin{1})
    gui_State.gui_Callback = str2func(varargin{1});
end

if nargout
    [varargout{1:nargout}] = gui_mainfcn(gui_State, varargin{:});
else
    gui_mainfcn(gui_State, varargin{:});
end
% End initialization code - DO NOT EDIT

% --- This code sets up initial conditions of your GUI
function ticTacToe_OpeningFcn(hObject, eventdata, handles, varargin)

% Choose default command line output for ticTacToe
handles.output = hObject;

%I've created the following code to do a few things. The first is to create
%two handles properties (rows and cols) to correspond with the tic tac toe
%squares, and how they are named:
%
% A1 A2 A3
% B1 B2 B3
% C1 C2 C3
%
%Characters correspoinding to these rows and columns are stored in Cell
%Arrays. Cell Arrays are a data type that can store "arrays" where each
%element can be ANY data type. In this case, I am using them to store
%strings.

handles.rows = {'A', 'B', 'C'};
handles.cols = {'1', '2', '3'};

%The nested loops are performing a few task. The first is to make the
%buttons evenly spaced. Note that it's hard to drag and drop buttons in the
%guide interface such that they are evenly spaced. The variables x, y, wd,
%and ht corresponde to the positions, heights, and widths of each button.
%The loops go through all of the buttons, and place each button in evenly
%spaced locations, with uniform height and width.

y = 20;
wd = 13.2;
ht = 5;
for i = 1:3
    x = 20;
    for j = 1:3
        % Inside the loops, I am using the counting variables to index the
        % two cell arrays that define the grid system for my pushbuttons. I
        % can then create a string that matches the name of each button
        % using the following code:
        %
        %[handles.rows{i} handles.cols{j}]
        %
        %Note that the square brackets conctenate (join together) the two
        %strings located inside of the cell arrays at index i and j. For
        %example, if i was 2 and j was 3, [handles.rows{i} handles.cols{j}]
        %will produce the string 'B3'. This is the name of the button in
        %the second row, third column of the tic tac toe game!
        handles.([handles.rows{i} handles.cols{j}]).Position = [x y wd ht];
        %Once we have a string with the name of a button (or any other
        %property of any structure in MATLAB) we can use that string to
        %access the button but putting that string inside of parentheses
        %within the usual syntax that we use for strucutrs. In the code in
        %this loop, you can see that I write handles.(button).Proprty,
        %where "button" is replaced with the code that generates a string
        %with the name of a button, and Proprty is replaced by the property
        %I am editting. The code above changes the position of the button.
        %The code below places a blank space as the string of eahc button,
        %and sets the font size of eac button to 14.
        handles.([handles.rows{i} handles.cols{j}]).String = ' ';
        handles.([handles.rows{i} handles.cols{j}]).FontSize = 14;
        x = x + wd;
    end
    y = y - ht;
end
%The handles structure can also be used to store any data you want. Here I
%create a variable that you can use to keep track of how many turns have
%passed.
handles.turnNumber = 1;
%Any time you add new variables to the handles structure, you have to use
%the following code to tell MATLAB to make that new proprty permenant. This
%is only necessary when the property did NOT already exist, but if you
%aren't sure, it can't hurt to include this code.
guidata(hObject, handles);

%This function would help your GUI output someting. You will not add
%anything to it in this assignment.
function varargout = ticTacToe_OutputFcn(hObject, eventdata, handles) 
varargout{1} = handles.output;

%IMPORTANT NOTE - The Tic Tac Toe grid pushbuttons should all have callback
%functions that doe the following:
%
%- Call the function buttonPress
%- Call the function checkWinner
%
%IF YOU WRITE DIFFERENT CODE INSIDE OF EACH OF THE FOLLOWING CALLBACK
%FUNCTIONS YOU ARE DOING IT WRONG!

% --- Executes on button press in A1.
function A1_Callback(hObject, eventdata, handles)

   buttonPress(hObject,handles);
  handles = checkWinner(handles);
  guidata(hObject,handles)

% --- Executes on button press in B1.
function B1_Callback(hObject, eventdata, handles)
handles = buttonPress(hObject,handles);
handles = checkWinner(handles);
guidata(hObject,handles)

% --- Executes on button press in C1.
function C1_Callback(hObject, eventdata, handles)

handles = buttonPress(hObject,handles);
handles = checkWinner(handles);
guidata(hObject,handles)
% --- Executes on button press in A2.
function A2_Callback(hObject, eventdata, handles)
handles = buttonPress(hObject,handles);
handles = checkWinner(handles);
guidata(hObject,handles)

% --- Executes on button press in B2.
function B2_Callback(hObject, eventdata, handles)

handles = buttonPress(hObject,handles);
handles = checkWinner(handles);
guidata(hObject,handles)
% --- Executes on button press in C2.
function C2_Callback(hObject, eventdata, handles)

handles = buttonPress(hObject,handles);
handles = checkWinner(handles);
guidata(hObject,handles)
% --- Executes on button press in A3.
function A3_Callback(hObject, eventdata, handles)
handles = buttonPress(hObject,handles);
handles = checkWinner(handles);
guidata(hObject,handles)

% --- Executes on button press in B3.
function B3_Callback(hObject, eventdata, handles)
handles = buttonPress(hObject,handles);
handles = checkWinner(handles);
guidata(hObject,handles)

% --- Executes on button press in C3.
function C3_Callback(hObject, eventdata, handles)
handles = buttonPress(hObject,handles);
handles = checkWinner(handles);
guidata(hObject,handles)

% --- Executes on button press in newGame.
function newGame_Callback(hObject, eventdata, handles)
%This is the last bit of code I have written for you. It initializes a new
%game when the user presses the "New Game" button.
handles.turnNumber = 1;
for i = 1:3
    for j = 1:3
        handles.([handles.rows{i} handles.cols{j}]).String = ' ';
    end
end

%THESE ARE THE TWO FUNCTIONS YOU HAVE TO WRITE. WHEN YOU SUBMIT THIS MINI
%PROJECT, ONLY SUBMIT THE CODE FOR THESE TWO FUNCTIONS, NOT ANY OF THE
%ABOVE CODE. MAKE SURE YOU COMMENT YOUR CODE, AND USE GOOD STYLE.

function handles = buttonPress(hObject,handles)

editString = get(hObject, 'String');
for i = 1:9 %where i is the handles.turnNumber
if isempty(editString)
    if strcmpi(get(handles.whoseTurn, 'String'), 'x')
    set(hObject,'String','x')
    set(handles.whoseTurn, 'String', 'o');
    set(handles.turnNumber,'String','i+1')
    else
    set(hObject,'String','o')
    set(handles.whoseTurn,'String', 'x') ;
    set(handles.turnNumber,'String','i+1');
    end

else
    set(hObject,'BackgroundColor',[1,0,0]);
    pause(0.1);
    set(hObject,'BackgroundColor',[1,1,1]);
end
end

[Geoff Hayes]

Neha's comment moved here

So far my code SHOULD: place an x or o in the figure, depending on whose turn it is, IF THE box is empty. if the box is full, then it should flash red. But right now, all boxes are flashing red...

[Geoff Hayes]

When I run your code, the o or x is added to the square correctly. I do however see some errors related to

set(handles.turnNumber,'String','i+1')

Note that handles.turnNumber is not a handle to a GUI control but is an integer that you have initialized previously. Likewise

set(handles.whoseTurn, 'String', 'o');

is not a handle to a GUI control either. In both cases, you don't want to use set but a simple assignment

handles.turnNumber = handles.turnNumber + 1;
handles.whoseTurn  = 'o';

Your button press function then becomes

function handles = buttonPress(hObject,handles)
editString = get(hObject, 'String');
if isempty(editString)
    if strcmpi(handles.whoseTurn, 'x')
        set(hObject,'String','x')
        handles.whoseTurn = 'o';
        handles.turnNumber = handles.turnNumber + 1;
    else
        set(hObject,'String','o')
        handles.whoseTurn = 'x';
        handles.turnNumber = handles.turnNumber + 1;
    end
    guidata(hObject, handles);
else
    set(hObject,'BackgroundColor',[1,0,0]);
    pause(0.1);
    set(hObject,'BackgroundColor',[1,1,1]);
end

Note how I removed the for loop since I didn't think it necessary to always loop 9 times (one for each square?). Further note that whenever you update a member of the handles structure like you do with

handles.whoseTurn = 'o';

then you need to call

guidata(hObject, handles);

to ensure that the updated handles structure will be available for future calls to the function callbacks.

(You may also want to review your newGame_Callback function as it doesn't seem to clear the squares...the syntax

handles.([handles.rows{i} handles.cols{j}]).String = ' ';

seems like it belongs to MATLAB R2015 and greater (?).

[Neha Patel]

I still can't seem to get the x's and the o's to be placed. Nothing happens when I click besides it flashing red.

[Geoff Hayes]

You probably need to use the debugger. I also suspect that the command window is showing errors. Can you copy and paste the error to this question?

[Geoff Hayes]

Neha - there should be more to the error than that. What is happening at line 146 of B2_Callback?

[Neha Patel]

I removed the code for the error because now that I took out the irrelevant callback function, there is no more error when I run the GUI.

[Geoff Hayes]

and does the 'x' or 'o' appear? Perhaps you need to add a breakpoint in your buttonPress to see what happens...

[Neha Patel]

no, The x and o does not appear. The whoseturn does not change either.

[Walter Roberson]

We would need the .fig to test with

[Geoff Hayes]

i observe the 'x' and 'o' appearing with the attached, so am not sure what is causing a problem for you (Neha). I'm using MATLAB R2014a which may be a difference...

[Walter Roberson]

The code for checkWinner does not appear to be posted.

[Geoff Hayes]

neha still needs to implement that.