How do I change the color of a button once it is clicked in Pygame?

Question

I have been working on this project, and I have created a selection screen with functions and events so that when the mouse hovers over a button it turns orange. But it being a selection screen, once a button is clicked I want it to stay highlighted to show that that item has being selected but I can't seem to figure out how to do this. Here is my code:

def button2(msg,x,y,w,h,ic,ac, action=None):

    mouse = pygame.mouse.get_pos()
    click = pygame.mouse.get_pressed()

    if x+w > mouse[0] > x and y+h > mouse[1] > y:
        pygame.draw.rect(gameDisplay, ac, (x,y,w,h))

        if click[0] == 1 and action != None:
            if action == "START":
                game_loop()
            elif action == "BACK":
                game_intro()
                quit()

            elif action == "Playstation 4":
                print("")
    else:
        pygame.draw.rect(gameDisplay, ic, (x,y,w,h))

    smallText = pygame.font.Font("freesansbold.ttf", 20)
    textSurf, textRect = text_objects(msg, smallText)
    textRect.center = ( (x+(w/2)), (y+(h/2)) )
    gameDisplay.blit(textSurf, textRect)

#Selection Screen
def game_select_items_menu():

    mouse = pygame.mouse.get_pos()
    click = pygame.mouse.get_pressed()

    gameSelectItems = False
    while not gameSelectItems:

        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                pygame.quit()
                quit()

        blank_image(x, y)

        button2("Xbox One", 374, 60, 168, 48, white, orange,"Xbox One") #XBOX ONE - BUTTON (TOP ROW)

        button2("Playstation 4", 200, 60, 168, 48, white, orange,"Playstation 4")#PLAYSTATION 4 - BUTTON (TOP ROW)

        button("Kettle", 30, 60, 163, 48, white, orange)#Kettle - BUTTON (TOP ROW)

        button("Lewi Jeans", 374, 160, 168, 48, white, orange)#LEWI JEANS - BUTTON(SECOND ROW)

        button("MacBook", 200, 160, 168, 48, white, orange)#MACBOOK - BUTTON (SECOND ROW)

        button("Samsung TV", 30, 160, 163, 48, white, orange)#SAMSUNG TV - BUTTON (SECOND ROW)

        button("Nike Air Max", 374, 250, 168, 48, white, orange)#NIKE AIR MAX - BUTTON (THIRD ROW)

        button("Tablet", 200, 250, 168, 48, white, orange)#TABLET - BUTTON (THIRD ROW)

        button("Perfume", 30, 250, 163, 48, white, orange)#PERFUME - BUTTON (THIRD ROW)

        #button("", 30, 340, 300, 150, white, orange)#Print Box

       #Bottom buttons(Start,Back)

        button2("START", 374, 370, 163, 48, green, green_bright, "START")#START - BUTTON (BOTTOM)

        button2("BACK", 374, 430, 163, 48, green, green_bright, "BACK")#BACK - BUTTON (BOTTOM)

        pygame.display.update()

        clock.tick(80) #Setting the fps

@JeD Thank you so much it actually works. I knew it was something simple but i just couldnt think of the syntax for it. I also need help on something else if you don't mind and that will be it. — Justin Leslie, Mar 02 '16 at 17:44

Jan · Accepted Answer · 2016-03-03T19:54:33.830

-1

global clickedButtons,sumOfCosts,textDisp
clickedButtons=[]
sumOfCosts=[0,0]
textDisp = None

def addCostsAndDisplay(msg,cost,weight):
    global sumOfCosts
    sumOfCosts[0]+=cost
    sumOfCosts[1]+=weight

    basicfont = pygame.font.SysFont(None, 48)
    text = basicfont.render('adding '+str(msg)+' adds up to '+str(sumOfCosts[0])+' and weighs '+str(sumOfCosts[1]), True, (255, 0, 0), (255, 255, 255))

    return text

