[PySimpleGUI-tk Bug] transparent areas on PNG button image render white on Mac?

[mcgregor94086]

Type of Issues: (Question)

Operating System: Mac OS Catalina 10.15.1

Python version 3.7

PySimpleGUI Port and Version 4.7.1

Your Experience Levels In Months or Years:

6 mo_ Python programming experience
40+ yrs_ Programming experience overall
No_ Have used another Python GUI Framework (tkiner, Qt, etc) previously (yes/no is fine)?

You have completed these steps:

• [x ] Read instructions on how to file an Issue
• Searched through main docs http://www.PySimpleGUI.org for your problem
• [x ] Searched through the readme for your specific port if not PySimpleGUI (Qt, WX, Remi)
• [x ] Looked for Demo Programs that are similar to your goal http://www.PySimpleGUI.com
• [x ] Note that there are also Demo Programs under each port on GitHub
• Run your program outside of your debugger (from a command line)
• [x ] Searched through Issues (open and closed) to see if already reported

Code or partial code causing the problem

First of all, many thanks to Mike for the massive improvements to the look and feel aspects of the Mac port!

In a layout definition,

sg.Button(button_color=sg.TRANSPARENT_BUTTON,image_filename='sonascan-scan-button.png',
                   image_size=(600,172))

With this button-image:

It is rendered like this:

I'm not sure if this behavior is due to limitations to images in the Mac port, or whether I've just coded something wrong. Please advise!

[PySimpleGUI]

-sigh-

Yea, this is a bug. I noticed this problem when the ttk testing was wrapping up with Mac users.

I've got as a high priority item (marked urgent) to get images on ttk buttons up and running. Images are only supported on tk buttons at the moment.

I'm hoping this next week I'll be able to get it done. I REALLY want the Mac users to be up to the same functionality as the platforms.

---

Workaround?

This week @RideLikeTheWind posted that they downloaded Python from python.org instead of Brew:

Upgrading python to 3.8 with Tk 8.6 on Catalina works. I uninstalled the Brew version and installed the Python.org version.

This has me wondering if ttk buttons were needed at all and that perhaps the original code could have always worked if users did not use the Brew version.

If you're brave and up for a test, you can try installing the python.org version. If you do, I don't suggest 3.8 as there are a few problems with tkinter using anything above 3.7.2.

Regardless I want to get the ttk button images up.

[PySimpleGUI]

Fixed.....

Download a new PySimpleGUI.py file GitHub. Version = 4.7.1.2

You can now use images on ttk buttons.
Note that button text doesn't show up on ttk buttons with images, unlike tk buttons. I'll investigate further, but the priority here was to be able to use buttons with a "transparent" background.

The background isn't actually transparent. You must set the background color of the button to match the background that the button is on.

Here's a test harness for you. It will show the button image. If you click on the image button, a new image will replace the old one (tests the update method)

Please post another image of your window after running these tests and your code as well.

import PySimpleGUI as sg
print(sg.version)
print(sg)

sg.change_look_and_feel('Light Brown 1')

background = sg.LOOK_AND_FEEL_TABLE['LightBrown1']['BACKGROUND']

layout = [  [sg.Text('My Window')],
            [sg.Button('test', image_data=sg.DEFAULT_BASE64_ICON, border_width=0, use_ttk_buttons=True, button_color=('black',background)),
             sg.Button('Exit')]  ]

window = sg.Window('Window Title', layout, use_default_focus=False)

while True:             # Event Loop
    event, values = window.read()
    print(event, values)
    if event in (None, 'Exit'):
        break
    window['test'].update(image_data=sg.PSG_DEBUGGER_LOGO)
window.close()

after clicking

[PySimpleGUI]

@mcgregor94086 Please let me know when you can give the changes a test. It should be working now on the Mac.

[mainer-hat]

Sorry, too many tabs open in my browser.
Results of running the code above.
Text output:
4.7.1.3 Unreleased - included 4.7.1 patch, ability to update ttk buttons, images for ttk buttons, CURRENT_LOOK_AND_FEEL variable
<module 'PySimpleGUI' from '/Users/dash/Notes/Software/PySimple/PySimpleGUI.py'>

