How to change on_press "animation" of Tkinter button in python - python

i have a taskbar-like Frame, which contains custom Buttons with images. But everytime i click on this button, Tkinter displaced the button 1px to the right/buttom.
Is it possible to override this behaviour? Or do i have to derived from Tkinter.Label instead of Tkinter.Button ?
edit:
Adding some code:
import Tkinter
import logging
logger = logging.getLogger(__name__)
class DesktopBtn(Tkinter.Button):
'''
Represents a Button which can switch to other Desktops
'''
_FONTCOLOR="#FFFFFF"
def getRelativePath(self,folder,name):
import os
dir_path = os.path.dirname(os.path.abspath(__file__))
return os.path.abspath(os.path.join(dir_path, '..', folder, name))
def __init__(self, parent,desktopManager,buttonName, **options):
'''
:param buttonName: Name of the button
'''
Tkinter.Button.__init__(self, parent, **options)
logger.info("init desktop button")
self._imagePath=self.getRelativePath('res','button.gif')
self._BtnPresspath = self.getRelativePath('res','buttonP.gif')
self._BtnPressImage = Tkinter.PhotoImage(file=self._BtnPresspath)
self._image = Tkinter.PhotoImage(file=self._imagePath)
self.bind('<ButtonPress-1>',self._on_pressed)
self.bind('<ButtonRelease-1>',self._on_release)
self._parent = parent
self._btnName = buttonName
self._desktopManager = desktopManager
self.config(width=70, height=65,borderwidth=0,compound=Tkinter.CENTER,font=("Arial", 9,"bold"),foreground=self._FONTCOLOR, text=buttonName,wraplength=64,image=self._image, command=self._onClickSwitch)
def _on_pressed(self,event):
self.config(relief="flat")
self.config(image=self._BtnPressImage)
def _on_release(self,event):
self.config(image=self._image)
def _onClickSwitch(self):
self.config(relief="flat")
logger.info("Buttonclickmethod onClickSwitch")
self._desktopManager.switchDesktop(self._btnName)
def getButtonName(self):
return self._btnName


You can disable the animation of a button by returning "break" in the widget's bind, which stops the propagation of bound functions.
So you can either alter the function you normally have bound to the button to return "break".
Or you can add another bind, this does however prevent any binds that are made after this one:
tkButton.bind("<Button-1>", lambda _: "break", add=True)


Not sure whether this works with your specialized button, but how the button moves when it's clicked seems to depend on it's relief style. With relief=SUNKEN, the button seems not to move at all when clicked, and with borderwidth=0 it appears to be indistinguishable from a FLAT button.
Minimal example:
root = Tk()
image = PhotoImage(file="icon.gif")
for _ in range(5):
Button(root, image=image, borderwidth=0, relief=SUNKEN).pack()
root.mainloop()
Note that you set and re-set the relief to FLAT multiple times in your code, so you might have to change them all for this to take effect.


I think I found some kind of a solution using relief and border:
closebut = Button(title, text="X", relief=SUNKEN, bd=0, command=close)
closebut.pack(side=RIGHT)
You can observe that I used relief = SUNKEN and then bd = 0 to get a nice FLAT effect on my button!

Related

how to change the color of PanedWindow upon hovering over it, for multiple PanedWindow in tkinter?

I am trying to make PanedWindow change color when I hover mouse over it in tkinter.
now this works for a single iteration.
but when i try to do it for multiple panedwindows it only changes color of the last window.
import tkinter as tk
root = tk.Tk()
for i in range(10):
m1 = tk.PanedWindow(root, bd=4, relief="flat", bg="blue")
m1.pack()
def on_enter(e):
m1.config(background='OrangeRed3', relief="flat")
def on_leave(e):
m1.config(background='SystemButtonFace', relief="flat")
# Create a Button
button1 = tk.Button(m1, text=f"{i}")
button1.pack(pady=20)
# Bind the Enter and Leave Events to the Button
m1.bind('<Enter>', on_enter)
m1.bind('<Leave>', on_leave)
m1.add(button1)
tk.mainloop()

