Icon as button without any decoration

[welle ozean]

Is there a style in Tk for macOS to create a clickable icon that behaves like a button, but does not have any decoration as you would get with style Toolbutton'? Many applications I see on a modern macOS have clickable icons with the same background of their containing frame (alas no decoration) and that change the background when the mouse is over them?

Of course I can implement it myself but I do not want to reinvent the wheel should a style already be there.

Welle

[Rich]

welle ozean <welle...@googlemail.com> wrote:
> Is there a style in Tk for macOS to create a clickable icon that
> behaves like a button, but does not have any decoration as you would
> get with style Toolbutton'? Many applications I see on a modern
> macOS have clickable icons with the same background of their
> containing frame (alas no decoration) and that change the background
> when the mouse is over them?

Does this do what you are looking for:

$ rlwrap wish
% pack [button .b -borderwidth 0 -text Push]

There are a lot of styling options that can be turned on/off for Tk
widgets, hopefully on macOS the -borderwidth option works as expected.

> Of course I can implement it myself but I do not want to reinvent the
> wheel should a style already be there.

Before doing that, experiment with the available options for the given
widgets. You can do that interactively by starting a wish in a
terminal, then you can type in different options and watch what changes
in real time.

[welle ozean]

I played a bit in Wish but was not able to achieve my goal. However, I tried the Awthemes on macOS (I use them on Windows), and thy all manahe to turn my ttk::buttons into icons with no decorations. I tired to looked into Awthemes code, but with no luck.

[Rich]

Quoting from the article to which you are replying is considered good
form.

welle ozean <welle...@googlemail.com> wrote:
> I played a bit in Wish but was not able to achieve my goal.

But you did not think to show us what you tried? We can't read your
mind, nor know what you tried unless you tell us.

> However, I tried the Awthemes on macOS (I use them on Windows), and
> thy all manahe to turn my ttk::buttons into icons with no
> decorations. I tired to looked into Awthemes code, but with no luck.

Note, TTk widgets are not Tk widgets. Two different widgets.

The example I gave, and which you have so far said nothing about, was
for Tk. Achieving the same settings with ttk widgets will likely
require some ttk style magic.

[Kevin Walzer]

On 3/27/21 11:14 AM, welle ozean wrote:
> Is there a style in Tk for macOS to create a clickable icon that behaves like a button, but does not have any decoration as you would get with style Toolbutton'? Many applications I see on a modern macOS have clickable icons with the same background of their containing frame (alas no decoration) and that change the background when the mouse is over them?

Nope. Your best bet is to implement it yourself with a label widget and
image only, and then using bindings to set behavior on clicking.

label .l -image myimage
pack .l
bind .l <1> mybuttonproc

etc.

--
Kevin Walzer
Code by Kevin
http://www.codebykevin.com

[welle ozean]

> But you did not think to show us what you tried? We can't read your
> mind, nor know what you tried unless you tell us.

The most close I came to eliminating all decorations with thr Tk widget was:

% image create photo .open -format PNG -file /Users/fc/Desktop/open16.png
% pack [button .b -borderwidth 0 -text Open -image .open -compound top]

Still, the border around the button is visible on macOS

> The example I gave, and which you have so far said nothing about, was
> for Tk. Achieving the same settings with ttk widgets will likely
> require some ttk style magic.

I normally use Ttk widgets since they are more conform to macOS native widgets, however simple clicklable icons as buttons are the norm on macOS and this option seem not to be available for ttk. Trying several style options, but not able to get rid of this "white box" that the ttk generates for a button

[welle ozean]

> Nope. Your best bet is to implement it yourself with a label widget and
> image only, and then using bindings to set behavior on clicking.

Thank you Kevin. This will be probably the way I will go. However, I am still looking into Awthemes, because there the ttk::button turns out exactly as I wish, just an icon (with text if wished) with no decoration.

Since this style seems to me quite common in macOS applications, it would be great to be able to achieve this.

[Brad Lanam]

demottk.tcl from awthemes has various mac buttons in it with different styles (enabled with the -macstyles option):
InlineButton, ImageButton, RecessedButton, RoundedRectButton, DisclosureButton, GradientButton, HelpButton
You can try one of those. I put them into the demo program, but I don't recall what they look like.
But to achieve a button without any decoration, just do:
::ttk::button .b -style TLabel -text hello -command {puts hello}
there's no need for empty images and whatnot.

[welle ozean]

