We Keep Coding

Refresh tkinter GUI after scanning three barcodes and compare strings

I am new to python and very new to GUI tkinter. I am working on a project for work that is a simple task, but I wanted to try to make it work using a GUI. The task is to scan three barcodes, parse the last nine digits of the barcodes, and compare. If they all match, then display "pass"; if they don't display, "fail". I have written the code using the basic command line and I was able to get everything to work. Now I am trying to implement that code with a graphical user interface, which is where I am struggling.
The issue I am running into is knowing how or what to update/refresh. My logic works as long as I have a string entered in the ENTRY text box before the code is executed. If the strings are different, it fails; if they are the same or empty, it passes.
I wanted to be able to scan three serial numbers and have the bottom frame update pass or fail and then scan a different set of serial numbers and get another result. See my code below. Any help will be greatly appreciated. Thanks everyone!
from tkinter import *
# FUNCTION THAT ALLOWS THE CURSOR TO MOVE TO THE NEXT ENTRY TEXT BOX AUTOMATICALLY.
def go_to_next_entry(event, entry_list, this_index):
next_index = (this_index + 1) % len(entry_list)
entry_list[next_index].focus_set()
# FUNCTION THAT DETERMINES IF THE THREE SERIAL NUMBERS ARE THE SAME OR DIFFERENT.
# DISPLAYS PASS OR FAIL BASED ON RESULT OF CONDITION.
def get_results():
# DECLARING AND INITIALISING VARIABLES THAT ARE EQUAL TO INPUT FROM ENTRY TEXT BOXES.
scan_one = scan_one_entry.get()
scan_two = scan_two_entry.get()
scan_three = scan_three_entry.get()
# PARSING THE LAST NINE DIGITS OF THE ENTERED STRING.
parsed_scan_one = scan_one[-9:]
parsed_scan_two = scan_two[-9:]
parsed_scan_three = scan_three[-9:]
# IF-ELSE CONDITION THAT DISPLAYS PASS IF THREE SERIAL NUMBERS ARE THE SAME AND FAIL IF THEY
ARE NOT THE SAME.
if parsed_scan_one == parsed_scan_two and parsed_scan_two == parsed_scan_three and
parsed_scan_three == parsed_scan_one:
# DELETING DATA THAT IS STORED IN ENTRY TEXT BOXES.
scan_one_entry.delete(0, END)
scan_two_entry.delete(0, END)
scan_three_entry.delete(0, END)
# PLACING THE PASS BOTTOM FRAME IF CONDITION IS MET.
pass_bottom_frame.grid(row=1, sticky="ns, ew")
# CREATING PASS BOTTOM FRAME WIDGETS OF IF CONDITION IS MET.
pass_label = Label(pass_bottom_frame,
text='PASSED SCAN CHECK!',
font=('Helvetica', 100),
justify="center")
# PICKING BACKGROUND COLOR AND FONT COLOR OF LABEL WIDGET
pass_label.config(bg="#63d464", fg="#000000")
# PLACING THE PASS BOTTOM FRAME WIDGET IF CONDITION IS MET
pass_label.place(relx=.5, rely=.5, anchor="center")
else:
# DELETING DATA THAT IS STORED IN ENTRY TEXT BOXES.
scan_one_entry.delete(0, END)
scan_two_entry.delete(0, END)
scan_three_entry.delete(0, END)
# PLACING THE FAILED BOTTOM FRAME.
fail_bottom_frame.grid(row=1, sticky="ns, ew")
# CREATING PASS BOTTOM FRAME WIDGETS.
fail_label = Label(fail_bottom_frame,
text='FAILED SCAN CHECK!',
font=('Helvetica', 100),
justify="center")
# PICKING BACKGROUND COLOR AND FONT COLOR OF LABEL WIDGET.
fail_label.config(bg="#f51023", fg="#000000")
# PLACING THE FAILED BOTTOM FRAME WIDGET.
fail_label.place(relx=.5, rely=.5, anchor="center")
# CREATING MAIN WINDOW
main_window = Tk()
main_window.title('Serial Number Barcode Scan Check')
main_window.state("zoomed")
# CREATING THE MAIN FRAMES THAT WILL BE PLACED IN MAIN WINDOW
top_frame = Frame(main_window, width=1800, height=500)
pass_bottom_frame = Frame(main_window, bg="#63d464", width=1800, height=500)
fail_bottom_frame = Frame(main_window, bg="#f51023", width=1800, height=500)
# LAYOUT MAIN TOP FRAME
main_window.grid_rowconfigure(1, weight=1)
main_window .grid_columnconfigure(0, weight=1)
# PLACING TOP FRAME
top_frame.grid(row=0, sticky="ns, ew")
# CREATING TOP FRAME WIDGETS
# TOP THREE ARE LABELS AND THE LAST THREE ARE ENTRY BOXES
scan_one_label = Label(top_frame,
text='ENTER SCAN ONE: ',
font=('Helvetica', 40))
scan_two_label = Label(top_frame,
text='ENTER SCAN TWO: ',
font=('Helvetica', 40))
scan_three_label = Label(top_frame,
text='ENTER SCAN THREE: ',
font=('Helvetica', 40))
scan_one_entry = Entry(top_frame, font="Helvetica 20", justify="center", border=5)
scan_two_entry = Entry(top_frame, font="Helvetica 20", justify="center", border=5)
scan_three_entry = Entry(top_frame, font="Helvetica 20", justify="center", border=5)
# PLACING THE TOP FRAME WIDGETS INTO THE TOP FRAME
scan_one_label.grid(row=0, column=0, sticky='w')
scan_two_label.grid(row=1, column=0, sticky='w')
scan_three_label.grid(row=2, column=0, sticky='w')
scan_one_entry.grid(row=0, column=1, ipadx=100, ipady=8)
scan_two_entry.grid(row=1, column=1, ipadx=100, ipady=8)
scan_three_entry.grid(row=2, column=1, ipadx=100, ipady=8)
# CODE USED TO MOVE TO EACH ENTRY TEXT BOX AUTOMATICALLY
entries = [child for child in top_frame.winfo_children() if isinstance(child, Entry)]
for index, entry in enumerate(entries):
entry.bind('<Return>', lambda e, index=index: go_to_next_entry(e, entries, index))
# CALLING THE FUNCTION GET RESULTS
get_results()
# MAIN LOOP
main_window.mainloop()