Since at each iteration of the loop all variables are overwritten, the functions are bound to the last created element. It is necessary to pass the desired element to the function. It is even better to collect everything created in dictionaries, so that in the future you can easily change them.
import tkinter as tk
from functools import partial
ms = {}
btns = {}
root = tk.Tk()
def on_enter(m, e):
m.config(background='OrangeRed3', relief="flat")
def on_leave(m, e):
m.config(background='SystemButtonFace', relief="flat")
for i in range(10):
ms[i] = tk.PanedWindow(root, bd=4, relief="flat", bg="blue")
ms[i].pack()
# Create a Button
btns[i] = tk.Button(ms[i], text=f"{i}")
btns[i].pack(pady=20)
# Bind the Enter and Leave Events to the Button
ms[i].bind('<Enter>', partial(on_enter, ms[i]))
ms[i].bind('<Leave>', partial(on_leave, ms[i]))
ms[i].add(btns[i])
tk.mainloop()

How to trigger changes in button in a comand in Tkinter?

I'm new to TKinter. I need to change the text of a button and its state when its clicked, then do some actions, and finally change again its text and state.
The problem is the changes only apply once the function has ended, skipping the first change of state and text. It never changes the Buttons text to "loading" and the button is never disabled.
Here is the code for the problem i'm experiencing:
#!/usr/bin/env python
import tkinter as tk
import time
class Application(tk.Frame):
def __init__(self, master=None):
super().__init__(master)
self.master = master
self.pack(fill=tk.BOTH, expand=1)
self.create_widgets()
def create_widgets(self):
self.master.title("CW POS")
cierre = tk.Button(
self.master,
command=self.re_imprimir_ultimo_cierre)
cierre["text"] = "foo"
cierre.pack(fill=tk.BOTH, expand=1)
self._cierre = cierre
salir = tk.Button(self.master, text="quit", command=self.salir)
salir.pack(fill=tk.BOTH, expand=1)
def salir(self):
exit()
def re_imprimir_ultimo_cierre(self):
self._cierre["text"] = "Loading..."
self._cierre["state"] = tk.DISABLED
# TODO: magic
time.sleep(2)
self._cierre["text"] = "foo"
self._cierre["state"] = tk.NORMAL
root = tk.Tk()
root.geometry("240x180")
root.resizable(False, False)
app = Application(root)
root.mainloop()
How do I make the button show text="loading" and state=DISABLED, while the button is doing my calculations?

There is a pretty quick fix to this problem, you just need to update the button, once you change it's text to "Loading" (self._cierre["text"] = "Loading...")
def re_imprimir_ultimo_cierre(self):
self._cierre["text"] = "Loading..."
self._cierre["state"] = tk.DISABLED
self._cierre.update() # This is the line I added
# TODO: magic
time.sleep(2)
self._cierre["text"] = "foo"
self._cierre["state"] = tk.NORMAL
This just simply updates the buttons state after you change the text and state.
From what I understand this is because a button will run all the code within its command, before updating anything on the screen, so you essentially have to force the button to update itself within its command.
Hope this helps :)

How to change the foreground color of ttk.Button when its state is active?

I have a ttk.Button which color I want to change.
I did it in the following way:
Style().configure('gray.TButton', foreground='black', background='gray')
backButton = Button(self.bottomFrame, text="Back",
command=lambda: controller.ShowFrame("StartPage"),
style='gray.TButton')
backButton.pack(side='left')
And it works fine (screenshot):
But if this widget in the active mode (mouse cursor within it) it looks bad. Background becomes white so text becomes invisible.
Question: How to change text-color in active mode?
EDIT1: After this:
class BackSubmit(MainFrame):
def __init__(self, parent, controller, title):
MainFrame.__init__(self, parent, controller, title)
Style().configure('gray.TButton', foreground='white', background='gray')
backButton = Button(self.bottomFrame, text="Back",
command=lambda: controller.ShowFrame("StartPage"),
style='gray.TButton')
backButton.bind( '<Enter>', self.UpdateFgInAcSt )
backButton.pack(side='left')
Style().configure('blue.TButton', foreground='blue', background='light blue')
submitButton = Button(self.bottomFrame,
text="Submit settings",
command=lambda: self.submitSettings(),
style='blue.TButton')
submitButton.pack(side=RIGHT)
def submitSettings(self):
raise NotImplementedError("Subframe must implement abstract method")
def UpdateFgInAcSt(self, event):
backButton.configure(activeforeground='gray')
I get the error:
backButton.configure(activeforeground='gray')
NameError: global name 'backButton' is not defined.