Window before button click:

After button click (window size changed):

The ttk buttons are great. I have switched to Tk version from Qt and am having good luck (with Tk) getting reasonable look on both Linux and macOS using Default Font.

I can't seem to get elements to "expand" in only horizontal dimension. Using expand(True, False) expands in both dimensions. Is that the correct usage?

[mainer-hat]

I am getting an Exception on thr mac when I use 2 fingers on the trackpad (for scroll). Does not happen on Linux. Easy to workaround with:
try:
except (UnicodeDecodeError): pass

just inside the "while True:" loop. The 2 finger scroll works ok with that patch in place. From the Traceback, it looks to be deep in the libs. Might be worth a note in the documentation.

Here is the exception text:

Traceback (most recent call last):
File "./calc.py", line 859, in
run_calc(sys.argv)
File "./calc.py", line 650, in run_calc
event, values = window.Read()
File "/usr/local/lib/python3.7/site-packages/PySimpleGUI/PySimpleGUI.py", line 5687, in Read
self.TKroot.mainloop()
File "/usr/local/Cellar/python/3.7.2/Frameworks/Python.framework/Versions/3.7/lib/python3.7/tkinter/init.py", line 1283, in mainloop
self.tk.mainloop(n)
UnicodeDecodeError: 'utf-8' codec can't decode byte 0x8c in position 0: invalid start byte

[MikeTheWatchGuy]

No problem... Please post your code that is generating the exception when you scroll. I can't tell from just the error what is happening. It appears to be inside of tkinter itself.

[mainer-hat]

@PySimpleGUI
I have deleted the posts that I put in the Announcements. They are no longer relevant and not useful in this discussion.

[mainer-hat]

No problem... Please post your code that is generating the exception when you scroll. I can't tell from just the error what is happening. It appears to be inside of tkinter itself.

I agree that it appears to be in tkinter. I also believe that it is not caused by my code. If I run your Demo_Keyboard.py on the macBook and place two fingers on the keypad, then move them, I get the following:

Traceback (most recent call last):
File "Demo_Keyboard.py", line 17, in
event, values = window.read()
File "/Users/dash/Notes/Software/PySimple/PySimpleGUI.py", line 5652, in Read
self._Show()
File "/Users/dash/Notes/Software/PySimple/PySimpleGUI.py", line 5519, in _Show
StartupTK(self)
File "/Users/dash/Notes/Software/PySimple/PySimpleGUI.py", line 9271, in StartupTK
my_flex_form.TKroot.mainloop()
File "/usr/local/Cellar/python/3.7.2/Frameworks/Python.framework/Versions/3.7/lib/python3.7/tkinter/init.py", line 1283, in mainloop
self.tk.mainloop(n)
UnicodeDecodeError: 'utf-8' codec can't decode byte 0x8b in position 0: invalid start byte

[PySimpleGUI]

Ditto on the deletes.... thank you for taking the time to move the data over. It's super helpful to everyone.

Oh, not saying it's your code... I'm trying to understand a theme, what element could be causing it, etc. That's why I'm looking to get a layout or some other clue. What is PySimpleGUI doing that's causing it kinda thing. As it is, the best it's telling me is that when the mainloop runs, it crashes. It's all the stuff leading up to that point that I don't know. What state is tkinter in? That's the data I'm trying to get.

This is worth opening a new Issue as it's completely different and if someone else gets it, the title will clue them in. It would be good to hear if others get this. It's a first. Maybe it's release specific for example.

I'll also be able to mark "Workaround available" on it for others to see.

---

Looping back to the original topic.

It looks like GREAT news to me!

The before picture looks right as does the bottom one. The first one there is no "focus" on the last one because the image button was clicked it got focus so it's got a box around it.

The window also expanded correctly.

I'm THRILLED to hear that you're having great success moving from Qt to tkinter. This scroll thing really sucks however.

I've been really impressed lately by how close the Windows and Mac screen shots look with the new ttk buttons and the correct ttk styling.

I'll document the new "TTK Theme" capability that you might be interested in. It could really change how the windows look on a Mac. TTk widgets like tabs, comboboxes, buttons, etc, will all be effected by changing the ttk_theme.

