Making the piano keyboard

Let's now build the piano keyboard. All keys on the keyboard will be made using the Label widget. We will superimpose the label widget with an image of black and white keys using Tkinter's PhotoImage class.

The PhotoImage class is used to display images in label, text, button, and canvas widgets. We used it in Chapter 2, Making a Text Editor to add icons to buttons.  Since this class can only handle .gif or .bpm format images, we add four .gif images to a folder named pictures. These four images are black_key.gif, white_key.gif,  black_key_pressed.gif, and white_key_pressed.gif.

Since we will refer to these images over and over again,  we add their reference to 7.02constants.py: 

WHITE_KEY_IMAGE = '../pictures/white_key.gif'
WHITE_KEY_PRESSED_IMAGE = '../pictures/white_key_pressed.gif'
BLACK_KEY_IMAGE = '../pictures/black_key.gif'
BLACK_KEY_PRESSED_IMAGE = '../pictures/black_key_pressed.gif'

Note

The symbol ../  used previously is a way to specify a file path relative...