Python GUI Programming using tkinter

1. RTS Tech 1

2. Agenda
 Introduction
 Top level widgets
 GUI widgets
 Event handling
 Application
RTS Tech 2

3. Graphical User Interface
RTS Tech 3

4. GUI Technologies
 Python provides many technology to create GUI.
 Some are as following
 Tkinter
 Tkinter is used to create desktop application.
 Wxpython
 wxPython is a cross-platform toolkit.
 Jpython
 Jython is a Java implementation of Python
RTS Tech 4

5. Tkinter
 Tkinter is inbuilt in python as an liabrary.
 We can create desktop application using tkinter module.
 Tkinter is easy to use.
 Tkinter provides fast way to create GUI.
 It is object based library to create GUI.
RTS Tech 5

6. How to get tkinter module
 If not installed in python package then we can install it
using pip command.
 pip install tkinter.
 We can import tkinter module.
 from tkinter import *
 Or
 import tkinter
RTS Tech 6

7. GUI widgets
 Label
 Entry
 Button
 Frame
 Menu
 Message
 Radio button
 checkbox
RTS Tech 7

8. GUI widgets
RTS Tech 8
Label
Frame
Entry
Button

9. Create First GUI
 Import tkinter module
 Create main window using Tk.
 Add widgets like buttons, Labels, Entry etc.
 Call main event loop.
RTS Tech 9