def button2(msg,x,y,w,h,ic,ac,cost=1,weight=1, action=None):
    global clickedButtons,textDisp
    mouse = pygame.mouse.get_pos()
    click = pygame.mouse.get_pressed()


    if x+w > mouse[0] > x and y+h > mouse[1] > y:
        pygame.draw.rect(gameDisplay, ac, (x,y,w,h))

        if click[0] == 1 and action != None:
            if not (msg in clickedButtons):
                #Save that this button has been clicked
                clickedButtons.append(msg)
                textDisp=addCostsAndDisplay(msg,cost,weight)
            if action == "START":
                game_loop()
            elif action == "BACK":
                game_intro()
                quit()

            elif action == "Playstation 4":
                print("")
    else:
        #Check if this button has been clicked
        if (msg in clickedButtons):
            pygame.draw.rect(gameDisplay, ac, (x,y,w,h))
        else:
            pygame.draw.rect(gameDisplay, ic, (x,y,w,h))

    smallText = pygame.font.Font("freesansbold.ttf", 20)
    textSurf, textRect = text_objects(msg, smallText)
    textRect.center = ( (x+(w/2)), (y+(h/2)) )
    gameDisplay.blit(textSurf, textRect)

#Selection Screen
def game_select_items_menu():
    global textDisp
    mouse = pygame.mouse.get_pos()
    click = pygame.mouse.get_pressed()

    gameSelectItems = False
    while not gameSelectItems:

        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                pygame.quit()
                quit()

        blank_image(x, y)
        if (not textDisp is None):

            screen=pygame.display.get_surface()
            textRect=textDisp.get_rect()
            textRect.centerx = x
            textRect.centery = y
            screen.blit(textDisp,textRect)

        button2("Xbox One", 374, 60, 168, 48, white, orange,10,20,"Xbox One") #XBOX ONE - BUTTON (TOP ROW)

        button2("Playstation 4", 200, 60, 168, 48, white, orange,20,20"Playstation 4")#PLAYSTATION 4 - BUTTON (TOP ROW)

        button("Kettle", 30, 60, 163, 48, white, orange)#Kettle - BUTTON (TOP ROW)

        button("Lewi Jeans", 374, 160, 168, 48, white, orange)#LEWI JEANS - BUTTON(SECOND ROW)

        button("MacBook", 200, 160, 168, 48, white, orange)#MACBOOK - BUTTON (SECOND ROW)

        button("Samsung TV", 30, 160, 163, 48, white, orange)#SAMSUNG TV - BUTTON (SECOND ROW)

        button("Nike Air Max", 374, 250, 168, 48, white, orange)#NIKE AIR MAX - BUTTON (THIRD ROW)

        button("Tablet", 200, 250, 168, 48, white, orange)#TABLET - BUTTON (THIRD ROW)

        button("Perfume", 30, 250, 163, 48, white, orange)#PERFUME - BUTTON (THIRD ROW)

        #button("", 30, 340, 300, 150, white, orange)#Print Box

       #Bottom buttons(Start,Back)

        button2("START", 374, 370, 163, 48,green, green_bright,0,0  "START")#START - BUTTON (BOTTOM)

        button2("BACK", 374, 430, 163, 48, green, green_bright,0,0  "BACK")#BACK - BUTTON (BOTTOM)

        pygame.display.update()

        clock.tick(80) #Setting the fps

Change these lines to change the coordinates of the text (They are close to the end)

textRect.centerx = x
textRect.centery = y

Try it out.

edited Mar 03 '16 at 19:54

answered Mar 02 '16 at 17:19

Jan

1,504
10
15