Tkinter Grid System: Arranging Elements

I am currently coding a program with will tie in with Discord's rich presence, and I am needing to create a GUI for it in Tkinter. The issue is, I cannot understand how to place elements correctly. It has been quite a pain. Here is what I am planning to have the app sort of look like: https://i.stack.imgur.com/K9Wox.jpg
However, with my current code, this is how abismal the GUI looks... https://i.stack.imgur.com/wGA9A.jpg
Here is my code:
root = tkinter.Tk()
root.title("Matter: A Discord Rich Presence Tool")
root.config(bg='#2C2F33')
root.geometry("560x300")
#root.overrideredirect(1)
# Load images
loadProfileImage = tkinter.PhotoImage(file="resources/loadprofile.png")
saveProfileImage = tkinter.PhotoImage(file="resources/saveprofile.png")
newProfileImage = tkinter.PhotoImage(file="resources/newprofile.png")
# GUI Hell starts here
topCanvas = tkinter.Canvas(root, width=600, height=150)
topCanvas.config(bd=0, highlightthickness=0, relief='ridge', background="#7289DA")
topTextFieldText = tkinter.StringVar(value='Sample top text')
topTextField = tkinter.Entry(root, textvariable=topTextFieldText)
topTextField.config(borderwidth=0, background="#7289DA")
bottomTextFieldText = tkinter.StringVar(value='Sample bottom text')
bottomTextField = tkinter.Entry(root, textvariable=bottomTextFieldText)
bottomTextField.config(borderwidth=0, background="#7289DA")
largeIconName = tkinter.StringVar()
largeIconNameField = tkinter.Entry(root, textvariable=largeIconName)
smallIconName = tkinter.StringVar()
smallIconNameField = tkinter.Entry(root, textvariable=smallIconName)
applicationIDFieldText = tkinter.StringVar()
applicationIDField = tkinter.Entry(root, textvariable=applicationIDFieldText)
applicationIDField.config(borderwidth=0, background="#23272A")
largeIconHoverText = tkinter.StringVar()
largeIconHoverTextField = tkinter.Entry(root, textvariable=largeIconHoverText)
largeIconHoverTextField.config(borderwidth=0, background="#23272A")
smallIconHoverText = tkinter.StringVar()
smallIconHoverTextField = tkinter.Entry(root, textvariable=smallIconHoverText)
smallIconHoverTextField.config(borderwidth=0, background="#23272A")
#greet_button = tkinter.Button(root, text="Run", command=run)
buttonFrame = tkinter.Frame(height=2, bd=0, relief=tkinter.SUNKEN)
newProfileButton = tkinter.Button(root, text="Save to profile", command=save)
newProfileButton.config(image=newProfileImage, borderwidth=0, background="#23272A")
saveButton = tkinter.Button(root, text="Save to profile", command=save)
saveButton.config(image=saveProfileImage, borderwidth=0, background="#23272A")
loadButton = tkinter.Button(root, command=load)
loadButton.config(image=loadProfileImage, borderwidth=0, background="#23272A")
# Grid stuff
topCanvas.grid(row=0, column=1)
applicationIDField.grid(row=3, column=1)
largeIconHoverTextField.grid(row=3, column=2)
smallIconHoverTextField.grid(row=3, column=3)
newProfileButton.grid(row=5, column=1, padx=(20, 5))
saveButton.grid(row=5, column=2, padx=(5, 5))
loadButton.grid(row=5, column=3, padx=(5, 20))
root.mainloop()
Any guidance would be greatly appreciated since I cannot seem to be able to figure out how to use Tkinter's grid to make a layout similar to the images above.