This was the final test needed to release the latest to PyPI!

Thanks to everyone for all the help testing the Mac stuff.

[PySimpleGUI]

@mcgregor94086

I may have TOTALLY messed this up!

The constant sg.TRANSPARENT_BUTTON is a GRAY BUTTON COLOR!

It could be that the tk buttons worked all along.

The button color must be set to the same as the background color the button is on.

Hmmmm..... I need to remove that constant. It was there back when the only backgrounds for windows was gray. Version 1.0 stuff.

I've seen several people use it like this but I missed it.

Oh well, it got me to get images on TTK buttons to work and that's a good thing.

[PySimpleGUI]

@mainer-hat Can you describe your expand problem more? Do you have a small program you can post that shows an example of what you want to expand that's not working?

[mainer-hat]

Will do, but I need to think about how to isolate the issue. It came up as I was trying to make the Linux and macOS generate reasonable looking windows without a bunch of "if" statements. I have not used the "expand" before as I was using Qt.

[PySimpleGUI]

Ah, yes, Qt does a better job with the whole re-drawing of a window thing.
Some elements I may have set to auto-expand on your behalf. I'm not sure if I turn that off but I'll look into it. I can make the expand options go from boolean to a tri-state where no specifying it leaves it alone, but setting to False turns it off.

[PySimpleGUI]

Hmmm... actually, it should be doing the right thing already. Here is the implementation:

    def expand(self, expand_x=False, expand_y=False):
        """
        Causes the Element to expand to fill available space in the X and Y directions.  Can specify which or both directions

        :param expand_x: (Bool) If True Element will expand in the Horizontal directions
        :param expand_y:  (Bool) If True Element will expand in the Vertical directions
        """

        if expand_x and expand_y:
            fill = tk.BOTH
        elif expand_x:
            fill = tk.X
        elif expand_y:
            fill = tk.Y
        else:
            return

        self.Widget.pack(expand=True, fill=fill)
        self.ParentRowFrame.pack(expand=True, fill=fill)

If only X is set, then it should automatically be clearing the Y.

[mainer-hat]

Maybe I am missing something here. Can I expand multiple elements inside a tab (in my case) independently? I have a tab with 5 elements on 4 rows:
Multiline
Text & Spin
Button1
Button2

What I want to do is expand the Multiline in both x & y, and the Text, Button1, & Button2 in x only.
I expand them in that order with calls to window[key].expand(True,True) & window[key].expand(True,False) calls.

I just realized that when I try doing any expand the element expands correctly, but the position in the tab is what is going wrong. I need to do some screen captures to show the conditions.

[PySimpleGUI]

Yes, screenshots are really important for these type things.

Also, what ROW they are on matters, perhaps. As the row itself needs to expand with the elements. Depending on how the initial elements were created, the row they are on may or may not expand the way you're expecting. You may need to put some items into columns by themselves in order to do more independent control.

[mainer-hat]

OK, here goes. This is the code for the tab:

    tab6_layout = [[sg.Text('Help',justification='center')],
        [sg.Multiline(HELP, key='help', size=(pct(20,WSZw),pct(10,WSZh)), 
                            font=CFG['hlpFont']['val'], do_not_clear=True)],
        [sg.T('Help Font Size', size=(pct(20,WSZw),1),key='HFS'),  
         Spnr('HelpFontSize', list(range(7,25)), CFG['hlpFont']['val'][1])], 
        [NBtn('Help reference in seperate window', 'PopHelp1', (pct(40,WSZw),1))],
        [NBtn('Word list in seperate window', 'PopWords', (pct(40,WSZw),1))],
        ]

The size=() calls pct() which is a scaling function.
The font=CFG['hlpFont']['val'] gets its value from a configuration dictionary (CFG)
With no expand, this is the screenshot (Multiline is small on purpose).

If I expand just the Multiline with:

window['help'].expand(True,True)

That is the expected result. But if I add an expand on the bottom button with:

window['PopWords'].expand(True,False)

in addition to the multiline above, I get this:

