06.

03 Keyboard Interaction
We return to pure graphics programming, and leave GUI programming behind, to look at the
next topic, keyboard interaction.

When using the IDE to write code, we use the keyboard – we type things in, and things show up
on the screen. That is the expected behaviour of programs for the most part, and so the
standard input device for computers is the keyboard (you might have noticed some Python
error messages refer to stdio which means standard input/output). The standard output device
is the monitor.

The CLI programs follow this behaviour – when our programs need user input, the input()
function is executed, and the program waits for data from the user. (GUI programs work
differently, using a combination of keyboard and screen widgets for output).

What is happening with the standard input is that each key stroke sends a different signal to the
program, which corresponds to the characters on the key. Press a “k” key, and the signal for “k”
is received by our programs. But signals can be interpreted or coded to do things other than be
interpreted as a letter. For example, capturing a “W” signal could be coded to mean change a
variable, or move a graphic.

By combining keyboard interaction with graphics, we can control the movement of shapes on
screen, and write programs for simple activities.

Bind
In tkinter, bind is a command attached to the window. For a specific window, we bind a
keyboard key signal to a command, similar to how we associate code to a button press event
command when working with GUI programs.

The general format is:

window_name.bind (“<Key>”, command_name)

window_name, and command_name are the identifiers (names) of the window and command
that the programmer writes.
bind is the key word name of the command to bin keys to commands
“<Key>” – Key is the name of the key to be bound. The brackets are mandatory.
 eg window.bind(“<Right>”, right_add_number)

In this code, the “window” identifier is associated with the window that was created by
an earlier statement. “right_add_number” is the name of the command. Both terms
were chosen by the programmer.
“<Right>” refers to the right arrow key on the keyboard.
“bind” associates the command to execute when the user presses on the right arrow
key.

A list of the more common keyboard keys to bind follows the exercises.

Configuring text

*.itemconfigure(pointer, fill = “colour”)

 06.03 Keyboard interaction

06.03.01
Extend the program 06.03_template.py to allow left and vertical movement,
binding to the left, up and down arrows.
Do not worry when the graphic goes off window.

06.03.02
Write an “inch worm” program that starts as a dot in the middle of the window. Choose
two keys to move the “head” left and right. Choose 1 key to move the “tail”. The tail can
only ever move towards the head. Do not move up or down.
a) Draw the worm as a line
Picture 1 and 2 show the “head” moving right. Picture 3 shows the “tail”
catching up to the head.

b) Draw the worm as a rectangle.

Advanced.
Modify 06.03.02 b), to have a rectangle “head” of a different colour. Choose another two
keys to allow the head to move up and down.
The head can only turn such that the whole worm makes either a straight line, or an “L”
shape. It cannot turn to make a “C” shape.
The tail still only moves in the direction of the head, but if the head turns, and makes a
“corner”, then the tail must continue to the corner before turning to follow the head.
06.03.03
Create a “Whack-a-Letter” program like the one demonstrated:
- One of x letters will randomly appear
- When the user presses the matching key, the letter will disappear
- x is a fixed number between 5 and 10 (you decide how many letters to manage)

Some technical notes are:

 destroy or delete does not appear to work; use colour to make the letter
disappear by changing the text colour to match the window background colour
 can use the tkinter command to create letters or text

create_text (<column>, <row>, font= ("font_style", <size>, "font_type"), text = <text_string>, fill=”colour”)

 .use the following command to change the text colour (*.configure does not work)

itemconfigure (‘text_ID”, fill = “collour”)

For example:

:
#Create a letter
show_letter_A = canvas.create_text (10, 30, font= ("Gothic", 20, "bold"), text = "A", fill=”green”)
:
#Change colour of letter
canvas.itemconfigure (show_letter_A, fill = “black”)
Key words that are associated with keyboard keys.

Note: Capitalization matters.

Ignore the two columns to the right (decimal and hexadecimal number columns).

space 32 0x0020
exclam 33 0x0021
quotedbl 34 0x0022
numbersign 35 0x0023
dollar 36 0x0024
percent 37 0x0025
ampersand 38 0x0026
quoteright 39 0x0027
parenleft 40 0x0028
parenright 41 0x0029
asterisk 42 0x002a
plus 43 0x002b
comma 44 0x002c
minus 45 0x002d
period 46 0x002e
slash 47 0x002f
0 48 0x0030
1 49 0x0031
2 50 0x0032
3 51 0x0033
4 52 0x0034
5 53 0x0035
6 54 0x0036
7 55 0x0037
8 56 0x0038
9 57 0x0039
colon 58 0x003a
semicolon 59 0x003b
less 60 0x003c
equal 61 0x003d
greater 62 0x003e
question 63 0x003f
at 64 0x0040
A 65 0x0041
B 66 0x0042
C 67 0x0043
D 68 0x0044
E 69 0x0045
F 70 0x0046
G 71 0x0047
H 72 0x0048
I 73 0x0049
J 74 0x004a
K 75 0x004b
L 76 0x004c
M 77 0x004d
N 78 0x004e
O 79 0x004f
P 80 0x0050
Q 81 0x0051
R 82 0x0052
S 83 0x0053
T 84 0x0054
U 85 0x0055
V 86 0x0056
W 87 0x0057
X 88 0x0058
Y 89 0x0059
Z 90 0x005a
bracketleft 91 0x005b
backslash 92 0x005c
bracketright 93 0x005d
asciicircum 94 0x005e
underscore 95 0x005f
quoteleft 96 0x0060
a 97 0x0061
b 98 0x0062
c 99 0x0063
d 100 0x0064
e 101 0x0065
f 102 0x0066
g 103 0x0067
h 104 0x0068
i 105 0x0069
j 106 0x006a
k 107 0x006b
l 108 0x006c
m 109 0x006d
n 110 0x006e
o 111 0x006f
p 112 0x0070
q 113 0x0071
r 114 0x0072
s 115 0x0073
t 116 0x0074
u 117 0x0075
v 118 0x0076
w 119 0x0077
x 120 0x0078
y 121 0x0079
z 122 0x007a

BackSpace 65288 0xff08

Tab 65289 0xff09
Linefeed 65290 0xff0a
Clear 65291 0xff0b
Return 65293 0xff0d
Pause 65299 0xff13
Scroll_Lock 65300 0xff14
Sys_Req 65301 0xff15
Escape 65307 0xff1b
Multi_key 65312 0xff20
Kanji 65313 0xff21
Home 65360 0xff50
Left 65361 0xff51
Up 65362 0xff52
Right 65363 0xff53
Down 65364 0xff54
Num_Lock 65407 0xff7f
KP_Space 65408 0xff80 KP stands for keypad
KP_Tab 65417 0xff89
KP_Enter 65421 0xff8d
KP_F1 65425 0xff91
KP_F2 65426 0xff92
KP_F3 65427 0xff93
KP_F4 65428 0xff94
KP_Multiply 65450 0xffaa
KP_Add 65451 0xffab
KP_Separator 65452 0xffac
KP_Subtract 65453 0xffad
KP_Decimal 65454 0xffae
KP_Divide 65455 0xffaf
KP_0 65456 0xffb0
KP_1 65457 0xffb1
KP_2 65458 0xffb2
KP_3 65459 0xffb3
KP_4 65460 0xffb4
KP_5 65461 0xffb5
KP_6 65462 0xffb6
KP_7 65463 0xffb7
KP_8 65464 0xffb8
KP_9 65465 0xffb9
KP_Equal 65469 0xffbd

Also

Button-1 left mouse

Button-3 right mouse
FocusIn
FocusOut
Key