Do not try to put everything into a single grid. Divide your UI up into sections, and then use the right tool for each section.
Start at the root window
I see two major sections to your UI: a top section in blue that has some information, and a bottom section with a black background that has some buttons.
So, I would start by creating those two sections in the root window, and use pack to place one on top of the other:
topFrame = tk.Frame(root, background="#7289DA")
bottomFrame = tk.Frame(root, background="#2C2F33")
topFrame.pack(side="top", fill="both", expand=True)
bottomFrame.pack(side="bottom", fill="both", expand=True)
With that, you will now always have the root divided into two colored regions. The above code gives them an equal size. You may one to change the expand value to False for one or the other, depending on what you want to happen when the user resizes the window.
Don't worry too much about the size, though. It will change once you start adding widgets to each section.
Next, do the bottom section
The bottom also appears to be in two sections: one for inputs and one for buttons. You could use a single grid layout for this whole section, but to illustrate the concept of dividing the UI into sections we'll split the bottom into two. Plus, because everything isn't neatly lined up into rows and columns, this will make things a bit easier.
As I mentioned earlier, you may want to fiddle around with the expand option, depending on if you want these frames to resize equally or stay the same size when the user resizes the window.
inputFrame = tk.Frame(bottomFrame, background="#2C2F33")
buttonFrame = tk.Frame(bottomFrame, background="#2C2F33")
inputFrame.pack(side="top", fill="both", expand=True)
buttonFrame.pack(side="top", fill="both", expand=True)
Note: if you stop right here and try to run your program, you might not see these frames. During development it sometimes helps to give them distinctive colors to help you visualize. Once you get everything working, you can adjust the colors to their final values.
Add the entry widgets
Now we can add the entry widgets to the top half of the bottom section. We can use grid here, since everything is lined up neatly. An important step is to give the rows an equal weight so that they grow and shrink together, though you can make it so that only one column resizes if you wish.
I'll also point out that there's no need to use StringVar instance. You can, but it adds extra objects to keep track of, which in most cases is not necessary.
label1 = tk.Label(inputFrame, text="APPLICATION ID",
foreground="lightgray",
background="#2C2F33")
label2 = tk.Label(inputFrame, text="LARGE IMAGE HOVER",
foreground="lightgray",
background="#2C2F33")
label3 = tk.Label(inputFrame, text="SMALL IMAGE HOVER",
foreground="lightgray",
background="#2C2F33")
# columns should get extra space equally. Give any extra vertical space
# to an empty column below the entry widgets
inputFrame.grid_columnconfigure((0,1,2), weight=1)
inputFrame.grid_rowconfigure(2, weight=1)
appIdEntry = tk.Entry(inputFrame, borderwidth=0,
highlightthickness=0,
background="#23272A", bd=0)
largeImageEntry = tk.Entry(inputFrame,
highlightthickness=0,
background="#23272A", bd=0)
smallImageEntry = tk.Entry(inputFrame, borderwidth=0,
highlightthickness=0,
background="#23272A", bd=0)
label1.grid(row=0, column=0, sticky="w")
label2.grid(row=0, column=1, sticky="w", padx=10)
label3.grid(row=0, column=2, sticky="w")
appIdEntry.grid(row=1, column=0, sticky="ew")
largeImageEntry.grid(row=1, column=1, sticky="ew", padx=10)
smallImageEntry.grid(row=1, column=2, sticky="ew")
This gives us the following:
Notice that the top appears to have shrunk. That's only because it's empty. Tkinter is really good about expanding and shrinking things to fit what's inside. Don't worry too much about it. You can tweak things once you get everything working.
And so on...
I don't want to rewrite your whole program in this answer. The point here is that you should break your UI up into logical chunks, and make each chunk a frame. You are then free to use whatever geometry manager makes the most sense within that frame. Sometimes grid is best, sometimes pack. In either case, it's much easier to manage a few high level frames than it is to try to cram dozens of widgets into a single grid, especially when there are no clear cut rows and/or columns.
This solution also makes it pretty easy to create functions or classes for each section. For example, your main program might look like:
root = tkinter.Tk()
top = topSection(root)
bottom = bottomSection(root)
By doing so, if you decide to completely redesign one section of the UI, you can do so without worrying that you'll mess up the layout in the other sections, since each frame is mostly independent of any other frame.

