0

I want to put a small image and other widgets over a canvas on which an image is displayed. I've tried options such ascompound and other things.

Background picture is fine and the small image that I want to put over the background image shows fine but it's always top or bottom of the window. I want it to be placed over any area of background image. I've tried many options of all the geometry manager (pack, grid, place) but none of them works. Please help, here's my code :

from Tkinter import *

root = Tk()
root.iconbitmap('E:/a.ico')
root.title('Unick Locker')

canvas = Canvas(root, width=730, height=600)
canvas.grid()

bgImg = PhotoImage(file="E:/a.gif")

canvas.create_image(370, 330, image=bgImg)

login = PhotoImage(file="E:/login.gif")

lo = Label(root, image=login)
lo.grid()

root.mainloop()
Billal Begueradj
  • 20,717
  • 43
  • 112
  • 130
Bhuwan pandey
  • 53
  • 1
  • 2
  • 11
  • Why do you not create the second image the way you did the first? Using `create_image` will allow you to put the second image anywhere you want. – Bryan Oakley Jul 06 '16 at 03:22
  • @Bryan thank you for your advice but background image dissappears when i do that. is it due to the garbage collection problem ? if so, how to prevent it. any help would be appreciated very much. – Bhuwan pandey Jul 06 '16 at 05:54

4 Answers4

1

In order to add any widgets over or the foreground of any background image or canvas, the row and column values of all the widgets must be same as of the background image. so, my above mentioned program would be like this :

from Tkinter import *

root = Tk()

root.iconbitmap('E:/a.ico')

root.title('Unick Locker')

canvas = Canvas(root, width=730, height=600)

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

bgImg = PhotoImage(file="E:/a.gif")

canvas.create_image(370, 330, image=bgImg)

login = PhotoImage(file="E:/login.gif")

lo = Label(root, image=login)

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

root.mainloop()

I tried putting the same row and column values to the widgets in grid() methods which I wanted to put over the image, and it worked fine as I wanted :-)

techydesigner
  • 1,681
  • 2
  • 19
  • 28
Bhuwan pandey
  • 53
  • 1
  • 2
  • 11
0

Have you considered using the paste method, which lets you define the position of the pasted image through a box argument?

See http://effbot.org/imagingbook/imagetk.htm.

Please also take a look at this thread: Tkinter, overlay foreground image on top of a background image with transparency, which seems very similar to your issue.

Community
  • 1
  • 1
Tttt1228
  • 409
  • 5
  • 11
  • thank you for your time and help but i am having problem with PIL module. interpreter says there's no module named PIL. what to do ? – Bhuwan pandey Jul 05 '16 at 14:45
  • You're welcome. PIL stands for Python Imaging Library, more info at http://effbot.org/imagingbook/pil-index.htm, that you'll need to install. Also check [pillow](https://python-pillow.org/), which is a PIL fork maintained for Python 3 versions . – Tttt1228 Jul 05 '16 at 14:53
  • and thank you very much again. i will try and keep you notified if possible ;-) – Bhuwan pandey Jul 05 '16 at 15:09
0

You are looking to draw the widgets over the canvas, this means you must specify the canvas as the parent widget, not the root as you did. For that, modify lo = Label(root, image=login) to lo = Label(canvas, image=login)

Also, do not forget to specify the rows and columns where you want to position the different widgets. This means you need to write, for example, lo.grid(row=0, column=0) instead of lo.grid(). For the moment you do not see big problems because you have only one label widget. But if you try to add an other widget without mentioning the exact positions (rows and columns) you will get unexpected results.

Billal Begueradj
  • 20,717
  • 43
  • 112
  • 130
  • when i modify the program as you said, the background image dissappears. i think u're right but there's mistake again which makes background image dissappear. what am i doing wrong ? thank you very much for help by the way :-) – Bhuwan pandey Jul 05 '16 at 14:55
  • If it disappears this means the `login` image is larger than the area you set for `bgImg` and which is 370 x 330. The label `lo` stretches to fit its content which is `login` image in your case. – Billal Begueradj Jul 05 '16 at 15:01
  • Also: where do you precisely want to display `login` image? – Billal Begueradj Jul 05 '16 at 15:04
  • NO. the login picture is not larger than the background picture. by the way login picture is showing at corner with no background picture(has blank space that need to occupied by the bg image). – Bhuwan pandey Jul 05 '16 at 16:18
  • well i want to display the login image at the middle-left with some left-margin. – Bhuwan pandey Jul 05 '16 at 16:23
0

This question isn't about images at all, it's just a basic layout problem. You'll have the same issues with or without images. The problem is simply that you aren't giving any options to grid, so it naturally puts things at the top. Tkinter also has the behavior that a containing widget (eg: your canvas) will shrink or expand to exactly fit its contents.

Here's a version that creates several widgets over a background image. Notice the use of options to pack and grid, and the use of grid_rowconfigure and grid_columnconfigure to specify how extra space is allocated.

from Tkinter import *

root = Tk()

canvas = Canvas(root, width=730, height=600)
canvas.pack(fill="both", expand=True)

bgImg = PhotoImage(file="E:/a.gif")

canvas.create_image(370, 330, image=bgImg)

l1 = Label(canvas, text="Hello, world")
e1 = Entry(canvas)
t1 = Text(canvas)

l1.grid(row=0, column=0, sticky="ew", padx=10)
e1.grid(row=1, column=1, sticky="ew")
t1.grid(row=2, column=2, sticky="nsew")

canvas.grid_rowconfigure(2, weight=1)
canvas.grid_columnconfigure(2, weight=1)

root.mainloop()
Bryan Oakley
  • 370,779
  • 53
  • 539
  • 685