GUI

 Graphical User Interface with Tkinter

Tkinter is an open source , portable GUI available 

in python 2.x and 3.x versions.

Tkinter supports all platforms(Windows,Mac,Linux)

Tkinter module is available by default with python IDLE.

How to create a GUI window?(3.7)

import tkinter as tk

root=tk.Tk()

root.mainloop()

configure()

Used for configuring widgets with options like background color , borderwidth....

Syntax:

   <widget>.configure(option=value)

Example

import tkinter as tk

root=tk.Tk()

root.configure(background="red")

root.mainloop()

Layout Managers

Tkinter has the following layout managers.

1.pack()

2.grid()

3.place()

We should never mix one layout manager with another.

1.pack()

This layout manager arranges widgets in a stack order.

Label()

This will create a label

syntax:

      Label(parent,text="labelled text")

Button()

This will create  a button

Syntax:

     Button(parent,text="Button text")

Entry()

 This will create a text box

 Syntax:

    Entry(parent,text="text")

Example

#Arranging 3 labels in a stack order using pack()

import tkinter as tk

root=tk.Tk()

L=tk.Label(root,text="Hello world!")

L.pack()

L2=tk.Label(root,text="II.Hello world!")

L2.pack()

L3=tk.Label(root,text="III.Hello world!")

L3.pack()

root.mainloop()

2.grid()

This layout manager arranges widgets in a row*column order.

import tkinter as tk

root=tk.Tk()

L=tk.Label(root,text="Hello world!")

L.grid(row=0,column=0)

L2=tk.Label(root,text="II.Hello world!")

L2.grid(row=1,column=1)

L3=tk.Label(root,text="III.Hello world!")

L3.grid(row=2,column=2)

root.mainloop()

3.place()

places the widget at a given (x,y) point.

import tkinter as tk

root=tk.Tk()

L=tk.Label(root,text="Hello world!")

L.place(x="100",y="100")

root,mainloop()

#Addition of two numbers and displaying result in  a dialog box.

import tkinter as tk

import tkinter.messagebox as msb

def add():

    x=int(T.get())

    y=int(T2.get())

    print(x+y)

    msb.showinfo("ADDITION ",x+y)

root=tk.Tk()

L=tk.Label(root,text="Enter a ")

L.grid(row=0,column=0)

T=tk.Entry(root)

T.grid(row=0,column=1)

L2=tk.Label(root,text="Enter b ")

L2.grid(row=1,column=0)

T2=tk.Entry(root)

T2.grid(row=1,column=1)

B=tk.Button(root,text="Add", command=add)

B.grid(row=2,column=1)

root.mainloop()

Parameters used in pack()

1.fill

      Fills the widget with the given color in x or y direction.

    fill=x/y/both

 

import tkinter as tk

root=tk.Tk()

L=tk.Label(root,text="Green Grass",bg="Green",fg="white")

L.pack(fill="x")

root.mainloop()

 

2.expand

   By default,expand=0 (false)

   Expand expands the widget with the available additional space on the form.

import tkinter as tk

root=tk.Tk()

L=tk.Label(root,text="Green Grass",bg="Green",fg="white")

L.pack(expand=1,fill="both")

root.mainloop()

3.side

Used for placing widgets on top/bottom/left/right side

    side="top/left/right/bottom"

Default value for side is top.

import tkinter as tk

root=tk.Tk()

B=tk.Button(root,text="Click")

B.pack(side="right")

root.mainloop()

4.anchor

anchor provides more directions to place widgets like in a compass.

anchor="s/n/e/w/ne/nw/se/sw"

  SW           S           SE

                         

  W                            E

  NW           N           NE

sometimes anchor is mixed with side to get desired output.

#placing widget in NW direction

import tkinter as tk

root=tk.Tk()

B=tk.Button(root,text="Click")

B.pack(anchor="nw",side="bottom")

root.mainloop()

Padding

Padding means the gap left between border and its content.

1.padx  -External padding in X direction

2.pady  -External padding in Y direction

3.ipadx -Internal padding in X direction

4.ipady -Internal padding in Y direction.

 

#Extrernal padding in X direction

import tkinter as tk

root=tk.Tk()

L=tk.Label(root,text="Green Grass", bg="Green",fg="White")

L.pack(padx=50,fill="x")

root.mainloop()

 

 

#Extrernal padding in Y direction

import tkinter as tk

root=tk.Tk()

L=tk.Label(root,text="Red Sun", bg="Red",fg="White")

L.pack(pady=100)

L2=tk.Label(root,text="Blue Water", bg="Blue",fg="White")

L2.pack()

root.mainloop()

 

#Internal padding in X direction

import tkinter as tk

root=tk.Tk()

L=tk.Label(root,text="Red Sun", bg="Red",fg="White")

L.pack(ipadx=200)

root.mainloop()

 

#Internal padding in Y direction

import tkinter as tk

root=tk.Tk()

L=tk.Label(root,text="Red Sun", bg="Red",fg="White")

L.pack(ipady=200)

root.mainloop()

Frames

A frame is a blank widget that can have many more widgets .

