Develop Reference

Buttons getting misplaced after using background image in Tkinter

Whenever I run this code with a background Image the button grid gets misplaced and pushed towards the bottom. Fortunately, it works as intended when no background is added .I want them to cover the background when executed. Pictures for reference are added below. Your help is highly appreciated.
# importing the module
import tkinter.messagebox
from tkinter import *
import random
# importing the module
# initialising tkinter
class window(Frame):
def __init__(self,master = None):
Frame.__init__(self,master)
self.master = master
# initialising tkinter
# creating the window
root = Tk()
app = window(root)
root.geometry("630x630")
root.title('Odd Even Game')
C = Canvas(root, bg="blue", height=250, width=300)
filename = PhotoImage(file = "BG.png")
background_label = Label(root,image=filename)
background_label.place(x=0, y=0, relwidth=1, relheight=1)
C.pack()
frame = Frame(root)
frame.pack()
# creating the window
# image
level_1e = "p1.png"
level_1o = "pe.png"
level_2e = "r1.png"
level_2o = "re.png"
# image
def create_cards(odd_image,even_image,next_level,fno,order,suc,err,w,h):
rx = random.randint(0,order-1)
ry = random.randint(0,order-1)
for i in range(0,order):
for j in range(0,order):
if i == rx and j == ry:
create_button(i,j,suc,odd_image,next_level,fno,odd_image,w,h)
else:
create_button(i,j,err,even_image,next_level,fno,odd_image,w,h)
def second_level(fno):
fno.pack_forget()
frame2 = Frame(root)
frame2.pack()
suc = "Congratulations! You have cleared level 2..Keep Going Buddy!"
err = "Wrong Answer..Don't give up yet!"
create_cards(level_2o,level_2e,final_level,frame2,4,suc,err,157.5,157.5)
def final_level(fno):
fno.pack_forget()
root.geometry("700x700")
ap = App(root)
# creating a button function
def create_button(x,y,msg,picture,next_level,fno,odd,w,h):
if picture == odd:
image = PhotoImage(file=picture)
click = Button(fno, image=image, width= w, height=h, bd = 0,command = lambda : [score_update(),next_level(fno),tkinter.messagebox.showinfo( "Odd One Out Project",msg)])
click.image = image
click.grid( row = x, column = y)
else:
image = PhotoImage(file=picture)
click = Button(fno, image=image, width= w, height=h, bd = 0,command = lambda : [next_level(fno),tkinter.messagebox.showinfo( "Odd One Out Project",msg)])
click.image = image
click.grid( row = x, column = y)
# creating a button function
def create_frame(fno):
root.geometry("630x630")
fno.pack_forget()
frame = Frame(root)
frame.pack()
suc = "Congratulations! You have cleared level 1..Time to increas[![enter image description here][1]][1]e the difficulty!"
err = "Wrong Answer..Please Try again !!"
create_cards(level_1o,level_1e,second_level,frame,3,suc,err,200,200)
def intro():
root.geometry("630x630")
frame0 = Frame(root)
frame0.pack()
click = Button(frame0,text="Start!" ,command = lambda [create_frame(frame0),tkinter.messagebox.showinfo( "Odd One Out Project","The game has begun!!")])
click.pack()
intro()
# starting the widget
root.mainloop()
# starting the widget
The first image is the error. Second Image is the required output.
Note: I'm still a beginner in Python and Tkinter hence various terms and methods might be something out of my scope. Would be appreciated if taken into consideration.
In case needed, you might know that this is a tkinter project for picking the odd one out image out of A*A grid.

I got the answer myself so will be sharing for future use.
C = Canvas(root, bg="blue", height=250, width=300)
This part draws a canvas of 250*300 dimensions hence does not let the buttons draw over it.
just change it to,
C = Canvas(root, bg="blue", height=0, width=0)
for the desired result

How to resize the button content with the button

