{"id":18138,"date":"2017-08-09T16:15:01","date_gmt":"2017-08-09T13:15:01","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=18138"},"modified":"2018-01-09T09:29:06","modified_gmt":"2018-01-09T07:29:06","slug":"python-tkinter-tutorial","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/python\/python-tkinter-tutorial\/","title":{"rendered":"Python Tkinter Tutorial"},"content":{"rendered":"

Today we will be talking about one python library that is used for GUI programming which is Tkinter<\/code>.
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n[ulp id=’R7QVpFMZmjosABLC’]<\/p>\n

\n

Table Of Contents<\/h3>\n
\n
1. What is Tkinter?<\/a><\/dt>\n
\n
\n
1.1. More about Tkinter<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
1.2. Installing Tkinter<\/a><\/dt>\n<\/dl>\n<\/dd>\n
2. Examples<\/a><\/dt>\n
\n
\n
2.1. Basic examples<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
2.2. Widget<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
2.3. Frame<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
2.4. Event handling<\/a><\/dt>\n<\/dl>\n<\/dd>\n
3. Summary<\/a><\/dt>\n
4. Homework<\/a><\/dt>\n
5. Download the source code<\/a><\/dt>\n<\/dl>\n<\/div>\n

<\/a>1. What is Tkinter<\/h2>\n

<\/a>1.1. More about Tkinter<\/h3>\n

Tkinter<\/code> is a library that is used for creating interfaces. Sometimes, we not only need to think about software itself, complicated algorithms, but a good interface as well. Without good interface there is a very little chance that our software product would be popular. It’s quite simple to create simple interfaces using the library. Without hesitation, let’s get started, shall we?<\/p>\n

<\/a>1.2. Installing Tkinter<\/h3>\n

Tkinter<\/code> isn’t usually pre-installed. I will show how to install it on both: Windows and Linux.<\/p>\n

Installing Tkinter (Windows)<\/em><\/span><\/p>\n

pip install python-tk\r\n<\/pre>\n
If it doesn’t work, there may be some problems. One problem might be that you are using 64 bit version when you need 32 bit version. Another one could be a problem with pip itself. In this case, I would suggest downloading wheel or binaries from python. If that fails, go to ActiveState<\/code> and follow easy instructions on how to download it. Chances that you may be experiencing any problems with downloading Tkinter<\/code> are close to none, but it’s always better to know how to solve issues that might happen.<\/p>\n
Installing Tkinter (Debian Linux)<\/em><\/span><\/p>\n
sudo apt-get install python3-tk\r\n<\/pre>\n
That works great on all Debian-based systems. However, that would be unfair to tell that it works on all linux systems. So I should spend some time to tell you how to install it if you are using different systems. If you are an Arch Linux user, something like this can work great for you!<\/p>\n
Installing Tkinter (Arch Linux)<\/em><\/span><\/p>\n
sudo pacman -S tk<\/pre>\n
If you are a fan of RHEL, CentOS, Oracle, just use yum:<\/p>\n
Installing Tkinter (RHEL, CentOS, Oracle Linux)<\/em><\/span><\/p>\n
yum install tkinter<\/pre>\n
In this case, you might have some problems. If you do, that means that tk-devel<\/code> needs to be installed. So in other way, just do the following:<\/p>\n
Installing Tkinter (RHEL, CentOS, Oracle Linux)<\/em><\/span><\/p>\n
yum install -y tkinter tk-devel<\/pre>\n
By the time writing this article I wasn’t quite aware that Mac OS users have some problems installing Tkinter<\/code>. So it’s best to show you how to install it.
\nFirst, you go to www.activestate.com<\/a>, and follow along the links to download the Community Edition of ActiveTcl, available as a universal binary. Make sure you’re downloading an 8.5.x version, not an older 8.4.x version. Once you finish all necessary downloads, you will find Wish<\/code> application installed on your machine. Go ahead and open it. You will have another thing popped up which is your console. It will run all Tcl\/Tk commands. It’s also wise to verify the exact version of Tcl\/Tk that you are running. To do this, type the following:<\/p>\n
Installing Tkinter (Mac OS)<\/em><\/span><\/p>\n
% info patchlevel<\/pre>\n
We would like to receive something like this: Verified install using ActiveTcl 8.5.10.1 on Mac OS X 10.7.1.<\/code>. Alright, I guess I have covered all possible installations. Let’s get started, shall we?<\/p>\n
<\/a>2. Examples<\/h2>\n
<\/a>2.1. Basic examples<\/h3>\n
First of all, we need to check if Tkinter<\/code> has been successfully installed. To do so, we need to run the following:<\/p>\n
Test<\/em><\/span><\/p>\n
import tkinter\r\ntkinter._test()<\/pre>\n
If everything is installed correctly, you will see a pop-up window that has some text and two buttons. If you don’t see it, go to the first section and download Tkinter<\/code> first.
\nAlright, let’s go ahead and code! There are 2 ways how to import Tkinter<\/code>: you may do import tkinter<\/code>, or type from tkinter import *<\/code>. We will use the second option, because we won’t have to name the module before using any methods. In any application, we always have some main window that eventually leads users to other widgets. Object-window is a variable root<\/code>. Go ahead and run this:<\/p>\n
Main window<\/em><\/span><\/p>\n
from tkinter import *\r\nroot = Tk()<\/pre>\n
Now, let’s create widget! We will only have one button there. To access the button we will use Button()<\/code> method. The class Button<\/code> has one mandatory attribute – object that is associated with a button. The idea is that button cannot exist by itself.<\/p>\n
Adding button<\/em><\/span><\/p>\n
from tkinter import *\r\nroot = Tk()\r\nbut = Button(root)<\/pre>\n
Let’s put some text on the button by doing the following:<\/p>\n
Adding button<\/em><\/span><\/p>\n
from tkinter import *\r\nroot = Tk()\r\nbut = Button(root)\r\nbut[\"text\"] = \"Hi there\"<\/pre>\n
Surely, button alone doesn’t do much. We need to have some action with it. For instance, we want to print some text once we click the button.<\/p>\n
Adding button<\/em><\/span><\/p>\n
def printer(event):\r\n   print(\"Hi there, this button works\")<\/pre>\n
Don’t forget that it’s essential to put this function in the beginning of the code because it’s an event. If we do left mouse click, it is Button<\/code>. We have to bind function with the button in order to make it work.<\/p>\n
Adding button<\/em><\/span><\/p>\n
but.bind(\"\", printer)<\/pre>\n
So what we do here is we are binding the function printer<\/code> with the event (left mouse click on the button). Before we run the program, we need to pack it. The easiest way to do that is type the following:<\/p>\n
Packing<\/em><\/span><\/p>\n
but.pack()<\/pre>\n
If we don’t type this, the program will still run. We won’t see the button but it will be there. Lastly, the main window won’t show up if we don’t call it:<\/p>\n
Main window<\/em><\/span><\/p>\n
root.mainloop()<\/pre>\n
Finally, our first program will look something like this:<\/p>\n
basic.py<\/em><\/span><\/p>\n
from tkinter import *\r\n \r\ndef printer(event):\r\n     print (\"Hi there, this button works!'\")\r\n \r\nroot = Tk()\r\nbut = Button(root)\r\nbut[\"text\"] = \"Hi there\"\r\nbut.bind(\"\",printer)\r\n \r\nbut.pack()\r\nroot.mainloop()<\/pre>\n
If you have ever read my article about Class Inheritance in Python, you know that I am fan of Object oriented programming. Let’s recreate the same program but use OOP!<\/p>\n
basic.py<\/em><\/span><\/p>\n
from tkinter import *\r\n \r\nclass But_print:\r\n     def __init__(self):\r\n          self.but = Button(root)\r\n          self.but[\"text\"] = \"Hi there\"\r\n          self.but.bind(\"\",self.printer)\r\n          self.but.pack()\r\n     def printer(self,event):\r\n          print (\"Hi there, this button works!'\")\r\n \r\nroot = Tk()\r\nobj = But_print()\r\nroot.mainloop()\r\n<\/pre>\n
<\/a>2.2. Widget<\/h3>\n
Buttons have many attributes. Some of them are bg<\/code> – background, fg<\/code> – foreground. Here is a simple example of the button:<\/p>\n
button.py<\/em><\/span><\/p>\n
from tkinter import *\r\n \r\nroot = Tk()\r\n \r\nbut = Button(root,\r\n          text=\"It is a button\", # text on the button\r\n          width=30,height=5, # width and height of the button\r\n          bg=\"white\",fg=\"blue\") # background and foreground\r\n \r\nbut.pack()\r\nroot.mainloop()\r\n\r\n<\/pre>\n
There are many ways of how text can be displayed. For example, let’s take labels.
\nLabels<\/em><\/span><\/p>\n
from tkinter import *\r\n \r\nroot = Tk()\r\n \r\nlab = Label(root, text=\"This is a label \\n written in 2 lines\", \r\n            font=\"Arial 36\")\r\n \r\nlab.pack()\r\nroot.mainloop()\r\n\r\n<\/pre>\n
We can make entries by using Entry<\/code> module.<\/p>\n
Entry<\/em><\/span><\/p>\n
from tkinter import *\r\n \r\nroot = Tk()\r\n \r\nent = Entry(root,width=20,bd=10)\r\nent.pack()\r\n\r\nroot.mainloop()\r\n\r\n<\/pre>\n
There is also another way to make a user input field.<\/p>\n
Entry<\/em><\/span><\/p>\n
from tkinter import *\r\n \r\nroot = Tk()\r\n \r\ntex = Text(root,width=40, font=\"Verdana 12\", wrap=WORD) \r\ntex.pack()\r\n\r\nroot.mainloop()\r\n\r\n<\/pre>\n
We can create radio buttons.<\/p>\n
Radio buttons<\/em><\/span><\/p>\n
from tkinter import *\r\n \r\nroot = Tk()\r\n \r\nvar=IntVar()\r\nvar.set(1) # set the radiobutton chosen as rad1\r\nrad0 = Radiobutton(root,text=\"First\",\r\n          variable=var,value=0)\r\nrad1 = Radiobutton(root,text=\"Second\",\r\n          variable=var,value=1)\r\nrad2 = Radiobutton(root,text=\"Third\",\r\n          variable=var,value=2)\r\nrad0.pack()\r\nrad1.pack()\r\nrad2.pack()\r\n\r\nroot.mainloop()\r\n\r\n<\/pre>\n
We can create check buttons as easy as radio buttons.<\/p>\n
Check buttons<\/em><\/span><\/p>\n
from tkinter import *\r\n \r\nroot = Tk()\r\n \r\nc1 = IntVar()\r\nc2 = IntVar()\r\n\r\nche1 = Checkbutton(root,text=\"First checkbox\",\r\n          variable=c1,onvalue=1,offvalue=0)\r\nche2 = Checkbutton(root,text=\"Second checkbox\",\r\n          variable=c2,onvalue=2,offvalue=0) \r\nche1.pack()\r\nche2.pack()\r\n\r\n\r\nroot.mainloop()\r\n\r\n<\/pre>\n
There is probably one more feature that you need to know. Check it out for yourself!<\/p>\n
Lists<\/em><\/span><\/p>\n
from tkinter import *\r\n \r\nroot = Tk()\r\n \r\nr = ['Linux','Python','Tk','Tkinter']\r\nlis = Listbox(root,selectmode=SINGLE,height=4)\r\nfor i in r:\r\n     lis.insert(END,i)\r\n\r\nlis.pack()\r\n\r\n\r\nroot.mainloop()\r\n\r\n<\/pre>\n
Let’s check what we can do already, shall we? I want you to try to create the program that asks for the address and gives users a chance to leave some comments. It also asks for something using radio and check buttons. If you are curious, look at the code below. It is something that has already been covered in this article and coded using OOP principles.<\/p>\n
interface.py<\/em><\/span><\/p>\n
from tkinter import *\r\n \r\nclass Form:\r\n    def __init__(self):\r\n        self.root = Tk()\r\n        self.root.title('Response form')\r\n        self.root.geometry('500x400+300+200')\r\n        self.width = 50\r\n \r\nclass Question:\r\n    def __init__(self, form, question):\r\n        self.lab = Label(form.root, text=question)\r\n        self.ent = Entry(form.root, width=form.width+16)\r\n        self.lab.pack()\r\n        self.ent.pack()\r\n \r\nclass BigQuestion:\r\n    def __init__(self, form, question):\r\n        self.lab = Label(form.root, text=question)\r\n        self.txt = Text(form.root, width=form.width, height=4)\r\n        self.lab.pack()\r\n        self.txt.pack()\r\n \r\nclass RadioBut:\r\n    def __init__(self, form, question):\r\n        self.lab = Label(form.root, text=question)\r\n        self.lab.pack()\r\n        self.var = IntVar()\r\n        self.var.set(1)\r\n        self.rad0 = Radiobutton(form.root, text=\"$\", variable=self.var,value=1)\r\n        self.rad1 = Radiobutton(form.root, text='$$', variable=self.var, value=2)\r\n        self.rad2 = Radiobutton(form.root, text='$$$', variable=self.var, value=3)\r\n        self.rad3 = Radiobutton(form.root, text='$ $ $ $', variable=self.var, value=4)\r\n        self.rad0.pack()\r\n        self.rad1.pack()\r\n        self.rad2.pack()\r\n        self.rad3.pack()\r\n \r\nclass Flags:\r\n    def __init__(self, form, question):\r\n        self.lab = Label(form.root, text=question)\r\n        self.lab.pack()\r\n        self.c0 = IntVar()\r\n        self.c1 = IntVar()\r\n        self.c2 = IntVar()\r\n        self.c3 = IntVar()\r\n        self.che0 = Checkbutton(form.root, text=\"Red\",bg='red',\r\n                                variable=self.c0, onvalue=1, offvalue=0)\r\n        self.che1 = Checkbutton(form.root, text=\"Blue\", bg='blue',\r\n                                variable=self.c1, onvalue=1, offvalue=0)\r\n        self.che2 = Checkbutton(form.root, text=\"Green\", bg='green',\r\n                                variable=self.c2, onvalue=1, offvalue=0)\r\n        self.che3 = Checkbutton(form.root, text=\"Yellow\",bg='yellow',\r\n                                variable=self.c3, onvalue=1, offvalue=0)\r\n        self.che0.pack()\r\n        self.che1.pack()\r\n        self.che2.pack()\r\n        self.che3.pack()\r\n \r\nclass Scene:\r\n    def __init__(self):\r\n        self.form = Form()\r\n        self.qstn = Question(self.form, 'Your address:')\r\n        self.comm = BigQuestion(self.form, 'Comments:')\r\n        self.radi = RadioBut(self.form, 'How much?')\r\n        self.flag = Flags(self.form, 'What color?')\r\n        self.butt = Button(self.form.root, text='Send')\r\n        self.butt.pack()\r\n        self.butt.bind('', self.go)\r\n        self.form.root.mainloop()\r\n \r\n    def go(self, event):\r\n        print('Send:\\n',\r\n              'Colors:', self.flag.c0.get(), self.flag.c1.get(),\r\n              self.flag.c2.get(), self.flag.c3.get(),\r\n              'Count:', self.radi.var.get())\r\n \r\nscene = Scene()\r\n\r\n<\/pre>\n
<\/a>2.3. Frame<\/h3>\n
As you may have already figured, frames are good tools to organize the application and widgets inside. Moreover, it’s wise to use it for a better app structure.<\/p>\n
Frames<\/em><\/span><\/p>\n
from tkinter import *\r\n \r\nroot = Tk()\r\n \r\nfra1 = Frame(root,width=500,height=100,bg=\"darkred\")\r\nfra2 = Frame(root,width=300,height=200,bg=\"green\",bd=20)\r\nfra3 = Frame(root,width=500,height=150,bg=\"darkblue\")\r\n \r\nfra1.pack()\r\nfra2.pack()\r\nfra3.pack()\r\n \r\nroot.mainloop() \r\n<\/pre>\n
Let’s go ahead and just jump into a task. Let’s create a horizontal scrollbar.<\/p>\n
scrollbar.py<\/em><\/span><\/p>\n
from tkinter import *\r\n \r\nroot = Tk()\r\nroot.title(\"Scrollbar\")\r\nroot.minsize(width=300, height=150)\r\n \r\nfr = Frame(root, width=150, height=100, bg=\"lightgreen\", bd=15)\r\nsc = Scale(fr,orient=HORIZONTAL, length=300,\r\n           from_=0, to=100, tickinterval=10,resolution=5)\r\nfr2 = Frame(root, width=400, height=100, bg=\"green\", bd=25)\r\nent = Entry(fr2, width=10)\r\n \r\nfr.pack()\r\nsc.pack()\r\nfr2.pack()\r\nent.pack()\r\n \r\nroot.mainloop()\r\n<\/pre>\n
That was pretty easy. Let’s just get our thinking “outside of the box”. We will create event handler for canvas. In other words, we want to draw something and change the color every time we click on it.<\/p>\n
canvas.py<\/em><\/span><\/p>\n
from tkinter import *\r\nfrom random import randrange as rnd\r\n\r\nroot = Tk()\r\nfr = Frame(root)\r\nroot.geometry('800x600')\r\n\r\nbt1 = Button(fr,text = 'Hello 1')\r\nbt2 = Button(fr,text = 'Hello 2')\r\n\r\nbt1.pack(side='left',padx=2)\r\nbt2.pack(side='left',padx=2)\r\n\r\nfr.pack(pady=5, fill = X)\r\n\r\ncanv = Canvas(root, bg = 'white')\r\ncanv.pack(fill=BOTH,expand=1)\r\n\r\ncolors = ['orange','red','blue','yellow','green']\r\n \r\n\r\ndef click(event):\r\n    global color\r\n    color = colors[rnd(len(colors))]\r\n \r\n\r\ncolor = colors[rnd(len(colors))]\r\n\r\ndef move(event):\r\n    x = event.x\r\n    y = event.y\r\n    canv.create_oval(x-30,y-30,x+30,y+30,fill=color)\r\n\r\ncanv.bind('',move)\r\ncanv.bind('