First you have to explain to the grid geometry manager that you want the canvas to span all three columns:
topCanvas.grid(row=0, column=1, columnspan=3)
Widgets do not automatically expand to fill the entire column (or row) if you don't specify it and it will center itself in a cell if you dont specify where you want it with sticky:
newProfileButton.grid(row=5, column=1, padx=(20, 5), sticky='w')
saveButton.grid(row=5, column=2, padx=(5, 5), sticky='w')
loadButton.grid(row=5, column=3, padx=(5, 20), sticky='w')
This will hopefully give you something to play with although it's not a complete answer.
Here is a good tutorial: Getting Tkinter Grid Sizing Right the first time

Tkinter - Grid elements next to each other

I'm trying to make some UI in python with tkinter.
This is a sample of the code I'm using:
root = Tk()
root.geometry("1000x700x0x0")
canvas = Canvas(root, width = 700, height = 700, bg ='white').grid(row = 0, column = 0)
button1 = Button(root, text = "w/e", command = w/e).grid(row = 0, column = 1)
button2 = Button(root, text = "w/e", command = w/e).grid(row = 1, column = 1)
This is what i'm getting:
and this is what I want:
Any help on how can I do it?
Thanks!

Since your GUI seems to have two logical groups of widgets, I would organize it as such. Start by placing the canvas on the left and a frame on the right. You can use pack, place, grid, or a paned window to manage them. For a left-to-right orientation, pack is a good choice due to its simplicity
Note that you don't have to do it this way, but experience has taught me it makes layout problems much easier to solve.
In the following example I set expand to False for the button frame, which means that the canvas will grow and shrink when the user resizes (because it has expand=True), but the buttons will only take up exactly as much space as they need.
canvas = Canvas(root, ...)
buttonframe = Frame(root, ...)
canvas.pack(side="left", fill="both", expand=True)
buttonframe.pack(side="right", fill="both", expand=False)
Next, you can put all of the buttons in the right side without having to worry how their placement might affect objects on the left.
The important thing to remember when using grid is that you should designate at least one row and at least one column to be given any extra space. This can be a row and/or column that contains widgets, or it can be an empty row and column on an edge.
button1 = Button(buttonframe, ...)
button2 = Button(buttonframe, ...)
button3 = Button(buttonframe, ...)
...
button1.grid(row=0, column=0)
button2.grid(row=0, column=1)
button3.grid(row=1, column=0)
...
buttonframe.grid_rowconfigure(100, weight=1)
buttonframe.grid_columnconfigure(2, weight=1)
note: if you need to keep a reference to a widget, you must create the widget and call grid (or pack or place) on two separate lines. This is because Button(...).grid(...) returns the value of the last function call, and grid(...) returns None

Tkinter: grid or pack inside a grid?