Frames are used to create complex GUI.

Syntax:

     Frame(parent,....)

import tkinter as tk

root=tk.Tk()

top=tk.Frame(root,bg="yellow")

top.pack(side="top",fill="both")

B=tk.Button(top,text="Add")

B.pack()

B2=tk.Button(top,text="MUL")

B2.pack()

B3=tk.Button(top,text="DIV")

B3.pack()

bottom=tk.Frame(root,bg="pink")

bottom.pack(side="bottom",fill="both")

B4=tk.Button(bottom,text="Add")

B4.pack(side="left")

B5=tk.Button(bottom,text="MUL")

B5.pack(side="left")

root.mainloop()

EXAMPLE2

import tkinter as tk

root =tk.Tk()

root.title("BDPS")

root.geometry("963x749+0+0")

root.configure(background="#d9d9d9")

 

 

 

Frame1 = tk.Frame(root)

Frame1.place(relx=0.02, rely=0.03, relheight=0.96, relwidth=0.96)

Frame1.configure(borderwidth="20")

Frame1.configure(relief=tk.GROOVE) 

Frame1.configure(background="#9e0000")

 

Button = tk.Button(Frame1)

Button.place(relx=0.18, rely=0.17, height=103, width=566)

Button.configure(text="WELCOME")

Button.configure(font="-size 25 -family {ALGERIAN} ")

Button.configure(foreground="RED")

root.mainloop()

Designing  Calculator Example

from tkinter import *

 

root = Tk()

root.title("Calculator")

# So that it becomes of fixed size

root.resizable(0, 0)

 

# Label

Label1 = Label(root, text = "Calculator app")

Label1.grid(row=0, columnspan=8)

 

# Variables

equa = ""

equation = StringVar()

 

calculation = Label(root, textvariable = equation)

 

equation.set("Enter your expression : ")

 

calculation.grid(row=2, columnspan=8)

 

def btnPress(num):

    global equa  #global is for global variable

    equa = equa + str(num)

    equation.set(equa)

 

def EqualPress():

    global equa

    total = str(eval(equa))

    equation.set(total)

    equa = ""

 

def ClearPress():

    global equa

    equa = ""

    equation.set("")

 

Button0 = Button(root, text="0",

                 command = lambda:btnPress(0),

                 borderwidth=1, relief=SOLID)

Button0.grid(row = 6, column = 2, padx=10, pady=10)

Button1 = Button(root, text="1",

                 command = lambda:btnPress(1),

                 borderwidth=1, relief=SOLID)

Button1.grid(row = 3, column = 1, padx=10, pady=10)

Button2 = Button(root, text="2", command = lambda:btnPress(2), borderwidth=1, relief=SOLID)

Button2.grid(row = 3, column = 2, padx=10, pady=10)

Button3 = Button(root, text="3", command = lambda:btnPress(3), borderwidth=1, relief=SOLID)

Button3.grid(row = 3, column = 3, padx=10, pady=10)

Button4 = Button(root, text="4", command = lambda:btnPress(4), borderwidth=1, relief=SOLID)

Button4.grid(row = 4, column = 1, padx=10, pady=10)

Button5 = Button(root, text="5", command = lambda:btnPress(5), borderwidth=1, relief=SOLID)

Button5.grid(row = 4, column = 2, padx=10, pady=10)

Button6 = Button(root, text="6", command = lambda:btnPress(6), borderwidth=1, relief=SOLID)

Button6.grid(row = 4, column = 3, padx=10, pady=10)

Button7 = Button(root, text="7", command = lambda:btnPress(7), borderwidth=1, relief=SOLID)

Button7.grid(row = 5, column = 1, padx=10, pady=10)

Button8 = Button(root, text="8", command = lambda:btnPress(8), borderwidth=1, relief=SOLID)

Button8.grid(row = 5, column = 2, padx=10, pady=10)

Button9 = Button(root, text="9", command = lambda:btnPress(9), borderwidth=1, relief=SOLID)

Button9.grid(row = 5, column = 3, padx=10, pady=10)

Plus = Button(root, text="+", command = lambda:btnPress("+"), borderwidth=1, relief=SOLID)

Plus.grid(row = 3, column = 4, padx=10, pady=10)

Minus = Button(root, text="-", command = lambda:btnPress("-"), borderwidth=1, relief=SOLID)

Minus.grid(row = 4, column = 4, padx=10, pady=10)

Multiply = Button(root, text="*", command = lambda:btnPress("*"), borderwidth=1, relief=SOLID)

Multiply.grid(row = 5, column = 4, padx=10, pady=10)

Divide = Button(root, text="/", command = lambda:btnPress("/"), borderwidth=1, relief=SOLID)

Divide.grid(row = 6, column = 4, padx=10, pady=10)

Equal = Button(root, text="=", command = EqualPress, borderwidth=1, relief=SOLID)

Equal.grid(row=6, column=3, padx=10, pady=10)

Clear = Button(root, text="C", command = ClearPress, borderwidth=1, relief=SOLID)

Clear.grid(row = 6, column = 1, padx=10, pady=10)

 

root.mainloop()