In this section I will introduce you the basics of creating a simple interface using tkinter in python3. Tkinter is a very powerful and easy to prototype tool for Python, enabling you to easily create a graphical interface that runs on Mac, Windows and Linux straight away! To get you started, you should have the anaconda package installed, as tkinter comes pre installed with anaconda and ready to go. I will be using the also pre installed program Spyder 3.6 for writing and executing the code. (The complete script at the bottom of the page)
To import TKinter we need the line:
from tkinter import *
This imports all needed tools and functions from our toolkit. Let’s start by creating the main window, started by calling the function Tk(). We will store this function as root.
from tkinter import * root = Tk() root.configure(bg = "grey") #configuration, setting background to grey # Next centring the frame on the monitor and setting size # w=400 #adjustable width h=230 #adjustable height wx = root.winfo_screenwidth() hx = root.winfo_screenheight() x = (wx/2) - (w/2) y = (hx/2) - (h/2) root.geometry('%dx%d+%d+%d' % (w, h, x, y-50)) #Creating window root.title('Wordpress Login Script') #Setting window title bar # here goes the setup script with buttons, labels and forms # root.mainloop() # Starts the window
After executing using python3, the basic window is generated. Next up we need to create the basic setup script, inserting two Entry fields and a Button. For Layout management in Tkinter there are two options, pack and grid.
Pack: is splitting the window in 4 sections (sides): TOP, LEFT, RIGHT, BOTTOM.
Grid: is splitting the window into rows and columns, which can each be configured, leaving more options for configuration.
For now, we will be using pack. First we will create a label with the text “Login Screen”. Label in Tkinter is a function and inserted into the window as follows:
l = Label(root, text = "Login Screen", font = ("Calibri", 18)) l.pack(side = TOP, pady = (30,10))
All Tkinter functions need the window frame (in our case root) as first option, then options can be added, such as text and font. The pack is aligned to the TOP, with a padding in vertical direction (y) with 30 pixels above the label and 10 pixels below. You can also shift in the horizontal direction, using padx = (*left*, *right*). We can now also add the bg = “grey” option to the Label to make it blend in with the background. To change the font colour we use the option foreground (or fg) = “white”, to change the font colour to white.
l = Label(root, text="Login Screen", bg = "grey", fg = "white", font = ("Calibri", 18)) l.pack(side=TOP, pady = (30,10))
Next we need two input fields, for the user name and the password. The function is very similar to the Label function, now called Entry(root, **options**). The option we are using here is width, setting the width of the field (yes, I am sure that surprises you :-). To be able to have text in an Entry field, we need the separate function of insert(END, text). Let’s insert the following code into the main script, after the l.pack.
user = Entry(root, width = 20) user.insert(END, "Insert your user name!") user.pack(side=TOP, pady = (15,10))
Creating the second Entry field, we want to make sure no body can read the password over your shoulder, for that tkinter has a cool option for Entry fields, called show. This option enables you to set a char that replaces the typed letter.
password = Entry(root, width = 20, show="*") password.insert(END, "SamplePassword") password.pack(side=TOP, pady = 10) #pady = 10 equal to pady = (10,10)
Last thing we need in our front-end is a button that reads the current state of our Entry fields and forwards these values to a back-end form that analyses these values, for example compares them to data from a database. Again, same format, the button in Tkinter has the function Button(root, **config**, command). The command is the “when_clicked” function. To be able to freeze the current Entry state, when the button is clicked, we format our command as a lambda command, using the function .get() to get the current field entry (by name):
b = Button(root, text="Login", width=10, command = lambda : check_password(user.get(), password.get())) b.pack(side=TOP, pady = 10)
Next the back-end function, which will for now only print out the input when the button is pressed:
def check_password(user,passkey): print(user) print(passkey)
And finally the complete script:
from tkinter import *
root = Tk()
root.configure(bg = “grey”)
w = 400
h = 230
ws = root.winfo_screenwidth()
hs = root.winfo_screenheight()
x = (ws/2) – (w/2)
y = (hs/2) – (h/2)
root.geometry(‘%dx%d+%d+%d’ % (w, h, x, y-50))
root.title(‘WordPress Login Script’) #Setting window title bar
l = Label(root, text=”Login Screen”, bg = “grey”, fg = “white”, font = (“Calibri”, 18))
l.pack(side=TOP, pady = (30,10))
user = Entry(root, width = 20)
user.insert(END, “Insert your user name!”)
password = Entry(root, show=”*”)
user.pack(side=TOP, pady = (15,10))
password.pack(side=TOP, pady = 10)
b = Button(root, text=”Login”, width=10, command = lambda : check_password(user.get(), password.get()))
b.pack(side=TOP, pady = 10)
if __name__ == “__main__”: