Related
I would like to save my drawing on a tkinter canvas as an image so I can open it for later use. I currently use this save system from this post however this is not a good way for me. First I would need to add an offset and second if i set the application so only some part of the canvas is actually visible, the part where the canvas is not visible appears black when saving the image.
only part of the canvas is actually visible. If I open the saved image this is what it looks like only what was visible is actually there(the entire image was yellow before saving it).
The code of saving the image.
def save(widget(canvas), filelocation):
x=root.winfo_rootx()+widget.winfo_x() + 74
y=root.winfo_rooty()+widget.winfo_y() + 109
x1=x+widget.winfo_width()
y1=y+widget.winfo_height()
ImageGrab.grab().crop((x,y,x1,y1)).save(filelocation)
Idea
After reading from this post it explains i could recreate all the stuff i drew on the canvas. So my idea is to put all the stuff i drew on the canvas such as lines i created on an invisible layer and paste it on the image. However i dont know if this is possible(may be possible with PIL, numpy or cv2)
Code(Is minimal reproducable)
import tkinter as tk
from tkinter import colorchooser, Canvas, N
from tkinter.ttk import *
from PIL import Image, ImageTk, ImageGrab
import keyboard
def save(widget, filelocation):
x=root.winfo_rootx()+widget.winfo_x()
y=root.winfo_rooty()+widget.winfo_y()
x1=x+widget.winfo_width()
y1=y+widget.winfo_height()
ImageGrab.grab().crop((x,y,x1,y1)).save(filelocation)
def type_of(color):
type_pen = 'marker'
if type_pen == 'marker':
pencil_motion_marker(color = color)
#pixel pen
def pencil_motion_marker(color):
stage.bind('<Button-1>', get_pos_marker)
stage.bind('<B1-Motion>', lambda event, color = color: pencil_draw_marker(event, color))
def get_pos_marker(event):
global lastx, lasty
lastx, lasty = event.x, event.y
def pencil_draw_marker(event, color):
stage.create_line((lastx, lasty, event.x, event.y), width = width.get(), fill = color, capstyle = 'round')
get_pos_marker(event)
def choose_pen_color():
pencilcolor = colorchooser.askcolor(title = 'Pencil Color')
type_of(pencilcolor[1])
##
def pencil_click():
global width, opacity
Whitepencolb = Button(optionsframe, text = 'Whitepencolimg', style = 'COLBG.TButton', command = lambda m = 'White': type_of(m))
Whitepencolb.grid(row = 0, column = 0, padx = 10, pady = 1)
Redpencolb = Button(optionsframe, text = 'Redpencolimg', style = 'COLBG.TButton', command = lambda m = 'Red': type_of(m))
Redpencolb.grid(row = 1, column = 0, padx = 10, pady = 1)
Magentapencolb = Button(optionsframe, text = 'Magentapencolimg', style = 'COLBG.TButton', command = lambda m = 'Magenta': type_of(m))
Magentapencolb.grid(row = 0, column = 1, padx = 10, pady = 1)
Limegreenpencolb = Button(optionsframe, text = 'Limegreenpencolimg', style = 'COLBG.TButton', command = lambda m = 'Lime': type_of(m))
Limegreenpencolb.grid(row = 1, column = 1, padx = 10, pady = 1)
Greenpencolb = Button(optionsframe, text = 'Greenpencolimg', style = 'COLBG.TButton', command = lambda m = 'Green': type_of(m))
Greenpencolb.grid(row = 0, column = 2, padx = 10, pady = 1)
Bluepencolb = Button(optionsframe, text = 'Bluepencolimg', style = 'COLBG.TButton', command = lambda m = 'Blue': type_of(m))
Bluepencolb.grid(row = 1, column = 2, padx = 10, pady = 1)
Cyanpencolb = Button(optionsframe, text = 'Cyanpencolimg', style = 'COLBG.TButton', command = lambda m = 'Cyan': type_of(m))
Cyanpencolb.grid(row = 0, column = 3, padx = 10, pady = 1)
Yellowpencolb = Button(optionsframe, text = 'Yellowpencolimg', style = 'COLBG.TButton', command = lambda m = 'Yellow': type_of(m))
Yellowpencolb.grid(row = 1, column = 3, padx = 10, pady = 1)
Orangepencolb = Button(optionsframe, text = 'Orangepencolimg', style = 'COLBG.TButton', command = lambda m = 'Orange': type_of(m))
Orangepencolb.grid(row = 0, column = 4, padx = 10, pady = 1)
Graypencolb = Button(optionsframe, text = 'Graypencolimg', style = 'COLBG.TButton', command = lambda m = 'Gray': type_of(m))
Graypencolb.grid(row = 1, column = 4, padx = 10, pady = 1)
Blackpencolb = Button(optionsframe, text = 'Blackpencolimg', style = 'COLBG.TButton', command = lambda m = 'Black': type_of(m))
Blackpencolb.grid(row = 0, column = 5, padx = 10, pady = 1)
Createnewpencolb = Button(optionsframe, text = 'Createnewpencolimg', style = 'COLBG.TButton', command = choose_pen_color)
Createnewpencolb.grid(row = 1, column = 5, padx = 10, pady = 1)
widthlabel = Label(optionsframe, text = 'Width: ', style = 'LABELBG.TLabel')
width = Scale(optionsframe, from_ = 1, to = 20, style = 'SCALEBG.Horizontal.TScale')
widthlabel.grid(row = 0, column = 6)
width.grid(row = 0, column = 7)
width.set(20)
opacitylabel = Label(optionsframe, text = 'Opacity: ', style = 'LABELBG.TLabel')
opacity = Scale(optionsframe, from_ = 0, to = 1.0, style = 'SCALEBG.Horizontal.TScale')
opacitylabel.grid(row = 1, column = 6)
opacity.grid(row = 1, column = 7)
opacity.set(1.0)
def setup(filelocation):
global stage, img_id, optionsframe, draw
for widgets in root.winfo_children():
widgets.destroy()
root.config(bg = '#454545')
iconsframewidth = int(screen_width / 20)
frames = Style()
frames.configure('FRAMES.TFrame', background = '#2a2a2a')
sep = Style()
sep.configure('SEP.TFrame', background = '#1a1a1a')
style = Style()
style.configure('STAGE.TFrame', background = '#454545')
icon = Style()
icon.configure('ICON.TButton', background = '#2a2a2a', foreground = '#2a2a2a')
iconsframe = Frame(root, width = iconsframewidth, style = 'FRAMES.TFrame')
iconsframe.pack(side = 'left', expand = False, fill = 'y')
iconsframe.pack_propagate(0)
sep1frame = Frame(root, style = 'SEP.TFrame', width = 5)
sep1frame.pack(side = 'left', expand = False, fill = 'y')
optionsframe = Frame(root, style = 'FRAMES.TFrame', height = 100)
optionsframe.pack(side = 'top', expand = False, fill = 'x')
optionsframe.pack_propagate(0)
sep2frame = Frame(root, style = 'SEP.TFrame', height = 5)
sep2frame.pack(side = 'top', expand = False, fill = 'x')
propertyframe = Frame(root, style = 'FRAMES.TFrame', width = 150)
propertyframe.pack(side = 'right', expand = False, fill = 'y')
propertyframe.pack_propagate(0)
sep3frame = Frame(root, style = 'SEP.TFrame', width = 5)
sep3frame.pack(side = 'right', expand = False, fill = 'y')
stageframe = Frame(root, style = 'STAGE.TFrame')
stageframe.pack(side = 'top', expand = True, fill = 'both')
stageframe.pack_propagate(0)
image = Image.open(filelocation)
width, height = image.size
stage = Canvas(stageframe, width = width, height = height)
stage.pack(side="top", anchor = 'c', expand=True)
root.update()
keyboard.add_hotkey("ctrl+s", lambda widget = stage, filelocation = filelocation: save(widget, filelocation))
pencilbutton = Button(iconsframe, text = 'pencilimg', command = pencil_click, style = 'ICON.TButton')
pencilbutton.pack(anchor = N, pady = 10)
imgtk = ImageTk.PhotoImage(Image.open(filelocation))
img_id = stage.create_image(stage.winfo_width() / 2, stage.winfo_height() / 2, image = imgtk)
stage.image = imgtk
root = tk.Tk()
root.title('App')
screen_width = root.winfo_screenwidth()
screen_height = root.winfo_screenheight()
w = 1150
h = 600
x = (screen_width / 2) - (w / 2)
y = (screen_height / 2) - (h / 2)
root.geometry('%dx%d+%d+%d' % (w, h, x, y))
root.minsize(1150, 600)
setup('Test.png')
root.mainloop()
Image
Small Problem
Replying to #Claudio : I am using the screenshot technique for saving Canvas as an image to a file right now. I noticed that the saved canvas image looks like this at the corner and after saving and reopening the image it looks like this ( the border of the canvas increases the size of the canvas image ).
Update 2. June 2022: Small Problem Solved by the updated code provided in the accepted answer.
How to save a tkinter Canvas graphics as an image?
It seems to be a fact that tkinter doesn't provide a direct method
allowing to get an image of Canvas graphics for saving it to an image
file. There are two ways around this problem requiring solely an import
of the Python PIL module (Pillow).
One of this ways is to perform a screenshot of painting on the
Canvas area which can be done using PIL.ImageGrab.grab() or any other
of the various methods for performing (cropped) screenshots and saving
them to an image file
( see e.g. Fast screenshot of a small part of the screen in Python
for a Python screenshot module fast enough to allow to make a video of
the progressing painting on the Canvas ).
Another way is to paint on a Python PIL image updating the tkinter Canvas
with the modified PIL image saving it then to a file using the .save()
method available for saving PIL image objects.
The code provided in the question works generally as expected if save()
uses both the Frame (stageframe) and the Canvas (stage) widgets
required for getting the right x,y values for cropping of the screenshot
in case the Canvas is placed within a Frame AND if the bounding box for cropping
the screenshot takes into account that tkinter Canvas widget size
includes a Canvas border and a Canvas highlight-border.
The code below is the in the question provided code with some added
comments and appropriate modifications. It doesn't require the keyboard
module and saves the by painting modified Canvas as image file by
clicking on the most-left upper pencilbutton handled by the
pencil_click() function.
It provides both methods for saving the graphics of the tkinter Canvas
to an image file. Select one of them by assigning appropriate value to
the global method variable ( method = 'screenshot' or
method = 'imagepaint' ):
# https://stackoverflow.com/questions/72459847/how-to-save-a-tkinter-canvas-as-an-image
from tkinter import Tk, colorchooser, Canvas, N, PhotoImage
from tkinter.ttk import Style, Frame, Button, Label, Scale
from PIL import Image, ImageTk # required to load images in tkinter
# method = 'screenshot' or 'imagepaint'
method = 'screenshot'
borderthickness_bd = 2
highlightthickness = 1
if method == 'imagepaint':
from PIL import ImageDraw # required to draw on the image
if method == 'screenshot':
from PIL import ImageGrab # required for the screenshot
filelocation = 'Test.png'
savelocation = 'Test_.png'
def save(stageframe, stage, savelocation):
if method == 'imagepaint':
global image
image.save(savelocation)
if method == 'screenshot':
global borderthickness_bd, highlightthickness
brdt = borderthickness_bd + highlightthickness
# +1 and -2 because of thicknesses of Canvas borders (bd-border and highlight-border):
x=root.winfo_rootx()+stageframe.winfo_x()+stage.winfo_x() +1*brdt
y=root.winfo_rooty()+stageframe.winfo_y()+stage.winfo_y() +1*brdt
x1=x+stage.winfo_width() -2*brdt
y1=y+stage.winfo_height()-2*brdt
ImageGrab.grab().crop((x,y,x1,y1)).save(savelocation)
def type_of(color):
type_pen = 'marker'
if type_pen == 'marker':
pencil_motion_marker(color = color)
#pixel pen
def pencil_motion_marker(color):
stage.bind('<Button-1>' , get_pos_marker)
stage.bind('<B1-Motion>', lambda event, color = color: pencil_draw_marker(event, color))
def get_pos_marker(event):
global lastx, lasty
lastx, lasty = event.x, event.y
def pencil_draw_marker(event, color):
global method, lastx, lasty, draw, image, img_id
# print( (lastx, lasty, event.x, event.y), color, int(width.get()) )
if method == 'screenshot':
stage.create_line((lastx, lasty, event.x, event.y), width = width.get(), fill = color, capstyle = 'round')
get_pos_marker(event)
if method == 'imagepaint':
w12 = int(width.get()/2)
draw.ellipse( (event.x-w12, event.y-w12, event.x+w12, event.y+w12), fill=color )
imgtk = ImageTk.PhotoImage(image)
stage.itemconfig(img_id, image=imgtk)
stage.image = imgtk
def choose_pen_color():
pencilcolor = colorchooser.askcolor(title = 'Pencil Color')
type_of(pencilcolor[1])
##
def pencil_click():
global width, opacity, stageframe, stage, savelocation
# imgToSave = stage.image # gives a PhotoImage object
# imgToSave._PhotoImage__photo.write("Test.gif", format='gif') # which can be saved, but ...
# ^--- ... with no painting done on Canvas - only the image.
save(stageframe, stage, savelocation)
Whitepencolb = Button(optionsframe, text = 'Whitepencolimg', style = 'COLBG.TButton', command = lambda m = 'White': type_of(m))
Whitepencolb.grid(row = 0, column = 0, padx = 10, pady = 1)
Redpencolb = Button(optionsframe, text = 'Redpencolimg', style = 'COLBG.TButton', command = lambda m = 'Red': type_of(m))
Redpencolb.grid(row = 1, column = 0, padx = 10, pady = 1)
Magentapencolb = Button(optionsframe, text = 'Magentapencolimg', style = 'COLBG.TButton', command = lambda m = 'Magenta': type_of(m))
Magentapencolb.grid(row = 0, column = 1, padx = 10, pady = 1)
Limegreenpencolb = Button(optionsframe, text = 'Limegreenpencolimg', style = 'COLBG.TButton', command = lambda m = 'Lime': type_of(m))
Limegreenpencolb.grid(row = 1, column = 1, padx = 10, pady = 1)
Greenpencolb = Button(optionsframe, text = 'Greenpencolimg', style = 'COLBG.TButton', command = lambda m = 'Green': type_of(m))
Greenpencolb.grid(row = 0, column = 2, padx = 10, pady = 1)
Bluepencolb = Button(optionsframe, text = 'Bluepencolimg', style = 'COLBG.TButton', command = lambda m = 'Blue': type_of(m))
Bluepencolb.grid(row = 1, column = 2, padx = 10, pady = 1)
Cyanpencolb = Button(optionsframe, text = 'Cyanpencolimg', style = 'COLBG.TButton', command = lambda m = 'Cyan': type_of(m))
Cyanpencolb.grid(row = 0, column = 3, padx = 10, pady = 1)
Yellowpencolb = Button(optionsframe, text = 'Yellowpencolimg', style = 'COLBG.TButton', command = lambda m = 'Yellow': type_of(m))
Yellowpencolb.grid(row = 1, column = 3, padx = 10, pady = 1)
Orangepencolb = Button(optionsframe, text = 'Orangepencolimg', style = 'COLBG.TButton', command = lambda m = 'Orange': type_of(m))
Orangepencolb.grid(row = 0, column = 4, padx = 10, pady = 1)
Graypencolb = Button(optionsframe, text = 'Graypencolimg', style = 'COLBG.TButton', command = lambda m = 'Gray': type_of(m))
Graypencolb.grid(row = 1, column = 4, padx = 10, pady = 1)
Blackpencolb = Button(optionsframe, text = 'Blackpencolimg', style = 'COLBG.TButton', command = lambda m = 'Black': type_of(m))
Blackpencolb.grid(row = 0, column = 5, padx = 10, pady = 1)
Createnewpencolb = Button(optionsframe, text = 'Createnewpencolimg', style = 'COLBG.TButton', command = choose_pen_color)
Createnewpencolb.grid(row = 1, column = 5, padx = 10, pady = 1)
widthlabel = Label(optionsframe, text = 'Width: ', style = 'LABELBG.TLabel')
width = Scale(optionsframe, from_ = 1, to = 100, style = 'SCALEBG.Horizontal.TScale')
widthlabel.grid(row = 0, column = 6)
width.grid(row = 0, column = 7)
width.set(20)
opacitylabel = Label(optionsframe, text = 'Opacity: ', style = 'LABELBG.TLabel')
opacity = Scale(optionsframe, from_ = 0, to = 1.0, style = 'SCALEBG.Horizontal.TScale')
opacitylabel.grid(row = 1, column = 6)
opacity.grid(row = 1, column = 7)
opacity.set(1.0)
def setup(filelocation):
global stage, stageframe, img_id, optionsframe, draw, image, img_id, method
global borderthickness_bd, highlightthickness
for widgets in root.winfo_children():
widgets.destroy()
root.config(bg = '#454545')
iconsframewidth = int(screen_width / 20)
frames = Style()
frames.configure('FRAMES.TFrame', background = '#2a2a2a')
sep = Style()
sep.configure('SEP.TFrame', background = '#1a1a1a')
style = Style()
style.configure('STAGE.TFrame', background = '#454545')
icon = Style()
icon.configure('ICON.TButton', background = '#2a2a2a', foreground = '#2a2a2a')
iconsframe = Frame(root, width = iconsframewidth, style = 'FRAMES.TFrame')
iconsframe.pack(side = 'left', expand = False, fill = 'y')
iconsframe.pack_propagate(0)
sep1frame = Frame(root, style = 'SEP.TFrame', width = 5)
sep1frame.pack(side = 'left', expand = False, fill = 'y')
optionsframe = Frame(root, style = 'FRAMES.TFrame', height = 100)
optionsframe.pack(side = 'top', expand = False, fill = 'x')
optionsframe.pack_propagate(0)
sep2frame = Frame(root, style = 'SEP.TFrame', height = 5)
sep2frame.pack(side = 'top', expand = False, fill = 'x')
propertyframe = Frame(root, style = 'FRAMES.TFrame', width = 150)
propertyframe.pack(side = 'right', expand = False, fill = 'y')
propertyframe.pack_propagate(0)
sep3frame = Frame(root, style = 'SEP.TFrame', width = 5)
sep3frame.pack(side = 'right', expand = False, fill = 'y')
stageframe = Frame(root, style = 'STAGE.TFrame')
stageframe.pack(side = 'top', expand = True, fill = 'both')
stageframe.pack_propagate(0)
image = Image.open(filelocation)
width, height = image.size
if method == 'imagepaint':
draw = ImageDraw.Draw(image)
imgtk = ImageTk.PhotoImage(image)
# width, height = imgtk._PhotoImage__size
# imgtk = PhotoImage(filelocation)
# ^--- no width, hight information ???
stage = Canvas(stageframe, width = width, height = height, bd=borderthickness_bd, highlightthickness=highlightthickness) # default: bd=2, highlightthickness=1
stage.pack(side="top", anchor = 'c', expand=True)
root.update()
# keyboard.add_hotkey("ctrl+s", lambda widget = stageframe, filelocation = filelocation: save(widget, filelocation))
pencilbutton = Button(iconsframe, text = 'pencilimg', command = pencil_click, style = 'ICON.TButton')
pencilbutton.pack(anchor = N, pady = 10)
img_id = stage.create_image(stage.winfo_width() / 2, stage.winfo_height() / 2, image = imgtk)
stage.image = imgtk
root = Tk()
root.title('App')
screen_width = root.winfo_screenwidth()
screen_height = root.winfo_screenheight()
w = 1150
h = 600
x = (screen_width / 2) - (w / 2)
y = (screen_height / 2) - (h / 2)
root.geometry('%dx%d+%d+%d' % (w, h, x, y))
root.minsize(1150, 600)
setup(filelocation)
root.mainloop()
Cropping a screenshot as a way of saving the graphics of tkinter Canvas
is to be preferred over painting on a PIL image updating the tkinter
Canvas because the latter has the side effect of slowing graphics
down so painting smoothness suffer.
To see how to change the look of a button in tkinter (to change
after the first click the pencilbutton to a savebutton), check out
Python tkinter: error _tkinter.TclError: bad window path name ".!button2" for how it can be done.
I was making a simple tkinter GUI which has scrolling frames in it but it is not being so perfect for me.At first I used only one frame, but however I found out that frames have a limit on the no. of widgets they can hold,so I started using multiple frames. However I got this problem:the frames are not going in the direction I wanted.I wanted the frames to go under the previous frame ,however the frames are going one above the other here is a screenshot of the same:
(Frame 0 is the first Frame)
Here is the code(I have only kept the important portion)
i=0
image_no=0
for video in videos:
u = urllib.request.urlopen(video["thumbnail"]["thumbnails"][0]["url"])
raw_data = u.read()
u.close()
im = Image.open(BytesIO(raw_data))
image = ImageTk.PhotoImage(im.resize((470,210)))
a.append(image)
tk.Label(fr[i], image=a[image_no]).pack()
image_no+=1
tk.Label(fr[i], text=("Video:"+str(image_no)+" frame:"+str(i)),wraplength=470,font=("ariel",11,"bold"),bg="white").pack()
tk.Label(fr[i], text=video["title"]["accessibility"]["accessibilityData"]['label'].replace(video["title"]["runs"][0]["text"],""),wraplength=470,font=("ariel",10),bg="white",fg="grey").pack(anchor="w")
canvas.configure(yscrollcommand=scroll_y.set)
canvas.configure(scrollregion=canvas.bbox("all"))
print(image_no)
print(video["title"]["runs"][0]["text"])
if image_no%10==0:
time.sleep(3)
if image_no%110==0:
i+=1
if image_no%440==0:
break
Is there any way I could make it go downwards?
Edit:
Here is the screenshot of the frame limit
the black area is of the canvas
Here is a link to question tkinter maximum canvas size?
I've modified the code due to the possibility that the number of images may be responsible or the canvas may have some maximum height.
This will now fill the entire canvas height with images, each with a 10 point space between.
I've updated it for python 3.x and increased height to 100000!
Works without problems.
Choose your own image (gif or png)
import tkinter as tk
from tkinter import filedialog as fido
root = tk.Tk()
root.rowconfigure(0, weight = 1)
root.columnconfigure(0, weight = 1)
picture = fido.askopenfilename(title = "Pick a pic")
iconimage = tk.PhotoImage(file = picture)
wide, high = iconimage.width(), iconimage.height()
frame = tk.LabelFrame(root, labelanchor = "s", text = "0|0")
frame.grid(row = 0, column = 0, sticky = "nsew")
frame.rowconfigure(0, weight = 1)
frame.columnconfigure(0, weight = 1)
cv = tk.Canvas(
frame, width = 1200, height = 700,
scrollregion = "0 0 2000 100000")
cv.grid(row = 0, column = 0, sticky = "nsew")
vscrollbar = tk.Scrollbar(
frame, orient = "vertical", command = cv.yview)
vscrollbar.grid(row = 0, column = 1, sticky = "ns")
cv.config(yscrollcommand = vscrollbar.set)
def rowcol(ev):
frame["text"] = f"{cv.canvasx(ev.x)} | {cv.canvasy(ev.y)}"
cv.bind("<Motion>", rowcol)
root.update()
testimage = []
for pos in range( 0, 100000 - high - 10, high + 10):
testimage.append(cv.create_image(100, pos, anchor = "nw", image = iconimage))
print(f"Number of images = {len(testimage)}, width = {wide}, height = {high}")
root.mainloop()
So it doesn't seem to be a limitation of Canvas height or number of images displayed.
so I'm trying to put together an GUI divided up into multiple frames, and then have each frame have either labels or inputs, however, on the 'inputframe', whenever I add the label and try to place it, it just plops the label in the middle of the frame and I can't seem to move it anywhere. Is it possible for me to place labels inside a frame how I like?
I'm doing this on VS Code, have made progress on every other problem I've run into so far but can't seem to solve this one.
class Window1:
def __init__(self):
window = Tk() # Create a window
window.title("Order Processing Application") # Set title of a window
window.geometry('920x560')
#set up window and import picture for the window
photo = PhotoImage(file=r"C:\Users\Owner\Downloads\GWlogo.gif")
logoFrame = Frame(window, width = 160, height = 160)
logoFrame.grid(row = 0, column = 0)
stepTitleFrame = Frame(window, width = 840, height = 160, bg = 'red')
stepTitleFrame.grid(row = 0, column = 1)
statusFrame = Frame(window, width = 320, height = 560, bg='green')
statusFrame.grid(row = 1, column = 0)
inputFrame = Frame(window, width = 840, height = 560)
inputFrame.grid(row = 1, column = 1)
#imports Glamping World logo into the logo frame
logoPic = Label(logoFrame, image = photo)
logoPic.grid(row = 0, column = 0)
#Testing labels in the main input frame
inputLabel1 = Label(inputFrame, text="Testing Label 1")
inputLabel1.grid(row = 0, column = 1)
I'm trying to get the label to appear in the inputFrame, row 0 column 0, but it will only appear in the middle of the inputFrame.
I was trying to do a resizable scrollable canvas frame on tkinter.
And the problem comes with the first iteration. I build a window and a canvas with an event binding to "<Configure>" to expand its size to the size of the window.
I create a Frame and I use create_window to put it into the canvas, but for some reason, the parameters of the method don't work correctly or I don't know how it works.
I give it a size of 200 x 200 with the height and width parameters and the frame displays as it have 100x100.
This is because the frame isn't displayed at x=0,y=0, it's displayed under this. And I have specified its position to 0,0.
I don't now why I am having this problem but it drives me crazy, I left my code here if someone can help me.
import sys
from tkinter import *
import tkinter as tk
#Function that initialise the main window
mainwindow = tk.Tk()
mainwindow.resizable(1,1)
mainwindow.title('Resizable Icons')
mainwindoww = 800
mainwindowh = 900
mainwindowws = mainwindow.winfo_screenwidth()
mainwindowhs = mainwindow.winfo_screenheight()
x = (mainwindowws/2) - (mainwindoww/2)
y = (mainwindowhs/2) - (mainwindowh/2)
mainwindow.geometry('%dx%d+%d+%d' % (mainwindoww, mainwindowh, x, y))
mainwindow.minsize(320,600)
frame = Frame(mainwindow,bg='white',width=mainwindoww,height=mainwindowh)
frame.pack()
label1 = Label(frame,text='Resize Proof')
label1.place(x=0,y=20,width=mainwindow.winfo_width())
label2 = Label(frame,text='This is a proof of a resizable elements inside a canvas.')
label2.place(x=0,y=50,width=mainwindow.winfo_width())
iconframe = Canvas(mainwindow,bg='red', bd=0, highlightthickness=0, relief=FLAT)
iconframe.place(x=0,y=100,width=mainwindoww,height=mainwindowh-140)
iconframe.config(scrollregion=(0,0,320,1000))
'''
sbar = tk.Scrollbar(iconframe,orient='vertical')
sbar.config(command=iconframe.yview)
iconframe.config(yscrollcommand=sbar.set)
sbar.pack(side=RIGHT, fill=Y)
'''
element1 = Frame(iconframe,bg='green')
e1 = iconframe.create_window(0,0,window=(element1))
iconframe.itemconfig(e1,width=200,height=200)
def resizeevent(event):
width=mainwindow.winfo_width()
height=mainwindow.winfo_height()
frame.configure(width=width,height=height)
iconframe.place_configure(width=width)
label1.place_configure(width=width)
label2.place_configure(width=width)
mainwindow.bind("<Configure>",resizeevent)
mainwindow.mainloop()
I have found a way to make my responsive scrollable frame with canvas without positioning issues.
I took the code from this git page of a vertical scrolled frame. So, thanks to Eugene Bakin for do this.
https://gist.github.com/EugeneBakin/76c8f9bcec5b390e45df.
So modify a little bit this snippet to adapt to my necessities.
Here's the code that works of my Scrollable Resizable Tkinter Frame.
class VerticalScrolledFrame(Frame):
"""A pure Tkinter scrollable frame that actually works!
* Use the 'interior' attribute to place widgets inside the scrollable frame
* Construct and pack/place/grid normally
* This frame only allows vertical scrolling
"""
def __init__(self, parent, bg, *args, **kw):
Frame.__init__(self, parent, *args, **kw)
# create a canvas object and a vertical scrollbar for scrolling it
vscrollbar = Scrollbar(self, orient=VERTICAL)
vscrollbar.pack(fill=Y, side=RIGHT, expand=FALSE)
canvas = Canvas(self, bd=0, highlightthickness=0,
yscrollcommand=vscrollbar.set,bg=bg)
canvas.pack(side=LEFT, fill=BOTH, expand=TRUE)
vscrollbar.config(command=canvas.yview)
# reset the view
canvas.xview_moveto(0)
canvas.yview_moveto(0)
# create a frame inside the canvas which will be scrolled with it
self.interior = interior = Frame(canvas,bg=bg)
interior_id = canvas.create_window(0, 0, window=interior,
anchor=NW)
#This would create a frame that had actually the size of the whole window height
#I have tested so much with options and haven't found a way to make it work correctly without this
a = Frame(self.interior,height=10,bg='white')
a.pack()
# track changes to the canvas and frame width and sync them,
# also updating the scrollbar
def _configure_interior(event):
# update the scrollbars to match the size of the inner frame
size = (interior.winfo_reqwidth(), interior.winfo_reqheight())
canvas.config(scrollregion="0 0 %s %s" % size)
if interior.winfo_reqwidth() != canvas.winfo_width():
# update the canvas's width to fit the inner frame
canvas.config(width=interior.winfo_reqwidth())
interior.bind('<Configure>', _configure_interior)
def _configure_canvas(event):
#With this piece of code, the "a" frame adapts its height to the elements inside.
a.configure(height=10)
a.update()
mylist = interior.winfo_children()
for i in mylist:
lasty=i.winfo_height()+i.winfo_y()
a.configure(height=lasty)
if interior.winfo_reqwidth() != canvas.winfo_width():
# update the inner frame's width to fill the canvas
canvas.itemconfigure(interior_id, width=canvas.winfo_width())
canvas.bind('<Configure>', _configure_canvas)
#Function that initialise the main window
mainwindow = tk.Tk()
mainwindow.resizable(1,1)
mainwindow.title('Resizable Icons')
mainwindoww = 800
mainwindowh = 900
mainwindowws = mainwindow.winfo_screenwidth()
mainwindowhs = mainwindow.winfo_screenheight()
x = (mainwindowws/2) - (mainwindoww/2)
y = (mainwindowhs/2) - (mainwindowh/2)
mainwindow.geometry('%dx%d+%d+%d' % (mainwindoww, mainwindowh, x, y))
mainwindow.minsize(320,600)
style = ThemedStyle(mainwindow)
style.set_theme("radiance")
if getDarkModeState() == 0:
mainwindow.configure(background='#000000')
else:
mainwindow.configure(background='#ffffff')
frame = Frame(mainwindow,bg='white',width=mainwindoww,height=mainwindowh)
frame.pack()
label1 = Label(frame,text='Main Title',font=titlelightfont)
label1.place(x=0,y=20,width=mainwindow.winfo_width())
label2 = Label(frame,text='Title description',font=mainfont)
label2.place(x=0,y=50,width=mainwindow.winfo_width())
iconframe = VerticalScrolledFrame(mainwindow,bg='white')
iconframe.place(x=0,y=100,width=mainwindoww,height=660)
#I made every single element different from another, with an icon, title and description
#The icon should be 60x60 to fit correctly into the frame
element1 = Frame(iconframe.interior,bg='white')
element1.place(relx=0.025,y=10,height=100,relwidth=0.30)
icon1image = PhotoImage(file='mainicons/user60.png')
icon1 = Label(element1,bg='white',image=icon1image)
icon1.place(x=10,width=60,height=60,y=10)
eltitle1 = Label(element1,bg='white',font=mainfont,text='First option')
eltitle1.place(x=75,y=10)
eldesc1 = Label(element1,bg='white',font=subdescfont,text='This is the first description of the element.',wraplength=155,justify=LEFT)
eldesc1.place(x=75,y=40)
element2 = Frame(iconframe.interior,bg='white')
element2.place(relx=0.350,y=10,height=100,relwidth=0.30)
icon2image = PhotoImage(file='mainicons/testglobal60.png')
icon2 = Label(element2,bg='white',image=icon2image)
icon2.place(x=10,width=60,height=60,y=10)
eltitle2 = Label(element2,bg='white',font=mainfont,text='Second option')
eltitle2.place(x=75,y=10)
eldesc2 = Label(element2,bg='white',font=subdescfont,text='This is the second description of the element.',wraplength=155,justify=LEFT)
eldesc2.place(x=75,y=40)
element3 = Frame(iconframe.interior,bg='white')
element3.place(relx=0.675,y=10,height=100,relwidth=0.30)
icon3image = PhotoImage(file='mainicons/label60.png')
icon3 = Label(element3,bg='white',image=icon3image)
icon3.place(x=10,width=60,height=60,y=10)
eltitle3 = Label(element3,bg='white',font=mainfont,text='Third option')
eltitle3.place(x=75,y=10)
eldesc3 = Label(element3,bg='white',font=subdescfont,text='This is the third description of the element.',wraplength=155,justify=LEFT)
eldesc3.place(x=75,y=40)
element4 = Frame(iconframe.interior,bg='white')
element4.place(relx=0.025,y=120,height=100,relwidth=0.30)
icon4image = PhotoImage(file='mainicons/testind60.png')
icon4 = Label(element4,bg='white',image=icon4image)
icon4.place(x=10,width=60,height=60,y=10)
eltitle4 = Label(element4,bg='white',font=mainfont,text='Fourth option')
eltitle4.place(x=75,y=10)
eldesc4 = Label(element4,bg='white',font=subdescfont,text='This is the fourth description of the element.',wraplength=155,justify=LEFT)
eldesc4.place(x=75,y=40)
element5 = Frame(iconframe.interior,bg='white')
element5.place(relx=0.350,y=120,height=100,relwidth=0.30)
icon5image = PhotoImage(file='mainicons/philipsdriver60.png')
icon5 = Label(element5,bg='white',image=icon5image)
icon5.place(x=10,width=60,height=60,y=10)
eltitle5 = Label(element5,bg='white',font=mainfont,text='Fifth option')
eltitle5.place(x=75,y=10)
eldesc5 = Label(element5,bg='white',font=subdescfont,text='This is the fifth description of the element.',wraplength=155,justify=LEFT)
eldesc5.place(x=75,y=40)
element6 = Frame(iconframe.interior,bg='#dfdfdf')
element6.place(relx=0.675,y=120,height=100,relwidth=0.30)
icon6image = PhotoImage(file='mainicons/results60.png')
icon6 = Label(element6,bg='#dfdfdf',image=icon6image)
icon6.place(x=10,width=60,height=60,y=10)
eltitle6 = Label(element6,bg='#dfdfdf',font=mainfont,text='Sixth option')
eltitle6.place(x=75,y=10)
eldesc6 = Label(element6,bg='#dfdfdf',font=subdescfont,text='This is the sixth description of the element.',wraplength=155,justify=LEFT)
eldesc6.place(x=75,y=40)
element7 = Frame(iconframe.interior,bg='white')
element7.place(relx=0.025,y=230,height=100,relwidth=0.30)
icon7image = PhotoImage(file='mainicons/luminary60.png')
icon7 = Label(element7,bg='white',image=icon7image)
icon7.place(x=10,width=60,height=60,y=10)
eltitle7 = Label(element7,bg='white',font=mainfont,text='Seventh option')
eltitle7.place(x=75,y=10)
eldesc7 = Label(element7,bg='white',font=subdescfont,text='This is the seventh description of the element.',wraplength=155,justify=LEFT)
eldesc7.place(x=75,y=40)
element8 = Frame(iconframe.interior,bg='white')
element8.place(relx=0.350,y=230,height=100,relwidth=0.30)
icon8image = PhotoImage(file='mainicons/settings60.png')
icon8 = Label(element8,bg='white',image=icon8image)
icon8.place(x=10,width=60,height=60,y=10)
eltitle8 = Label(element8,bg='white',font=mainfont,text='Eighth option')
eltitle8.place(x=75,y=10)
eldesc8 = Label(element8,bg='white',font=subdescfont,text='This is the eighth description of the element.',wraplength=155,justify=LEFT)
eldesc8.place(x=75,y=40)
element9 = Frame(iconframe.interior,bg='white')
element9.place(relx=0.675,y=230,height=100,relwidth=0.30)
icon9image = PhotoImage(file='mainicons/misc60.png')
icon9 = Label(element9,bg='white',image=icon9image)
icon9.place(x=10,width=60,height=60,y=10)
eltitle9 = Label(element9,bg='white',font=mainfont,text='Ninth')
eltitle9.place(x=75,y=10)
eldesc9 = Label(element9,bg='white',font=subdescfont,text='This is the ninth description of the element.',wraplength=155,justify=LEFT)
eldesc9.place(x=75,y=40)
element10 = Frame(iconframe.interior,bg='white')
element10.place(relx=0.025,y=340,height=100,relwidth=0.30)
icon10image = PhotoImage(file='mainicons/help60.png')
icon10 = Label(element10,bg='white',image=icon10image)
icon10.place(x=10,width=60,height=60,y=10)
eltitle10 = Label(element10,bg='white',font=mainfont,text='Tenth option')
eltitle10.place(x=75,y=10)
eldesc10 = Label(element10,bg='white',font=subdescfont,text='This is the tenth description of the element.',wraplength=155,justify=LEFT)
eldesc10.place(x=75,y=40)
def resizeevent(event):
width=mainwindow.winfo_width()
height=mainwindow.winfo_height()
frame.configure(width=width,height=height)
label1.place_configure(width=width)
label2.place_configure(width=width)
#Ajuste de rejilla por ancho de ventana
if width < 370:
iconframe.place_configure(x=0,width=width,height=height-140)
eldesc1.configure(wraplength=245)
eldesc2.configure(wraplength=245)
eldesc3.configure(wraplength=245)
eldesc4.configure(wraplength=245)
eldesc5.configure(wraplength=245)
eldesc6.configure(wraplength=245)
eldesc7.configure(wraplength=245)
eldesc8.configure(wraplength=245)
eldesc9.configure(wraplength=245)
eldesc10.configure(wraplength=245)
elif width > 370 and width < 480:
iconframe.place_configure(x=0,width=width,height=height-140)
eldesc1.configure(wraplength=300)
eldesc2.configure(wraplength=300)
eldesc3.configure(wraplength=300)
eldesc4.configure(wraplength=300)
eldesc5.configure(wraplength=300)
eldesc6.configure(wraplength=300)
eldesc7.configure(wraplength=300)
eldesc8.configure(wraplength=300)
eldesc9.configure(wraplength=300)
eldesc10.configure(wraplength=300)
elif width > 480 and width < 600:
iconframe.place_configure(x=0,width=width,height=height-140)
element1.place_configure(relx=0,y=10,height=90,relwidth=1,rely=0,relheight=0)
element2.place_configure(relx=0,y=90,height=90,relwidth=1,rely=0,relheight=0)
element3.place_configure(relx=0,y=180,height=90,relwidth=1,rely=0,relheight=0)
element4.place_configure(relx=0,y=270,height=90,relwidth=1,rely=0,relheight=0)
element5.place_configure(relx=0,y=360,height=90,relwidth=1,rely=0,relheight=0)
element6.place_configure(relx=0,y=450,height=90,relwidth=1,rely=0,relheight=0)
element7.place_configure(relx=0,y=540,height=90,relwidth=1,rely=0,relheight=0)
element8.place_configure(relx=0,y=630,height=90,relwidth=1,rely=0,relheight=0)
element9.place_configure(relx=0,y=720,height=90,relwidth=1,rely=0,relheight=0)
element10.place_configure(relx=0,y=810,height=90,relwidth=1,rely=0,relheight=0)
eldesc1.configure(wraplength=400)
eldesc2.configure(wraplength=400)
eldesc3.configure(wraplength=400)
eldesc4.configure(wraplength=400)
eldesc5.configure(wraplength=400)
eldesc6.configure(wraplength=400)
eldesc7.configure(wraplength=400)
eldesc8.configure(wraplength=400)
eldesc9.configure(wraplength=400)
eldesc10.configure(wraplength=400)
elif width > 600 and width < 850:
#Layout 5x2
iconframe.place_configure(x=0,width=width,height=height-140)
element1.place_configure(relx=0.033,relwidth=0.45,y=10,height=100)
element2.place_configure(relx=0.516,relwidth=0.45,y=10,height=100)
element3.place_configure(relx=0.033,relwidth=0.45,y=120,height=100)
element4.place_configure(relx=0.516,relwidth=0.45,y=120,height=100)
element5.place_configure(relx=0.033,relwidth=0.45,y=230,height=100)
element6.place_configure(relx=0.516,relwidth=0.45,y=230,height=100)
element7.place_configure(relx=0.033,relwidth=0.45,y=340,height=100)
element8.place_configure(relx=0.516,relwidth=0.45,y=340,height=100)
element9.place_configure(relx=0.033,relwidth=0.45,y=450,height=100)
element10.place_configure(relx=0.516,relwidth=0.45,y=450,height=100)
eldesc1.configure(wraplength=180)
eldesc2.configure(wraplength=180)
eldesc3.configure(wraplength=180)
eldesc4.configure(wraplength=180)
eldesc5.configure(wraplength=180)
eldesc6.configure(wraplength=180)
eldesc7.configure(wraplength=180)
eldesc8.configure(wraplength=180)
eldesc9.configure(wraplength=180)
eldesc10.configure(wraplength=180)
elif width > 851 and width < 1100:
#Layout 3x4
iconframe.place_configure(x=0,width=width,height=height-140)
element1.place_configure(relx=0.025,relwidth=0.30,y=10,height=100)
element2.place_configure(relx=0.350,relwidth=0.30,y=10,height=100)
element3.place_configure(relx=0.675,relwidth=0.30,y=10,height=100)
element4.place_configure(relx=0.025,relwidth=0.30,y=120,height=100)
element5.place_configure(relx=0.350,relwidth=0.30,y=120,height=100)
element6.place_configure(relx=0.675,relwidth=0.30,y=120,height=100)
element7.place_configure(relx=0.025,relwidth=0.30,y=230,height=100)
element8.place_configure(relx=0.350,relwidth=0.30,y=230,height=100)
element9.place_configure(relx=0.675,relwidth=0.30,y=230,height=100)
element10.place_configure(relx=0.025,relwidth=0.30,y=340,height=100)
elif width > 1100:
#Layout 4x3
iconframe.place_configure(x=(width/2)-540,y=100,width=1080,height=height-140)
element1.place_configure(relx=0.020,relwidth=0.225,y=10,height=100)
element2.place_configure(relx=0.265,relwidth=0.225,y=10,height=100)
element3.place_configure(relx=0.510,relwidth=0.225,y=10,height=100)
element4.place_configure(relx=0.755,relwidth=0.225,y=10,height=100)
element5.place_configure(relx=0.020,relwidth=0.225,y=120,height=100)
element6.place_configure(relx=0.265,relwidth=0.225,y=120,height=100)
element7.place_configure(relx=0.510,relwidth=0.225,y=120,height=100)
element8.place_configure(relx=0.755,relwidth=0.225,y=120,height=100)
element9.place_configure(relx=0.020,relwidth=0.225,y=230,height=100)
element10.place_configure(relx=0.265,relwidth=0.225,y=230,height=100)
mainwindow.bind("<Configure>",resizeevent)
mainwindow.mainloop()
I'm writing a scientific calculator with 2nd button. What is the function for second button so for example it changes sin to sin^-1, plus changing the sin button command; and if you click the 2nd button again, it changes sin^-1 back to sin
I would split my calculator up into section using different frames (one to show the calculations , one with buttons which won't have 2 functions and lastly the buttons which have 2 functions).
The reason I would split it up is because I would use destroying objects and making the new ones this splitting up means you can destroy the wanted frame rather than specific buttons (would require less code). Also for this I would have 3 create GUI defs. one would be the buttons with one function and the bit showing the calculations. one be the buttons which have 2 functions (their first function) and lastly the buttons which have 2 functions (their second functions). To decide between which GUI gen def to use have an if statement with global variable which gets changed each time 2nd function button called and that decides which def to use.
If it was just commands you wanted changing instead of both labels and commands I would have a variable which is etheir 1 or 2(change when 2nd button clicked) then in your definitions (ones which your buttons call) have an if statement to decide between to do normal action (e.g cos) or 2nd action (e.g cos-1).
Here is code below that uses what i have described in the first paragraph:
from tkinter import *
class Calc(Frame):
def __init__(self, master):
self.modefunction = 1
""" Initialize the frame. """
super(Calc,self).__init__(master)
self.grid()
self.calculations_frm = Frame(self, width=100, height=30)#bg = "red"
self.calculations_frm.grid(row = 0, column = 0, columnspan=2)
self.buttons_frm = Frame(self, width= 50, height=30,)#bg = "green")
self.buttons_frm.grid(row = 1, column = 1)
self.buttons_2_functions_1_frm = Frame(self, width=50, height=30)#bg = "blue")
self.buttons_2_functions_1_frm.grid(row = 1, column = 0)
self.create_GUI()
def create_show_calculations(self):
self.calculation_lbl = Label(self.calculations_frm, text = "will show caluclations here").pack()
def create_buttons(self):
#mc stands for mode change
self.mode_change_btn = Button(self.buttons_frm, text = "mc", command = self.mode_change, height = 1, width = 5)
self.mode_change_btn.grid(row = 0,column = 0)
self.plus_btn = Button(self.buttons_frm, text = "plus", height = 1, width = 5)
self.plus_btn.grid(row = 1,column = 0)
def create_GUI(self):
self.create_show_calculations()
self.create_buttons()
self.create_1_function_gui()
def create_1_function_gui(self):
self.tan_btn = Button(self.buttons_2_functions_1_frm, text = "tan", height = 1, width = 5)
self.tan_btn.grid(row = 0,column = 0)
self.san_btn = Button(self.buttons_2_functions_1_frm, text = "san", height = 1, width = 5)
self.san_btn.grid(row = 0,column = 1)
self.coz_btn = Button(self.buttons_2_functions_1_frm, text = "coz", height = 1, width = 5)
self.coz_btn.grid(row = 1,column = 0)
def create_2_function_gui(self):
self.buttons_2_functions_2_frm = Frame(self, width=50, height=30)#bg = "blue")
self.buttons_2_functions_2_frm.grid(row = 1, column = 0)
self.inverse_tan_btn = Button(self.buttons_2_functions_2_frm, text = "tan-1", height = 1, width = 5)
self.inverse_tan_btn.grid(row = 0,column = 0)
self.inverse_san_btn = Button(self.buttons_2_functions_2_frm, text = "san-1", height = 1, width = 5)
self.inverse_san_btn.grid(row = 0,column = 1)
self.inverse_coz_btn = Button(self.buttons_2_functions_2_frm, text = "coz-1", height = 1, width = 5)
self.inverse_coz_btn.grid(row = 1,column = 0)
def mode_change(self):
if self.modefunction == 1:
self.buttons_2_functions_1_frm.destroy()
self.modefunction = 2
self.buttons_2_functions_2_frm = Frame(self, width=50, height=30)#bg = "blue")
self.buttons_2_functions_2_frm.grid(row = 1, column = 0)
self.create_2_function_gui()
else:
self.buttons_2_functions_2_frm.destroy()
self.modefunction = 1
self.buttons_2_functions_1_frm = Frame(self, width=50, height=30)#bg = "blue")
self.buttons_2_functions_1_frm.grid(row = 1, column = 0)
self.create_1_function_gui()
root = Tk()
root.title("booking system")
root.geometry("500x500")
root.configure(bg="white")
app = Calc(root)
root.mainloop()