First approach: 2 functions bound to 2 different events
You need to play around with tkinter events.
Enter and Leave events will fully satisfy your goals if you create 2 corresponding functions as follows:
def update_bgcolor_when_mouse_enters_button(event):
backButton.configure(background='black') # or whatever color you want
def update_bgcolor_when_mouse_leaves_button(event):
backButton.configure(background='gray')
Then bind these 2 functions to your button:
backButton.bind('<Enter>', update_bgcolor_when_mouse_enters_button)
backButton.bind('<Leave>', update_bgcolor_when_mouse_leaves_button)
You can do the same with the color of the text instead of the background color of the button but using the foreground option instead.
Cheaper approach: 1 function bound to 1 event
A cheaper approach consists in using only the Enter event and playing on the activeforground option instead.
Here you need to define only one function:
def update_active_foreground_color_when_mouse_enters_button(event):
backButton.configure(activeforeground='gray')
Then bind this function to the Enter event as follows:
backButton.bind('<Enter>', update_active_foreground_color_when_mouse_enters_button)

How to put widgets inside a ttk.Button

Is there a proper way to nest widgets inside of a ttk.Button? It supports specifying a label (a str) and image (a PhotoImage) which I assume is implemented using children widgets.
Here's an example where I'm adding a left-aligned and a right-aligned label to a button.
import tkinter as tk
import tkinter.ttk as ttk
root = tk.Tk()
normal_button = ttk.Button(root, text="Normal Button")
normal_button.pack(fill=tk.X)
custom_button = ttk.Button(root)
custom_button.pack(fill=tk.X)
left_label = ttk.Label(custom_button, text="Left")
left_label.pack(side=tk.LEFT, padx=16, pady=4)
right_label = ttk.Label(custom_button, text="Right")
right_label.pack(side=tk.RIGHT, padx=16, pady=4)
root.mainloop()
This sort of works, but there are some quirks:
When hovering over the button, the button's background is highlighted but the nested labels keep their unhighlighted backgrounds.
If I click within either nested label, the button will press down, but will not become unpressed.
When the button is pressed, the nested labels will not shift giving the illusion of a button being pressed.
Is there a proper way to pack widgets inside of a button?

As I said in a comment you can create your own widget.
Here is a simple example with tk.Frame and tk.Label (ttk.Label needs more work with ttk.Style).
I bind events <Enter> and <Leave> to change frame and labels backgrounds.
For more widgets you could keep them in a list and use a for loop to change the background.
import tkinter as tk
import tkinter.ttk as ttk
class MyButton(tk.Frame):
def __init__(self, master, bg_hover='red', bg_normal=None, **options):
tk.Frame.__init__(self, master, **options)
self.bg_normal = bg_normal
self.bg_hover = bg_hover
# use default color if bg_normal is `None`
if not self.bg_normal:
self.bg_normal = self['bg']
# add first label
self.left_label = tk.Label(self, text="Left")
self.left_label.pack(side=tk.LEFT, padx=16, pady=4)
# add second label
self.right_label = tk.Label(self, text="Right")
self.right_label.pack(side=tk.RIGHT, padx=16, pady=4)
# bind events
self.bind('<Enter>', self.on_enter)
self.bind('<Leave>', self.on_leave)
def on_enter(self, event=None):
# change all backgrounds on mouse enter
self['bg'] = self.bg_hover
self.left_label['bg'] = self.bg_hover
self.right_label['bg'] = self.bg_hover
def on_leave(self, event=None):
# change all backgrounds on mouse leave
self['bg'] = self.bg_normal
self.left_label['bg'] = self.bg_normal
self.right_label['bg'] = self.bg_normal
root = tk.Tk()
normal_button = ttk.Button(root, text="Normal Button")
normal_button.pack(fill=tk.X)
my_button = MyButton(root)
my_button.pack()
root.mainloop()

