ttkbootstrap icon indicating copy to clipboard operation
ttkbootstrap copied to clipboard

Add themed file and color chooser dialogs

Open israel-dryer opened this issue 2 years ago • 17 comments

A Widgets suggestion for Api would be to redo the filedialogs and the color dialog for a cross-platform standardization.

https://pythonbasics.org/tkinter-filedialog/

tkinter.filedialog.asksaveasfilename() tkinter.filedialog.asksaveasfile() tkinter.filedialog.askopenfilename() tkinter.filedialog.askopenfile() tkinter.filedialog.askdirectory() tkinter.filedialog.askopenfilenames() tkinter.filedialog.askopenfiles()

These rederized dialogs in Linux have a very ugly and outdated look. See screenshot, it uses menubuttom instead of combobox and with ttk.bootstrap it visually gets even weirder with these components in the primary com of the theme.

When you have free time, it would be interesting to create components to include in the Api. Get inspired by Windows dialogs or Qt Dialogs that have a beautiful visual appearance.

ttk-filedialog ttk-filedialog

color dialog windows: color

color dialog Linux: color

Originally posted by @antrrax in https://github.com/israel-dryer/ttkbootstrap/issues/77#issuecomment-1008432097

israel-dryer avatar Jan 10 '22 06:01 israel-dryer

This should be added to the dialogs module

israel-dryer avatar Jan 10 '22 06:01 israel-dryer

@daniilS @anttrax, I still need to add the indicators, but this is the prototype model that I built using the canvas widget. It's quite response and I'm pretty happy with the result.

While I'm working on transitioning the prototype, is there specific functionality that you'd like to see other than what is presented here?

color-selector

color-selector

israel-dryer avatar Jan 11 '22 05:01 israel-dryer

Taking the Photoshop colour picker as an example, any number of the following could be useful to steal:

  • More colour modes
  • An indicator on the canvas of where the currently selected colour is
  • A comparison against the previously selected colour (which would need to be passed as an argument)
  • An argument to provide a list of default colours to pick from (could appear similar to the default Windows dialog)

For reference: photoshop-color-picker-f64-blake-rudis-tutorial-e1523976232133

daniilS avatar Jan 11 '22 06:01 daniilS

Suggestions: Frame with basic colors Add SpinButtons Add option Ctrl+A, Ctrl+C , Ctrl+V in all fields Add an option to copy the tuple (R,G,B) Add a Screen color picker: https://github.com/shreydan/global-color-picker https://rosettacode.org/wiki/Color_of_a_screen_pixel#Python

I don't know if it would be good, but there is also an option to add shades and tints of the selected color, something like this - as a color box and next to the hex code to be copied: https://www.tutorialrepublic.com/html-reference/html-color-picker.php cb


In addition to the color selector, you can also create a color combobox, where in the last box you put (3 points) [...] which would call the Color Selector to choose the color of the combobox. See as a reference: cb

ksnip has a similar color combobox https://github.com/ksnip/ksnip https://github.com/ksnip/kColorPicker


http://planetphotoshop.com/color-picker-versatility.html

antrrax avatar Jan 11 '22 07:01 antrrax

I had an idea that might be better. You would use a ttk.notebook, where in a tab you would place the color selection similar to QColorDialog and another tab with the properties of the selected color, similar to this site: https://www.color-hex.com/color/3a49ff

10 shades 10 tints analogous colors: selected color + 2 other colors (-30º) Triadic colors: selected color + 2 other colors (-120º) complementary color: selected color + color (180º)

And any other properties that are interesting

antrrax avatar Jan 11 '22 14:01 antrrax

I had an idea that might be better. You would use a ttk.notebook, where in a tab you would place the color selection similar to QColorDialog and another tab with the properties of the selected color, similar to this site: https://www.color-hex.com/color/3a49ff

10 shades 10 tits analogous colors: selected color + 2 other colors (-30º) Triadic colors: selected color + 2 other colors (-120º) complementary color: selected color + color (180º)

And any other properties that are interesting

I was thinking along these lines as well. Thanks for the resource.

israel-dryer avatar Jan 11 '22 14:01 israel-dryer

