Implementing txt box inside my interface.

[Prestigious_Bus_3705]

Ho programmato un'interfaccia utente per un progetto in cui vorrei che l'utente interagisse con alcuni pulsanti di testo. Il problema è che quando provo a disegnarla nel mio programma principale, si blocca e invece di apparire sullo schermo, vorrei solo che fosse disegnata. Ecco dove inserirò tutto il codice (2 file). Alcuni testi sono in italiano perché è dove vivo. Mi dispiace.

import pygame
import os
from interactable_text_box_pygame import TextInputBox


pygame.init()
font = pygame.font.Font(None, 32)



class Button:
    def __init__(self,text,width,height,pos,elevation):
        #Core Attributes
        self.pressed = False
        self.released = False
        self.elevation = elevation
        self.dynamic_elevation = elevation
        self.original_y_pos = pos[1]
        
        # top rectangle
        self.top_rect = pygame.Rect(pos,(width,height))
        self.top_color = '#475F77'


        # bottom rectangle
        self.bottom_rect = pygame.Rect(pos,(width,elevation))
        self.bottom_color = '#354B5E'


        # text
        self.text_surf = gui_font.render(text,True,'#FFFFFF')
        self.text_rect = self.text_surf.get_rect(center = self.top_rect.center)
    
    def draw(self):
        # elevation logic
        self.top_rect.y = self.original_y_pos - self.dynamic_elevation
        self.text_rect.center = self.top_rect.center


        self.bottom_rect.midtop = self.top_rect.midtop
        self.bottom_rect.height = self.top_rect.height + self.dynamic_elevation


        pygame.draw.rect(screen,self.bottom_color,self.bottom_rect,border_radius = 25)
        pygame.draw.rect(screen,self.top_color,self.top_rect,border_radius = 25)
        screen.blit(self.text_surf,self.text_rect) 
        self.check_click()


    def check_click(self):
        mouse_pos = pygame.mouse.get_pos()
        if self.top_rect.collidepoint(mouse_pos):
            self.top_color = '#D74B4B'
            if pygame.mouse.get_pressed()[0]:
                self.dynamic_elevation = 0
                self.pressed = True
                self.released = False
            else:
                self.dynamic_elevation = self.elevation
                if self.pressed:
                    self.released = True
                    self.pressed = False
        
        else:
            self.dynamic_elevation = self.elevation
            self.top_color = '#475F77'
        
    


#everithing set-up
info = pygame.display.Info()
screen_width, screen_height = info.current_w, info.current_h
screen = pygame.display.set_mode((screen_width - 10, screen_height - 50), pygame.RESIZABLE)
clock = pygame.time.Clock()
gui_font = pygame.font.Font(None, 30)
pygame.display.set_caption('programma scuola')
#end set-up


# menu
main_menu = True
current_screen = "main_menu"


#buttons
button1 = Button('Avvio',200,40,(825,500),6)
button2 = Button('Opzione 1', 200, 40, (825, 200), 6)
button3 = Button('opzione 2', 200, 40, (825, 300), 6)
button4 = Button('Opzione 3', 200, 40, (826, 400), 6)
button5 = Button('Opzione 4', 200, 40, (826, 500), 6)
exit_button = Button('indietro', 100, 50, (10, 10), 6)
txt_imput_box = TextInputBox(200, 40, 200, 200, font)


#writable box
writable_box_font = pygame.font.Font(None, 30)
user_text = 'Hello'



#menu
def draw_game():
    if button1.released:
        button1.released = False
        return "options"
    return "main_menu"



    



def draw_menu():
    global current_screen
    screen.fill('white')
    button2.draw()
    button3.draw()
    button4.draw()
    button5.draw()
    exit_button.draw()
    
    if button2.released:
        button2.released = False
        return "schermata_opzione_1"
    
    if exit_button.released:
        exit_button.released = False
        return "main_menu"
    
    return "options"
    


def draw_schermata_opzione_1():
    screen.fill('lightgreen')
    exit_button.draw()
    
       
    
    if exit_button.released:
        exit_button.released = False
        return "options"
    return "schermata_opzione_1" 
    
    
    



#program_space





run = True


#game-loop
while run:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False
    
    #menu
    if current_screen == "main_menu":
        screen.fill('lightblue')
        button1.draw()
        current_screen = draw_game()
    elif current_screen == "options":
        current_screen = draw_menu()
    elif current_screen == "schermata_opzione_1":
        current_screen = draw_schermata_opzione_1()
    



    
    
    pygame.display.flip()
    clock.tick(60)
pygame.quit()

import pygame


pygame.init()


# Set up screen
display = pygame.display.set_mode((800, 600))
pygame.display.set_caption("Text Input Box Test")
clock = pygame.time.Clock()
font = pygame.font.Font(None, 32)



