CODEWITHSUNDEEP
pythonuser-interfacetkinter
Fahad Charolia
Fahad Charolia

Reputation: 31

Image not getting drawn on tkinter canvas

I would like to display a knapsack image on green canvas. The height and width of that canvas is 250X250 pixels.

enter image description here

And the size of the image is 260X280 pixels.

enter image description here

When I try to execute below code, I get the output as shown in screenshot above 1. The location of the code file and image file is same.

from tkinter.font import BOLD
from tkinter import *
import tkinter
from PIL import Image, ImageTk

root = Tk()

def draw():
    global canvas
    root.geometry('1080x720')
    root.state('zoomed')

    canvas = Canvas(root,bg='black',highlightthickness=0)
    canvas.pack(fill=tkinter.BOTH, expand=True)

    sw = root.winfo_screenwidth()
    sh = root.winfo_screenheight()
    canvas.create_line(int(sw*0.0000),int(sh*0.1736),int(sw*0.6510),int(sh*0.1736),fill='white')
    canvas.create_line(int(sw*0.6510),int(sh*0.0000),int(sw*0.6510),int(sh*1.0000),fill='white')
    canvas.create_line(int(sw*0.6510),int(sh*0.1157),int(sw*1.0000),int(sh*0.1157),fill='white')
    canvas.create_line(int(sw*0.6510),int(sh*0.8101),int(sw*1.0000),int(sh*0.8101),fill='white')

    UI_frame1 = Frame(canvas,bg='black',width=int(sw*0.6510),height=int(sh*0.1580))
    canvas.create_window(0,0, anchor=NW,window=UI_frame1)
    
    N = Label(UI_frame1,text='N',bg ='black',fg='white',font=(12))
    N.grid(row=0,column=0, padx=139,pady=22)
    weights = Label(UI_frame1,text='Weights',bg ='black',fg='white',font=(12))
    weights.grid(row=0,column=1,padx=140,pady=22)
    val = Label(UI_frame1,text='Values',bg ='black',fg='white',font=(12))
    val.grid(row=0,column=2,padx=140,pady=22)
    
    n = Entry(UI_frame1,bg='white',width=4,font=(12))
    n.grid(row=1,column=0,padx=50,pady=17)
    value_arr = Entry(UI_frame1,bg='white',font=(12))
    value_arr.grid(row=1,column=1,padx=50,pady=17)
    weight_arr = Entry(UI_frame1,bg='white',font=(12))
    weight_arr.grid(row=1,column=2,padx=50,pady=17)

    Label(canvas,text='i',bg='black',fg='white',font=(14)).place(x=150,y=185)
    i = Label(canvas,text="  i  ",bg='white',font=(12)).place(x=175,y=185)
    Label(canvas,text='j',bg='black',fg='white',font=(14)).place(x=525,y=185)
    j = Label(canvas,text="  j  ",bg='white',font=(12)).place(x=550,y=185)


    table = Canvas(canvas,bg='red',width=600,height=450)
    table.place(x=75,y=300)

    w = int(600/8)
    h = int(450/5)
    x=0
    y=0
    for r in range(5):
        for c in range(8):
            table.create_rectangle(x,y,x+w,y+h)
            x+=w
        y+=h
        x=0
    
    UI_frame2 = Frame(canvas,bg='blue',width=250,height=250)
    canvas.create_window(835,630, anchor=CENTER,window=UI_frame2)

    image_c = Canvas(UI_frame2,bg='green',highlightthickness=0,width=250,height=250)
    image_c.grid(row=0,column=0,padx=0,pady=0)

    photo = ImageTk.PhotoImage(file ='knapsack.png')
    image_c.create_image(835,630,image=photo,anchor=NW)


draw()
root.mainloop()

I would like to cover the entire green canvas with single image of knapsack. I am not any error while running the GUI. Anyone could help me out, I'll be really thankful.

Upvotes: 0

Views: 256

Answers (1)

furas
furas

Reputation: 143206

There are two problems:

First:

You display in position (835,630) but canvas has visible only (250, 250) - (top left corner is (0,0)) - so photo is in place which you can see.

Second:

There is bug in PhotoImage() which removes image from memory when it is assigned to local variable. One of solution is to use global photo to assign it to global variable.

def draw():
    global canvas
    global photo   # use global variable
    
    #... code ...

    photo = ImageTk.PhotoImage(file='knapsack.png')
    image_c.create_image(0, 0,image=photo, anchor=NW)   # position (0,0)

Doc (on archive.org): PhotoImage - see Note at the botton of doc.

enter image description here

Other problem can be that image has big (transparent) margins around object and it may show object in differnt place then you may expect.
Screenshot shows photo in position (0,0) but object is in center of green canvas.

Upvotes: 2

Related Questions