> But to achieve a button without any decoration, just do:
> ::ttk::button .b -style TLabel -text hello -command {puts hello}
> there's no need for empty images and whatnot.

I will experiment with the different options of Awthemes on macOS, even if I am very pleased by the look of the available ones!

I almost achieved my perfect button look with:

image create photo .open -format PNG -file open16.png
ttk::style map C.TLabel -background [list !active black disabled #d9d9d9 active blue] -foreground [list disabled #a3a3a3] -relief [list {pressed !disabled} groove]
pack [::ttk::button .b -style C.TLabel -text Open -command {puts OPENING} -image .open -compound top]

This creates a nice button with icon+text without decorations, when pressed a ring is shown (probably not that common, so I will not keep it). What I have not been able to achieve is the change of the background color when hovering on it with the mouse.

[Rich]

welle ozean <welle...@googlemail.com> wrote:
>
>> But you did not think to show us what you tried? We can't read your
>> mind, nor know what you tried unless you tell us.
>
> The most close I came to eliminating all decorations with thr Tk widget was:
>
> % image create photo .open -format PNG -file /Users/fc/Desktop/open16.png
> % pack [button .b -borderwidth 0 -text Open -image .open -compound top]
>
> Still, the border around the button is visible on macOS

Try, one option at a time so if it works you know which one was the
right one:

-highlightthickness 0
-relief flat
-overrelief flat

>> The example I gave, and which you have so far said nothing about,
>> was for Tk. Achieving the same settings with ttk widgets will
>> likely require some ttk style magic.
>
> I normally use Ttk widgets since they are more conform to macOS
> native widgets, however simple clicklable icons as buttons are the
> norm on macOS and this option seem not to be available for ttk.
> Trying several style options, but not able to get rid of this "white
> box" that the ttk generates for a button

It is likely possible to do with ttk widgets, but I'll have to defer to
someone else in the group who knows more about customizing the look of
ttk widgets.

[Kevin Walzer]

On 3/27/21 6:07 PM, welle ozean wrote:
> This creates a nice button with icon+text without decorations, when pressed a ring is shown (probably not that common, so I will not keep it). What I have not been able to achieve is the change of the background color when hovering on it with the mouse.

You can do that by binding to <Enter> and <Leave> events.

[welle ozean]

> You can do that by binding to <Enter> and <Leave> events.

In principle yes. But if I do the following:

image create photo .open -format PNG -file /Users/fc/Desktop/open16.png
ttk::style map C.TLabel -relief [list {pressed !disabled} groove]

pack [::ttk::button .b -style C.TLabel -text Open -command {puts OPENING} -image .open -compound top]

bind .b <Enter> {.b configure -background red}
bind .b <Leave> {.b configure -background blue}

It says unknown option "-background", even if the option is documented.

[Rich]

ttk::button does not document a -background option. The -background
option is documented only for Tk widgets.

TTk widgets are not Tk widgets, these two are two different independent
widget sets.

[Schelte]

On 29/03/2021 20:18, welle ozean wrote:
>> You can do that by binding to <Enter> and <Leave> events.
> In principle yes.
>

No, that's not the way it is done with ttk widgets.

> It says unknown option "-background", even if the option is documented.
>

You didn't indicate where it is documented, but a ttk::button doesn't
have a -background option (it has -background as a styling option, which
is something else).

When the mouse is over a widget, it gets the "active" state. You can
attach a background color change to that:

ttk::button .b -style C.TLabel -text Open

ttk::style map C.TLabel -background {active green}

This will only work in themes that have a plain background. If the
background of the TLabel in the theme you use is an image or some other
generated pattern, you won't observe any change.

So I advise to first do your experiments with the "default" or "classic"
themes.


Schelte.

[welle ozean]

> You didn't indicate where it is documented, but a ttk::button doesn't
> have a -background option (it has -background as a styling option, which
> is something else).

My error. The documentation states that the style for backgorund can be set.

>This will only work in themes that have a plain background. If the
>background of the TLabel in the theme you use is an image or some other
>generated pattern, you won't observe any change.

>So I advise to first do your experiments with the "default" or "classic"
>themes.

I see what you mean. So, this means - as far as I understand - that with the Acqua style, which is the modern default style on macOS, I can not achieve a simple clickable icon as a button, which is also common on macOS applications.

[Rich]

welle ozean <welle...@googlemail.com> wrote:
>> You didn't indicate where it is documented, but a ttk::button doesn't
>> have a -background option (it has -background as a styling option, which
>> is something else).
>
> My error. The documentation states that the style for backgorund can
> be set.

The key word there is "style", ttk widgets get most of their 'look'
from styles (i.e., their 'look' is specified indirectly), not from
direct options like the Tk widgets.

>>This will only work in themes that have a plain background. If the
>>background of the TLabel in the theme you use is an image or some
>>other generated pattern, you won't observe any change.
>
>>So I advise to first do your experiments with the "default" or "classic"
>>themes.
>
> I see what you mean. So, this means - as far as I understand - that
> with the Acqua style, which is the modern default style on macOS, I
> can not achieve a simple clickable icon as a button, which is also
> common on macOS applications.

I would not (yet) say "can not". Have you tried my earlier
recommendation of several other options to test for a plain Tk button
to remove the border?

Have you tried someone else's suggestion of a label widget, with a set
of bindings to give it the active mouse controls needed for a
"clickable icon"? And if you end up needing to use a custom label
widget, you should look into giving the label an alternate class name
and using bindtags on the class name so you do not have to repeat the
bindings on every "special label" you create.

[Christian Gollwitzer]

Am 29.03.21 um 21:57 schrieb welle ozean:

> I see what you mean. So, this means - as far as I understand - that with the Acqua style, which is the modern default style on macOS, I can not achieve a simple clickable icon as a button, which is also common on macOS applications.
>

Basically this is achieved on Windows and X11 by the Toolbutton style.
One should reasonably expect that the Toolbutton style also creates
toolbar icons on OSX, but it doesn't, it creates weird square buttons
with an enormous size. IMHO this is a bug in the Aqua style and should
be fixed.

Christian

[welle ozean]

> I would not (yet) say "can not". Have you tried my earlier
> recommendation of several other options to test for a plain Tk button
> to remove the border?

Tried, with no effect.

> Have you tried someone else's suggestion of a label widget, with a set
> of bindings to give it the active mouse controls needed for a
> "clickable icon"? And if you end up needing to use a custom label
> widget, you should look into giving the label an alternate class name
> and using bindtags on the class name so you do not have to repeat the
> bindings on every "special label" you create.

I could not make the background change keeping the Aqua theme, which is the standard macOS one.

[welle ozean]

> Basically this is achieved on Windows and X11 by the Toolbutton style.
> One should reasonably expect that the Toolbutton style also creates
> toolbar icons on OSX, but it doesn't, it creates weird square buttons
> with an enormous size. IMHO this is a bug in the Aqua style and should
> be fixed.

Right, my same application is styled correctly on Windows using the Toolbutton style. Not sure I would call it a "bug": this kind of buttons are also known in the macOS ecosystem and are a special category of buttons (even if they look a little but different). However, it is someway not understandable that the most natural type of icon/button, also for the macOS system, the one used - just to know what we are talking about - by any sort of application on macOS, even by the very macOS system (look at the UI of the System preferences, for example), is not available, or even worst it is not implementable without stepping back from the Aqua theme.

I hope I am wrong and soomebody will prove I am, but all my experimenting so far has failed (and I honestly think I should not experiment to create the most basic form of icon/button).

[Rich]

welle ozean <welle...@googlemail.com> wrote:
>> Have you tried someone else's suggestion of a label widget, with a
>> set of bindings to give it the active mouse controls needed for a
>> "clickable icon"? And if you end up needing to use a custom label
>> widget, you should look into giving the label an alternate class
>> name and using bindtags on the class name so you do not have to
>> repeat the bindings on every "special label" you create.
>
> I could not make the background change keeping the Aqua theme, which
> is the standard macOS one.

Is there something special other than a simple background color change
for the Aqua theme?

What is the rgb color for the background of an Aqua button with no
mouse over it, and what is the rgb color for the background for a
button when the mouse is hovering over it?

[Rich]

welle ozean <welle...@googlemail.com> wrote:
>
>> Basically this is achieved on Windows and X11 by the Toolbutton style.
>> One should reasonably expect that the Toolbutton style also creates
>> toolbar icons on OSX, but it doesn't, it creates weird square buttons
>> with an enormous size. IMHO this is a bug in the Aqua style and should
>> be fixed.
>

> (look at the UI of the System preferences, for example),

Do keep in mind that some of us on this group (myself included) do not
have a mac with which to "look at the UI of the System preferences".
So telling us to look at something we have no access to does not help
detail to us exactly how the button should look.

If you want us to "look at the UI of the System preferences" then you
would do best to post some screen shots on a photo sharing site and
then include the URL's to those screen shots here so we can see what
you see.

> I hope I am wrong and soomebody will prove I am, but all my
> experimenting so far has failed (and I honestly think I should not
> experiment to create the most basic form of icon/button).

True, but, said experimentation can reveal bugs that ultimately need to
be fixed, and that when fixed, might then remove the need for that
experimentation.

[welle ozean]

>If you want us to "look at the UI of the System preferences" then you
>would do best to post some screen shots on a photo sharing site and
>then include the URL's to those screen shots here so we can see what
>you see.

Here you are:

This is a standard macOS window with clickable icons:

https://ibb.co/RyptX40

(note on the top some small icons. This is what the Toolbutton sytle is trying to replicate on macOS aqua, see below)

The following style (icon and no decoration, change of background when hovering on it) is used by most applications on macOS, here the example of Firefox (but I could include any other applications):

https://ibb.co/FnfwbTK

The next is what the Toolbutton style with ttk looks like:

https://ibb.co/9ZXmM6R

% image create photo .open -format PNG -file /Users/fc/Desktop/open16.png
% pack [::ttk::button .b -style Toolbutton -text File -command {puts OPENING} -image .open -compound top]

The next is the closest I can get to my goal. No decoration, just an icon (with text in this case), however no possibility to add an hovering effect. Hovering effects are common on macOS applications, even if not all use it:

https://ibb.co/0MpBcxT

image create photo .open -format PNG -file open16.png

ttk::style map C.TLabel -background [list !active black disabled #d9d9d9 active blue] -foreground [list disabled #a3a3a3] -relief [list {pressed !disabled} groove]

[Rich]

welle ozean <welle...@googlemail.com> wrote:
>>If you want us to "look at the UI of the System preferences" then you
>>would do best to post some screen shots on a photo sharing site and
>>then include the URL's to those screen shots here so we can see what
>>you see.
>
> Here you are:
>
> This is a standard macOS window with clickable icons:
>
> https://ibb.co/RyptX40
>
> (note on the top some small icons. This is what the Toolbutton sytle
> is trying to replicate on macOS aqua, see below)
>
> The following style (icon and no decoration, change of background
> when hovering on it) is used by most applications on macOS, here the
> example of Firefox (but I could include any other applications):
>
> https://ibb.co/FnfwbTK

Was there supposed to be a background change showing here?

> The next is what the Toolbutton style with ttk looks like:
>
> https://ibb.co/9ZXmM6R
>
> % image create photo .open -format PNG -file /Users/fc/Desktop/open16.png
> % pack [::ttk::button .b -style Toolbutton -text File -command {puts OPENING} -image .open -compound top]
>
> The next is the closest I can get to my goal. No decoration, just an icon (with text in this case), however no possibility to add an hovering effect. Hovering effects are common on macOS applications, even if not all use it:
>
> https://ibb.co/0MpBcxT
>
> image create photo .open -format PNG -file open16.png
> ttk::style map C.TLabel -background [list !active black disabled #d9d9d9 active blue] -foreground [list disabled #a3a3a3] -relief [list {pressed !disabled} groove]
> pack [::ttk::button .b -style C.TLabel -text Open -command {puts OPENING} -image .open -compound top]

I made the following change:

--- b.orig 2021-03-30 13:35:20.248858263 -0400
+++ b 2021-03-30 13:35:30.286574523 -0400
@@ -4,7 +4,7 @@
image create photo .open -format png \
-file /usr/share/icons/gnome/48x48/status/folder-open.png
ttk::style map C.TLabel \
- -background [list !active black disabled #d9d9d9 active blue] \
+ -background [list disabled #d9d9d9 active blue] \

-foreground [list disabled #a3a3a3] \
-relief [list {pressed !disabled} groove]

pack [::ttk::button .b -style C.TLabel -text Open -command {puts OPENING} \

Note, the -file and -format of image create are also a change (because
I don't have your open16.png, having no Mac).

I get this result (this is for Linux):

https://ibb.co/N7hjJB1

The left most image is the look without mouse hover over the button, the
center image is the look with mouse hover over the button, and the
right side is the look with mouse pressed over the button.

You do not see the color change or border change from hover/press on
your Mac?

[ted brown]

Perhaps you could get what you want using a canvas with some objects.

In 8.7 (with TIP 262 seemingly completed) frames and toplevels will
allow background images where one could place widgets on top of a "skin"
background.

If you can wait for 8.7, or use one of the alphas, it might be something
you could use. I've tested this with a frame in 8.7a4 in windows and
linux, but not macos.

[welle ozean]

> You do not see the color change or border change from hover/press on
> your Mac?

No. Here you can see your code on mac with 8.6.11. Above image is without any action, the one below is while the icon is clicked. No change while hovering with the mouse on the icon.

https://ibb.co/1sv608T

[welle ozean]

> You do not see the color change or border change from hover/press on
> your Mac?

The macOS System preferences icons do not change background when you hover it. This is comon on macOS, as it is also common that the background changes color (maybe 50% to 50%?), as this image shows:

https://ibb.co/zSw0X4Q

[Rich]

Unless there is some MacOS reason for the "active blue" to be ignored
as a -background style spec., I would say you have discovered a bug
with the MacOS Ttk styling.

[Manuel Collado]

Please verify that /Users/fc/Desktop/open16.png has a transparent
background. If not, then the blue border is probably just the the part
of the active blue background not covered by the image.

HTH.
--
Manuel Collado - http://mcollado.z15.es

[welle ozean]

> Please verify that /Users/fc/Desktop/open16.png has a transparent
> background. If not, then the blue border is probably just the the part
> of the active blue background not covered by the image.

Hi Manuel. Yes, background is transparent. In any case, the wording "file" is not part of the image and should get the new background even if the png had no transparent background. The same image get a changed background using Awthemes (shich however drop the Aqua theme completely).

[Rich]

What does this code snippet produce on your mac?

---begin code---
#!/usr/bin/wish

image create photo .open -format png \
-file /usr/share/icons/gnome/48x48/status/folder-open.png

set options [list -image .open -text Open -compound top \
-borderwidth 0 -relief solid -highlightthickness 0 \
-overrelief solid -padx 1m -pady 1m \
-background lightgreen -activebackground skyblue]

button .b1 {*}$options
button .b2 {*}$options
button .b3 {*}$options

grid .b1 .b2 .b3
---end code---

On Linux it produces this:

https://ibb.co/tc4fHQf

Top image is no mouse hover. Middle is mouse hover over middle button.
Bottom is press of right button.

You will need to substitute your png image, and if you don't want the
background color change on hover to occur, then make the
-activebackground color the same color as the -background color.

Note, I picked the two colors to make them stand out visibly.

[welle ozean]

> >> You do not see the color change or border change from hover/press on
> >> your Mac?
> >
> > The macOS System preferences icons do not change background when you
> > hover it. This is comon on macOS, as it is also common that the
> > background changes color (maybe 50% to 50%?), as this image shows:
> >
> > https://ibb.co/zSw0X4Q
> What does this code snippet produce on your mac?

Result:
https://ibb.co/MGpjNFW
No hovering.

I opened a Ticket on Tcl/Tk and got this clarification:

The aqua theme uses native button widgets and the background may not be changed.
There is a style 'ImageButton' available that has the format you want.
I don't know if it is available in the base 8.6.11, but for certain
it is available in the mac_styles branch.

So, it looks like this simple style is not available on macOS Aqua (the mac_style branch does not produce the desire effect too). This is a pity that there is no standard style for this - in my opinion - basic stuff, or no possibility to create a style for it.

[Rich]

welle ozean <welle...@googlemail.com> wrote:
>
>> >> You do not see the color change or border change from hover/press
>> >> on your Mac?
>> >
>> > The macOS System preferences icons do not change background when
>> > you hover it. This is comon on macOS, as it is also common that
>> > the background changes color (maybe 50% to 50%?), as this image
>> > shows:
>> >
>> > https://ibb.co/zSw0X4Q
>> What does this code snippet produce on your mac?
>
> Result:
> https://ibb.co/MGpjNFW
> No hovering.

Hmm, even with Tk widgets, interesting.

> I opened a Ticket on Tcl/Tk and got this clarification:
>
> The aqua theme uses native button widgets and the background may not
> be changed. There is a style 'ImageButton' available that has the
> format you want. I don't know if it is available in the base 8.6.11,
> but for certain it is available in the mac_styles branch.
>
> So, it looks like this simple style is not available on macOS Aqua
> (the mac_style branch does not produce the desire effect too). This
> is a pity that there is no standard style for this - in my opinion -
> basic stuff, or no possibility to create a style for it.

Here's your answer: "uses native button widgets"

You can blame Apple for restricting what can be done with the widgets.

So in reality this should be a bug report to Apple for restricting what
can be done with their widgets. But it is unlikely you'll get any
change to happen there.