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.

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.

Edited 6 Years Ago by pyTony: n/a

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.

This article has been dead for over six months. Start a new discussion instead.