I am building a GUI for a software and want to achieve this:
######################################
# | some title #
# menu upper |----------------------#
# | #
# | CANVAS #
# menu lower | #
# | #
#------------------------------------#
# statusbar #
######################################
Menu upper has some high level functionality, menu lower is changing in dependency of user input. Statusbar changes its contents often.
Unfortunately, Tkinter refuses to work.
Using the grid layout manager I were unable to create a stable design and adding content like labels and buttons to the menu on the left side:
self.root = tk.Tk()
self.root.resizable(width=0, height=0)
self.root.title("some application")
# menu left
self.menu_left = tk.Frame(self.root, width=150, bg="#ababab")
self.menu_left.grid(row=0, column=0, rowspan=2, sticky="ns")
self.menu_left_upper = tk.Frame(self.menu_left, width=150, height=150, bg="red")
self.menu_left_upper.grid(row=0, column=0)
# this label breaks the design
#self.test = tk.Label(self.menu_left_upper, text="test")
#self.test.pack()
self.menu_left_lower = tk.Frame(self.menu_left, width=150, bg="blue")
self.menu_left_lower.grid(row=1, column=0)
# right area
self.some_title_frame = tk.Frame(self.root, bg="#dfdfdf")
self.some_title_frame.grid(row=0, column=1, sticky="we")
self.some_title = tk.Label(self.some_title_frame, text="some title", bg="#dfdfdf")
self.some_title.pack()
self.canvas_area = tk.Canvas(self.root, width=500, height=400, background="#ffffff")
self.canvas_area.grid(row=1, column=1)
self.root.mainloop()
This design worked without contents in the menu on the left side. Whenever I added something in self.menu_left_upper or self.menu_left_lower, like the test label, my design got broke: the menu frames disappeared.
Additionally, even with columnspan, I had to remove the statusbar, because when it was added the menus on the left disappeared, again.
Using pack layout manager I got this:
######################################
# | some title #
# |----------------------#
# menu upper | #
# | CANVAS #
# | #
# menu lower | #
# |----------------------#
# | statusbar #
######################################
Since I wanted the menu frame on the left to consume the full y-space I made it grow with pack(side="left", expand=True, fill="both"), but this setup always denies the statusbar to go for the full width.
Besides, the pure pack manager code looks "ugly". I think a design with a grid manager is "clearer". Therefore I thought a grid or a pack layout inside a grid layout would be nice?
Can anyone help? I am stuck in the GUI-hell :/

The key to doing layout is to be methodical, and to use the right tool
for the job. It also means that sometimes you need to be creative.
That means using grid when laying things out in a
grid, and using pack when laying things out top-to-bottom or
left-to-right.
The other key is to group your layout code together. It's much, much
easier to visualize and modify the layout when it's all in one block
of code.
In your case you seem to have three or four distinct areas, depending
on how you count. If you want to use grid, it will be easiest to
combine "menu upper" and "menu lower" into a frame, and treat that
whole frame as a table cell. It looks like you're already doing that,
which is good.
So, let's start with those main areas:
self.menu_left.grid(row=0, column=0, rowspan=2, sticky="nsew")
self.some_title_frame.grid(row=0, column=1, sticky="ew")
self.canvas_area.grid(row=1, column=1, sticky="nsew")
# you don't have a status bar in the example code, but if you
# did, this is where you would put it
# self.status_frame.grid(row=2, column=0, columnspan=2, sticky="ew")
Any time you use grid, you need to give at least one row and one
column a positive weight so that tkinter knows where to use any
unallocated space. Usually there is one widget that is the "main"
widget. In this case it's the canvas. You want to make sure that the
row and column for the canvas has a weight of 1 (one):
self.root.grid_rowconfigure(1, weight=1)
self.root.grid_columnconfigure(1, weight=1)
note: using pack instead of grid would save you two lines of code, since pack doesn't require you to set weights the way grid does.
Next, we need to solve the problem of the menu areas. By default,
frames shrink to fit their contents, which is why adding the label
broke your layout. You weren't telling tkinter what to do with extra space, so the frames shrunk to fit, and extra space went unused.
Since you want "menu_upper" and "menu_lower" to
each share 50% of that area, pack is the simplest solution. You can
use grid, but it requires more lines of code to add the row and column weights.
self.menu_left_upper.pack(side="top", fill="both", expand=True)
self.menu_left_lower.pack(side="top", fill="both", expand=True)
Here is a functioning version, with statusbar. Notice how it behaves exactly as it should when you resize the window:
import Tkinter as tk
class Example():
def __init__(self):
self.root = tk.Tk()
self.root.title("some application")
# menu left
self.menu_left = tk.Frame(self.root, width=150, bg="#ababab")
self.menu_left_upper = tk.Frame(self.menu_left, width=150, height=150, bg="red")
self.menu_left_lower = tk.Frame(self.menu_left, width=150, bg="blue")
self.test = tk.Label(self.menu_left_upper, text="test")
self.test.pack()
self.menu_left_upper.pack(side="top", fill="both", expand=True)
self.menu_left_lower.pack(side="top", fill="both", expand=True)
# right area
self.some_title_frame = tk.Frame(self.root, bg="#dfdfdf")
self.some_title = tk.Label(self.some_title_frame, text="some title", bg="#dfdfdf")
self.some_title.pack()
self.canvas_area = tk.Canvas(self.root, width=500, height=400, background="#ffffff")
self.canvas_area.grid(row=1, column=1)
# status bar
self.status_frame = tk.Frame(self.root)
self.status = tk.Label(self.status_frame, text="this is the status bar")
self.status.pack(fill="both", expand=True)
self.menu_left.grid(row=0, column=0, rowspan=2, sticky="nsew")
self.some_title_frame.grid(row=0, column=1, sticky="ew")
self.canvas_area.grid(row=1, column=1, sticky="nsew")
self.status_frame.grid(row=2, column=0, columnspan=2, sticky="ew")
self.root.grid_rowconfigure(1, weight=1)
self.root.grid_columnconfigure(1, weight=1)
self.root.mainloop()
Example()
On an unrelated note: I would strongly encourage you to not remove the ability for the user to resize the window. They know better than you what their requirements are. If you use grid and pack properly, the GUI will resize perfectly.

