0

How would I place an image inside of this code so it can scroll?

This code is from the answer here: tkinter: using scrollbars on a canvas

from tkinter import *
root=Tk()
frame=Frame(root,width=300,height=300)
frame.pack(expand=True, fill=BOTH) #.grid(row=0,column=0)
canvas=Canvas(frame,bg='#FFFFFF',width=300,height=300,scrollregion=(0,0,500,500))
hbar=Scrollbar(frame,orient=HORIZONTAL)
hbar.pack(side=BOTTOM,fill=X)
hbar.config(command=canvas.xview)
vbar=Scrollbar(frame,orient=VERTICAL)
vbar.pack(side=RIGHT,fill=Y)
vbar.config(command=canvas.yview)
canvas.config(width=300,height=300)
canvas.config(xscrollcommand=hbar.set, yscrollcommand=vbar.set)
canvas.pack(side=LEFT,expand=True,fill=BOTH)

root.mainloop()

I tried an image on the canvas, as well as an image inside another frame inside the canvas, and an image inside the existing frame, and I placed a label inside a nested frame and on existing canvas. The scroll bars don't function with the image that was larger than 300x300, but the scroll bars move with the label of only text, but the label doesn't move. I used L_text.place(x=20,y=90) and I used L_text.pack() with same results.

Without modification of code in the Answer, I get scrollbars to move and mousewheel moves them only when mouse pointer hovers on the vert scrollbar, but mouse on the canvas/frame area doesn't move the scrollbars.

Ubuntu 20.04 python 3.8.5

JayConsole
  • 3
  • 3
  • You can add an image directly to the canvas and it will scroll. I suggest you try it, and if you can't make it work you can show us the code you tried and we can help fix it. – Bryan Oakley Feb 27 '21 at 22:33
  • Excellent. I used ```canvas.create_image``` and it worked. I have to now tweak the motion of the vertical scrollbar. The mouse wheel scrolls it however, still not when hovering over the image. I'll post an 'answer,' with code. Thanks! – JayConsole Feb 27 '21 at 23:22

1 Answers1

0

Posting code modified from above sample that is improved for my application. I need to tweak some more, but this is at least the solution to question in title of post.

import tkinter as tk
from tkinter import *
import PIL
from PIL import Image, ImageTk

root=Tk()
root.geometry("550x850+50+50")

frame=Frame(root,width=300,height=300)
frame.pack(expand=True,fill=BOTH) 
canvas=Canvas(frame,width=300,height=300,scrollregion=(0,0,500,1200))# 1200 is
# vertical scrollable area inside the window
hbar=Scrollbar(frame,orient=HORIZONTAL)
hbar.pack(side=BOTTOM,fill=X)
hbar.config(command=canvas.xview)
vbar=Scrollbar(frame,orient=VERTICAL)
vbar.pack(side=RIGHT,fill=Y)
vbar.config(command=canvas.yview)
canvas.config(width=300,height=300)
canvas.config(xscrollcommand=hbar.set,yscrollcommand=vbar.set)
canvas.pack(side=LEFT,expand=True,fill=BOTH)

#frame_2=Frame(canvas,width=900,height=900)
#frame_2.pack() # place(x=1,y=1)
file='test_receipt.png'
img=ImageTk.PhotoImage(Image.open(file))
canvas.create_image(1,1,image=img,anchor=NW) #Place image directly on canvas
# 1,1 is upper left corner no padding, anchor required or image isn't alinged
# on its upper left corner.
#L_image=Label(canvas,image=img)
#L_image.pack() # place(x=1,y=1)
#L_text=Label(frame_2,text='label inside')
#L_text.pack()
#L_text.place(x=20,y=90)

root.mainloop()
JayConsole
  • 3
  • 3