There is no proper way to pack widgets inside a button. Buttons aren't designed for that feature. As you've seen, you can indeed use pack or grid to put widgets inside of buttons. However, you'll have to add custom bindings to make it appear as if it's all one button widget.

In Tkinter is there any way to make a widget invisible?

Something like this, would make the widget appear normally:
Label(self, text = 'hello', visible ='yes')
While something like this, would make the widget not appear at all:
Label(self, text = 'hello', visible ='no')

You may be interested by the pack_forget and grid_forget methods of a widget. In the following example, the button disappear when clicked
from Tkinter import *
def hide_me(event):
event.widget.pack_forget()
root = Tk()
btn=Button(root, text="Click")
btn.bind('<Button-1>', hide_me)
btn.pack()
btn2=Button(root, text="Click too")
btn2.bind('<Button-1>', hide_me)
btn2.pack()
root.mainloop()

One option, as explained in another answer, is to use pack_forget or grid_forget. Another option is to use lift and lower. This changes the stacking order of widgets. The net effect is that you can hide widgets behind sibling widgets (or descendants of siblings). When you want them to be visible you lift them, and when you want them to be invisible you lower them.
The advantage (or disadvantage...) is that they still take up space in their master. If you "forget" a widget, the other widgets might readjust their size or orientation, but if you raise or lower them they will not.
Here is a simple example:
import Tkinter as tk
class SampleApp(tk.Tk):
def __init__(self, *args, **kwargs):
tk.Tk.__init__(self, *args, **kwargs)
self.frame = tk.Frame(self)
self.frame.pack(side="top", fill="both", expand=True)
self.label = tk.Label(self, text="Hello, world")
button1 = tk.Button(self, text="Click to hide label",
command=self.hide_label)
button2 = tk.Button(self, text="Click to show label",
command=self.show_label)
self.label.pack(in_=self.frame)
button1.pack(in_=self.frame)
button2.pack(in_=self.frame)
def show_label(self, event=None):
self.label.lift(self.frame)
def hide_label(self, event=None):
self.label.lower(self.frame)
if __name__ == "__main__":
app = SampleApp()
app.mainloop()

I know this is a couple of years late, but this is the 3rd Google response now for "Tkinter hide Label" as of 10/27/13... So if anyone like myself a few weeks ago is building a simple GUI and just wants some text to appear without swapping it out for another widget via "lower" or "lift" methods, I'd like to offer a workaround I use (Python2.7,Windows):
from Tkinter import *
class Top(Toplevel):
def __init__(self, parent, title = "How to Cheat and Hide Text"):
Toplevel.__init__(self,parent)
parent.geometry("250x250+100+150")
if title:
self.title(title)
parent.withdraw()
self.parent = parent
self.result = None
dialog = Frame(self)
self.initial_focus = self.dialog(dialog)
dialog.pack()
def dialog(self,parent):
self.parent = parent
self.L1 = Label(parent,text = "Hello, World!",state = DISABLED, disabledforeground = parent.cget('bg'))
self.L1.pack()
self.B1 = Button(parent, text = "Are You Alive???", command = self.hello)
self.B1.pack()
def hello(self):
self.L1['state']="normal"
if __name__ == '__main__':
root=Tk()
ds = Top(root)
root.mainloop()
The idea here is that you can set the color of the DISABLED text to the background ('bg') of the parent using ".cget('bg')" http://effbot.org/tkinterbook/widget.htm rendering it "invisible". The button callback resets the Label to the default foreground color and the text is once again visible.
Downsides here are that you still have to allocate the space for the text even though you can't read it, and at least on my computer, the text doesn't perfectly blend to the background. Maybe with some tweaking the color thing could be better and for compact GUIs, blank space allocation shouldn't be too much of a hassle for a short blurb.
See Default window colour Tkinter and hex colour codes for the info about how I found out about the color stuff.