I was expecting the same tab as screen shot #2 with the multiline filling the window in both x & y and the bottom button expanded to fill to the width of the screen. I was not expecting the space below the bottom button and the multiline to be only partially expanded in height.

[PySimpleGUI]

One thing to keep in mind.....
The size of all tabs will be the size of the largest tab in the group. They don't individually shrink/grow.

I don't know if that is a factor yet in what you've posted yet. I need to go into it in more detail.

[PySimpleGUI]

Something appears to be telling the Widgets that they cannot expand below the buttons. Hmmmm.... I'll play with it.

I think now that I look at it, the buttons not being able to expand in the Y direction may mean they're literally being pinned to the spot in the tab where they are and thus won't budge when other things want to expand.

There are 2 settings to mess with, expand and fill. They're different but related.

[mainer-hat]

Just in case it helps, here is a screen shot with all of the Text and Buttons expanded in x. The Multi line is expanded in x & y.

[mainer-hat]

The tabs all being the size of the largest is why the Multiline starts small. I plan to minimize the adjustments by "growing" elements without having to figure out the needed settings. If done correctly the layouts will simply "expand" to take up the allowable space. This was a feature of one of the GUI toolkits I have used in the past. I could put 3 buttons on a line and expand them to each take up 1/3 of the line for example. Just need to make sure not to overload a line. In that toolkit, frames could be used for grouping to get finer control.

[mainer-hat]

Here are two more screen shots. The first with all expanded in bot x & y. The second with the Text not expanded at all but the Multiline and both buttons expanded in both x & y. They are both what I would expect in those cases.

[PySimpleGUI]

You're getting right out on the edge of the capabilities of PySimpleGUI as it is now.

It was only in releases 4.4 and 4.5 in Sept and Nov 2019 that expanding was even possible. Previously got the size of the elements you specified and had to be happy with that.

Take a look at the release notes for those 2 releases to get an understanding of what was added. It may help inform what you're trying to do.

To get to the kind of automatic sizing you're looking for, you may need to work at the tkinter widget level and do manipulations yourself. You'll also need to be aware of the row frames that every element are contained within.

It's not ideal, but it's the best I have been able to deliver to date.

[mainer-hat]

Please don't hesitate to say that PySimpleGUI can't do something, Especially if it means complication beyond your vision for this project.
Under python, I have used Tk, Qt, and Wx and never gotten as much done. That is primarily because of the complexity of those tools. Those attempts were on a single platform! Using PySimpleGUI, I have gotten further than ever and on multiple platforms as well!
The current "expand" is a workable solution for me. I only mention the "not as expected" performance because it is "not as I expected". If it is "as designed" then I can work with it. I would rather have the simplicity, compactness, and readability.

[PySimpleGUI]

I think this is all officially resolved with the release tonight of 4.8.0 to PyPI

[mainer-hat]

Yes, Thank you.
Can't wait to be able to use ttk buttons in Qt.

[PySimpleGUI]

ttk buttons in Qt??

ttk buttons are a tkinter thing.

Is there a feature that is not in the Qt Buttons that you're seeing in the ttk buttons?

Be sure and delete any PySimpleGUI.py files you have laying around that were downloaded from GitHub so they are not accidentally used instead of the pip version.

[mainer-hat]

My misunderstanding, I misread ttk buttons being used system wide to mean the option was going to be available in all GUIs eventually. I went back and now understand what you meant by system wide.
I am now pretty much focused on Tk, and checking Qt only to make sure it still works on my program.

BTW Qt buttons on Linux and Mac have no edge "depth" (raised?) and no "click" visual feedback. Guessing that is just a Qt thing. The Tk buttons have a better look and click feedback on both Linux and Mac.

On Linux the ttk buttons background changes color when the mouse is over them, but the standard Tk buttons don't do that. That may be a parameter I am not setting however.

[PySimpleGUI]

There is a bug opened today or yesterday for the Qt button animation.

They've always been "flat" with no animation or depth to them.

What I'm learning now is that with Qt, changing one characteristic of a button, say the color, means I have to reconstruct all of the settings required to make that button look 3D. There is a margin or padding parameter that I'm not setting to the right values or something.

It's funny you're just now discovering this as did the person who logged the issue.