PySimpleGUI commented 4 years ago

You mentioned a tool that samples images to get color palettes. Is that part of 2.2.2? I didn't find a way to do that through the interface.

definite-d commented 4 years ago

Oh, sorry about that.

Yes, it's part of the 2.2.2 release. Kind of like the "big thing" here.

The Colors-From-Images thing is not a tool, but actually an option that becomes available when a color (or multiple colors) are not specified. If you wish to get a theme entirely out of an image, go ahead and not specify any colors :smiley:. The option will present itself as part of the "Unspecified Color" radio options. Select it. From there, it's a smooth process.

I put it as an Unspecified Option for two main reasons:

One, those options provide ease of use and flexibility by working with the colors actually specified, so it just seemed to fit.

Two, well, I couldn't really find a more convenient way to fit it into the existing layout (your opinions are welcome though, obviously).

I hope it gives you excellent results, as during testing, I found that the image has a major impact on how the theme turns out . This means that in some cases (like an image with already ugly colors, an image with only one color, a transparent block of pixels etc), you may get an ugly, unusable theme, forcing you to jump in and correct things manually. I guess the only way to solve that would be to give LookyFeely some sort of AI to know what an ugly theme's color combination would be like, then adjust things itself :smile:. I make no promises about implementing such though.

PySimpleGUI commented 4 years ago

Ah, I didn't understand the steps top get there.

The images I'm planning on using are color palettes. There area number of sites that have palettes defined. The problem is getting those colors in a format that's usable.

https://color.adobe.com/explore

With your tool all I'll need to do is navigate to any website that presents color palettes, snip out the palettes as images, and run those images through your code.

For example, from the Adobe page above, I grabbed these 2 palettes and saved as a file. I'll now try running those images through your code to get themes made from them. At least that's the overall idea.

SNAG-0749

SNAG-0750

PySimpleGUI commented 4 years ago

I must be doing something wrong. It crashes if I don't specify colors. If I delete them all it still crashes.

If I start here and click generate, I get this crash:

Traceback (most recent call last):
  File "C:/Python/PycharmProjects/GitHub/PSG-LookyFeely/PSGLookyFeely.py", line 239, in <module>
    if '_c' in i and window_1_values[str(i)] not in ('...color value', 'None'):
TypeError: argument of type 'int' is not iterable

Process finished with exit code 1

I must be doing something wrong, but I can't figure out what.

definite-d commented 4 years ago

If I start here and click generate, I get this crash:

Traceback (most recent call last): File "C:/Python/PycharmProjects/GitHub/PSG-LookyFeely/PSGLookyFeely.py", line 239, in if '_c' in i and window_1_values[str(i)] not in ('...color value', 'None'): TypeError: argument of type 'int' is not iterable

Process finished with exit code 1

I must be doing something wrong, but I can't figure out what.

Ah! No! So sorry! I think that's a bug from my end - totally unrelated to the Colors-From-Images thing, but the root issue! I'll fix it up real quick!

Edit: Well, I tried reproducing this error, but for some reason, it never showed up; rather, it ran just fine. Could you try out the latest update and see if the error still comes up?

PySimpleGUI commented 4 years ago

Maybe you can give me specific steps/clicks I can follow? This way I'm not bumping into stuff like this and can get to your new image code.

definite-d commented 4 years ago

Okay; I'll give you more detailed steps, and I'll leave this issue open for future reference.

First, run LookyFeely.
Specify a theme name and do what you wish with the Options tab
Click 'Generate LookAndFeel Code'
A popup should appear, saying that no color value was specified. That's okay. Intentional, even.
That popup contains three options (as you can see above); fill in random colors, base values not given off those actually given, and obtain color values from an image.
Yep, choose the third option.
A window titled ImagePalette ought to come up. Yes, ImagePalette is the 'official' name I'd like to refer to the 'Colors-From-Images' feature as.
There's a Frame there containing a textbox and a button. Both of them are for image navigation, so you could choose to either type in the image's filepath manually, paste it, or click 'Browse' to bring up a file browser window.
By default, ImagePalette will sort the colors by brightness and create a neutral theme that tries to use every single color available. Checking the "Don't sort image's colors" option tells it not to sort.
Once you've chosen the image, decide if you want the colors sorted or not, then click "Obtain Colors".

-Voila. It should be smooth and automatic from there on out. Also, the Theme Preview window now supports previewing a progress bar for the theme, so do check that out too.

This is the result from those two palettes you tried running through:

Palette 1: psg's pallets 2

Screenshot:

Code:

# Custom Palette1 LookAndFeel Theme.
# Generated using LookyFeely.
import PySimpleGUI as sg  # Please change 'sg' to your liking.
sg.LOOK_AND_FEEL_TABLE['Palette1'] = {'BACKGROUND': '#8bb340',
    'TEXT': '#b4e1ff',
    'INPUT': '#fff3ad',
    'TEXT_INPUT': '#8ab23f',
    'SCROLL': '#8ab23f',
    'BUTTON': ('#37593e', '#ff9f0d'),
    'PROGRESS': ('#ff9f0d', '#fff3ad'),
    'BORDER': 1,
    'SLIDER_DEPTH': 1,
    'PROGRESS_DEPTH': 0}
