Visual Programming (VP)
Lecture # 9 & 10
Engr. Sehar Javaid
1
Grid Layout Manager
The grid method organizes widgets in a 2-dimensional table-like
structure where each cell can hold a widget.
You don't have to specify the size of the widgets in your window as the
manager already handles that for you.
Placing widgets in the window is as simple as specifying the row and
column values.
The top left corner has values row=0 and column=0, and increase by 1
as you move right or down in the grid.
2
parameters for grid
row, column -- the row and column values for the location of the widget.
Both start from 0.
padx, pady -- the number of pixels surrounding the widget to create a
padding between other widgets, for horizontal or vertical padding.
ipadx, ipady -- how many pixels to use for padding inside the widget,
also for horizontal or vertical padding.
sticky -- specify a value of ‘s’, ‘n’, ‘e’, ‘w’, or a combination of them, The
parameter tells which side of the 'cell' the widget will 'stick' to . If you
use ’w’+’e’+’n’+’s’, then the widget will fill up the 'cell'. Default is to center
the widget within the 'cell'.
3
'''Example of how to use the grid()
method to create a GUI layout'''
import tkinter as tk
root = tk.Tk()
root.title(“Basic GUI layout with Grid")
root.maxsize(900, 600) # width x height
root.config(bg="skyblue")
# Create left and right frames
left_frame = Frame(root, width=200, height= 400, bg='grey')
left_frame.grid(row=0, column=0, padx=10, pady=5)
right_frame = Frame(root, width=650, height=400, bg='grey')
right_frame.grid(row=0, column=1, padx=10, pady=5)
# Create frames and labels in left_frame
Label(left_frame, text="Original Image", relief=RAISED).grid(row=0,
column=0, padx=5, pady=5)
image = PhotoImage(file="C:/Users/Sahar Javaid/3D
Objects/RainbowTree.png")
original_image = image.subsample(3,3)
4
'''Example of how to use the grid()
method to create a GUI layout'''
Label(left_frame, image=original_image).grid(row=1, column=0,
padx=5, pady=5) Label(right_frame, image=image,
bg='grey').grid(row=0, column=0, padx=5, pady=5)
tool_bar = Frame(left_frame, width=180, height=185, bg='grey')
tool_bar.grid(row=2, column=0, padx=5, pady=5)
def clicked():
'''if button is clicked, display message'''
print("Clicked.")
# Example labels that serve as placeholders for other widgets
Label(tool_bar, text="Tools", relief=RAISED).grid(row=0, column=0,
padx=5, pady=3, ipadx=10)
Label(tool_bar, text="Filters", relief=RAISED).grid(row=0, column=1,
padx=5, pady=3, ipadx=10)
5
'''Example of how to use the grid()
method to create a GUI layout'''
Label(left_frame, image=original_image).grid(row=1, column=0,
padx=5, pady=5) Label(right_frame, image=image,
bg='grey').grid(row=0, column=0, padx=5, pady=5)
tool_bar = Frame(left_frame, width=180, height=185, bg='grey')
tool_bar.grid(row=2, column=0, padx=5, pady=5)
def clicked():
'''if button is clicked, display message'''
print("Clicked.")
# Example labels that serve as placeholders for other widgets
Label(tool_bar, text="Tools", relief=RAISED).grid(row=0, column=0,
padx=5, pady=3, ipadx=10)
Label(tool_bar, text="Filters", relief=RAISED).grid(row=0, column=1,
padx=5, pady=3, ipadx=10)
6
'''Example of how to use the grid()
method to create a GUI layout'''
# For now, when the buttons are clicked, they only call the clicked()
method. We will add functionality later.
Button(tool_bar, text="Select", command=clicked).grid(row=1,
column=0, padx=5, pady=5, sticky='w'+'e'+'n'+'s')
Button(tool_bar, text="Crop", command=clicked).grid(row=2,
column=0, padx=5, pady=5, sticky='w'+'e'+'n'+'s')
Button(tool_bar, text="Rotate & Flip",
command=clicked).grid(row=3, column=0, padx=5, pady=5,
sticky='w'+'e'+'n'+'s')
Button(tool_bar, text="Resize", command=clicked).grid(row=4,
column=0, padx=5, pady=5, sticky='w'+'e'+'n'+'s')
Button(tool_bar, text="Black & White",
command=clicked).grid(row=1, column=1, padx=5, pady=5,
sticky='w'+'e'+'n'+'s')
root.mainloop()
7
Pack Layout Manager
The pack() method is much simpler to use for organizing widgets,
especially if you simply want Tkinter to figure out exactly where the
widget in your GUI should be.
Knowing the general location of a widget in the main window relative to
its surrounding widgets is typically all that is needed.
Widgets are organized into blocks and placed into the parent window
depending upon specified parameters.
But unlike grid() you don't need to specify the row and column values.
8
parameters for pack
side -- specifies the general location of the widget in the window,
arguments are ‘top’, ‘bottom’, ‘left’, ‘right’, default is ‘top’.
fill -- which directions you want the widget to fill in the parent window,
can choose ‘x’, ‘y’ directions or both.
padx, pady -- the number of pixels surrounding the widget to create a
padding between other widgets, for horizontal or vertical padding.
ipadx, ipady -- how many pixels to use for padding inside the widget,
also for horizontal or vertical padding
expand – set to ‘true’ if you want the widget to stretch if the parent
window expands. Default is ’false’.
anchor -- where the widget is placed in the parent widget, specified by
‘n’, ‘s’, ‘e’, ‘w’, or some combination of them. Default is ‘center’
9
'''Example of how to use the pack()
method to create a GUI layout'''
10
'''Example of how to use the pack()
method to create a GUI layout'''
11
Place Layout Manager
place() allows you to organize widgets by specifying both the position
and size of each widget relative to other widgets.
This method allows for a bit more control in designing your UI than pack
and grid, if you are willing to play around with the various x and y values.
12
Parameters for place
In__ -- specifies the master window for the widget.
x, y -- specifies the specific x and y values of the widget in the parent
window.
relx, rely -- horizontal and vertical offset relative to the size of the parent
widget, values between 0.0 and 0.1.
relwidth, relheight, sets height and width of widget relative to the size of
the parent widget, values between 0.0 and 0.1.
anchor -- where the widget is placed in the parent widget, specified by
‘n’, ‘s’, ‘e’, ‘w’ or some combination of them. Default is center.
13
'''Example of how to use the place()
method to create a GUI layout'''
14
'''Example of how to use the place()
method to create a GUI layout'''
Label(left_frame, image=original_image, bg='grey').place(rely=0.15, relwidth=1)
Label(right_frame, image=image, bg='grey').place(y=5, relwidth=1, relheight=1)
tool_bar = Frame(left_frame, width=115, height=185, bg='lightgrey') tool_bar.place(x=5, rely=0.5)
filter_bar = Frame(left_frame, width=115, height=185, bg='lightgrey') filter_bar.place(x=130, rely=0.5)
def clicked():
'''if button is clicked, display message'''
print("Clicked.")
Label(tool_bar, text="Tools", relief=RAISED).place(in_=tool_bar, relx=0.5, anchor=N) Label(filter_bar,
text="Filters", relief=RAISED).place(in_=filter_bar, relx=0.5, anchor=N)
# For now, when the buttons are clicked, they only call the clicked() method. We will add functionality later.
Button(tool_bar, text="Select", ;command=clicked).place(in_=tool_bar, relx=0.5, rely=0.20,
anchor=CENTER)
Button(tool_bar, text="Crop", command=clicked).place(in_=tool_bar, relx=0.5, rely=0.35, anchor=CENTER)
Button(tool_bar, text="Rotate & Flip", command=clicked).place(in_=tool_bar, relx=0.5, rely=0.50,
anchor=CENTER)
Button(tool_bar, text="Resize", command=clicked).place(in_=tool_bar, relx=0.5, rely=0.65, anchor=CENTER)
Button(filter_bar, text="Black & White", command=clicked).place(in_=filter_bar, relx=0.5, rely=0.20,
anchor=CENTER)
15
Tkinter Label Options
anchor: This option is used to control the positioning of the text if the widget
has more space than required for the text. The default is anchor=CENTER,
which centers the text in the available space.
bg: This option is used to set the normal background color displayed behind
the label and indicator.
height:This option is used to set the vertical dimension of the new frame.
width:Width of the label in characters (not pixels!). If this option is not set, the
label will be sized to fit its contents.
bd:This option is used to set the size of the border around the indicator. Default
bd value is set on 2 pixels.
font:If you are displaying text in the label (with the text or textvariable option),
the font option is used to specify in what font that text in the label will be
displayed.
cursor:It is used to specify what cursor to show when the mouse is moved
over the label. The default is to use the standard cursor.
16
Tkinter Label Options
extvariable: As the name suggests it is associated with a Tkinter
variable (usually a StringVar) with the label. If the variable is changed, the
label text is updated.
bitmap:It is used to set the bitmap to the graphical object specified so
that, the label can represent the graphics instead of text.
fg:The label clior, used for text and bitmap labels. The default is system
specific. If you are displaying a bitmap, this is the clior that will appear at
the position of the 1-bits in the bitmap.
image: This option is used to display a static image in the label widget.
padx:This option is used to add extra spaces between left and right of
the text within the label.The default value for this option is 1.
pady:This option is used to add extra spaces between top and bottom of
the text within the label.The default value for this option is 1.
17
Tkinter Label Options
justify:This option is used to define how to align multiple lines of text.
Use LEFT, RIGHT, or CENTER as its values. Note that to position the text
inside the widget, use the anchor option. Default value for justify is
CENTER.
relief: This option is used to specify appearance of a decorative border
around the label. The default value for this option is FLAT.
underline:This
wraplength:Instead of having only one line as the label text it can be
broken into to the number of lines where each line has the number of
characters specified to this option.
18
Label Widget in Tkinter Example
19
The Entry Widget
The Entry Widget is a Tkinter Widget used to Enter or display a single
line of text.
Syntax :
entry = tk.Entry(parent, options)
1) Parent: The Parent window or frame in which the widget to display.
2) Options: The various options provided by the entry widget are:
20
The Entry Widget Properties
bg : The normal background color displayed behind the label and
indicator.
bd : The size of the border around the indicator. Default is 2 pixels.
font : The font used for the text.
fg : The color used to render the text.
justify : If the text contains multiple lines, this option controls how the text
is justified: CENTER, LEFT, or RIGHT.
relief : With the default value, relief=FLAT. You may set this option to any
of the other styles like : SUNKEN, RIGID, RAISED, GROOVE
show : Normally, the characters that the user types appear in the entry.
To make a .password. entry that echoes each character as an asterisk, set
show=”*”.
textvariable : In order to be able to retrieve the current text from your
entry widget, you must set this option to an instance of the StringVar class.
21
The Entry Widget Methods
The various methods provided by the entry widget are:
get() : Returns the entry’s current text as a string.
delete() : Deletes characters from the widget
insert ( index, ‘name’) : Inserts string ‘name’ before the character at the
given index.
22
Entry Example
import tkinter as tk
root = tk.Tk()
name_var = tk.StringVar()
entry = tk.Entry(root,
textvariable=name_var)
entry.pack()
def print_name():
print("Name entered:",
name_var.get())
btn = tk.Button(root, text="Print
Name", command=print_name)
btn.pack()
root.mainloop()
23
Program to make a simple login
screen
import tkinter as tk
root=tk.Tk()
root.geometry("600x400")
# declaring string variable
# for storing name and password
name_var=tk.StringVar()
passw_var=tk.StringVar()
# defining a function that will
# get the name and password and
# print them on the screen
def submit():
name=name_var.get()
password=passw_var.get()
print("The name is : " + name)
print("The password is : " + password)
name_var.set("")
passw_var.set("")
24
Program to make a simple login
screen
# creating a label for
# name using widget Label
name_label = tk.Label(root, text =
'Username', font=('calibre',10, 'bold'))
# creating a entry for input
# name using widget Entry
name_entry = tk.Entry(root,textvariable =
name_var, font=('calibre',10,'normal'))
# creating a label for password
passw_label = tk.Label(root, text =
'Password', font = ('calibre',10,'bold'))
# creating a entry for password
passw_entry=tk.Entry(root, textvariable =
passw_var, font = ('calibre',10,'normal'),
show = '*')
# creating a button using the widget
# Button that will call the submit function
sub_btn=tk.Button(root,text = 'Submit',
command = submit)
25
Program to make a simple login
screen
# placing the label and entry in
# the required position using grid
# method
name_label.grid(row=0,column=0)
name_entry.grid(row=0,column=1)
passw_label.grid(row=1,column=0)
passw_entry.grid(row=1,column=1)
sub_btn.grid(row=2,column=1)
# performing an infinite loop
# for the window to display
root.mainloop()
26
27
