{"id":13358,"date":"2023-08-18T15:22:00","date_gmt":"2023-08-18T13:22:00","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=13358"},"modified":"2023-09-17T20:29:12","modified_gmt":"2023-09-17T18:29:12","slug":"button-widget-in-pygame-updated","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/button-widget-in-pygame-updated\/","title":{"rendered":"Button widget in Pygame updated"},"content":{"rendered":"\n
\"\"<\/a><\/figure>\n\n\n\n

I made some changes to this code to add a command to every button in an easy way: adding a parameter as argument of the class Button that contains the function that does what that button is made for.<\/p>\n\n\n\n

Here is the code. If you do not provide a function as argument, there will be a warning telling you how to do it.<\/p>\n\n\n\n

When you run the script you get these buttons. They looks pretty and when you mouseover them they change the color. Ok, now let’s see what happens when we click the buttons (only the first one got the bind to the command function.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Here is what happens when you press the 3 button.<\/p>\n\n\n\n

The first one has the parameter (command1) to link it to the function command1. This function has the code to change the text of the button, from rome to pressed and also prints something on the terminal.<\/p>\n\n\n\n

When you press the other 2, you get the warning, because they haven’ assigned a function yet.<\/p>\n\n\n\n

Pretty \ud83d\ude0e, ah?<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

The bind method<\/h2>\n\n\n\n

I was thinking… why don’t add a binding method, alternative to passing the function as argument? Said and done. here is how you can bind the second button, for example:<\/p>\n\n\n\n

button3.bind(lambda: print(\"Hello\"))<\/pre>\n\n\n\n
This is alternative to the other method. You can alway also do:<\/p>\n\n\n\n
button2.command = (lambda: print(\"I am Milan button\"))<\/pre>\n\n\n\n
The result will be the same, but this way you can add or change the command even after the istanciation of the widget.<\/p>\n\n\n\n
import pygame, sys\n\n\n\ndef help_empty_command():\n\t''' function for buttons without command argument '''\n\tprint(f\"\"\"\n\t\t[WARNING]:\n\t\t\tYou have not assigned a function to\n\t \t\tyour button. Create a function called command2, for\n\t  \t\texample and add command2 as last parameter of the istance\n\t   \t\tof this buttonex:\n\t   \t\tbutton1 = Button('Rome',200,40,(100,200),5, command1))\"\"\")\n\nbuttons = []\nclass Button:\n\tdef __init__(self,text,width,height,pos,elevation, command=help_empty_command):\n\t\t#Core attributes \n\t\tself.pressed = False\n\t\tself.elevation = elevation\n\t\tself.dynamic_elecation = elevation\n\t\tself.original_y_pos = pos[1]\n\t\tself.command = command\n\n\t\t# top rectangle \n\t\tself.top_rect = pygame.Rect(pos,(width,height))\n\t\tself.top_color = '#475F77'\n\n\t\t# bottom rectangle \n\t\tself.bottom_rect = pygame.Rect(pos,(width,height))\n\t\tself.bottom_color = '#354B5E'\n\t\t#text\n\t\tself.text = text\n\t\tself.text_surf = gui_font.render(text,True,'#FFFFFF')\n\t\tself.text_rect = self.text_surf.get_rect(center = self.top_rect.center)\n\t\tbuttons.append(self)\n\n\tdef change_text(self, newtext):\n\t\tself.text_surf = gui_font.render(newtext, True,'#FFFFFF')\n\t\tself.text_rect = self.text_surf.get_rect(center = self.top_rect.center)\n\n\tdef bind(self, command):\n\t\tself.command = command\n\n\tdef draw(self):\n\t\t# elevation logic \n\t\tself.top_rect.y = self.original_y_pos - self.dynamic_elecation\n\t\tself.text_rect.center = self.top_rect.center \n\n\t\tself.bottom_rect.midtop = self.top_rect.midtop\n\t\tself.bottom_rect.height = self.top_rect.height + self.dynamic_elecation\n\n\t\tpygame.draw.rect(screen,self.bottom_color, self.bottom_rect,border_radius = 12)\n\t\tpygame.draw.rect(screen,self.top_color, self.top_rect,border_radius = 12)\n\t\tscreen.blit(self.text_surf, self.text_rect)\n\t\tself.check_click()\n\n\tdef check_click(self):\n\t\tmouse_pos = pygame.mouse.get_pos()\n\t\tif self.top_rect.collidepoint(mouse_pos):\n\t\t\tself.top_color = '#D74B4B'\n\t\t\tif pygame.mouse.get_pressed()[0]:\n\t\t\t\tself.dynamic_elecation = 0\n\t\t\t\tself.pressed = True\n\t\t\t\tself.change_text(f\"{self.text}\")\n\t\t\telse:\n\t\t\t\tself.dynamic_elecation = self.elevation\n\t\t\t\tif self.pressed == True:\n\t\t\t\t\tself.command()\n\t\t\t\t\tself.pressed = False\n\t\t\t\t\tself.change_text(self.text)\n\t\telse:\n\t\t\tself.dynamic_elecation = self.elevation\n\t\t\tself.top_color = '#475F77'\n\n\n\ndef command1():\n\tprint(\"The first button has some code\")\n\tbutton1.text = \"Pressed\"\n\n\npygame.init()\nscreen = pygame.display.set_mode((500,500))\npygame.display.set_caption('Gui Menu')\nclock = pygame.time.Clock()\ngui_font = pygame.font.Font(None,30)\n\nbutton1 = Button('Rome',200,40,(100,200),5, command1)\nbutton2 = Button('Milan',200,40,(100,250),5)\nbutton2.command = (lambda: print(\"I am Milan button\"))\nbutton3 = Button('Neaples',200,40,(100,300),5)\nbutton3.bind(lambda: print(\"Hello\"))\n\n\n\ndef buttons_draw():\n\tfor b in buttons:\n\t\tb.draw()\n\nwhile True:\n\tfor event in pygame.event.get():\n\t\tif event.type == pygame.QUIT:\n\t\t\tpygame.quit()\n\t\t\tsys.exit()\n\n\tscreen.fill('#DCDDD8')\n\tbuttons_draw()\n\n\tpygame.display.update()\n\tclock.tick(60)<\/pre>\n\n\n\n
The repository<\/h2>\n\n\n\n
https:\/\/github.com\/formazione\/pygame_button<\/a><\/p>\n\n\n\n
https:\/\/github.com\/formazione\/pygame_widgets<\/a><\/p>\n\n\n\n
A button using only surfaces and the class Sprite<\/h2>\n\n\n\n
import pygame\n\n\nscreen = pygame.display.set_mode((800, 600))\nbuttons = pygame.sprite.Group()\nclass Button(pygame.sprite.Sprite):\n    ''' Create a button clickable with changing hover color'''\n\n    def __init__(self, text=\"Click\",\n                pos=(0,0), fontsize=16,\n                colors=\"white on blue\", hover_colors=\"red on green\",\n                command=lambda: print(\"No command activated for this button\")):\n\n        super().__init__()\n        self.text = text\n        self.command = command\n        self.colors = colors\n        self.original_colors = colors\n        self.fg, self.bg = self.colors.split(\" on \")\n        self.fgh, self.bgh = hover_colors.split(\" on \")\n        self.font = pygame.font.SysFont(\"Arial\", fontsize)\n        self.pos = pos\n        self.create_original()\n        self.create_hover_image()\n\n    def create_original(self):\n        self.image = self.create_bg(self.text, self.fg, self.bg)\n        self.original_image = self.image.copy()\n\n\n    def create_hover_image(self):\n        self.hover_image = self.create_bg(self.text, self.fgh, self.bgh)\n        self.pressed = 1\n        buttons.add(self)\n\n\n    def create_bg(self, text, fg, bg):\n        self.text = text\n        image = self.font.render(self.text, 1, fg)\n        self.rect = image.get_rect()\n        self.rect.x, self.rect.y = self.pos\n        bgo = pygame.Surface((self.rect.w, self.rect.h))\n        bgo.fill(bg)\n        bgo.blit(image, (0,0))\n        return bgo\n\n\n    def update(self):\n        ''' CHECK IF HOVER AND IF CLICK THE BUTTON '''\n        if self.rect.collidepoint(pygame.mouse.get_pos()):\n            self.image = self.hover_image\n            self.check_if_click()\n        else:\n            self.image = self.original_image\n\n\n    def check_if_click(self):\n        ''' checks if you click on the button and makes the call to the action just one time'''\n        if self.rect.collidepoint(pygame.mouse.get_pos()):\n            if pygame.mouse.get_pressed()[0] and self.pressed == 1:\n                # print(\"Execunting code for button '\" + self.text + \"'\")\n                self.command()\n                self.pressed = 0\n            if pygame.mouse.get_pressed() == (0,0,0):\n                self.pressed = 1\n\n\nif __name__ == \"__main__\":\n# Hello, this is a snippet\n\n    pygame.init()\n\n    pygame.display.set_caption('Example of button')\n    screen = pygame.display.set_mode((1000, 800))\n    clock = pygame.time.Clock()\n\n    def window():\n        b1 = Button(\"CLICK ME\", pos=(100,100),\n            fontsize=36,\n            colors=\"red on green\",\n            hover_colors=\"green on red\",\n            command=lambda: print(\"clicked right now\"))\n\n\n    window()\n\n\n    is_running = True\n    while is_running:\n\n        for event in pygame.event.get():\n         if event.type == pygame.QUIT:\n             is_running = False\n\n        # to show buttons created\n        buttons.update()\n        buttons.draw(screen)\n\n        pygame.display.update()\n        clock.tick(60)\n\n    pygame.quit()<\/pre>\n\n\n\n
<\/p>\n\n\n\n
The old post<\/h2>\n\n\n\n
\n
How to make Buttons in pygame<\/a><\/blockquote>