Need help with GUI creation

[Poochymama]

As the title says, I'm fairly new to c++ and I'm looking to expand my knowledge and grow myself as a programmer.

I've downloaded and installed the latest version of QT creator to help me with this as I was told on another forum that QT creator is a great IDE for GUI implementation.

My goal is to create a tic tac toe game in which the user will play against an AI that I will create.

Anyway, I'm in the process of setting up the ui layout. I have 9 push buttons set up in a 3x3 grid layout. My thought is that I will attach function calls to each of these buttons that will display an google chrome logo(or a IE logo depending) based on which button is pressed.

A few questions:

I'm assuming you can only output text/graphics to the display widgets, so is it possible to put a display widget on top of the button? Basically I want a pushable box that I can display an image too.

Also, I have no idea how to display an image to a graphicsViewBox and I can't find anything online really that helps

I have a functions that is attached to the first button that is called
buttonClickHandler1();

the implementation looks like this

void Tic_Tac_Toe::buttonClickHandler()
{
   ui->graphicsBox1->setBackgroundBrush(QPixmap("C:/Users/Richard/PicturesProgramming Images/Google-Chrome-Logo.jpg"));
    
}

but it doesn't seem to do anything. I'm at a loss and not really sure how to go about learning this process. I don't really have a deadline as this is pretty much just for fun/my learning, but any help would be greatly appreciated.

[Azagaros]

You are doing what I call a multiple state button..

Initialization I load a base picture on the button.

First click, put a X on the button

Second Click put a O on the button.

if you have set up your program correctly, the button click handler would change the state of the button. and the Paint function would display the correct image.

OnClick()
{
        // change my state....
        nState+=1;
        if(nState > 3)
             state = 1;
        // update my window.  Usually a Refresh() type command.
        // run my ai function.
}

OnPaint()
{
      switch(nState)
             case 1:
                   draw my empty window bitmap
             case 2:
                   draw my x .
             case 3:
                   draw my o.
       end switch.
}

The Above functions are these are done on the individual buttons.
If you have a button subclass, which means I have have a button inherited from a base button class, you put these in an array 1-9 and arrange them on the grid. Each button would keep track of its own state.

I hope I give you some Idea of the algorithm you are working on.

the bitmap for the drawn images would be in an image list of some form which is a member of the button subclass.

[Poochymama]

Thanks for the reply, I understand everything you wrote (it makes perfect sense), I'm just a little confused as to why I would need it.

I understand classes and objects and I've worked a bit with polymorphism and inherited classes, though it's been a few years and I may need to brush up on that a little. I think I just need a better understanding of this GUI stuff in general.

A few questions.

1. Under the design tab I can drag different button's/input boxes/display boxes onto the UI. Now if I'm understanding this correctly, whenever I drag an object, for example lets say I drag a push button into the UI box, that button is now an object(instantiation of button class) within the UI object. So in essence, would it be safe to say the push button is now a member of the UI class?

2. Is the purpose of the "->" much like the purpose of the "."

for example, typing
ui->

brings up a list of all the members of ui. For instance, if I drag and drop a push button onto the UI, it would look like
ui->pushButton

If I drag 2 pushButtons and a label onto the UI it would look like

ui->pushButton1
      pushButton2
      label

3. Why would I need to be able to change the state of the button for tic tac toe? Shouldn't it just be a one time thing? Once an X or O is displayed in a box, I see no reason why that box would need to be changed to the opposite. Shouldn't I just display X or O depending on which letter the user is and then clear the board at the end of the game?

4. How do I display a jpg image to a graphics box? The code I posted does nothing. I have 9 graphics display widgets on my UI, I also have 9 Push buttons off to the side. I want to make it so that when the first(top left) push button is clicked, a jpg image will display to the first graphics box. I created a function called buttonClickedHandler1() that controls what happens whenever the first push button is clicked. The code I have literally does nothing

void Tic_Tac_Toe::buttonClickHandler()
{
   ui->graphicsBox1->setBackgroundBrush(QPixmap("C:/Users/Richard/PicturesProgramming Images/Google-Chrome-Logo.jpg"));
    
}

if I change the command to
ui->graphicsBox1->close();
then the first graphics display widget disappears, so I at least know I'm accessing the right object. If I type
ui->graphicsBox2->close();
then the second graphics display widget disappears.

Am I using the wrong function? Am I passing the jpg image wrong? Basically, how do I display an image to graphicsBox1?

[Poochymama]

bump

[Azagaros]

Why you need it, it is the general flow of most gui programs out on the market.

In tic-tac-toe you have three states of a space; empty, x or o. Player would be either x or o and the ai would be the opposite. The board starts out as empty and it would be a 3x3 grid. Am I not correct in these thoughts?

Buttons/clicks of the mouse should handle data changes, not graphics. In other words I click a button, I change some data, then force A refresh of the window, in this case it would be the window containing the button, This is why I subclass the button to add functionality to it. This class would load three images into an array of some form, control how the button is drawn, specially to its needs.

Paints/window draw functions handle the Drawing things to the Screen. It would choose an image out of that list.

if your passing the image to the window, are you updating the window to draw it? To test load your program and put another program's window over it then activate your program. You image should be there after that, but it wasn't after you loading it.

All I would have to find is the Tic-tac-toe ai algorithms out there. They should be published.
Coding in wxWidgets in a crude form should take a day, following this logic pattern. wxWidgets is another library like QT.

http://www.ai-programming.com/ai_projects.htm has the source to one, and it uses an array of cells like I expected to.