sg.ChangeLookAndFeel('Palette1')

Palette 2: psg's pallets

Screenshot (I'm sorry, but you'll have to tweak the color for the progress bar!):

Code:

# Custom Palette2 LookAndFeel Theme.
# Generated using LookyFeely.
import PySimpleGUI as sg  # Please change 'sg' to your liking.
sg.LOOK_AND_FEEL_TABLE['Palette2'] = {'BACKGROUND': '#5d5639',
    'TEXT': '#e3d083',
    'INPUT': '#debd3c',
    'TEXT_INPUT': '#5d5737',
    'SCROLL': '#5f5637',
    'BUTTON': ('#5f5019', '#dfbc3a'),
    'PROGRESS': ('#c3a535', '#debd3c'),
    'BORDER': 1,
    'SLIDER_DEPTH': 1,
    'PROGRESS_DEPTH': 0}
sg.ChangeLookAndFeel('Palette2')

Neat, huh?

That said, there are a few things to note though.

ImagePalette resizes (and resamples) the image to make that task easier on the CPU, so not every single color may be recognized because of that process due to being blended with other colors where they share borders. That also means you may not get expected results. I have a (simple) working method to eliminate that downside though (which involves letting the image fly without alteration, then running the result through a filter that removes overly-similar colors), but due to the fact that it'll take a while for the CPU to do it (and the fact that I currently can't create a progress bar that truly runs alongside the task), I decided not to include it.
The sorted result's "pleasantness" is also largely dependent on whether there's enough contrast between the colors extracted from the image, and if they agree with the formula used for sorting.
I've found that transparency is interpreted as the color White.

Two images that are exactly the same in appearance but different in formats, will most likely give different results when run through ImagePalette. I haven't found out why that happens. I tested with .jpeg and .png images here, and got these different results: From my tests, the PNG gave this:


# Custom WeAreBlue_01 LookAndFeel Theme.
# Generated using LookyFeely.
import PySimpleGUI as sg  # Please change 'sg' to your liking.
sg.LOOK_AND_FEEL_TABLE['WeAreBlue_01'] = {'BACKGROUND': '#136fa4',
'TEXT': '#5dd6e2',
'INPUT': '#36cbdd',
'TEXT_INPUT': '#030512',
'SCROLL': '#022a6a',
'BUTTON': ('#010010', '#2ab1d8'),
'PROGRESS': ('#1596d4', '#36cbdd'),
'BORDER': 1,
'SLIDER_DEPTH': 1,
'PROGRESS_DEPTH': 0}
sg.ChangeLookAndFeel('WeAreBlue_01')

Screenshot:
![08](https://user-images.githubusercontent.com/38317208/80014607-6f120900-84c8-11ea-9de0-6c7c7b155115.PNG)

The JPEG however, gave this:

Custom WeAreBlue_02 LookAndFeel Theme.

Generated using LookyFeely.

import PySimpleGUI as sg # Please change 'sg' to your liking. sg.LOOK_AND_FEEL_TABLE['WeAreBlue_02'] = {'BACKGROUND': '#000823', 'TEXT': '#0f6fa9', 'INPUT': '#0a407c', 'TEXT_INPUT': '#000211', 'SCROLL': '#000b22', 'BUTTON': ('#000110', '#04254e'), 'PROGRESS': ('#001148', '#0a407c'), 'BORDER': 1, 'SLIDER_DEPTH': 1, 'PROGRESS_DEPTH': 0} sg.ChangeLookAndFeel('WeAreBlue_02')


Screenshot:
![09](https://user-images.githubusercontent.com/38317208/80014640-79cc9e00-84c8-11ea-9234-55c75b44faf8.PNG)

Well, have fun with LookyFeely v2.2!

definite-d commented 4 years ago

And oh, I'm really sorry about the late answer. I broke LookyFeely by mistake (literally, with break statements) and had to fix it.

Also, I think Adobe Color is really cool, and your use case is a perfect example of how LookyFeely can leverage such.

definite-d commented 4 years ago

Hello, @PySimpleGUI .

First off, I'm so, so, so, sorry about not being able to fix the error you reported earlier. It turns out I likely had an earlier version of Python than yours; I recently updated to 3.8 (as you can see, I still use Windows 7; I'm not so big on updating... except with stuff like PySimpleGUI), and I had the same error come up. I've fixed it now. Sorry again, because I'd been posting updates while you couldn't even use LookyFeely to begin with.

The mono rewrite is just about complete; testing is taking place. Nice timing, right?

definite-d / Themera

How to use the image tool.... #4

Custom WeAreBlue_02 LookAndFeel Theme.

Generated using LookyFeely.