Thank you so much it actually works. I knew it was something simple but i just couldnt think of the syntax for it. I also need help on something else if you don't mind and that will be it. – Justin Leslie Mar 02 '16 at 17:36
@JustinLeslie Tell me^^ – Jan Mar 02 '16 at 17:57
So for my Univeristy project I have taken it upon myself to create a selection screen with various different items. What I want my selection screen to do is once a button is pressed (Item) i want it to display the weight, price of the items pressed and i want it to add up each of them and display it within a white box on my GUI. I haven't been able to find anything on the internet to do this so i really need some help on this if this is actually possible. (I was going to post this somewhere else) @jed – Justin Leslie Mar 02 '16 at 18:40
If I'm seeing this right you already display the name of a selected item, right? The you need to get the price and weight from somewhere. Add another list just like clickedButtons=[] and make it global. Call it priceAndWeight=[0,0] or something. The when a button is clicked add the price to the first entry and weight to the second one. – Jan Mar 02 '16 at 18:46
Yeah the Item name is on the button but what i want to happen is when that button is pressed. For example the Xbox One button I want it to print ("Weight = 120kg and price £310") at the bottom of the GUI in a white box that i have created,this should be near the bottom of the list in the code. I also want it to add things up so Xbox one is "£310" and and the Playstation 4 is £210". All this will add up to £520, hopefully you get what i want to try and achieve here. @jed – Justin Leslie Mar 02 '16 at 19:17
@JustinLeslie Have already added the adding up Now you just need to use the .blit function similar to the button to display the information – Jan Mar 02 '16 at 19:24
It says Unresolved Refference "Weight" and the same for "price" @jed – Justin Leslie Mar 02 '16 at 19:31
Do i put the price and weight in these square brackets [ ] and if so how would i get it to print in the area I want it to on the GUI? @jed – Justin Leslie Mar 02 '16 at 19:36
Uff okay, it seems you are really new to python... To display text : https://sivasantosh.wordpress.com/2012/07/18/displaying-text-in-pygame/ You have to figure out where you save the price and weight for each item. Like, how does the program know how much a ps3 costs? – Jan Mar 02 '16 at 19:45
I really dont know, at this momment and time i am confused and yes i am kind of new to python and i am still learning. I thought it would be just a simple line of code. When the Xbox one button is pressed it prints the weight that i have selected and the price in the selected area i have chosen. I was thinking of a function so when "Xbox" is clicked on it prints.... Do you get where i am coming from? button2("Playstation 4", 200, 60, 168, 48, white, orange, "Playstation 4") Maybe you could save it here, I don't know. :( @jed – Justin Leslie Mar 02 '16 at 20:10
It works but the text displays at the top of the screen where can i change it so the text display at this place? 30, 340, 300, 150. So it basically displays at the bottom of the GUI where 30, 340, 300, 150. I forgot which one is where it is placed @jed – Justin Leslie Mar 02 '16 at 21:14
You still there @jed – Justin Leslie Mar 03 '16 at 19:52
Yeah sorry forgot to tell you. I edited answer, there are two lines which you can change to move the button to the right place.@JustinLeslie – Jan Mar 03 '16 at 19:54
textRect.centerx = x textRect.centery = y Is this what you are on a bout ? @jed – Justin Leslie Mar 03 '16 at 20:44
How do you change the size of it cause it is tooo big for my screen at the momment @jed – Justin Leslie Mar 03 '16 at 20:52
*.* No idea... try googling ;) – Jan Mar 03 '16 at 21:03
I think i figured it out now. Thank you for helping me i really appreciate it @jed – Justin Leslie Mar 03 '16 at 21:19
No Problem! I hope everything works out good for you ;) @JustinLeslie – Jan Mar 03 '16 at 21:20

score -1 · Answer 2 · edited Mar 02 '16 at 20:03

global clickedButtons,priceAndWeight
clickedButtons=[]
priceAndWeight=[250, 150]

def button2(msg,x,y,w,h,ic,ac, action=None):
    global clickedButtons
    mouse = pygame.mouse.get_pos()
    click = pygame.mouse.get_pressed()

    if click[0] == 1 and action != None:
        if not (msg in clickedButtons):
            # Save that this button has been clicked
            clickedButtons.append(msg)
            # Add price and weight (You need to get price and weight frome somewhere)
            global priceAndWeight
            priceAndWeight[0] = priceAndWeight[0] + price
            priceAndWeight[1] = priceAndWeight[1] + weight
        elif action == "Playstation 4":
            print("")
    else:
        #Check if this button has been clicked
        if (msg in clickedButtons):
            pygame.draw.rect(gameDisplay, ac, (x,y,w,h))
        else:
            pygame.draw.rect(gameDisplay, ic, (x,y,w,h))
    smallText = pygame.font.Font("freesansbold.ttf", 20)
    textSurf, textRect = text_objects(msg, smallText)
    textRect.center = ( (x+(w/2)), (y+(h/2)) )
    gameDisplay.blit(textSurf, textRect)

How do I change the color of a button once it is clicked in Pygame?

2 Answers2

Linked