If you need to name the colors, click the SVG 1.1 color list https://www.w3.org/TR/SVG11/types.html#ColorKeywords

antrrax avatar Jan 11 '22 17:01 antrrax

Excel has a really nice color finder which I copied below. The top row contains the selected theme colors with various shades of each color below. The bottom row contains a set of standard colors.

I'll fit this into the widget.

Lumen

python_qC5RAwARCt

Superhero

python_OaedoapF54

israel-dryer avatar Jan 12 '22 03:01 israel-dryer

some updated screenshots

python_ga7CZ7VYqH

Themed color swatches python_ttrI5n8w6R

Standard color swatches python_8mhSsR6G4e

Validation on Spinbox entry python_OuSadZ1fMI

Dark theme look python_jHZxq0K4rf

Items to work on

  • [x] indicator for color spectrum and luminance scale
  • [x] button box for Cancel and Submit button

As as side note, I noticed that the inactive tabs are not really distinguishable.. I'll need to fix that in another issue.

israel-dryer avatar Jan 15 '22 18:01 israel-dryer

@antrrax, @daniilS baring any last minute changes, this will likely be the final version (for now).

python_9ayB9SQKLO python_2PWczh2uAP

The result will be a named tuple that will contain the rgb, hsl, and hex color values that can be accessed by index or by the named fields.

>>> cd = ColorChooserDialog()
>>> cd.show()
>>> cd.result
ColorChoice(rgb=(19, 80, 185), hsl=(217, 81, 40), hex='#1350b9')

israel-dryer avatar Jan 16 '22 01:01 israel-dryer

The use of theme colors was a very good idea. Congratulations

when you have the opportunity, implement in this color picker: an eye dropper (picker screen color), to capture the color over the mouse cursor. It would add an advantage over the default windows color picker for tk.

antrrax avatar Jan 16 '22 04:01 antrrax

The use of theme colors was a very good idea. Congratulations

when you have the opportunity, implement in this color picker: an eye dropper (picker screen color), to capture the color over the mouse cursor. It would add an advantage over the default windows color picker for tk.

I just remembered something I did a few years ago that I might be able to use for this. I'll probably approach it slightly differently, but still similar I think. https://github.com/israel-dryer/Color-Dropper-Tk

israel-dryer avatar Jan 16 '22 04:01 israel-dryer

FYI, here's the look on my raspberry pi... looks exactly the same. :-)

mstsc_703VKh4a3X mstsc_t3NaILvQ9p

israel-dryer avatar Jan 16 '22 05:01 israel-dryer

@antrrax a prelim color dropper is added. You can zoom in and out with the mouse wheel. I still need to make some cross-platform adjustments.

Also, there is one odd bug with PIL (apparently know). If you take a screenshot on a high resolution screen without enabling high DPI support, the screenshot will not be the correct size. I've enabled high dpi support on windows by default, so shouldn't be an issue there. But, I'll have to see what happens on Mac OS and Linux. Standard resolutions like 1080p should not be affected.

Bz32JWQ36a

israel-dryer avatar Jan 17 '22 05:01 israel-dryer

Very good.

My monitor is standard with 1080p resolution, unfortunately I can't test the high DPI on linux for you.


I don't know if it has any influence, but you don't need to capture the entire screen, you can use bbox and capture only the pixel over the mouse, as in the example I gave above:

bbox = (x,y,x+1,y+1)
im = ImageGrab.grab(bbox=bbox)

antrrax avatar Jan 17 '22 12:01 antrrax

I'm using ttkbootstrap 1.5.1, but the dialogs don't seem to be appearing. Have they been released?

ASunkArIhN

Tested on Windows 10 with Python 3.10

lolghuiy4tgfyu4th7tvtg avatar Feb 02 '22 16:02 lolghuiy4tgfyu4th7tvtg

I'm using ttkbootstrap 1.5.1, but the dialogs don't seem to be appearing. Have they been released?

ASunkArIhN

Tested on Windows 10 with Python 3.10

Not yet released on pypi. Hope to release this weekend. But it's available if installing from source.

israel-dryer avatar Feb 02 '22 16:02 israel-dryer