The current implementation of Hovertip, packs a Label. I overrided the Hovertip class to place it relative to mouse position like this:
class AbsoluteHovertip(Hovertip):
def __init__(self, anchor_widget, text):
super().__init__(anchor_widget, text)
def showtip(self, x, y):
if self.tipwindow:
return
self.tipwindow = tw = Toplevel(self.anchor_widget)
tw.wm_overrideredirect(1)
try:
tw.tk.call("::tk::unsupported::MacWindowStyle", "style", tw._w,
"help", "noActivates")
except TclError:
pass
self.position_window()
self.showcontents(x, y)
self.tipwindow.update_idletasks()
self.tipwindow.lift()
def showcontents(self, x, y):
label = Label(self.tipwindow, text=self.text, justify=LEFT,
background="#ffffe0", relief=SOLID, borderwidth=1)
label.place(x=x+10, y=y+10)
I am using it like this inside a Treeview:
# self.tv is Treeview
# self.htip is AbsoluteHovertip(self.tv, "")
# self.events is just a list
def treeview_tooltip(self, event):
row = self.tv.identify_row(event.y)
column = self.tv.identify_column(event.x)
values = self.tv.item(row, "values")
if column == "#2":
index = int(values[0])
ev = self.events[index]
self.htip.text = int(ev.id)
self.htip.showtip(event.x, event.y)
elif column == "#3":
text = values[2]
if len(text) >= 30:
self.htip.text = text
self.htip.showtip(event.x, event.y)
else:
self.htip.hidetip()
self.tv.tk.call(self.tv, "tag", "remove", "highlight")
self.tv.tk.call(self.tv, "tag", "add", "highlight", row)
However instead of showing up as expected, a square box of about 100x100 or more shows up below the Treeview at the same place a normal HoverTip would appear.
I've been playing with this and your showtip override gave me an idea. Inside showtip there is a call to position_window so I override that and was able to change the position of the tip window. You can also do it with self.tipwindow.geometry() (probably in any override) if you can get the right position that you need. I needed relative repositioning so override position_window worked well for me. Below I am repositioning the tipwindow by the width of the anchor widget. I also overloaded showcontents so that I could style the tip window.
class Tip(Hovertip):
def position_window(self):
"""(re)-set the tooltip's screen position"""
x, y = self.get_position()
root_x = self.anchor_widget.winfo_rootx() + x - self.anchor_widget.winfo_width()
root_y = self.anchor_widget.winfo_rooty() + y
self.tipwindow.wm_geometry("+%d+%d" % (root_x, root_y))
def showcontents(self):
label = Label(self.tipwindow, text=self.text, justify=LEFT,
relief=SOLID, font=("Segoe UI", 12), borderwidth=0,
background=background, foreground=foreground,
padx=10, pady=10)
label.pack()
Tip(set_btn, "Settings", hover_delay=0)
I am creating a TicTacToe game in tkinter, consisting of a 3x3 grid made out of buttons.
In the code below, once a player has drawn on a tile (by clicking on the button), the program should remove this tile from the list 'self.flattenedButtons'. This is to prevent the computer (player 2) from drawing on the same tile.
The method this check is made in is self.add_move(). This works on all buttons apart from the bottom right, I assume this is as I took away 1 from the ending range. If I do not do this I am given an 'out of range' error.
How would I change my method so it works on all buttons?
CODE:
from tkinter import *
from functools import partial
from itertools import *
import random
class Window(Frame):
def __init__(self, master = None): # init Window class
Frame.__init__(self, master) # init Frame class
self.master = master # allows us to refer to root as master
self.rows = 3
self.columns = 3
self.guiGrid = [[None for x in range(self.rows)] for y in range(self.columns)] # use this for the computer's moves
self.buttonText = StringVar(value = '')
self.buttonText2 = StringVar(value = 'X')
self.buttonText3 = StringVar(value = 'O')
self.button_ij = None
self.flattenedButtons = []
self.create_window()
self.add_buttons()
def create_window(self):
self.master.title('Tic Tac Toe')
self.pack(fill = BOTH, expand = 1)
for i in range(0,3):
self.grid_columnconfigure(i, weight = 1)
self.grid_rowconfigure(i, weight = 1)
def add_buttons(self):
rows = 3
columns = 3
for i in range (rows):
for j in range(columns):
self.button_ij = Button(self, textvariable = self.buttonText, command = lambda i=i, j=j: self.add_move(i,j))
self.guiGrid[i][j] = self.button_ij # place button into 2d array to access later on
self.flattenedButtons.append(self.button_ij)
self.button_ij.grid(row = i,column = j, sticky =E+W+S+N)
def add_move(self, i,j):
pressedButton = self.guiGrid[i][j]
self.guiGrid[i][j].config(textvariable =self.buttonText2)
for i in range(0, len(self.flattenedButtons)-1):
if (self.flattenedButtons[i] == pressedButton):
self.flattenedButtons.remove(self.flattenedButtons[i])
print('removed')
else:
pass
root = Tk() # creating Tk instance
rootWidth = '500'
rootHeight = '500'
root.geometry(rootWidth+'x'+rootHeight)
ticTacToe = Window(root) # creating Window object with root as master
root.mainloop() # keeps program running
It is not recommended to operate the list when you iterate it.
If your code is:
for i in range(0, len(self.flattenedButtons)-1):
if (self.flattenedButtons[i] == pressedButton):
self.flattenedButtons.remove(self.flattenedButtons[i])
print('removed')
else:
pass
print(self.flattenedButtons)
You will see that your button 9 will never be removed.
Change your for loop to a easy list-comprehension:
self.flattenedButtons = [i for i in self.flattenedButtons if i != pressedButton]
print(self.flattenedButtons)
You will see the change.
So I have a simple program where when you click a button from a grid it will be filled a colour. I wish to be able to drag across over the buttons and they get filled, unlike at the moment where you have to click every single button. Can this be done?
Here's my code that probably isn't the best:
from tkinter import *
root=Tk()
grid= Frame(root)
grid.pack()
img0=PhotoImage(file="0.png")
img1=PhotoImage(file="1.png")
img2=PhotoImage(file="2.png")
fill = 1
class button:
def __init__(self, x, y):
self.type=0
self.but=Button(grid,command=self.change, image=img0, borderwidth=0)
self.but.grid(row=y, column=x)
def change(self):
if self.type==fill:
self.but.config(image=img0)
self.type=0
else:
self.but.config(image=eval("img"+str(fill)))
self.type=fill
def create(x,y):
grid_buttons = []
for Y in range(y):
grid_buttons.append([])
for X in range(x):
grid_buttons[Y].append(button(X, Y))
create(15,15)
root.mainloop()
Here's one way:
from tkinter import *
root=Tk()
grid= Frame(root)
grid.pack()
img0=PhotoImage(file="0.png")
img1=PhotoImage(file="1.png")
img2=PhotoImage(file="2.png")
fill = 1
class button:
def __init__(self, x, y):
self.type=0
self.but=Button(grid,command=self.change, image=img0, borderwidth=0)
self.but.grid(row=y, column=x)
#Changed
self.already_changed = False
def change(self):
if self.type==fill:
self.but.config(image=img0)
self.type=0
else:
self.but.config(image=eval("img"+str(fill))) #I left this in here, but you should NEVER use eval(). It's unsafe.
self.type=fill
#Changed
def mouse_entered(self):
if not self.already_changed:
self.change()
self.already_changed = True
def mouse_up(self):
self.already_changed = False
#Changed
class Container:
def __init__(self, x, y):
grid_buttons = []
for Y in range(y):
grid_buttons.append([])
for X in range(x):
grid_buttons[Y].append(button(X, Y))
self.buttons = grid_buttons
grid.bind_all("<Button-1>", self.mouse_down)
grid.bind_all("<ButtonRelease-1>", self.mouse_up)
grid.bind_all("<B1-Motion>", self.mouse_motion)
self.mouse_pressed = False
def mouse_down(self, e):
self.mouse_pressed = True
def mouse_up(self, e):
self.mouse_pressed = False
for row in self.buttons:
for but in row:
but.mouse_up()
def mouse_motion(self, e):
for row in self.buttons:
for but in row:
if grid.winfo_containing(e.x_root, e.y_root) is but.but:
but.mouse_entered()
container = Container(15,15)
root.mainloop()
Now, I noticed that some of the things you did aren't quite Python style. So here's a version that more closely follows Python convention. Be warned that it's quite different.
from tkinter import *
root = Tk()
images = {0: PhotoImage(file="0.png"),
1: PhotoImage(file="1.png"),
2: PhotoImage(file="2.png")}
fill = 1
class MyButton(Button): #Convention is for class names to start with uppercase letters
def __init__(self, master):
super(MyButton, self).__init__(master, image = images[0], borderwidth = 0)
self.type = 0
self.already_changed = False
def change(self):
if self.type == fill:
self.type = 0
else:
self.type = fill
self.config(image=images[self.type])
def mouse_entered(self):
if not self.already_changed:
self.change()
self.already_changed = True
def mouse_up(self):
self.already_changed = False
class Container(Frame):
def __init__(self, master, width, height):
super(Container, self).__init__(master)
buttons = []
for y in range(height):
buttons.append([])
for x in range(width):
button = MyButton(self)
button.grid(row = x, column = y)
buttons[y].append(button)
self.buttons = buttons
self.bind_all("<Button-1>", self.mouse_down)
self.bind_all("<ButtonRelease-1>", self.mouse_up)
self.bind_all("<B1-Motion>", self.mouse_motion)
self.mouse_pressed = False
def mouse_down(self, e):
self.update_containing_button(e)
self.mouse_pressed = True
def mouse_up(self, e):
self.mouse_pressed = False
for row in self.buttons:
for button in row:
button.mouse_up()
def mouse_motion(self, e):
self.update_containing_button(e)
def update_containing_button(self, e):
for row in self.buttons:
for button in row:
if self.winfo_containing(e.x_root, e.y_root) is button:
button.mouse_entered()
grid = Container(root, 15, 15)
grid.pack()
root.mainloop()
Why post both? Because it looks like you have more code in the actual application (that's good, it's a minimal example). I didn't want to force you to rewrite my code to make it work with the rest of your code, or vice versa.
Functionality differences between the two versions:
The second version has been modified so it uses object-oriented features instead of global variables, making it more flexible and easier to change.
The second version removes the binding on the buttons themselves, instead having the container handle everything.
I'm using tkinter to create a 8x8 button matrix, which when the individual buttons are pressed add to a final list (eg finalList = ((0,0),(5,7),(6,6), ...), allowing me to quickly create 8x8 (x,y) co-ordinate images. I have created the window with the buttons but now have issues trying to reference these buttons in a function to add to a list or even change the colour of the button
I have read that once the button is created and you create another it moves to that button reference. I suspect I need to use a dict or 2D array to store all these reference of buttons but am struggling to figure out a solution.
from tkinter import *
class App:
def updateChange(self):
'''
-Have the button change colour when pressed
-add coordinate to final list
'''
x , y = self.xY
self.buttons[x][y].configure(bg="#000000")
def __init__(self, master):
frame = Frame(master)
frame.pack()
self.buttons = [] # Do I need to create a dict of button's so I can reference the particular button I wish to update?
for matrixColumn in range(8):
for matrixRow in range(8):
self.xY = (matrixColumn,matrixRow)
stringXY = str(self.xY)
self.button = Button(frame,text=stringXY, fg="#000000", bg="#ffffff", command = self.updateChange).grid(row=matrixRow,column=matrixColumn)
self.buttons[matrixColumn][matrixRow].append(self.button)
root = Tk()
app = App(root)
root.mainloop()
Example of the 8x8 Matrix
Below are 2 examples, the first is if you just want to change the colour and nothing else then you can do it without using a list. The second involves using a list and demonstrates what Delioth has pointed out
class App(object):
def __init__(self, master):
self._master = master
for col in range(8):
for row in range(8):
btn = tk.Button(master, text = '(%d, %d)' % (col, row), bg = 'white')
btn['command'] = lambda b = btn: b.config(bg = 'black')
btn.grid(row = row, column = col)
class App(object):
def __init__(self, master):
self._master = master
self._btn_matrix = []
for col in range(8):
row_matrix = []
for row in range(8):
btn = tk.Button(master, text = '(%d, %d)' % (col, row), bg = 'white',
command = lambda x = row, y = col: self.update(x, y))
btn.grid(row = row, column = col)
row_matrix.append(btn)
self._btn_matrix.append(row_matrix)
def update(self, row, col):
self._btn_matrix[col][row].config( bg = 'black' )
if __name__ == '__main__':
root = tk.Tk()
app = App(root)
root.mainloop()
self.xY is set to 7,7 in your double for loop and never changed. If you want it to be different for each button, you may want to change updateChange to take two parameters (x,y), and pass them in as the command for the button using something like; lambda x=matrixColumn y=matrixRow: self.updateChange(x,y)
Example updateChange
def updateChange(self, x, y):
'''...'''
self.buttons[x][y].configure(bg="black")
Is there any way to use ttk Treeview with editable rows?
I mean it should work more like a table. For example on double click on the item make the #0 column 'editable'.
If this isn't possible, any way to allow mouse selecting on the item would be just fine. I haven't found any mention of this in tkdocs or other documents.
After long research I haven't found such feature so I guess there's any. Tk is very simple interface, which allows programmer to build 'high-level' features from the basics. So my desired behaviour this way.
def onDoubleClick(self, event):
''' Executed, when a row is double-clicked. Opens
read-only EntryPopup above the item's column, so it is possible
to select text '''
# close previous popups
# self.destroyPopups()
# what row and column was clicked on
rowid = self._tree.identify_row(event.y)
column = self._tree.identify_column(event.x)
# get column position info
x,y,width,height = self._tree.bbox(rowid, column)
# y-axis offset
# pady = height // 2
pady = 0
# place Entry popup properly
text = self._tree.item(rowid, 'text')
self.entryPopup = EntryPopup(self._tree, rowid, text)
self.entryPopup.place( x=0, y=y+pady, anchor=W, relwidth=1)
This is method within a class which composes ttk.Treeview as self._tree
And EntryPopup is then very simple sub-class of Entry:
class EntryPopup(Entry):
def __init__(self, parent, iid, text, **kw):
''' If relwidth is set, then width is ignored '''
super().__init__(parent, **kw)
self.tv = parent
self.iid = iid
self.insert(0, text)
# self['state'] = 'readonly'
# self['readonlybackground'] = 'white'
# self['selectbackground'] = '#1BA1E2'
self['exportselection'] = False
self.focus_force()
self.bind("<Return>", self.on_return)
self.bind("<Control-a>", self.select_all)
self.bind("<Escape>", lambda *ignore: self.destroy())
def on_return(self, event):
self.tv.item(self.iid, text=self.get())
self.destroy()
def select_all(self, *ignore):
''' Set selection on the whole text '''
self.selection_range(0, 'end')
# returns 'break' to interrupt default key-bindings
return 'break'
You could also pop up a tool window with the editable fields listed with Entries to update the values. This example has a treeview with three columns, and does not use subclasses.
Bind your double click to this:
def OnDoubleClick(self, treeView):
# First check if a blank space was selected
entryIndex = treeView.focus()
if '' == entryIndex: return
# Set up window
win = Toplevel()
win.title("Edit Entry")
win.attributes("-toolwindow", True)
####
# Set up the window's other attributes and geometry
####
# Grab the entry's values
for child in treeView.get_children():
if child == entryIndex:
values = treeView.item(child)["values"]
break
col1Lbl = Label(win, text = "Value 1: ")
col1Ent = Entry(win)
col1Ent.insert(0, values[0]) # Default is column 1's current value
col1Lbl.grid(row = 0, column = 0)
col1Ent.grid(row = 0, column = 1)
col2Lbl = Label(win, text = "Value 2: ")
col2Ent = Entry(win)
col2Ent.insert(0, values[1]) # Default is column 2's current value
col2Lbl.grid(row = 0, column = 2)
col2Ent.grid(row = 0, column = 3)
col3Lbl = Label(win, text = "Value 3: ")
col3Ent = Entry(win)
col3Ent.insert(0, values[2]) # Default is column 3's current value
col3Lbl.grid(row = 0, column = 4)
col3Ent.grid(row = 0, column = 5)
def UpdateThenDestroy():
if ConfirmEntry(treeView, col1Ent.get(), col2Ent.get(), col3Ent.get()):
win.destroy()
okButt = Button(win, text = "Ok")
okButt.bind("<Button-1>", lambda e: UpdateThenDestroy())
okButt.grid(row = 1, column = 4)
canButt = Button(win, text = "Cancel")
canButt.bind("<Button-1>", lambda c: win.destroy())
canButt.grid(row = 1, column = 5)
Then confirm the changes:
def ConfirmEntry(self, treeView, entry1, entry2, entry3):
####
# Whatever validation you need
####
# Grab the current index in the tree
currInd = treeView.index(treeView.focus())
# Remove it from the tree
DeleteCurrentEntry(treeView)
# Put it back in with the upated values
treeView.insert('', currInd, values = (entry1, entry2, entry3))
return True
Here's how to delete an entry:
def DeleteCurrentEntry(self, treeView):
curr = treeView.focus()
if '' == curr: return
treeView.delete(curr)
I have tried #dakov solution but it did not work for me since my treeView has multiple columns and for few more reasons. I made some changes that enhanced it so here is my version
class Tableview(ttk.Treeview):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
tv.bind("<Double-1>", lambda event: self.onDoubleClick(event))
def onDoubleClick(self, event):
''' Executed, when a row is double-clicked. Opens
read-only EntryPopup above the item's column, so it is possible
to select text '''
# close previous popups
try: # in case there was no previous popup
self.entryPopup.destroy()
except AttributeError:
pass
# what row and column was clicked on
rowid = self.identify_row(event.y)
column = self.identify_column(event.x)
# handle exception when header is double click
if not rowid:
return
# get column position info
x,y,width,height = self.bbox(rowid, column)
# y-axis offset
pady = height // 2
# place Entry popup properly
text = self.item(rowid, 'values')[int(column[1:])-1]
self.entryPopup = EntryPopup(self, rowid, int(column[1:])-1, text)
self.entryPopup.place(x=x, y=y+pady, width=width, height=height, anchor='w')
The EntryPopup class
class EntryPopup(ttk.Entry):
def __init__(self, parent, iid, column, text, **kw):
ttk.Style().configure('pad.TEntry', padding='1 1 1 1')
super().__init__(parent, style='pad.TEntry', **kw)
self.tv = parent
self.iid = iid
self.column = column
self.insert(0, text)
# self['state'] = 'readonly'
# self['readonlybackground'] = 'white'
# self['selectbackground'] = '#1BA1E2'
self['exportselection'] = False
self.focus_force()
self.select_all()
self.bind("<Return>", self.on_return)
self.bind("<Control-a>", self.select_all)
self.bind("<Escape>", lambda *ignore: self.destroy())
def on_return(self, event):
rowid = self.tv.focus()
vals = self.tv.item(rowid, 'values')
vals = list(vals)
vals[self.column] = self.get()
self.tv.item(rowid, values=vals)
self.destroy()
def select_all(self, *ignore):
''' Set selection on the whole text '''
self.selection_range(0, 'end')
# returns 'break' to interrupt default key-bindings
return 'break'
from tkinter import ttk
from tkinter import *
root = Tk()
columns = ("Items", "Values")
Treeview = ttk.Treeview(root, height=18, show="headings", columns=columns) #
Treeview.column("Items", width=200, anchor='center')
Treeview.column("Values", width=200, anchor='center')
Treeview.heading("Items", text="Items")
Treeview.heading("Values", text="Values")
Treeview.pack(side=LEFT, fill=BOTH)
name = ['Item1', 'Item2', 'Item3']
ipcode = ['10', '25', '163']
for i in range(min(len(name), len(ipcode))):
Treeview.insert('', i, values=(name[i], ipcode[i]))
def treeview_sort_column(tv, col, reverse):
l = [(tv.set(k, col), k) for k in tv.get_children('')]
l.sort(reverse=reverse)
for index, (val, k) in enumerate(l):
tv.move(k, '', index)
tv.heading(col, command=lambda: treeview_sort_column(tv, col, not reverse))
def set_cell_value(event):
for item in Treeview.selection():
item_text = Treeview.item(item, "values")
column = Treeview.identify_column(event.x)
row = Treeview.identify_row(event.y)
cn = int(str(column).replace('#', ''))
rn = int(str(row).replace('I', ''))
entryedit = Text(root, width=10 + (cn - 1) * 16, height=1)
entryedit.place(x=16 + (cn - 1) * 130, y=6 + rn * 20)
def saveedit():
Treeview.set(item, column=column, value=entryedit.get(0.0, "end"))
entryedit.destroy()
okb.destroy()
okb = ttk.Button(root, text='OK', width=4, command=saveedit)
okb.place(x=90 + (cn - 1) * 242, y=2 + rn * 20)
def newrow():
name.append('to be named')
ipcode.append('value')
Treeview.insert('', len(name) - 1, values=(name[len(name) - 1], ipcode[len(name) - 1]))
Treeview.update()
newb.place(x=120, y=(len(name) - 1) * 20 + 45)
newb.update()
Treeview.bind('<Double-1>', set_cell_value)
newb = ttk.Button(root, text='new item', width=20, command=newrow)
newb.place(x=120, y=(len(name) - 1) * 20 + 45)
for col in columns:
Treeview.heading(col, text=col, command=lambda _col=col: treeview_sort_column(Treeview, _col, False))
root.mainloop()
After so much research while doing my project got this code, it helped me a lot.
Double click on the element you want to edit, make the required change and click 'OK' button
I think this is what exactly you wanted
#python #tkinter #treeview #editablerow
New row
Editable row
This is just for creating a tree for the specified path that is set in the constructor. you can bind your event to your item on that tree. The event function is left in a way that the item could be used in many ways. In this case, it will show the name of the item when double clicked on it. Hope this helps somebody.
import ttk
from Tkinter import*
import os*
class Tree(Frame):
def __init__(self, parent):
Frame.__init__(self, parent)
self.parent = parent
path = "/home/...."
self.initUI(path)
def initUI(self, path):
self.parent.title("Tree")
self.tree = ttk.Treeview(self.parent)
self.tree.bind("<Double-1>", self.itemEvent)
yScr = ttk.Scrollbar(self.tree, orient = "vertical", command = self.tree.yview)
xScr = ttk.Scrollbar(self.tree, orient = "horizontal", command = self.tree.xview)
self.tree.configure(yscroll = yScr.set, xScroll = xScr.set)
self.tree.heading("#0", text = "My Tree", anchor = 'w')
yScr.pack(side = RIGHT, fill = Y)
pathy = os.path.abspath(path)
rootNode = self.tree.insert('', 'end', text = pathy, open = True)
self.createTree(rootNode, pathy)
self.tree.pack(side = LEFT, fill = BOTH, expand = 1, padx = 2, pady = 2)
self.pack(fill= BOTH, expand = 1)
def createTree(self, parent, path)
for p in os.listdir(path)
pathy = os.path.join(path, p)
isdir = os.path.isdir(pathy)
oid = self.tree.insert(parent, 'end' text = p, open = False)
if isdir:
self.createTree(oid, pathy)
def itemEvent(self, event):
item = self.tree.selection()[0] # now you got the item on that tree
print "you clicked on", self.tree.item(item,"text")
def main():
root = Tk.Tk()
app = Tree(root)
root.mainloop()
if __name__ == '__main__'
main()
You should not do this manually
there are ready to use pack that have this Feature and many more such as
tkintertable
it have some insane features
there is also pygubu-editable-treeview
if you are intrested in pygubu,
as for the the reason you shouldnt code your own ,
in order to do a good treeview you will need to build more Feature that make your gui easier to use
however such Feature takes hundred lines of code to create.(takes a long time to get right)
unless you are making a custom TREE-View-widget,it doesnot worth the effort.
I don't know about making the row editable, but to capture clicking on a row, you use the <<TreeviewSelect>> virtual event. This gets bound to a routine with the bind() method, then you use the selection() method to get the ids of the items selected.
These are snippets from an existing program, but show the basic sequence of calls:
# in Treeview setup routine
self.tview.tree.bind("<<TreeviewSelect>>", self.TableItemClick)
# in TableItemClick()
selitems = self.tview.tree.selection()
if selitems:
selitem = selitems[0]
text = self.tview.tree.item(selitem, "text") # get value in col #0