israel-dryer / ttkbootstrap

A supercharged theme extension for tkinter that enables on-demand modern flat style themes inspired by Bootstrap.
MIT License
1.79k stars 359 forks source link

Add themed file and color chooser dialogs #131

Open israel-dryer opened 2 years ago

israel-dryer commented 2 years ago

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 commented 2 years ago

This should be added to the dialogs module

israel-dryer commented 2 years ago

@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

daniilS commented 2 years ago

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

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

antrrax commented 2 years ago

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 commented 2 years ago

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

israel-dryer commented 2 years ago

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.

antrrax commented 2 years ago

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

israel-dryer commented 2 years ago

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 commented 2 years ago

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

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 commented 2 years ago

@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')
antrrax commented 2 years ago

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.

israel-dryer commented 2 years ago

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 commented 2 years ago

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

mstsc_703VKh4a3X mstsc_t3NaILvQ9p
israel-dryer commented 2 years ago

@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

antrrax commented 2 years ago

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)
lolghuiy4tgfyu4th7tvtg commented 2 years ago

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

israel-dryer commented 2 years ago

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.