CODEWITHSUNDEEP
pythonuser-interfacetkinterbackground-imagetkinter-canvas
gyan mishra
gyan mishra

Reputation: 94

How to get two images on separate frames using Canvas in tkinter?

in the following code I am trying to put two images on two separate window frames using Canvas

PANEL_HEIGHT = 440
PANEL_WIDTH = 304
BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"
MANAGE_ACC_BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"

class window1:

    def __init__(self):
        self.panel = Tk()
        self.panel.geometry(f"{PANEL_WIDTH}x{PANEL_HEIGHT}")


        self.canvas = Canvas(self.panel,width=2*PANEL_WIDTH, height=2*PANEL_HEIGHT)
        canvas = self.canvas

        img = PhotoImage(file=BKG_IMG)
        canvas.create_image(PANEL_WIDTH,PANEL_HEIGHT,image=img)
        canvas.place(x=-(PANEL_WIDTH/2),y=-(PANEL_HEIGHT/2))

class window2:

    def __init__(self):
        self.panel = Tk()
        self.panel.geometry(f"{PANEL_WIDTH}x{PANEL_HEIGHT}")


        self.canvas = Canvas(self.panel, width=2 * PANEL_WIDTH, height=2 * PANEL_HEIGHT)
        canvas = self.canvas
        img = PhotoImage(file=MANAGE_ACC_BKG_IMG)
        canvas.create_image(PANEL_WIDTH, PANEL_HEIGHT, image=img)
        canvas.place(x=-(PANEL_WIDTH / 2), y=-(PANEL_HEIGHT / 2))

window1()
window2()

on calling these two classes I am getting "image 'pyimage2' doesn't exist" error

Absolute path of both the files are

D:\pyAut\pythonBootCamp\backgrounds\manage_acc_ui_bkg.png D:\pyAut\pythonBootCamp\main.py

could any body tell how to accomplish the task????

Upvotes: 0

Views: 364

Answers (3)

Ramesh
Ramesh

Reputation: 554

Hope you are satisfied with the information given

import tkinter as tk
from PIL import ImageTk, Image

PANEL_HEIGHT = 440
PANEL_WIDTH = 304

main = tk.Tk()

BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"
MANAGE_ACC_BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"


class window1:
    window = tk.Toplevel(main)
    window.geometry(f"{PANEL_WIDTH}x{PANEL_HEIGHT}")
    window.title("Window 1")
    img = ImageTk.PhotoImage(Image.open(BKG_IMG))
    canvas = tk.Canvas(window, width=PANEL_WIDTH, height=PANEL_HEIGHT, background="white")
    canvas.pack()
    canvas.create_image(PANEL_WIDTH, PANEL_HEIGHT, image=img)


class window2:
    main.title("Window 2")
    main.geometry(f"{PANEL_WIDTH}x{PANEL_HEIGHT}")

    img = ImageTk.PhotoImage(Image.open(MANAGE_ACC_BKG_IMG))
    canvas = tk.Canvas(main, width=PANEL_WIDTH, height=PANEL_HEIGHT, background="white")
    canvas.pack()
    canvas.create_image(PANEL_WIDTH, PANEL_HEIGHT, image=img)


window1()
window2()

main.mainloop()

output:

Upvotes: 1

Michael Stevens
Michael Stevens

Reputation: 222

Firstly the PhotoImage of tkinter doesn't support .png format and it supports only gif,ppm/pgm format.
If you want to use .png format then you need to use PIL library.
Then I think that your image is getting totally wasted after your window1 and window2 instances are closed.
Thus, you need to add self before img.
Also, you are calling Tk() two times which is a problem.
Lastly, you are using similar names in both classes which is not good.
Thus after all editing your code will look like.

from PIL import ImageTk
PANEL_HEIGHT = 440
PANEL_WIDTH = 304
BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"
MANAGE_ACC_BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"

panel = Tk()
panel.geometry(f"{PANEL_WIDTH}x{PANEL_HEIGHT}")

class window1:

    def __init__(self):
        self.canvas = Canvas(panel,width=2*PANEL_WIDTH, height=2*PANEL_HEIGHT)
        canvas = self.canvas

        self.img = ImageTk.PhotoImage(file=BKG_IMG)
        canvas.create_image(PANEL_WIDTH,PANEL_HEIGHT,image=self.img)
        canvas.place(x=-(PANEL_WIDTH/2),y=-(PANEL_HEIGHT/2))

class window2:

    def __init__(self):
        self.canvas1 = Canvas(panel, width=2 * PANEL_WIDTH, height=2 * PANEL_HEIGHT)
        canvas1 = self.canvas1
        self.img1 = ImageTk.PhotoImage(file=MANAGE_ACC_BKG_IMG)
        canvas1.create_image(PANEL_WIDTH, PANEL_HEIGHT, image=self.img1)
        canvas1.place(x=-(PANEL_WIDTH / 2), y=-(PANEL_HEIGHT / 2))

window1()
window2()
panel.mainloop

let me know if it works.

Upvotes: 0

timhu
timhu

Reputation: 98

You have created Tk() twice: self.panel = Tk() avoid that. move self.panel = Tk() to outside to share: panel = Tk().

Please try it:

from tkinter import *  

PANEL_HEIGHT = 440
PANEL_WIDTH = 304
BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"
MANAGE_ACC_BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"

panel = Tk()
panel.geometry(f"{PANEL_WIDTH}x{PANEL_HEIGHT}")

class window1:

    def __init__(self):
        self.canvas = Canvas(panel,width=2*PANEL_WIDTH, height=2*PANEL_HEIGHT)
        canvas = self.canvas

        img = PhotoImage(file=BKG_IMG)
        canvas.create_image(PANEL_WIDTH,PANEL_HEIGHT,image=img)
        canvas.place(x=-(PANEL_WIDTH/2),y=-(PANEL_HEIGHT/2))

class window2:

    def __init__(self):
        self.canvas = Canvas(panel, width=2 * PANEL_WIDTH, height=2 * PANEL_HEIGHT)
        canvas = self.canvas
        img = PhotoImage(file=MANAGE_ACC_BKG_IMG)
        canvas.create_image(PANEL_WIDTH, PANEL_HEIGHT, image=img)
        canvas.place(x=-(PANEL_WIDTH / 2), y=-(PANEL_HEIGHT / 2))

window1()
window2()

Upvotes: 1

Related Questions