Text box render on top of main code in pygame?

Question

I have implemented text box code to my simulation but now it is not rendering the main code, or rendering on top of my main code so nothing is displayed but the box :(

Here is my text box code :

def textbox(font20):
    input_box = pygame.Rect(300,225,400,100)
    color_inactive =(TURQUOISE)
    color_active = (0,255,249)
    color = color_inactive
    active = False
    text = ""
    done = False
    font = font20
    while not done:
        for event in pygame.event.get():
            
            if event.type == pygame.MOUSEBUTTONDOWN:
                if input_box.collidepoint(event.pos):
                    active = not active
                else:
                    active = False
                color = color_active if active else color_inactive
            if event.type == pygame.KEYDOWN:
                if active:
                    if event.key == pygame.K_RETURN:
                        print(text)
                        text = ""
                        done = True
                    elif event.key == pygame.K_BACKSPACE:
                        text = text[:-1]
                    else:
                        text += event.unicode
                # Render the current text.
        text_surface = font.render(text, True, color)
        # Resize the box if the text is too long.
        width = max(200, text_surface.get_width()+10)
        input_box.w = width
        # Blit the text.
        screen.blit(text_surface, (input_box.x+5, input_box.y+5))
        # Blit the input_box rect.
        pygame.draw.rect(screen, color, input_box, 2)

        pygame.display.flip()

I also screen.blit to turquoise at the bottom where I draw the screen and flip it.

score 0 · Answer 1 · answered Nov 28 '20 at 18:58

Did you remember to click in the box? ;)

There's also a bunch of minor issues:

The code doesn't have a definition for TURQUOISE.
The loop didn't handle the pygame.QUIT event.
- It also needs to propagate this event to the outer-loop
As the box grew, it made a mess, I added a black rectangle to erase the old.
It did not return the text value.

With all these, quite minor, bugs fixed, it works pretty well. But just remember to click in the box first!

import pygame

# Window size
WINDOW_WIDTH    = 400
WINDOW_HEIGHT   = 400

### initialisation
pygame.init()
screen = pygame.display.set_mode( ( WINDOW_WIDTH, WINDOW_HEIGHT ) )
pygame.display.set_caption("Text Box Test")

BLACK     = (0,0,0)
TURQUOISE = (0,154,196)
CYAN      = (0,255,249)

def textbox(font20):
    #input_box = pygame.Rect(300,225,400,100)
    input_box = pygame.Rect(10,10,400,100)
    color_background = BLACK      # for erasing
    color_inactive   = TURQUOISE
    color_active     = CYAN
    color            = color_inactive
    active = False
    text   = ""
    done   = False
    font   = font20
    while not done:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                pygame.event.post( pygame.event.Event( pygame.QUIT ) )    # re-send the quit event to the next loop
                done = True
            elif event.type == pygame.MOUSEBUTTONDOWN:
                if input_box.collidepoint(event.pos):
                    active = not active
                else:
                    active = False
                color = color_active if active else color_inactive
            elif event.type == pygame.KEYDOWN:
                if active:
                    if event.key == pygame.K_RETURN:
                        print(text)
                        #text = ""
                        done = True
                    elif event.key == pygame.K_BACKSPACE:
                        text = text[:-1]
                    else:
                        text += event.unicode
                    print( "DEBUG: text is now [%s]" % ( text ) )
                # Render the current text.
        text_surface = font.render(text, True, color)
        # Resize the box if the text is too long.
        width = max(200, text_surface.get_width()+10)
        input_box.w = width
        # Blit the input_box rect.
        pygame.draw.rect(screen, color_background, input_box) # filled box to clear the old one
        pygame.draw.rect(screen, color, input_box, 2)
        # Blit the text.
        screen.blit(text_surface, (input_box.x+5, input_box.y+5))

        pygame.display.flip()

    return text


font = pygame.font.SysFont('', 24)
textbox( font )

pygame.quit()

Text box render on top of main code in pygame?

1 Answers1