how to create a tk.label with 3 buttons

Question

I have trouble creating a tk.label that has three buttons where I want them. I don't see the buttons and I don't know how to move them through the self.w and self.h

class App(tk.Tk):
    def __init__(self, delay):
        global image_files
        tk.Tk.__init__(self)
        self.w = self.winfo_screenwidth()
        self.h = self.winfo_screenheight()
        self.overrideredirect(1)
        self.geometry("%dx%d+0+0" % (self.w, self.h))
        self.delay = delay*1000
        self.pictures = []
        self.setKeyBindings()
        self.track_img_ndex = 0
        for img in image_files:
            self.pictures.append(img)            
        self.picture_display = tk.Label(self)
        self.picture_display.pack(expand=True, fill="both")
        
        frame = tk.Frame(self).pack()
        
        self.boton_izquierdo= tk.Button(frame, text='Previous picture', command=lambda: move(-1)).pack(side=tk.LEFT)
        self.boton_derecho= tk.Button(frame, text='Next picture', command=lambda: move(+1)).pack(side=tk.LEFT)
        self.boton_salida= tk.Button(frame, text='Quit', command=self.quit).pack(side=tk.LEFT)`

I'd like to see the buttons above the picture

FIRST SOLUTION NOT ALL THE BEST

up = tk.Frame(root)
up.grid(column=0, row=0,columnspan=3,sticky='n')
s1 = tk.Label(up, text='spacer')
s1.pack()

left = tk.Frame(root)
b1 = tk.Button(left, text='B1')
left.grid(column=0,row=1,sticky='w')
b1.pack()

middle = tk.Frame(root)
middle.grid(column=1, row=1)
s2 = tk.Label(middle, text='spacer')
image = Image.open(image_list[current])
photo = ImageTk.PhotoImage(image)
s2['image'] = photo
s2.photo = photo
s2.pack()

down = tk.Frame(root)
qb = tk.Button(down, text='Exit', command= root.destroy)
down.grid(column=0, row=2,columnspan=3,sticky='s')
qb.pack()

right = tk.Frame(root)
right.grid(column=2,row=1,sticky='e')
b2 = tk.Button(right, text='B2')
b2.pack()

root.columnconfigure(0,weight=1) #left get space
root.columnconfigure(2,weight=1) #right get space

root.rowconfigure(0, weight=1) #up get space
root.rowconfigure(2, weight=1) #down get space

root.mainloop()

SOLUTION TO PUT OVERLAYS IN WIDGETS.

label = Tkinter.Label(root, compound=Tkinter.TOP)
label.pack()



A=Tkinter.Button(root, text='Previous picture', command=lambda: move(-1))
A.place(relx=0, x=2, y=20,width=130,height=100)
B=Tkinter.Button(root, text='Next picture', command=lambda: move(+1))
B.place(relx=0, x=135, y=20,width=130,height=100)
C=Tkinter.Button(root, text='PRINT', command=root.quit)
C.place(relx=1, x=-130, y=20,width=130,height=100)

move(0)
root.update()
root.mainloop()

finally the problem is solved with place(), when you want to put buttons on top of images.

You can use `place()` instead of `pack()` to put the buttons on top of (overlay) the label. — acw1668, Aug 16 '20 at 01:18

score 1 · Answer 1 · answered Aug 15 '20 at 17:44

1

I don't know how to move them through the self.w and self.h

there ara several options but since you want have a fullscreen apllication which can easier achieved with this, you may think about using the layoutmanager place instead of pack.

Read the links for the changes:

why seperate your layoutmanagement from your initialsation.

syntax self

import tkinter as tk

class App(tk.Tk):
    def __init__(self):
        global image_files
        tk.Tk.__init__(self)
        self.w = self.winfo_screenwidth()
        self.h = self.winfo_screenheight()
        self.overrideredirect(1)
        self.geometry("%dx%d+0+0" % (self.w, self.h))
        #self.delay = delay*1000
        self.pictures = []
        #self.setKeyBindings()
        #self.track_img_ndex = 0
        #for img in image_files:
            #self.pictures.append(img)            
        #self.picture_display = tk.Label(self)
        #self.picture_display.pack(expand=True, fill="both")
        
        self.frame = tk.Frame(self)
        self.frame.pack()
        
        self.boton_izquierdo= tk.Button(self.frame, text='Previous picture', command=lambda: move(-1))
        self.boton_izquierdo.pack(side=tk.LEFT)
        self.boton_derecho= tk.Button(self.frame, text='Next picture', command=lambda: move(+1))
        self.boton_derecho.pack(side=tk.LEFT)
        self.boton_salida= tk.Button(self.frame, text='Quit', command=self.quit)
        self.boton_salida.pack(side=tk.LEFT)

App().mainloop()

answered Aug 15 '20 at 17:44

Thingamabobs

7,274
5
21
54

In the example you send me I see that it has been put in a column but I don't see the buttons above the image. I would like the image to be the background, the size to be the fullscreen with the buttons on top. I don't understand why they stay down. – virtualsets Aug 15 '20 at 18:50
cause you create a fullscreen image above. If you want them to be on top there are several ways to go `lift()` for each button could be a way. Or you using grid like here https://stackoverflow.com/a/63314238/13629335 – Thingamabobs Aug 15 '20 at 19:18
Thank you, I put your solution but I don't think that's what I'm looking for. I'm looking for the buttons to be on top of the image or to map regions of the image with events. Can you think of anything? – virtualsets Aug 15 '20 at 23:59
1

Yes look over here https://stackoverflow.com/a/10181434/13629335 – Thingamabobs Aug 16 '20 at 07:07
Thank you Atlas435 . Finally with place() works well. I put the solution for the next person. – virtualsets Aug 16 '20 at 07:27
1

You're welcome. Please add this code as answer and accept it as soon as possible to mark this question as solved. – Thingamabobs Aug 16 '20 at 07:31
@virtualsets Does putthing the button and the image in the same `grid()` work? – Delrius Euphoria Aug 16 '20 at 11:40
I think no, I think that need place() to put in the same place. – virtualsets Aug 16 '20 at 12:53
@CoolCloud somehow yes, but would need additional code like `grid(..sticky='e')` on the buttons but it dosent have the flexibility of place. I think in this case it is good practice. – Thingamabobs Aug 16 '20 at 12:57
yes sure, but wouldnt `place()` vary between different devices since it uses pixels? cause in my program i noticed in different device it looks slightly mis-positioned from how it looks on my code – Delrius Euphoria Aug 16 '20 at 13:47
Well it depends, here we have overrideredirect and geometry to fullscreen, also he is using relx. So I think in this specific case its not a bad choice. – Thingamabobs Aug 16 '20 at 14:08

score 0 · Answer 2 · answered Aug 16 '20 at 08:18

SOLUTION TO PUT OVERLAYS IN WIDGETS.

label = Tkinter.Label(root, compound=Tkinter.TOP)
label.pack()

A=Tkinter.Button(root, text='Previous picture', command=lambda: move(-1))
A.place(relx=0, x=2, y=20,width=130,height=100)
B=Tkinter.Button(root, text='Next picture', command=lambda: move(+1))
B.place(relx=0, x=135, y=20,width=130,height=100)
C=Tkinter.Button(root, text='PRINT', command=root.quit)
C.place(relx=1, x=-130, y=20,width=130,height=100)

move(0)
root.update()
root.mainloop()

finally the problem is solved with place(), when you want to put buttons on top of images.

how to create a tk.label with 3 buttons

2 Answers2