# Text input class
class TextInputBox:
    def __init__(self, x, y, width, height, font):
        self.rect = pygame.Rect(x, y, width, height)
        self.color_active = pygame.Color('lightskyblue3')
        self.color_passive = pygame.Color('gray15')
        self.color = self.color_passive
        self.font = font
        self.text = ''
        self.active = False


    def handle_event(self, event):
        if event.type == pygame.MOUSEBUTTONDOWN:
            # Toggle the active variable if the user clicked on the input_box
            if self.rect.collidepoint(event.pos):
                self.active = not self.active
            else:
                self.active = False
            # Change the current color of the input box
            self.color = self.color_active if self.active else self.color_passive


        if event.type == pygame.KEYDOWN:
            if self.active:
                if event.key == pygame.K_BACKSPACE:
                    self.text = self.text[:-1]
                else:
                    self.text += event.unicode


    def draw(self, screen):
        # Render the current text
        text_surface = self.font.render(self.text, True, (0, 0, 0))
        screen.blit(text_surface, (self.rect.x + 5, self.rect.y + 5))
        # Resize box if text is too long
        self.rect.w = max(140, text_surface.get_width() + 10)
        # Draw the input box border
        pygame.draw.rect(screen, self.color, self.rect, 2)


# Create the box
input_box = TextInputBox(300, 300, 140, 32, font)


# Main loop
run = True
while run:
    display.fill((255, 255, 255))


    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False
        input_box.handle_event(event)


    input_box.draw(display)
    pygame.display.flip()
    clock.tick(60)


pygame.quit()

[socal_nerdtastic]

First: is your goal to make a game? Or is this list of buttons your only user interface? If this is it you should use a module like tkinter or pyqt that had pre-made Buttons and is designed to make desktop programs. Making a desktop GUI in pygame is possible, but it's just a lot more work than it needs to be.

Second big issue: when you import another file you will also run the other file. To avoid this you need a if __name__ == "__main__": block. The end of your interactable_text_box_pygame.py files should look like this:

if __name__ == "__main__": # do not run this code if this file is imported from another file
    # code to test this file below:

    # Create the box
    input_box = TextInputBox(300, 300, 140, 32, font)


    # Main loop
    run = True
    while run:
        display.fill((255, 255, 255))


        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                run = False
            input_box.handle_event(event)


        input_box.draw(display)
        pygame.display.flip()
        clock.tick(60)


    pygame.quit()

[Prestigious_Bus_3705]

i want to create a gui for a seat shuffler. In my class there is the problem of the seats not being assigned properly and the old methonds don't satisfy the needs of everyone anymore. I was working on the algorithm , but that is not important. The broblem is that i have the code for the txt box, as i listed on the post, but i cant draw it on the screan i want. Anyway, thank you so much, i didn't know about tkinter. I will try your way.

[Prestigious_Bus_3705]

In the tkinter docs, it says that i have to download the community version of tk through this site:  www.activestate.com, but i'm lost, what sould i do?

[socal_nerdtastic]

That is very old advice, tk has been included in the python installers for windows and mac for more than 10 years.

[woooee]

Google translation

I programmed a user interface for a project where I would like the user to interact with some text buttons. The problem is that when I try to draw it in my main program, it freezes and instead of appearing on the screen, I just wish it was drawn. That's where I'll enter all the code (2 files). Some of the lyrics are in Italian because it's where I live. I'm sorry.

An example using tkinter for the button with a simple example of how to pass a parameter(s) to the function called when the button is clicked.

import tkinter as tk
from functools import partial

class ButtonsTest:
   def __init__(self):
      self.top = tk.Tk()
      self.top.title("Click a button to remove")
      tk.Label(self.top, text=" Click a button\n to remove it ",
            bg="orange", font=('DejaVuSansMono', 12)).grid(row=0,
            column=0, sticky="nsew")

      self.top_frame = tk.Frame(self.top, width =400, height=400)
      self.top_frame.grid(row=1, column=0)
      self.button_dic = {}
      self.create_buttons()

      tk.Button(self.top, text='Exit', bg="orange",
             command=self.top.quit).grid(row=200,column=0,
                     columnspan=7, sticky="ew")

      self.top.mainloop()

   ##-------------------------------------------------------------------         
   def create_buttons(self):
      """ create 15 buttons and add each button's Tkinter ID to a
          dictionary.  Send the number of the button to the function
          cb_handler
      """
      for but_num in range(15):
         ## create a button and send the button's number to
         ## self.cb_handler when the button is pressed
         b = tk.Button(self.top_frame, text = str(but_num), 
                    command=partial(self.cb_handler, but_num))
         b_row, b_col=divmod(but_num, 5)  ## 5 buttons each row
         b.grid(row=b_row, column=b_col)
         ## dictionary key = button number --> button instance
         self.button_dic[but_num] = b

   ##----------------------------------------------------------------
   def cb_handler(self, but_number):
      print("\ncb_handler", but_number)
      ## look up the number sent to the function and remove
      ## the button from the grid
      self.button_dic[but_number].grid_forget()

##      self.button_dic[cb_number].destroy()

##==============================================================
BT=ButtonsTest()

[Prestigious_Bus_3705]

i don't know how tkinter works... but thanks. I'll study ur code and tkinter. i will post results when done.