I'm also extremely late to the party, but I'll leave my version of the answer here for others who may have gotten here, like I did, searching for how to hide something that was placed on the screen with the .place() function, and not .pack() neither .grid().
In short, you can hide a widget by setting the width and height to zero, like this:
widget.place(anchor="nw", x=0, y=0, width=0, height=0)
To give a bit of context so you can see what my requirement was and how I got here.
In my program, I have a window that needs to display several things that I've organized into 2 frames, something like this:
[WINDOW - app]
[FRAME 1 - hMainWndFrame]
[Buttons and other controls (widgets)]
[FRAME 2 - hJTensWndFrame]
[other Buttons and controls (widgets)]
Only one frame needs to be visible at a time, so on application initialisation, i have something like this:
hMainWndFrame = Frame(app, bg="#aababd")
hMainWndFrame.place(anchor="nw", x=0, y=0, width=480, height=320)
...
hJTensWndFrame = Frame(app, bg="#aababd")
I'm using .place() instead of .pack() or .grid() because i specifically want to set precise coordinates on the window for each widget. So, when i want to hide the main frame and display the other one (along with all the other controls), all i have to do is call the .place() function again, on each frame, but specifying zero for width and height for the one i want to hide and the necessary width and height for the one i want to show, such as:
hMainWndFrame.place(anchor="nw", x=0, y=0, width=0, height=0)
hJTensWndFrame.place(anchor="nw", x=0, y=0, width=480, height=320)
Now it's true, I only tested this on Frames, not on other widgets, but I guess it should work on everything.

For hiding a widget you can use function pack_forget() and to again show it you can use pack() function and implement them both in separate functions.
from Tkinter import *
root = Tk()
label=Label(root,text="I was Hidden")
def labelactive():
label.pack()
def labeldeactive():
label.pack_forget()
Button(root,text="Show",command=labelactive).pack()
Button(root,text="Hide",command=labeldeactive).pack()
root.mainloop()

I was not using grid or pack.
I used just place for my widgets as their size and positioning was fixed.
I wanted to implement hide/show functionality on frame.
Here is demo
from tkinter import *
window=Tk()
window.geometry("1366x768+1+1")
def toggle_graph_visibility():
graph_state_chosen=show_graph_checkbox_value.get()
if graph_state_chosen==0:
frame.place_forget()
else:
frame.place(x=1025,y=165)
score_pixel = PhotoImage(width=300, height=430)
show_graph_checkbox_value = IntVar(value=1)
frame=Frame(window,width=300,height=430)
graph_canvas = Canvas(frame, width = 300, height = 430,scrollregion=(0,0,300,300))
my_canvas=graph_canvas.create_image(20, 20, anchor=NW, image=score_pixel)
vbar=Scrollbar(frame,orient=VERTICAL)
vbar.config(command=graph_canvas.yview)
vbar.pack(side=RIGHT,fill=Y)
graph_canvas.config(yscrollcommand=vbar.set)
graph_canvas.pack(side=LEFT,expand=True,fill=BOTH)
frame.place(x=1025,y=165)
Checkbutton(window, text="show graph",variable=show_graph_checkbox_value,command=toggle_graph_visibility).place(x=900,y=165)
window.mainloop()
Note that in above example when 'show graph' is ticked then there is vertical scrollbar.
Graph disappears when checkbox is unselected.
I was fitting some bar graph in that area which I have not shown to keep example simple.
Most important thing to learn from above is the use of frame.place_forget() to hide and frame.place(x=x_pos,y=y_pos) to show back the content.

For someone who hate OOP like me (This is based on Bryan Oakley's answer)
import tkinter as tk
def show_label():
label1.lift()
def hide_label():
label1.lower()
root = tk.Tk()
frame1 = tk.Frame(root)
frame1.pack()
label1 = tk.Label(root, text="Hello, world")
label1.pack(in_=frame1)
button1 = tk.Button(root, text="Click to hide label",command=hide_label)
button2 = tk.Button(root, text="Click to show label", command=show_label)
button1.pack(in_=frame1)
button2.pack(in_=frame1)
root.mainloop()

import tkinter as tk
...
x = tk.Label(text='Hello', visible=True)
def visiblelabel(lb, visible):
lb.config(visible=visible)
visiblelabel(x, False) # Hide
visiblelabel(x, True) # Show
P.S. config can change any attribute:
x.config(text='Hello') # Text: Hello
x.config(text='Bye', font=('Arial', 20, 'bold')) # Text: Bye, Font: Arial Bold 20
x.config(bg='red', fg='white') # Background: red, Foreground: white
It's a bypass of StringVar, IntVar etc.

Categories