Adding the following code right before self.root.mainloop() achieves what you're looking for
self.some_status = tk.Label(self.root, text="status bar", bg="#dfdfdf")
self.some_status.grid(row=3, column=0, columnspan=2, sticky="we")

By putting in the line:
menu_left_upper.grid_propagate(False)
In between your menu_left_upper Frame and menu_left_upper.mainloop()
This works as:
By default, a container widget expands or collapses to be just big enough to hold its contents. Thus, when you call pack, it causes the frame to shrink. This feature is called geometry propagation.
For the vast majority of applications, this is the behavior you want. For those rare times when you want to explicitly set the size of a container you can turn this feature off. To turn it off, call either pack_propagate or grid_propagate on the container (depending on whether you're using grid or pack on that container), giving it a value of False.
See link to another question where this came from
To get your status bar just implement another frame and grid method:
status_bar_frame = Frame(root, bg="#dfdfdf")
status_bar_frame.grid(row=3, column=0, columnspan=2, sticky="we")
status_bar = Label(status_bar_frame, text="status bar", bg="#dfdfdf")
status_bar.pack()
Then your plan works.
Hope it helps :)
PS. Also why all the self attributes?
EDIT:
TO work you need to do:
menu_left_upper = Frame(menu_left, width=225, height=225, bg="red")
menu_left_upper.grid_propagate(False)
menu_left_upper.grid(row=0, column=0)
# this label breaks the design
test = Label(menu_left_upper, text="test", bg='red')
test.grid()
My result

How can I stack buttons rather than queue them in Tkinter?

At the moment I have 3 basic buttons being displayed:
from tkinter import *
root = Tk()
topFrame = Frame(root)
topFrame.pack(side=TOP)
leftFrame = Frame(root)
leftFrame.pack(side=LEFT)
botFrame = Frame(root)
botFrame.pack(side=BOTTOM)
button1 = Button(leftFrame, text="Button 1", fg="Black")
button2 = Button(leftFrame, text="Button 2", fg="Black")
button3 = Button(leftFrame, text="Button 3", fg="Black")
button1.pack(side=LEFT)
button2.pack(side=LEFT)
button3.pack(side=LEFT)
root.mainloop()
The 3 buttons at the moment will stick to the left frame on the window, however then will queue next to each other rather than stack one on top of the other, how do i fix this?

You're explicitly telling them to be side-by-side with side=LEFT. You want side=TOP so that they are placed at the top of the empty space in the frame.
button1.pack(side=TOP)
button2.pack(side=TOP)
button3.pack(side=TOP)
When you use pack, the values TOP, LEFT, RIGHT and BOTTOM tell the widget which side of the remaining space they should occupy. The first time you use LEFT it will reserve the left side of the whole frame for the widget. The next time you use LEFT, that refers to the space remaining in the widget excluding the left edge since that already has a widget in it. The net effect is that LEFT causes widgets to be arranged left-to-right, RIGHT arranges them right-to-left, and so on.

Explore the grid function. Change your pack statements to
button1.grid(row=0,column=0)
button2.grid(row=1,column=0)
button3.grid(row=2,column=0)