My objective is to solve the problem of the grid exceeding the window(shown as figure.1)
enter image description here
My program function is creating a grid that number of columns defined by user.
I tried using canvas to solve this problem, but it still doesn't work successfully.
It doesn't show the full grid in the canvas.(shown as figure.2)
enter image description here
Below is my code, could you please help solve the problems or give me some advice.
Thanks a lot.
Code:
import tkinter as tk
import tkinter.messagebox
import tkinter.filedialog
MainWindow = tk.Tk()
MainWindow.title('Helloworld')
MainWindow.geometry('1000x800')
def btn_generate():
global EntryNamelist
global Entrycoordinatelist
global EntryLabellist
con_num = en_condition_num.get()
if con_num != '':
#### Grid Body
for i in range(1,int(con_num) +1 ):
lb_name = tk.Label(fm_grid, text="Condition" + str(i) )
lb_name.grid(row=i, column=0, padx=2, pady=1, ipadx=20, ipady=5)
En_name = tk.Entry(fm_grid, bd = 2,width = 10,font=('Ubuntu', 10))
En_name.grid(row=i, column=1, padx=2, pady=1, ipadx=35, ipady=5)
En_coor = tk.Entry(fm_grid, bd = 2,width = 10,font=('Ubuntu', 10))
En_coor.grid(row=i, column=2, padx=2, pady=1, ipadx=200, ipady=5)
else:
tk.messagebox.showerror("Error", "Please input a num of conditions")
fm_main = tk.Frame()
fm3 = tk.Frame(fm_main)
lb_condition = tk.Label(fm3,text = 'Please input the number of condition')
lb_condition.pack(side="left")
en_condition_num = tk.Entry(fm3, bd = 2,width = 5)
en_condition_num.pack()
fm3.pack()
btn_generate = tk.Button(fm_main,text="Generate Grid",command=btn_generate)
btn_generate.pack()
lb_en = tk.Label(fm_main,text = '')
lb_en.pack()
def myfunction(event):
canvas.configure(scrollregion=canvas.bbox("all"),width=200,height=200)
canvas=tk.Canvas(fm_main)
fm_grid = tk.Frame(canvas)
fm_grid.pack()
myscrollbar=tk.Scrollbar(fm_main,orient="vertical",command=canvas.yview)
canvas.configure(yscrollcommand=myscrollbar.set)
myscrollbar.pack(side="right",fill="y")
canvas.pack(side="left")
canvas.create_window((4,4),window=fm_grid,anchor='nw')
fm_grid.bind("<Configure>",myfunction)
fm_main.pack()
MainWindow.mainloop()
Question: It doesn't show the full grid in the canvas
You have to sync, the width of the Canvas with the width of the Frame inside.
Note: fm_grid = tk.Frame(canvas, bg='blue') is shown in 'blue'.
Dont's:
Remove fm_grid.pack(), you layout with: canvas.create_window(....
Also, i recommend not to use a offset (4, 4), because you have to calculate with this offset on every canvas.configure(..., width=width + 4. Use (0, 0) instead.
# fm_grid.pack()
...
canvas.create_window((4,4),window=fm_grid,anchor='nw')
Useless, to create dynamically window:
Your usage of canvas.bbox is useless, because it's the dimension you want to layout this widget.
Using a fixed width=200, smaller than fm_grid.width will allways cut the fm_grid content, it's not dynamically either.
canvas.configure(scrollregion=canvas.bbox("all"),width=200,height=200)
How to sync the width of the Canvas with the width of the Frame inside?
You bound fm_grid.bind("<Configure>", therefore the event.widget is fm_grid, the Frame inside.
Get the dimensions of the event.widget from there w.winfo_... and build a bbox tuple to set scrollregion.
Use width to set canvas.width, to be in sync with the event.widget.winfo_width().
class ScrollCanvas(tk.Canvas):
def __init__(self, parent, **kwargs):
super().__init__(parent, **kwargs)
def create_window(self, child):
super().create_window((0, 0), window=child, anchor='nw')
child.bind("<Configure>", self.on_configure)
def on_configure(self, event):
w = event.widget
bbox = x, y, width, height = 0, 0, w.winfo_width(), w.winfo_height()
self.configure(scrollregion=bbox, width=width)
Tested with Python: 3.5 - 'TclVersion': 8.6 'TkVersion': 8.6
Related
i am doing a project to calculate the charges for different weight of the parcel. however, the position of the component(label, button, textbox and scrolltext) did not place it in the manner i want.
i want the length label to be in the center top, and the length textbox next to it. similar to width label and height label.
the following is my code.
from tkinter import *
import tkinter.scrolledtext as st
class Delivery(Frame):
def __init__(self):
Frame.__init__(self)
self.master.title("Delivery Charges Calculator(Ong Jia Sheng)")
self.master.geometry("700x350") #width by height dimension
#create the components
#create RadioButtons
self._salute = StringVar() #common variable for Radio buttons
self._rb1 = Radiobutton(self,text="cm",variable=self._salute,value="cm")
self._rb2 = Radiobutton(self,text="inch",variable=self._salute,value="inch")
self._salute.set("cm") #value of radiobutton, this is to set default selection
#create other components
self._lenLb = Label(self, text="Length:")
self._widLb = Label(self, text="Width:")
self._heiLb = Label(self, text="Height:")
self._weiLb = Label(self, text="Weight(kg):")
self._lenTb = Entry(self, width=25)
self._widTb = Entry(self, width=25)
self._heiTb = Entry(self, width=25)
self._weiTb = Entry(self, width=25)
self._charButt = Button(self, width=15, text="Calculate Charge",command=self.calcCharges)
self._cleButt = Button(self, width=15,text="Clear",command=self.Clear)
self._stxt = st.ScrolledText(self,width=700,height=5)
#place onto the window use grid layout
self._lenLb.grid(row=0,column=4)
self._lenTb.grid(row=0,column=5)
self._widLb.grid(row=1,column=4)
self._widTb.grid(row=1,column=5)
self._heiLb.grid(row=2,column=4)
self._heiTb.grid(row=2,column=5)
self._rb1.grid(row=5,column=6)
self._rb2.grid(row=5,column=7)
self._weiLb.grid(row=8,column=4)
self._weiTb.grid(row=8,column=5)
self._charButt.grid(row=9,column=5)
self._cleButt.grid(row=9,column=6)
self._stxt.grid(row=9,column=0)
self.grid()
def calcCharges(self):
self._salute.set("inch")
def Clear(self):
self._salute.set("cm")
def main():
app = Delivery()
app.mainloop()
main()
The width of ScrolledText constructor is expressed in characters (not in pixels).
Since it is very wide (700 char) and alone in the first column, other widgets are moved far to the right and outside the screen.
I have a window with a listbox that resize with one another. I'm using grid for this. There are a row of buttons under the list box which are currently moving and resizing with the window. I'd like the buttons to remain in place and remain a consistent size while window and listbox resize (so the buttons always remain in the bottom left corner of the listbox).
Is there an easy way to do this? I just started using Tkinter today so I may have just missed it in the docs or might just be confused on grid layouts.
The buttons are set up as follows:
nextbutton = Button(self, width = 30, height = 30, image = ffbtn)
nextbutton.image = ffbtn
nextbutton.bind("<Button-1>", self.forward)
nextbutton.grid(row = 10, column=4, sticky='w')
I've tried all sticky combinations but the ones that don't resize the buttons still allow them to move around, which I don't want.
EDIT: Heres an very basic example of what I'm talking about, as requested. When the window is resized, the buttons move apart from each other. I don't want that.
On a side note, do I need all those grid configures at the end to set the weight even if I use its one column or row with column/rowspan taking up all the space?
import tkinter
from tkinter import *
from tkinter import ttk
class Application(tkinter.Tk):
def __init__(self, parent):
tkinter.Tk.__init__(self, parent)
self.minsize(300,300)
self.parent = parent
self.main()
def main(self):
self.grid()
listbox = tkinter.Listbox(self, width=20, height=25, bg = 'grey')
listbox.grid(padx=30, pady=30, columnspan=11, sticky='NEW')
bt1 = Button(self, width = 5, height = 5)
bt1.grid(row=10, column=0, padx=(30,0), sticky='w')
bt2 = Button(self, width = 5, height = 5)
bt2.grid(row = 10, column=1, sticky='w')
bt3 = Button(self, width = 5, height = 5)
bt3.grid(row = 10, column=2, sticky='w')
bt4 = Button(self, width = 5, height = 5)
bt4.grid(row = 10, column=3, sticky='w')
bt5 = Button(self, width = 5, height = 5)
bt5.grid(row = 10, column=4, sticky='w')
self.grid_columnconfigure(0,weight=1)
self.grid_columnconfigure(1,weight=1)
self.grid_columnconfigure(2,weight=1)
self.grid_columnconfigure(3,weight=1)
self.grid_columnconfigure(4,weight=1)
self.grid_columnconfigure(5,weight=1)
self.grid_columnconfigure(6,weight=1)
self.grid_columnconfigure(7,weight=1)
self.grid_columnconfigure(8,weight=1)
self.grid_columnconfigure(9,weight=1)
self.grid_columnconfigure(10,weight=1)
self.grid_rowconfigure(0,weight=1)
self.grid_rowconfigure(1,weight=1)
self.grid_rowconfigure(2,weight=1)
self.grid_rowconfigure(3,weight=1)
self.grid_rowconfigure(4,weight=1)
self.grid_rowconfigure(5,weight=1)
self.grid_rowconfigure(6,weight=1)
self.grid_rowconfigure(7,weight=1)
self.grid_rowconfigure(8,weight=1)
self.grid_rowconfigure(9,weight=1)
self.grid_rowconfigure(10,weight=1)
app = Application(None)
app.mainloop()
By giving non-zero weights to all the rows and columns in the grid, you explicitly make them resize with the main window.
Since you only want the listbox to resize, give non-zero weights only to the row and one of the columns that contain the listbox:
def main(self):
...
# The default weight of all rows/columns is 0. Only modify it for row 0 and column 10
self.grid_rowconfigure(0, weight=1)
self.grid_columnconfigure(10, weight=1)
For more info, check the documentations of the pack, grid and place methods.
Okay, so I have sort of a unique situation here, so bear with me. I want to be able to create so called "barriers" around the viewing area (the part of the canvas visible to the user) of a tkinter canvas object. For example, take a look at the screenshots below (based on the MCVE at the end):
As you can see in the image above, the line currently goes outside the viewing area of the canvas when the user reaches the end. However, that is not what I want. Instead, I want that whenever the user reaches the end of the canvas's visible area, a "barrier" gets hot, and upon contact, a carriage return occurs, and the line(s) continue(s) on from there. So instead of the above, what I really want is this:
Here is the MCVE I used to take the above screenshots:
import tkinter as TK
xold = None
yold = None
class canvas(TK.Frame):
def __init__(self, root, *args, **kwargs):
# Initialize a tkinter frame widget
TK.Frame.__init__(self, root, width = 800, height = 850, *args, **kwargs)
self.root = self.winfo_toplevel()
self.bg = "white"
self.width, self.height = 850, 800
self.canvwidth, self.canvheight = 10000, 10000
# Set up the canvas and its corresponding scrollbars
self.canvas = TK.Canvas(root, width=850, height=800,
bg=self.bg, borderwidth=0, highlightthickness = 5, highlightbackground = 'brown', highlightcolor = 'brown')
self.hscroll = TK.Scrollbar(root, command=self.canvas.xview,
orient=TK.HORIZONTAL)
self.vscroll = TK.Scrollbar(root, command=self.canvas.yview)
self.canvas.configure(xscrollcommand=self.hscroll.set,
yscrollcommand=self.vscroll.set)
self.rowconfigure(0, weight=1, minsize=0)
self.columnconfigure(0, weight=1, minsize=0)
# Add the scrollbars into the root window
self.canvas.grid(padx=1, pady=1, row=0,
column=0, rowspan=1, columnspan=1, sticky = 'news')
self.vscroll.grid(padx=1, pady=1, row=0,
column=1, rowspan=1, columnspan=1, sticky='news')
self.hscroll.grid(padx=1, pady=1, row=1,
column=0, rowspan=1, columnspan=1, sticky='news')
# Call the `reset` method of the canvas class
self.reset()
# Bind the `line` method to the 'l' key of the users keyboard (as an example of what I want)
self.root.bind('<l>', self.line)
def reset(self, canvwidth=None, canvheight=None, bg = None):
###############################################################################################################################
# This adds the scrollbars themselves to the canvas and adapts them to the canvas's size (in this case, 10000 x 10000 pixels) #
###############################################################################################################################
if canvwidth:
self.canvwidth = canvwidth
if canvheight:
self.canvheight = canvheight
if bg:
self.bg = bg
self.canvas.config(bg=bg,
scrollregion=(-self.canvwidth//2, -self.canvheight//2,
self.canvwidth//2, self.canvheight//2))
self.canvas.xview_moveto(0.5*(self.canvwidth - self.width + 30) /
self.canvwidth)
self.canvas.yview_moveto(0.5*(self.canvheight- self.height + 30) /
self.canvheight)
def line(self, event):
########################################################################################################
# Create a short, horizontal, black line on every press of the user's 'l' key (as an example to go by) #
########################################################################################################
global xold, yold
if xold != None and yold != None:
pass
else:
xold, yold = 0, 0
self.canvas.create_line(xold, yold, xold+30, yold, smooth = TK.TRUE, width = 1, capstyle = TK.ROUND, joinstyle = TK.ROUND, fill = 'black')
xold = xold+30
yold = yold
if __name__ == '__main__':
# Create a window, and provide that window to the canvas class as the root window
root = TK.Tk()
root.geometry('900x850')
canvas(root)
root.mainloop()
Is it possible to add this ability to the MCVE above using tkinter? If so, how would I get started on trying to implement it?
I am not sure what you are actually trying to do (especially trying to constrain drawing in the displayed region while you provide a very large canvas with scrollbars).
For the simplest case, all you need is a bound value and to test xold against it
if xold > 440:
xold = -410
yold += 30
If you want to take into account the current displayed area, you have to combine information from canvas scrollregion and xview methods. The first return the bounds of the canvas and former the relative position of the displayed aera in the scrollregion.
scroll = list(map(int,self.canvas["scrollregion"].split()))
xview = self.canvas.xview()
leftbound = scroll[0] + xview[1] * (scroll[2]-scroll[0])
if xold > leftbound:
rightbound = scroll[0] + xview[0] * (scroll[2]-scroll[0])
xold = rightbound
yold += 30
I have a problem i want to put a image as the background for this little converter can someone help me? I was looking online and on stackoverflow but none of the things i found would work with the class.
__author__ = 'apcs'
from tkinter import *
class FarenheitToCelsius(Frame):
def __init__(self):
Frame.__init__(self)
self.master.title("Farenheit To Celsius Conversion")
self.grid()
self.farenheitLabel = Label(self, text="Farenheit")
self.farenheitLabel.grid(row=0, column=0)
self.farVar = DoubleVar()
self.farEntry = Entry(self, textvariable=self.farVar)
self.farEntry.grid(row=0, column=1)
self.celsiusLabel = Label(self, text="Celsius")
self.celsiusLabel.grid(row=1, column=0)
self.celVar = DoubleVar()
self.celEntry = Entry(self, textvariable=self.celVar)
self.celEntry.grid(row=1, column=1)
self.button = Button(self,
text="Convert to Celsius",
command=self.convertToFarenheit)
self.button2 = Button(self,
text="Convert to Farenheit",
command=self.convertToCelsius)
self.button.grid(row=2, column=1, columnspan=1)
self.button2.grid(row=2, column=0, columnspan=1)
def convertToFarenheit(self):
fare = self.farVar.get()
cels = (fare - 32) * 5 / 9
self.celVar.set(cels)
def convertToCelsius(self):
cel = self.celVar.get()
far = cel * 9 / 5 + 32
self.farVar.set(far)
def main():
FarenheitToCelsius().mainloop()
main()
I can think of at least three ways to do this:
Create an image in a label, and use place to put it in the frame. Then create all of the other widgets and use pack or grid as you normally would. Make sure you create the frame first, then the label with the image, then the children of the frame, so that the stacking order is correct.
Use a canvas instead of a frame, and use the create_image method to add an image. Then you can pack/place/grid children as normal.
Instead of a frame, use a label as the container, and then pack/place/grid widgets into the label (yes, you can add children to a label widget).
I am newbie in Python using tkinter and I have a problem that I cant solve.Digital time
I want to put digital time in the the upper right corner of my application (Please see the picture). I tried to search on net on how to create a digital time but it is on global root and frame configuration and I cant find a digital clock made for canvas. I also want to put my buttons in middle using grid, but I have no luck finding a solution. Can any one please help me? Ill paste my code here.
from tkinter import *
from tkinter import ttk
from datetime import date
import time
import sys
class main_menu(object):
def __init__(self, root):
self.root = root
self.root.title('System')
self.root.geometry('780x488')
self.background = PhotoImage(file='images/bg.png')
self.canvas = Canvas (root)
self.canvas.grid(sticky=N+S+W+E)
self.canvas.create_image(0,0, image=self.background, anchor="nw")
self.scan_photo = PhotoImage (file='images/scan.png')
self.logs_photo = PhotoImage (file='images/logs.png')
self.settings_photo = PhotoImage (file='images/settings.png')
self.scan_btn = Button (self.canvas, image=self.scan_photo, borderwidth=0, command=self.StartScan)
self.scan_win = self.canvas.create_window(225, 100, anchor="nw", window=self.scan_btn)
self.logs_btn = Button (self.canvas, image=self.logs_photo, borderwidth=0, command=self.Logs)
self.logs_win = self.canvas.create_window(225, 200, anchor="nw", window=self.logs_btn)
self.settings_btn = Button (self.canvas, image=self.settings_photo, borderwidth=0, command=self.Settings)
self.settings_win = self.canvas.create_window(225, 300, anchor="nw", window=self.settings_btn)
self.today = date.today()
self.format = self.today.strftime("%b. %d, %Y")
self.canvas.create_text(730, 30, text=self.format, font=("Helvetica", 10))
self.InstructionsLabel = Label(root, text="""
tadahhhhhh""", fg="black", font=("Calibri", 14))
self.Return_photo = PhotoImage (file='images/back_24x24.png')
self.ReturnMenu_btn = Button (self.canvas, image=self.Return_photo, background='white',activebackground='white', borderwidth=0, command=self.MainMenu)
self.ReturnMenu_win = self.canvas.create_window(0, 0, anchor="nw", window=self.ReturnMenu_btn)
###self.ReturnMenu = Button(root, image=self.back_photo, command=self.MainMenu, )
self.MainMenu()
def MainMenu(self):
self.RemoveAll()
self.ReturnMenu_btn.grid_remove()
self.scan_btn.grid(padx=215)
self.logs_btn.grid(padx=215)
self.settings_btn.grid(padx=215)
def StartScan(self):
self.RemoveAll()
def Logs(self):
self.RemoveAll()
self.ReturnMenu.grid()
def Settings(self):
self.RemoveAll()
self.ReturnMenu.grid()
def RemoveAll(self):
self.scan_btn.grid_remove()
self.logs_btn.grid_remove()
self.settings_btn.grid_remove()
self.InstructionsLabel.grid_remove()
self.ReturnMenu_btn.grid_remove()
if __name__ == '__main__':
root = Tk()
root.columnconfigure(0, weight=1)
root.rowconfigure(0, weight=1)
main_menu = main_menu(root)
root.mainloop()
To place the time in the upper right corner you need to know the width of the canvas. So use canvas.winfo_width() to get the width of the canvas and subtract some number to place it at the desired position.
If you want the time to stay at the top-right even if the window is resized then bind Configure to a function and move the text using .coords or .moveto.
Sample code(this code will make sure that the time is always at the upper right corner).
from tkinter import font
class MainMenu:
def __init__(self, root):
...
self.time = self.canvas.create_text(0, 0, text=self.format, font=("Helvetica", 10))
self.canvas.bind('<Configure>', self.adjustTimePosition)
...
def adjustTimePosition(self, event):
family, size = self.canvas.itemcget(self.time, 'font').split() # get the font-family and font size
text = self.canvas.itemcget(self.time, 'text')
txt_font = font.Font(family=family, size=size)
width, height = txt_font.measure(text), txt_font.metrics("ascent") # measures the width and height of the text
self.canvas.coords(self.time, self.canvas.winfo_width()-width, height) # moves the text