[Question] Color schema of Combo and InputText

Question

[Question] Color schema of Combo and InputText

macdeport opened this issue 2 years ago · comments

macdeport commented 2 years ago

Type of Issue (Enhancement, Error, Bug, Question)

Question

Environment

Operating System

Mac version 10.10.5

PySimpleGUI Port (tkinter, Qt, Wx, Web)

tkinter

Versions

Python version (`sg.sys.version`)

3.9.12 (main, Mar 25 2022, 00:55:04)
[Clang 7.0.2 (clang-700.1.81)]

PySimpleGUI Version (`sg.version`)

4.59.0.33

GUI Version (tkinter (`sg.tclversion_detailed`), PySide2, WxPython, Remi)

8.6.12

Your Experience In Months or Years (optional)

15 Years Python programming experience
20 Years Programming experience overall
Have used another Python GUI Framework? (tkinter, Qt, etc) (yes/no is fine)

Troubleshooting

These items may solve your problem. Please check those you've done by changing - [ ] to - [X]

Searched main docs for your problem www.PySimpleGUI.org
Looked for Demo Programs that are similar to your goal Demos.PySimpleGUI.org
If not tkinter - looked for Demo Programs for specific port
For non tkinter - Looked at readme for your specific port if not PySimpleGUI (Qt, WX, Remi)
Run your program outside of your debugger (from a command line)
Searched through Issues (open and closed) to see if already reported Issues.PySimpleGUI.org
Tried using the PySimpleGUI.py file on GitHub. Your problem may have already been fixed but not released

Detailed Description

With the same theme 'DarkAmber' the selected text has different color with InputText

and Combo text field

Why?

Is it possible to use the same color scheme with the Combo text field as with InputText?

Code To Duplicate

# Paste your code here

Screenshot, Sketch, or Drawing

Jason Yang · Answer 1 · Mon May 02 2022 14:28:59 GMT+0800 (China Standard Time)

Following information for @PySimpleGUI ...

Maybe wrong settings for selected text of Combo element in the source code.

if element.TextColor not in (None, COLOR_SYSTEM_DEFAULT):
    combostyle.configure(style_name, foreground=element.TextColor)
    combostyle.configure(style_name, selectforeground=element.TextColor)
    combostyle.configure(style_name, insertcolor=element.TextColor)
if element.BackgroundColor not in (None, COLOR_SYSTEM_DEFAULT):
    combostyle.configure(style_name, selectbackground=element.BackgroundColor)
    combostyle.map(style_name, fieldbackground=[('readonly', element.BackgroundColor)])
    combostyle.configure(style_name, fieldbackground=element.BackgroundColor)

In the code, it set the color (selectcolor, selectbackground) of selected text same as (text_color, background_color), that's why the selected text same color as the other text.

Here, the colors switched

if element.TextColor not in (None, COLOR_SYSTEM_DEFAULT):
    combostyle.configure(style_name, foreground=element.TextColor)
    combostyle.configure(style_name, selectbackground=element.TextColor)
    combostyle.configure(style_name, insertcolor=element.TextColor)
if element.BackgroundColor not in (None, COLOR_SYSTEM_DEFAULT):
    combostyle.configure(style_name, selectforeground=element.BackgroundColor)
    combostyle.map(style_name, fieldbackground=[('readonly', element.BackgroundColor)])
    combostyle.configure(style_name, fieldbackground=element.BackgroundColor)

The color of selected text in Input element still not the same. There's no any settings for the color of selected text for Input element.

if element.BackgroundColor is not None and element.BackgroundColor != COLOR_SYSTEM_DEFAULT:
    element.TKEntry.configure(background=element.BackgroundColor)
if text_color is not None and text_color != COLOR_SYSTEM_DEFAULT:
    element.TKEntry.configure(fg=text_color)

Here, the settings of color of selected text added.

if element.BackgroundColor is not None and element.BackgroundColor != COLOR_SYSTEM_DEFAULT:
    element.TKEntry.configure(background=element.BackgroundColor, selectforeground=element.BackgroundColor)
if text_color is not None and text_color != COLOR_SYSTEM_DEFAULT:
    element.TKEntry.configure(fg=text_color, selectbackground=text_color)

Before

After

If both elements without setting for the color of selected text, it looks like they have different default settings, but they should be the same, not sure where it changed, maybe it caused by the theme applied.

macdeport · Answer 2 · Mon May 02 2022 17:08:03 GMT+0800 (China Standard Time)

@jason990420 The best answer: Thanks Jason for your careful response and thanks to Mike who will correct the source.

PySimpleGUI · Answer 3 · Tue May 03 2022 19:54:15 GMT+0800 (China Standard Time)

LOVE IT!

I made the same change to the Multiline input as the suggested input color.

One thing I still don't have the way I want is the list of items for Combo Elements.

Jason Yang · Answer 4 · Tue May 03 2022 21:00:38 GMT+0800 (China Standard Time)

It looks like that you cannot change the color of drop-down menu in ttk.Combobox by tkinter, but it can be done using the underlying tcl interpreter.

Example code here for white foreground color and green background color, not sure if it is good looking.

widget = window['COMBO'].Widget
widget.tk.eval('[ttk::combobox::PopdownWindow %s].f.l configure -foreground white -background green -selectforeground green -selectbackground white' % widget)