I have a program that resizes the buttons when you resize the window but the image doesn't resize with the buttons.
This is my code:
l = Label(window, image=img).grid(row=0, column=0, rowspan=3, sticky='nesw')
con = Frame(window).grid(row=0, column=1, sticky='nesw')
nextImg = PhotoImage(file='nextImg.png')
lastImg = PhotoImage(file='lastImg.png')
ok = PhotoImage(file="ok".png')
nextCam = Button(con, image=nextImg, command=nxt, background='#2B2B2B').grid(row=0, column=1, sticky='nesw')
lastCam = Button(con, image=lastImg, command=lst, background='#2B2B2B').grid(row=2, column=1, sticky='nesw')
takeImg = Button(con, image=ok, command=ok, background='#2B2B2B').grid(row=1, column=1, sticky='nesw')
I expect the output to look like this:
But what it actually does is:
------------------------Edit-----------------------
This needs to work with more than 2 buttons.

Interesting question. PhotoImage does not have a resize method, but you could use a PIL image to get that. If you don't have PIL you need to pip install pillow to get it.
import tkinter as tk
from PIL import Image, ImageTk
class ImageButton(tk.Button):
"""A button that displays an Image and resizes the image as the Button size changes"""
def __init__(self, master=None, image=None, **kwargs):
super().__init__(master, **kwargs)
if not image: return # no image provided; act as a normal Button
if isinstance(image, str):
self.image = Image.open(image)
elif isinstance(image, Image.Image):
self.image = image
else:
raise TypeError("'image' argument must be a PIL.Image or filename")
self.bind("<Configure>", self._on_configure)
def _on_configure(self, event=None):
size = event.width-4, event.height-4
self.photoimage = ImageTk.PhotoImage(self.image.resize(size))
self.config(image=self.photoimage)
### test / demo code: ###
def main():
root = tk.Tk()
root.geometry('200x200')
win = ImageButton(root, image="ON.gif")
win.pack(fill=tk.BOTH, expand=True)
root.mainloop()
if __name__ == '__main__':
main()
Note that you MUST define the initial size of the window for this to work. If you don't then every resize will trigger it to grow some more.

tkinter background image in Frame

I want to put a background image in a Frame, this is the code that I'm trying to run without success.
import tkinter as tk
from tkinter import *
root = tk.Tk()
F1 = Frame(root)
F1.grid(row=0)
photo = PhotoImage(file="sfondo.png")
label = Label(F1, image=photo)
label.image = photo
label.place(x=0, y=0)
b = tk.Button(label, text="Start")
b.grid(row=8, column=8)
root.mainloop()
If I run the code as this, only a little point in the top left corner is displayed (the frame without nothing in, even if I placed the label inside of it). If I replace the label parent with root, it displays the button with a little part of the image as backgound (only the perimeter of the button is colored for a few pixels). However what I want is a full displayed background image in the frame where I can put the widgets that I want.
I tried to with the place method as this and PIL module
import tkinter as tk
from tkinter import *
from PIL import Image, ImageTk
root = tk.Tk()
F1 = Frame(root)
F1.grid(row=0)
image = Image.open("sfondo.png")
render = ImageTk.PhotoImage(image)
img = tk.Label(F1, image=render)
img.image = render
img.place(x=0, y=40)
b = tk.Button(img, text="Start")
b.grid(row=8, column=8)
root.mainloop()
Here more or less I'm having the same problems, if I set the parent of the label to root, the button is displayed with the perimeter coloured.
If I set the parent to F1 nothing happens and in both cases if I set the parent as root and remove the button, the image is fully displayed.
But what I want is that the image is fully displayed in the frame and after diplay on the background image the widgets.

You could put an image on a Canvas, and then place a Button on that by putting it inside a Canvas window object which can hold any Tkinter widget.
Additional widgets can be added in a similar fashion, each inside its own Canvas window object (since they can hold only a single widget each). You can workaround that limitation by placing a Frame widget in the Canvas window, and then putting other widgets inside it.
Here's an example showing how to display a single Button:
from PIL import Image, ImageTk
import tkinter as tk
IMAGE_PATH = 'sfondo.png'
WIDTH, HEIGTH = 200, 200
root = tk.Tk()
root.geometry('{}x{}'.format(WIDTH, HEIGHT))
canvas = tk.Canvas(root, width=WIDTH, height=HEIGTH)
canvas.pack()
img = ImageTk.PhotoImage(Image.open(IMAGE_PATH).resize((WIDTH, HEIGTH), Image.ANTIALIAS))
canvas.background = img # Keep a reference in case this code is put in a function.
bg = canvas.create_image(0, 0, anchor=tk.NW, image=img)
# Put a tkinter widget on the canvas.
button = tk.Button(root, text="Start")
button_window = canvas.create_window(10, 10, anchor=tk.NW, window=button)
root.mainloop()
Screenshot:
Edit
While I don't know of a way to do it in Frame instead of a Canvas, you could derive your own Frame subclass to make adding multiple widgets easier. Here's what I mean:
from PIL import Image, ImageTk
import tkinter as tk
class BkgrFrame(tk.Frame):
def __init__(self, parent, file_path, width, height):
super(BkgrFrame, self).__init__(parent, borderwidth=0, highlightthickness=0)
self.canvas = tk.Canvas(self, width=width, height=height)
self.canvas.pack()
pil_img = Image.open(file_path)
self.img = ImageTk.PhotoImage(pil_img.resize((width, height), Image.ANTIALIAS))
self.bg = self.canvas.create_image(0, 0, anchor=tk.NW, image=self.img)
def add(self, widget, x, y):
canvas_window = self.canvas.create_window(x, y, anchor=tk.NW, window=widget)
return widget
if __name__ == '__main__':
IMAGE_PATH = 'sfondo.png'
WIDTH, HEIGTH = 350, 200
root = tk.Tk()
root.geometry('{}x{}'.format(WIDTH, HEIGTH))
bkrgframe = BkgrFrame(root, IMAGE_PATH, WIDTH, HEIGTH)
bkrgframe.pack()
# Put some tkinter widgets in the BkgrFrame.
button1 = bkrgframe.add(tk.Button(root, text="Start"), 10, 10)
button2 = bkrgframe.add(tk.Button(root, text="Continue"), 50, 10)
root.mainloop()
Result:
Update
It recently dawned on me that there actually is a simpler way to do this than creating a custom Frame subclass as shown in my previous edit above. The trick is to place() a Label with image on it in the center of the parent Frame — you are then free to use other geometry managers like pack() and grid() as you normally would — as illustrated in the sample code below. Not only is it less complicated, it's also a more "natural" way of adding widgets than needing to call a non-standard method such as add().
from PIL import Image, ImageTk
import tkinter as tk
IMAGE_PATH = 'sfondo.png'
WIDTH, HEIGHT = 250, 150
root = tk.Tk()
root.geometry('{}x{}'.format(WIDTH, HEIGHT))
# Display image on a Label widget.
img = ImageTk.PhotoImage(Image.open(IMAGE_PATH).resize((WIDTH, HEIGHT), Image.ANTIALIAS))
lbl = tk.Label(root, image=img)
lbl.img = img # Keep a reference in case this code put is in a function.
lbl.place(relx=0.5, rely=0.5, anchor='center') # Place label in center of parent.
# Add other tkinter widgets.
button = tk.Button(root, text="Start")
button.grid(row=0, column=0)
button = tk.Button(root, text="Continue")
button.grid(row=0, column=1, padx=10)
root.mainloop()
Result#2
P.S. You can download a copy of the sfondo.png background image from here.

Displaying .jpg image when button is clicked in Tkinter?

This seems like a pretty straightforward question, but i am having trouble displaying a jpg image when a button is clicked. Here is my code (without the button code for the sake of time):
from tkinter import *
#screen stuff here
canvas = Canvas(app)
canvas.grid(row = 0,column = 0)
photo = PhotoImage(file = "test.jpg")
canvas.create_image(0,0, image = photo)
def show_image():
global canvas
global photo
canvas.create_image(0,0, image = photo)
#button that calls the function down here
Thanks!

This works with Python2:
import Tkinter as tk
import ImageTk
def show_image():
x = canvas.create_image(125, 125, image=tk_img)
while True:
print('show')
canvas.itemconfigure(x, state=tk.NORMAL)
button.configure(text = 'Hide')
yield
print('hide')
canvas.itemconfigure(x, state=tk.HIDDEN)
button.configure(text = 'Show')
yield
root = tk.Tk()
canvas = tk.Canvas(root, width=250, height=250)
canvas.grid(row=0, column=0)
tk_img = ImageTk.PhotoImage(file='image.png')
button = tk.Button(
root, text="Show", command=show_image().next, anchor='w',
width=10, activebackground="#33B5E5")
button.grid(row=1, column=0)
root.mainloop()
In Python3, PhotoImage can open GIF, PPM/PGM images. To open other formats, you may need to install Pillow (a fork of the PIL project for Python3).

python PIL and tkinter; brightening image and displaying it

What I want to be able to do is open a window with two images (one image is an exact copy of the other). Then when I click a button it changes the image on the right. I hope this is making sense. The code I have no is:
from __future__ import division
from Tkinter import *
from PIL import Image, ImageTk, ImageFilter
import random
class MyApp(object):
def __init__(self):
self.root = Tk()
self.root.wm_title("Image examples")
img = Image.open("lineage.jpg").convert("RGB")
(w, h) = (img.size[0], img.size[1])
print (w, h)
tkpi = ImageTk.PhotoImage(img)
label = Label(self.root, image=tkpi)
label.grid(row=0, column=0, padx=5, pady=5, rowspan=10)
img2 = img.copy()
pixels = img2.load()
tkpi2 = ImageTk.PhotoImage(img2)
label = Label(self.root, image=tkpi2)
label.grid(row=0, column=1, padx=5, pady=5, rowspan=10)
Button(self.root, text="Brighten", command=self.brighten).grid(row=0, column= 2)
self.root.mainloop()
def brighten(self):
self.pixels = self.pixels.point(lambda x: x*1.9)
MyApp()
What I am trying to is have img2 update when I click on the brighten button. When I try now I get this error:
File "C:\Users\Admin\Desktop\imageeditor.py", line 36, in brighten
self.pixels = self.pixels.point(lambda x: x*1.9)
AttributeError: 'MyApp' object has no attribute 'pixels'
As you can tell I'm new to programming so any help to send me on the right track would be awesome.

Below is a complete solution that works. These are a few comments on the changes that were made:
Previously the __init__ method never returned because it calls self.root.mainloop() at the end. Which can cause some issues. I restructured it to be more like the hello world example in the python docs.
There is a great Darken/Lighten Example that is what the brighten() method is modeled around.
there was a from Tkinter import *, this replaced by from Tkinter import Frame, Tk, Label, Button. it turns out that both PIL and Tkinter have an attribute called Image which was really confusing to work with. Try and avoid the use of from module import * and instead be explicit in what you are importing this will prevent name space collisions.
code
from Tkinter import Frame, Tk, Label, Button
from PIL import Image, ImageTk, ImageFilter
class Application(Frame):
def __init__(self, master=None):
Frame.__init__(self, master)
master.wm_title("Image examples")
self.pack()
self.createWidgets()
def createWidgets(self):
self.img = Image.open("lineage.jpg")
self.photo1 = ImageTk.PhotoImage(self.img.convert("RGB"))
self.label1 = Label(self, image=self.photo1)
self.label1.grid(row=0, column=0)
self.photo2 = ImageTk.PhotoImage(self.img.convert("RGB"))
self.label2 = Label(self, image=self.photo2)
self.label2.grid(row=0, column=1)
button = Button(self, text="Brighten", command=self.brighten)
button.grid(row=0, column=2)
def brighten(self):
img2 = self.img.point(lambda p: p * 1.9)
self.photo2 = ImageTk.PhotoImage(img2)
self.label2 = Label(self, image=self.photo2)
self.label2.grid(row=0, column=1)
root = Tk()
app = Application(master=root)
app.mainloop()
root.destroy()

I got a working one.
from __future__ import division
from Tkinter import *
from PIL import Image, ImageTk, ImageFilter
import random
class MyApp(object):
def __init__(self):
self.root = Tk()
self.root.wm_title("Image examples")
img = Image.open("lineage.jpg").convert("RGB")
(self.w, self.h) = (img.size[0], img.size[1])
self.tkpi = ImageTk.PhotoImage(img)
self.label = Label(self.root, image=self.tkpi)
self.label.grid(row=0, column=0, padx=5, pady=5, rowspan=10)
self.img2 = img.copy()
self.pixels = self.img2.load()
self.width, self.height = self.img2.size
self.tkpi2 = ImageTk.PhotoImage(self.img2)
self.label2 = Label(self.root, image=self.tkpi2)
self.label2.grid(row=0, column=1, padx=5, pady=5, rowspan=10)
self.btn = Button(self.root, text="Brighten")
self.btn.grid(row=0, column= 2)
self.btn.bind('<Button-1>', self.brighten)
self.root.mainloop()
def brighten(self,*args):
# self.pixels = self.pixels.point(lambda x: x*1.9)
for i in range(self.w): # for every pixel:
for j in range(self.h):
# print self.pixels[i,j]
self.pixels[i,j] = (int(self.pixels[i,j][0] * 1.9),
int(self.pixels[i,j][1] * 1.9),
int(self.pixels[i,j][2] * 1.9))
self.tkpi2 = ImageTk.PhotoImage(self.img2)
self.label2.configure(image = self.tkpi2)
self.root.update_idletasks()
MyApp()