trying creating dropdown menu pygame, but got stuck

by

The menu title, the options and the status of the menus should be attributes of the DropDownclass:

class DropDown():

    def __init__(self, color_menu, color_option, x, y, w, h, font, main, options):
        self.color_menu = color_menu
        self.color_option = color_option
        self.rect = pg.Rect(x, y, w, h)
        self.font = font
        self.main = main
        self.options = options
        self.draw_menu = False
        self.menu_active = False
        self.active_option = -1

    # [...]

list1 = DropDown(
    [COLOR_INACTIVE, COLOR_ACTIVE],
    [COLOR_LIST_INACTIVE, COLOR_LIST_ACTIVE],
    50, 50, 200, 50, 
    pg.font.SysFont(None, 30), 
    "Select Mode", ["Calibration", "Test"])

The class should have a draw method that draws the entire menu:

class DropDown():
    # [...]

    def draw(self, surf):
        pg.draw.rect(surf, self.color_menu[self.menu_active], self.rect, 0)
        msg = self.font.render(self.main, 1, (0, 0, 0))
        surf.blit(msg, msg.get_rect(center = self.rect.center))

        if self.draw_menu:
            for i, text in enumerate(self.options):
                rect = self.rect.copy()
                rect.y += (i+1) * self.rect.height
                pg.draw.rect(surf, self.color_option[1 if i == self.active_option else 0], rect, 0)
                msg = self.font.render(text, 1, (0, 0, 0))
                surf.blit(msg, msg.get_rect(center = rect.center))

The class should have an update method that receives the events, changes the status of the menus, and returns the index of the selected option:

class DropDown():
    # [...]

    def update(self, event_list):
        mpos = pg.mouse.get_pos()
        self.menu_active = self.rect.collidepoint(mpos)
        
        self.active_option = -1
        for i in range(len(self.options)):
            rect = self.rect.copy()
            rect.y += (i+1) * self.rect.height
            if rect.collidepoint(mpos):
                self.active_option = i
                break

        if not self.menu_active and self.active_option == -1:
            self.draw_menu = False

        for event in event_list:
            if event.type == pg.MOUSEBUTTONDOWN and event.button == 1:
                if self.menu_active:
                    self.draw_menu = not self.draw_menu
                elif self.draw_menu and self.active_option >= 0:
                    self.draw_menu = False
                    return self.active_option
        return -1

while run:

    event_list = pg.event.get()
    for event in event_list:
        # [...]

    selected_option = list1.update(event_list)
    if selected_option >= 0:
        # [...]

    # [...]

Complete example:

import pygame as pg

class DropDown():

    def __init__(self, color_menu, color_option, x, y, w, h, font, main, options):
        self.color_menu = color_menu
        self.color_option = color_option
        self.rect = pg.Rect(x, y, w, h)
        self.font = font
        self.main = main
        self.options = options
        self.draw_menu = False
        self.menu_active = False
        self.active_option = -1

    def draw(self, surf):
        pg.draw.rect(surf, self.color_menu[self.menu_active], self.rect, 0)
        msg = self.font.render(self.main, 1, (0, 0, 0))
        surf.blit(msg, msg.get_rect(center = self.rect.center))

        if self.draw_menu:
            for i, text in enumerate(self.options):
                rect = self.rect.copy()
                rect.y += (i+1) * self.rect.height
                pg.draw.rect(surf, self.color_option[1 if i == self.active_option else 0], rect, 0)
                msg = self.font.render(text, 1, (0, 0, 0))
                surf.blit(msg, msg.get_rect(center = rect.center))

    def update(self, event_list):
        mpos = pg.mouse.get_pos()
        self.menu_active = self.rect.collidepoint(mpos)
        
        self.active_option = -1
        for i in range(len(self.options)):
            rect = self.rect.copy()
            rect.y += (i+1) * self.rect.height
            if rect.collidepoint(mpos):
                self.active_option = i
                break

        if not self.menu_active and self.active_option == -1:
            self.draw_menu = False

        for event in event_list:
            if event.type == pg.MOUSEBUTTONDOWN and event.button == 1:
                if self.menu_active:
                    self.draw_menu = not self.draw_menu
                elif self.draw_menu and self.active_option >= 0:
                    self.draw_menu = False
                    return self.active_option
        return -1

pg.init()
clock = pg.time.Clock()
screen = pg.display.set_mode((640, 480))

COLOR_INACTIVE = (100, 80, 255)
COLOR_ACTIVE = (100, 200, 255)
COLOR_LIST_INACTIVE = (255, 100, 100)
COLOR_LIST_ACTIVE = (255, 150, 150)

list1 = DropDown(
    [COLOR_INACTIVE, COLOR_ACTIVE],
    [COLOR_LIST_INACTIVE, COLOR_LIST_ACTIVE],
    50, 50, 200, 50, 
    pg.font.SysFont(None, 30), 
    "Select Mode", ["Calibration", "Test"])

run = True
while run:
    clock.tick(30)

    event_list = pg.event.get()
    for event in event_list:
        if event.type == pg.QUIT:
            run = False

    selected_option = list1.update(event_list)
    if selected_option >= 0:
        list1.main = list1.options[selected_option]

    screen.fill((255, 255, 255))
    list1.draw(screen)
    pg.display.flip()
    
pg.quit()
exit()

See also UI elements

More Related Contents:

  1. How to blit a random image from a list Pygame [duplicate]
  2. Faster version of ‘pygame.event.get()’. Why are events being missed and why are the events delayed?
  3. Pygame already installed; however, python terminal says “No module named ‘pygame’ ” (Ubuntu 20.04.1)
  4. Lag when win.blit() background pygame
  5. Cannot install pygame in Pycharm
  6. Pygame is running slow
  7. jumping too fast?
  8. Image rotation while moving
  9. How do I detect if the mouse is hovering over a button? PyGame button class is not displaying the text or changing colour on hover
  10. How do I create animated sprites using Sprite Sheets in Pygame?
  11. How to get if a key is pressed pygame [duplicate]
  12. Is it possible to change sprite colours in Pygame?
  13. Trying to delay a specific function for spawning enemy after a certain amount of time
  14. How to display an image after a time interval?
  15. how to know pygame.Rect’s side that collide to other Rect?
  16. How do I use a PyGame timer event? How to add a clock to a pygame screen using a timer?
  17. Is it possible to make the keyboard module work with pygame and threading
  18. problems with pygame controller support
  19. Scale Everything On Pygame Display Surface
  20. How to move a sprite according to an angle in Pygame
  21. How to implement barriers to stop the player moving through walls
  22. Pygame make sprite walk in given rotation
  23. How to install pygame? [duplicate]
  24. How to zoom in and out of an image pygame and using the mousposition as the center of the zoom
  25. How do I add an image as texture of my 3D cube in pyopengl
  26. How to move the background image with keys in pygame?
  27. Setting a fixed FPS in Pygame, Python 3
  28. How to fix this DeprecationWarning
  29. What is the difference between super() with arguments and without arguments?
  30. How do I change the volume of the sound or music in PyGame?

Leave a Comment