or

widget = window['COMBO'].Widget
widget.tk.eval('[ttk::combobox::PopdownWindow %s].f.l configure -foreground #ffffff -background #008000 -selectforeground #008000 -selectbackground #ffffff' % widget)

PySimpleGUI · Answer 5 · Tue May 03 2022 22:07:12 GMT+0800 (China Standard Time)

OH WOW!!!!

Way beyond what I expected! Thank you!!

PySimpleGUI · Answer 6 · Wed May 04 2022 01:32:10 GMT+0800 (China Standard Time)

4.60.0 is going to REALLY look GREAT NOW!

Check it out.... everything matches now

macdeport · Answer 7 · Wed May 04 2022 14:47:24 GMT+0800 (China Standard Time)

Consistent and aesthetic :-)

When an item is selected in the Combo it is transferred while remaining selected in the input field. Is this the desired behavior?

Pros: it gives a nice feedback of this transfer.
Cons: An additional deselection operation is needed to avoid the risk of accidental deletion.

To keep the best of both worlds, I propose automatic deselection after a short delay (~0.1 s).

BTW I really appreciate demos that accelerate the learning curve if the source code consistency is present.

Jason Yang · Answer 8 · Wed May 04 2022 16:23:38 GMT+0800 (China Standard Time)

When an item is selected in the Combo it is transferred while remaining selected in the input field. Is this the desired behavior?

Yes.

Cons: An additional deselection operation is needed to avoid the risk of accidental deletion.

IMO, if any keystroke thought same as accidental deletion, the risk of accidental deletion still exist there if with deselection operation.

Anyway, there's no option provided to deselect text in the entry field. Following code show the tkinter method to deselect the text in entry field.

import PySimpleGUI as sg

sg.theme("DarkAmber")
sg.set_options(font=("Courier New", 40))

layout = [
    [sg.Combo(["1234567890", "abcdefghij"], enable_events=True, text_color='white', background_color='green', key='COMBO')]
]
window = sg.Window('title', layout, finalize=True)

while True:

    event, values = window.read()
    if event == sg.WIN_CLOSED:
        break
    elif event == 'COMBO':
        window['COMBO'].Widget.selection_clear()    # window.TKroot.after(1000, lambda:window['COMBO'].Widget.selection_clear()) ... Deselect text after 1 second.

window.close()

macdeport · Answer 9 · Wed May 04 2022 16:50:40 GMT+0800 (China Standard Time)

Very useful and didactic for a lifelong learner, thank you.

PySimpleGUI · Answer 10 · Wed May 04 2022 17:02:52 GMT+0800 (China Standard Time)

Very useful and didactic for a lifelong learner, thank you.

Very nice! Didactic! Love it!

What a way to start the day!

I have so much fun watching Jason "do his thing".... I'm in awe frequently....

PySimpleGUI · Answer 11 · Wed May 04 2022 17:05:51 GMT+0800 (China Standard Time)

"Combo" is an interesting element/widget. I had never, that I can recall, encountered something like in the GUI-worlds.

Drop-down lists, sure, plenty of those. If you set read_only then you get this drop-down behavior.

I do get your point, BTW, not saying that... just commenting on how unique of a thing this is in general. I don't see a clear winner... like so many things in CS... it's subjective/an opinion. Jason is amazing at providing, at least, a way to get what you're after even if it's not directly provide by PySimpleGUI.

PySimpleGUI · Answer 12 · Wed May 04 2022 22:09:46 GMT+0800 (China Standard Time)

Let's leave this one open until fully tested and released to PyPI.

PySimpleGUI · Answer 13 · Fri May 06 2022 05:33:22 GMT+0800 (China Standard Time)

Thought I would share screenshot from the testing I did on my Pi that's running Python 3.4 to show that the highlighting is working great! All of the changes mentioned in this Issue worked flawlessly - Input, Multiline, and Combo elements.

I have made the overall test harness window smaller to fit better on these smaller screens as well as the element changes.

The highlighting of the list items in the Combo is working great... the scrollbar is a plaint rather than ttk scrollbar... but I'm quite happy to live with that. That scrollbar isn't normally visible. It's only visible during the selection and having lived with it for 4 years being as is, I think we'll be fine. I'm interested in getting 4.60.0 simply tested and shipped at this point. I gotta put a cutoff on features for now.

PySimpleGUI · Answer 14 · Mon May 09 2022 02:38:50 GMT+0800 (China Standard Time)

Released to PyPI today in 4.60.0 so time to start closing issues

[Question] Color schema of Combo and InputText

Type of Issue (Enhancement, Error, Bug, Question)

Environment

Operating System

PySimpleGUI Port (tkinter, Qt, Wx, Web)

Versions

Python version (sg.sys.version)

PySimpleGUI Version (sg.__version__)

GUI Version (tkinter (sg.tclversion_detailed), PySide2, WxPython, Remi)

Your Experience In Months or Years (optional)

Troubleshooting

Detailed Description

Code To Duplicate

Screenshot, Sketch, or Drawing

Following information for @PySimpleGUI ...

Python version (`sg.sys.version`)

PySimpleGUI Version (`sg.version`)

GUI Version (tkinter (`sg.tclversion_detailed`), PySide2, WxPython, Remi)