How do I display a keyboard on-screen?

Question

My problem is that I want to show a keyboard to users that shows all keys on the keyboard and highlights certain keys. For my purpose, I want to show:

• some keys with black backgrounds
• some keys with white backgrounds
• and some keys with grey backgrounds

The black and white keys will be playable as piano keys in a program that I'm working on. Some context is that I am already using pygame to detect key press input.

Also the keyboard that users have on t heir computer varies. It can be qwerty azerty depending upon their hardware.

When I looked into the pygame docs they only provide general primitives like drawing sprites, putting them in groups etc. I don't see any pre-baked resources for a keyboard.

Answer 1

One can do this by using the python library keyboardlayout. Using it one can show an qwerty or azerty layout and this example highlights specifc keys by passing in the overrides argument. It works with pygame and tkinter.

Here's how you use it:

1. Decide which layout you want to show, qwerty or azerty_laptop. That is the layout_name input
2. Decide how big you want your keyboard to be. You control the size by setting the size of a single letter key, and that size (and a padding input) determines the whole keyboard size. The size input for a key is letter_key_size and it needs you to pass in (width_size_px, height_size_px).
3. Decide what settings you want for the keyboard. Specifically, where (x, y) do you want it, what color should it be, what padding should it have in pixels? All of those settings are stored in the KeyboardInfo class instance. Remember that in pygame, (0, 0) is the top left and x increases to the right and y increases moving downward.
4. Decide what settings you want to use display the keys, specifically: margin between keys in pixels, background color, text color, font, and padding from the key edges to the text in pixels. All of that info is stored in the KeyInfo class instance.
5. Once you instantiate KeyInfo, KeyboardInfo, and set letter_key_size and layout_name you use that information to instantiate an actual KeyboardLayout class instance. That instance contains the keyboard image that you want to draw. It's also a pygame.sprite.Group so to display it we use the normal pygame method sprite_group.draw(screen).

Gathering that all together and putting it into action we get:

import keyboardlayout as kl
import pygame

layout_name = 'qwerty'
pygame.init()

# set the letter key size in pixels
key_size = 60
grey = pygame.Color('grey')
# set the keyboard position and color info
keyboard_info = kl.KeyboardInfo(
    position=(0, 0),
    padding=2,
    color=~grey
)
# set the letter key color, padding, and margin info in px
key_info = kl.KeyInfo(
    margin=10,
    color=grey,
    txt_color=~grey,  # invert grey
    txt_font=pygame.font.SysFont('Arial', key_size//4),
    txt_padding=(key_size//6, key_size//10)
)
# set the letter key size info in px
letter_key_size = (key_size, key_size)  # width, height
keyboard_layout = kl.KeyboardLayout(
    layout_name,
    keyboard_info,
    letter_key_size,
    key_info
)
# set the pygame window to the size of the keyboard
screen = pygame.display.set_mode(
    (keyboard_layout.rect.width, keyboard_layout.rect.height))
screen.fill(pygame.Color('black'))

# draw the keyboard on the pygame screen
keyboard_layout.draw(screen)
pygame.display.update()

# loop until the user closes the pygame window
running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.display.quit()
            running = False

pygame.quit()

Here are some samples of what it can do: