Hello,

I'm playing around with some Python and tKinter and have been wrestling with the idea of an on-screen keyboard that outputs keys-pressed to a text field.

I'm familiar with calculators and button input, but would anyone have some thoughts on designing an on-screen keyboard? I'm thinking that I will need to create a button for each letter, then place that in a grid, and then for each key define a separate command link. Which would result in a wholeee lotta code.

Appreciate any and all thoughts.

Recommended Answers

All 4 Replies

You do it simply along the line of this calculator key pad example ...

# create a calculator key pad with Tkinter
# tested with Python 3.1.2 and Python 2.6.5
# vegaseat

try:
    # Python2
    import Tkinter as tk
except ImportError:
    # Python3
    import tkinter as tk

# needs Python25 or higher
from functools import partial


def click(btn):
    # test the button command click
    s = "Button %s clicked" % btn
    root.title(s)


root = tk.Tk()
root['bg'] = 'green'

# create a labeled frame for the keypad buttons
# relief='groove' and labelanchor='nw' are default
lf = tk.LabelFrame(root, text=" keypad ", bd=3)
lf.pack(padx=15, pady=10)

# typical calculator button layout
btn_list = [
'7',  '8',  '9',  '*',  'C',
'4',  '5',  '6',  '/',  'M->',
'1',  '2',  '3',  '-',  '->M',
'0',  '.',  '=',  '+',  'neg' ]

# create and position all buttons with a for-loop
# r, c used for row, column grid values
r = 1
c = 0
n = 0
# list(range()) needed for Python3
btn = list(range(len(btn_list)))
for label in btn_list:
    # partial takes care of function and argument
    cmd = partial(click, label)
    # create the button
    btn[n] = tk.Button(lf, text=label, width=5, command=cmd)
    # position the button
    btn[n].grid(row=r, column=c)
    # increment button index
    n += 1
    # update row/column position
    c += 1
    if c > 4:
        c = 0
        r += 1

root.mainloop()

Your work is in the creation of the button_list and putting the keys into the right row and column in the grid.

Or you can go along with my calculator code example, with click to GIF buttons :)

Simple calculator

For keyboard you would probably need more mixed up layout and could not use the modulo technique used for this two parts keyboard.

You do it simply along the line of this calculator key pad example ...

# create a calculator key pad with Tkinter
# tested with Python 3.1.2 and Python 2.6.5
# vegaseat

try:
    # Python2
    import Tkinter as tk
except ImportError:
    # Python3
    import tkinter as tk

# needs Python25 or higher
from functools import partial


def click(btn):
    # test the button command click
    s = "Button %s clicked" % btn
    root.title(s)


root = tk.Tk()
root['bg'] = 'green'

# create a labeled frame for the keypad buttons
# relief='groove' and labelanchor='nw' are default
lf = tk.LabelFrame(root, text=" keypad ", bd=3)
lf.pack(padx=15, pady=10)

# typical calculator button layout
btn_list = [
'7',  '8',  '9',  '*',  'C',
'4',  '5',  '6',  '/',  'M->',
'1',  '2',  '3',  '-',  '->M',
'0',  '.',  '=',  '+',  'neg' ]

# create and position all buttons with a for-loop
# r, c used for row, column grid values
r = 1
c = 0
n = 0
# list(range()) needed for Python3
btn = list(range(len(btn_list)))
for label in btn_list:
    # partial takes care of function and argument
    cmd = partial(click, label)
    # create the button
    btn[n] = tk.Button(lf, text=label, width=5, command=cmd)
    # position the button
    btn[n].grid(row=r, column=c)
    # increment button index
    n += 1
    # update row/column position
    c += 1
    if c > 4:
        c = 0
        r += 1

root.mainloop()

Your work is in the creation of the button_list and putting the keys into the right row and column in the grid.

I found similar code last night after I posted and did put things together quite well. Now it's just a matter of figuring out how then to link an Entry field with the keyboard. Without posting more code, tell me this if you don't mind: For taking commands from the on-screen keyboard should I look to .set() and .get() for placing that information in an Entry box, or should I refer to the Entry box by a variable and concatenate a string inside?

Thank you very, very much. 500 lines of foolish code down to just 10.

I would simply use
entry.insert('end', btn)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.