10. Create A Window
 from tkinter import *
 window = Tk()
 Label(window,text="Hello world“).pack()
 window.title(“First Frame")
 window.mainloop()
RTS Tech 10

11. Label widgets
 This is used to show text on the window.
 from tkinter import *
 main=Tk()
 label =Label(
 text="Hello, World",
 fg="white", # Set the text color to white
 bg="black" , # Set the background color to black
 font="bold", # Set the font
 width=10,#set the width
 height=3,#set the height
 ).pack()
 main.mainloop()
RTS Tech 11

12. Button
 Button is a label that we can click.
 from tkinter import *
 main=Tk()
 button=Button(
 text="Hello, World",
 fg="white", # Set the text color to white
 bg="black" , # Set the background color to black
 font="bold", # Set the font
 width=10,#set the width
 height=3,#set the height
 ).pack()
 main.mainloop()
RTS Tech 12

13. Get User input
 We can take user input using entry widgets.
 entry=Entry(
 fg="black", # Set the text color to white
 bg="Red" , # Set the background color to black
 font="bold",
 width=100,#set the width
 ).pack()
RTS Tech 13

14. Entry widgets Operation
 entry.get()
 To get user input
 entry.delete()
 To delete specific values of complete data
 entry.insert()
 To insert values.
RTS Tech 14

15. Entry Operations
 entry=Entry(
 fg="black", # Set the text color to white
 bg="Red" , # Set the background color to black
 font="bold",
 width=100,#set the width
 )
 entry.insert(0,"Python")
 name=entry.get()
 print(name)
 entry.delete(0)
 entry.pack()

RTS Tech 15

16. Text Widgets
 from tkinter import *
 main=Tk()
 text=Text(main).pack()
 main.mainloop()
 Text widgets are used to get multiline inputs
 Text widgets has same methods as entry widgets.
RTS Tech 16

17. Text Operations
 Text.insert(index,string)
 Text.delete(start_index,end_index)
 Text.get(strat_index, end _index)
RTS Tech 17

18. Get data from text widgets
 Text widgets contains multiline input, so we can not just pass a
single index like Entry widgets.
 We have to pass 2 arguments.
 Line no: starts with 1.
 Character index: starts with 0.
 Index is passed as the string as “<lineNo>.<index>”.
 To get 1st charcter of the 1st line
 Print(text.get("1.0")).
 To get all the data
 Print(text.get("1.0“,tkinter.END)).
RTS Tech 18

19. Frame Widgets
 It is a top level widget which contains other widgets.
 It is used to organize the layout of the widgets.
 It is used for the logical grouping of other widgets.
RTS Tech 19

20. Frame(cont.)
 from tkinter import *
 from tkinter import font
 window =Tk()
 frame1=Frame(window,width=100,height=50)
 frame2=Frame(window,width=100,height=50)
 label1=Label(frame1,bg="maroon",fg="white",text="Frame1”)
 label2=Label(frame2,bg="blue",fg="aqua",text="Frame2")
 label1.pack()
 label2.pack()
 frame1.pack()
 frame2.pack()
 window.mainloop()
RTS Tech 20

21. Create frame border
 We can create Frame border using relief attribute .
 The value for the relief attribute
 FLAT
 RIDGE
 SOLID
 GROOVE
 SUNKEN
 RAISED
RTS Tech 21

22. Frame types
 frame1=Frame(window,relief=FLAT,borderwidth=5)
 lb1=Label(frame1,text="Flat")

frame2=Frame(window,relief=RIDGE,borderwidth=5)
 lb2=Label(frame2,text="Ridge")

frame3=Frame(window,relief=SUNKEN,borderwidth=5)
 lb3=Label(frame3,text="sunken")
RTS Tech 22

23. Layout Management
 We can arrange the widgets in different layout.
 pack
 grid
 place
RTS Tech 23

24. Pack layout
 from tkinter import *
 window=Tk()
 b1=Button(window,text="Button 1",bg="red")
 b2=Button(window,text="Button 2",bg="Green")
 b3=Button(window,text="Button 3",bg="yellow")
 b4=Button(window,text="Button 4",bg="Orange")
 #layout
 b1.pack(side="top",fill=X)
 b2.pack(side="left",fill=Y)
 b3.pack(side="right",fill=Y)
 b4.pack(side="bottom",fill=X)
 window.mainloop()
RTS Tech 24

25. Place Layout
 from tkinter import *
 window=Tk()
 window.geometry("400x200")
 lb1=Label(window,text="Enter your name",font=30)
 e1=Entry(window)
 lb2=Label(window,text="Enter Password",font=30)
 e2=Entry(window)
 b1=Button(window,text="submit",font=30)
 lb1.place(x=20,y=20,height=20,width=150)
 lb2.place(x=20,y=50,height=20,width=150)
 e1.place(x=190,y=20,width=150)
 e2.place(x=190,y=50,width=150)
 b1.place(x=50,y=90,height=50,width=150)
 window.mainloop()
RTS Tech 25

26. Grid Layout
 from tkinter import *
 window=Tk()
 b1=Button(window,text="Button 1",bg="orange")
 b2=Button(window,text="Button
2",height=5,width=10,bg="yellow")
 b3=Button(window,text="Button
3",height=10,width=15,bg="red")
 b1.grid(row=0,column=0,ipadx=5,ipady=3)
 b2.grid(row=1,column=0,rowspan=2,ipadx=5,ipady=3)
 b3.grid(row=0,column=1,columnspan=2,rowspan=3,ipadx=5,ip
ady=3)
 window.mainloop()
RTS Tech 26

27. Event Handling
RTS Tech 27

28. Event Listeners
Events Description
<Button> A mouse button is pressed with the mouse
pointer over the widget
<FocusIn> Keyboard focus was moved to this widget,
<FocusOut> Keyboard focus was moved from this
widget to another widget
<Motion> The mouse is moved with a mouse button
being held down.
<Double Button> Similar to the Button event, see above, but
the button is double clicked instead of a
single click.
<key> Any key is pressed
RTS Tech 28

29. bind() function
 Bind function is used to bind the event to the
mainloop
 Bind takes 2 arguments
 An Event type
 An event handler Callback function name
 For ex.
 window.bind("<Button>",hello)
RTS Tech 29

30. Button Click Event
 from tkinter import *
 window =Tk()
 def hello(event):
 Label(window,text="Hello ").pack()
 btn=Button(window,text="Click
Me",font=40,bg="Red",fg='White')
 # btn1=Button(window,text="Click
Me",font=40,bg="Red",fg='White',command=hello)
 btn.pack()
 window.bind("<Button>",hello)
 window.mainloop()
RTS Tech 30

31. Mouse Motion Handler
 from tkinter import *
 window=Tk()
 def getPixel(event):
 s="x={} y={}".format(event.x, event.y)
 print(s)
 text="""This is a simple example of a
 event Handling in Tkinter.
 we are learning about Motion event.
 """
 msg=Message(window,text=text,bg="aqua",font=30)
 msg.pack(side="left")
 img=PhotoImage("indore.png",format="png")
 l1=Label(window,image=img)
 l1.pack(side="right")
 window.bind("<Motion>",getPixel)
 window.mainloop()
RTS Tech 31

32. An application(calculator)
 from tkinter import *
 window=Tk()
 window.title("Calculator")
 window.geometry("500x500")
 #input variables
 n1=StringVar()
 n2=StringVar()
 n3=StringVar()
 #callback functoin
 def add():
 a=int(n1.get())
 b=int(n2.get())
 n3.set("{}".format(a+b))
 def clr():
 n1.set("")
 n2.set("")
 n3.set("")
RTS Tech 32

33. Calculator(cont.)
 #create widgets
 l1=Label(window,text="Enter 1st Number",font=("Times",30))
 l2=Label(window,text="Enter 2nd Number",font=("Times",30))
 l3=Label(window,text="Result",font=("Times",30))

e1=Entry(window,textvariable=n1)
 e2=Entry(window,textvariable=n2)
 e3=Entry(window,textvariable=n3,readonlybackground="aqua")

b1=Button(window,text="Add",font=("Times",30),command=add)
 b2=Button(window,text="ClearText",font=("Times",30),command
=clr)
RTS Tech 33

34. Calculator(cont.)
 #manage layout
 l1.grid(row=0,column=0)
 l2.grid(row=1,column=0)
 l3.grid(row=2,column=0)

e1.grid(row=0,column=1)
 e2.grid(row=1,column=1)
 e3.grid(row=2,column=1)

b1.grid(row=3,column=0)
 b2.grid(row=3,column=1)
 window.mainloop()

RTS Tech 34

35. Disclaimer
 This is a educational Presentation to make
programming easier.
 We have used images of different URLs to make
presentation better.
 We respect the work of the owners of the URLs.

36. Thank You!
:rtstech30@gmail.com
:+91 8818887087

37. Disclaimer
 This is an educational presentation to enhance the
skill of computer science students.
 This presentation is available for free to computer
science students.
 Some internet images from different URLs are used
in this presentation to simplify technical examples
and correlate examples with the real world.
 We are grateful to owners of these URLs and
pictures.
RTS Tech 37