[ Enhancement ] Ability to shuffle how colors are assigned to elements.

PySimpleGUI commented 4 years ago

OK, this is asking a lot. Then again, I get asked for features all the time that are kinda hard or take a long time.

You already have seen my struggle to some up with decent color schemes. Unlike in the 80s when I started trying, now there are sites devoted to this stuff.

Adobe has one that has tons of palettes, some made from photos too.

https://color.adobe.com/trends

I'm experimenting with capturing their color palette visual as an image and then running it through your program.

I have a ton of color helper sites bookmarked and I'm going through them again. I'm trying to find the ones where users upload color palette suggestions.

It would be interesting, and may not be possible or useful, to integrate with one of these sites. Maybe you would be able to download a palette image, run it through your image processing tool and then generate the PySimpleGUI theme. You've got all the component parts. It's a matter in this case of a front-end to select some palettes found via the website and then running that through what you've already got listed.

I don't know if one or more sites have something you could scrape to just give you a list of palettes you can show. Then when one is clicked you do your magic.

When I search for green on adobe's site it returns this

If I were to have a choice of any interface I would ever want, it would be to see a list of color palettes as little color bars like this:

shown in a list where one can be selected. When selected, your magic happens.

Idea 2 - scramble button.

Maybe you already have this so I'm sorry if I've not played with it enough yet before commenting. I have more to learn about using your program! (and remembering how to add themes).

The idea is to be able to see a preview, and then press a button that will move the colors around randomly. What was a button text color becomes the background. Make it part of the theme preview itself. Maybe one of the demo buttons in your preview says "scramble". When pressed, the theme is closed, the colors moved around, and a new theme is shown. I could see hitting the scramble button over and over until a theme I like shows up.

As I said, I'm TERRIBLE at this color thing. I know when I see a combination that I like, I just don't know how to take a group of 5 colors and assign them to the elements in a way that works / looks good. But I do know a nice looking one when I see it. So, pushing a button until I get one I see that looks great, then that's a win for me!

You've got some really powerful base capabilities

There are some things like scramble that can multiply your capabilities without too much work?? I dunno... I'm excited about what you have. It makes me want to add more to it. Assemble the pieces you have in different configurations. I've gotten spoiled using PySimpleGUI because I can write tools that are exactly what I want... or add to them as something new has popped into my head.

Congrats on the courage to rework.

It takes effort to rewrite portions or change something or fix it up. I constantly battle this myself. I'm not as good at it as I should. It takes courage to re-do something you've already done. It's something to admire when done. Makes others want to do the same. Sets a great example for the community too. Nice job on what you're doing here.

definite-d commented 4 years ago

Hello, @PySimpleGUI !

Web Scraping

Well, web scraping, web scraping... I have a rough but decent knowledge about that stuff, but honestly, that's something I've never done since I began programming. Last time I checked (which is quite a while ago), I found myself at BeautifulSoup's wiki, and I found it too complex then. I'm sure it's no surprise that things like TensorFlow and Numpy seemed like "big, professional, overly-scientific Python demi-gods" at the time. Maybe it's because I'm a self-taught programmer and had barely grasped the basics of Python when I checked it out.

I'll try my hand at it again.

But before I do anything about that, I'm thinking of a structure of integration...

One possibility would be asking the user for a web-link to the desired image, then have LookyFeely do the magic invisibly.
Another would be asking for a web page, scraping appropriately and showing the user all the images on that web page. Think of a scrollable column, where (scaled) images are shown then there are "Use Image" buttons beside each one.

If any of those strategies work, how about we call it WebPalette: ImagePalette on Steroids? Or maybe integrate the two as tabs on ImagePalette's window?

Then again, do we really need this? I mean; the user could decide to just download the image himself (or take a screenshot if that doesn't work) and run it through.

Scrambler

Well, the scramble button would be easy to do, but the integration would be the issue here. How about a number-counter thing (I've forgotten what those elements are called since I rarely use them... sorry), that defaults to 0 but determines the number of scrambled themes to generate, then have them displayed at the output window with a column, tabs for each scramble, an input text and buttons to copy and preview.

There's also the fact that I'd have to alter the luminance values of colors. Also easy.

I'll experiment.

PySimpleGUI commented 4 years ago

Skip the scraping stuff. It was a bad idea on my part. Take a look at my post on toolchains.

You are correct that the right way to go about this is to take a screenshot from any of these other color palette sites and then simply run them into your program.

Scrambler

THIS is the key "missing feature" for me and what I spent most of the long post trying to get to.

What my theme maker does now is allow the user to "choose" how the colors are used to create the theme, for some of the element settings.

I was thinking that rather than choosing each of these things, it may be much easier for the human being to be able to quickly click over and over a "show me another layout preview using the same color palette" button. Ideally, it would be in the preview itself.

The use case - I'm looking at a preview, don't like the particular arrangement of the colors (how they're assigned to the elements) and wish to see another possibility. I click "give me a new one" and it closes the preview and replaces it with a new preview with the SAME COLORS bur arranged differently. The least number of steps the better. If it can be a "click 1 button over and over until I see the right one" then I see that as a big win.

PySimpleGUI commented 4 years ago

Then again, do we really need this? I mean; the user could decide to just download the image himself (or take a screenshot if that doesn't work) and run it through.

100% correct!

(Hey, some of my ideas are REALLY bad ones...)

definite-d commented 4 years ago

Okay, I read you loud and clear now. What you're suggesting is something like an "active scrambler" of sorts that takes the generated theme, moves colors around and re-generates the theme with the new order of colors.

I'll try making that a reality 👍 .

(Hey, some of my ideas are REALLY bad ones...)

Everyone has those sometimes 😄 ...

PySimpleGUI commented 4 years ago

Yes!! A re-shuffle of the deck. It's like we've got the right colors to work with, but maybe not the right combination.

I don't meant to be overly influential on your project. It's a tad selfish of me, I'll admit. But damn, it'll be a hot tool if it had this. It'll speed up making more and better looking themes, at least for me and maybe people that read a tutorial if it's focused on this particular "process"/steps.

Thanks for all your hard work on this. It shows.

definite-d commented 4 years ago

Well, you certainly are an influence on LookyFeely, but I wouldn't say it's a bad one.

Now, there's a quick question I need to ask, @PySimpleGUI; (I can ask you directly because you fall into the category of users who will use this feature)

The theme LookyFeely generates is sorted by brightness/luminance of the colors, before they are assigned in a manner that's readable at bare minimum. In fact, imagePalette goes a bit further by making sure each element has a unique color from the image. So, if the colors are scrambled, would the luminance values have to be tweaked too? Just for readability's sake.

PySimpleGUI commented 4 years ago

I wouldn't try and mess with any of the brightness of the supplied colors. Maybe make it an option to do an "enhancement"?

I would assume that if I'm feeding in a pallet of 5 colors, it's exactly those 5 colors that I will get.

The "shuffle" is just a way to reassign them all in a random way. This means you will not know what is going to be on top of what in order to do your enhancement. I think it's actually difficult to determine 'readability' computationally. This is why you see the radio buttons to choose 1 of 11 buttons color combinations instead of my software trying to determine what the best choice is.

I envision these sorts of steps:

Get list of colors from the image
Assign the colors to the elements
Display the preview
If user wants to "try again", then "Shuffle" is clicked, the colors are reassigned to different elements and you go to step 3

If you want to do an "enhancement" option, then it would be done between 2 and 3 I would think. It's only at that point that you know what text will be on top of what backgrounds.

A more advanced "shuffle" to consider down the road... maybe... (remember, I have lots of ideas and many are NOT good), would be to have checkboxes or something that says "I like these choices so far" which will keep those colors and only shuffle the remainder.

Or maybe I just need to play more with this after the shuffle. It may be that a particular background is wanted from the colors. You may already offer this ability. I'll have to look at it further.

definite-d commented 4 years ago

Thanks for sharing your idea on how to get this thing done. About readability and stuff, I associate the idea of "computationally grading readability" with the contrast/luminance difference of the two colors involved (like text and background colors). For example, a button whose color luminance is something like 1/4th of the text's luminance will result in a very readable darker button with light text, even if the colors would have been exactly the same if there's no difference in luminance. Think of it as having a dark-green background and lime colored text.

This "algorithm" was a major factor in the development of Mono's One-Color-Specified mode (yes, that exists).

Your more advanced shuffle mode may be what I'll shoot for now: I'm thinking of a shuffle button, then a tab/column of checkboxes showing the color values. The ones ticked will be shuffled. And then a textbox of the shuffled theme, with "Preview Shuffled Theme" and "Copy Code" buttons.

Just keep the ideas flowing; they're more like contributions.

definite-d commented 4 years ago

Well, the shuffle capability has been added. It's activated by a subtle button in the Output window. Still needs a bit of polish; I found a few nicks, but it's very usable as-is.

Feel free to help yourself to it.

PySimpleGUI commented 4 years ago

WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW WOW

I want to make sure you understand that delays answering you and trying your code, etc, have nothing to do with how much I value what you're doing. Nor should it lessen the pride that I hope you're feeling. I try to task switch often enough to make sure people like you that are donating a lot of time and effort get the attention you deserve.

I love the shuffle.

I also hacked something and may make one more hack while I'm at it.

This is not a well-known technique, but it is demonstrated and used in some popups. I have a whole series of popups that are "no wait" type of popups. They run not only as "non-blocking" but they don't need any further action in order to stray on the screen. They are meant to put a window up on the screen that the user can look at, but not really "interact" with it in a meaningful way in terms of buttons. It's not a true "multi-window" window. But, you can do things like copy information from a multi-line element that's in that window (note this will be important below)

The way you close these kinds of windows is to use a button called a DummyButton, an undocumented Element. At least I don't think it's documented well.

My hacks

Here are the 3 hacks I'm playing with... #1 is done:

Making the theme preview a no-wait window
Add the code to create that particular preview into the multiline text element in the preview window.
Not as important... Making a "shuffle and preview" button from the shuffle button. This combines the operation. I can see the result and then even apply the Adjust readability

In other words, you can have as many preview windows open as you want, and each preview window itself has the code that can be used to generate that specific window.

The result is that you can see a bunch of windows, choose the one you want, and copy the code to create the theme right from the window itself.

The results

By enabling multiple windows, I took this input image:

And produced a screen that looks like this....

Once I stuff the code that makes the window into the multiline element of the preview window itself, then I can choose a window, copy the code from its multiline.

THIS is really cool looking!

Details of hack # 1

To make the previews be no-wait windows, I changed this bit of code. I made the Exit button a DummyButton, did a read with timeout=0 to show the window, and skipped your event loop entirely.

                                                  [sg.DummyButton(' Exit ', key='Exit')]]
                                preview = sg.Window(title=(name+' Preview Popup'), layout=preview_layout, resizable=False,
                                                    location=(output_window.CurrentLocation()[0]+45, output_window.CurrentLocation()[1]+10))
                                preview.read(timeout=0)
                                while False:

MEGA impressive

What you've made here is a really mega-impressive piece of work.

Won't worry too much about your internals. They actually look good because it took me SECONDS to find the spot I needed to change to make those previews non-blocking.

I hope you're super-proud of this project. I'm super-thankful and will be spotlighting it for SURE to users. I know the designers out there will love this. I'll Tweet it too as the large Japanese PySimpleGUI community will GO NUTS over it. Every day, every single day, there are new tweets from overseas users where they've posted a new tutorial or demo or tool of some kind. They will love this tool!

PySimpleGUI commented 4 years ago

Adding progress bar to the preview window.....

It would be nice to see the progress bar inside the window with other elements. It also enables these non-responsive dummy windows to exist and still be able to show the user what progress bars look like. Without this embedded bar, there will need to be a fully functional preview as well as these dummy ones. I'll toss one in there and show you and see what you think....

This is fun!

PySimpleGUI commented 4 years ago

BTW, I hit a bug when I added the progress meter to the preview window itself. When I changed the colors in one window, it modified the colors, instantly, in all of the other windows. DOH!

So, I made a fix that I'll check into GitHub shortly.

I really really want to get 4 new releases out ASAP so that the Column and window element justification code rolled out. I've got it working on 3 of the 4 ports, but the Wx port is killing me. I'm SSSSOOOO close.

Anyway, point is that the fix for this will be out soon.

I do want to re-iterate that these comments are really small little things that are more personalization things and not some flaw of your program. You've done something really huge here. I certainly don't know of anything like it for any other GUI package in any language. To be able to feed in an image of a color palette and then create an entire application based on those colors is super-advanced kind of capability and I'm fortunate you've done this for PySimpleGUI. It's one thing to have delivered on a bunch of themes and ability for users to modify those, it's a whole other ballgame with your utility added on top. It has made for a much expanded "ecosystem" rather than just another GUI library. Thanks for your contribution!

definite-d commented 4 years ago

It's nice to know that the shuffle works as expected. However, if these windows had the Adjust Readability feature applied to them,

psg_picture

then I'm afraid I might have to tweak it a bit :smiley:.

As for those hacks: Hack 1 seems to be mostly a matter of implementation. I've also just thought of another possible way to accomplish the task, and if it works, then it just might be possible to have a fully interactive window. How's this;

I abstract the entire code required for the preview window and throw it into a function, like the shuffler.
The required things like theme code, theme name etc are passed as parameters.
The function can be called where needed.

I'm not sure if it will work as planned due to all those loop things and the non-blocking part, but in any case, it's worth a shot.

Hack 3 could be dealt with by adding a checkbox that says "Don't preview on each shuffle". That way, Previews are generated by default, and the user can choose to turn it off.

As for the progress bar integration, would you mind sharing the code for it when you're done? Honestly, I went with that approach from the beginning of the new Preview Window, but I couldn't get it to work properly, so I went with what I'm used to; a window and its own bar.

It's nice to see that element justification is getting to the other ports. Good luck with the Wx port!

PySimpleGUI commented 4 years ago

Here's my hacked up version where I embedded a progressbar into the preview itself.

PSGLookyFeely.py.txt

I'm not sure fully interactive previews are needed. The only thing that wasn't being previewed was progress bars. I think once I added those I had pretty much everything I needed to make a choice. Then it was just a matter of grabbing the theme definition that I had placed into the multiline of the preview. That was accomplished by simply copying and pasting from the multiline, something that can be done with one of these non-blocking popup type windows.

I tried with and without the enhanced text.

After a full week of debugging it, I finally figured out the PySimpleGUIWx's problem with element justification. I think all 4 ports are now unified in their approach. Checking int he code shortly.

PySimpleGUI commented 4 years ago

Oh, you will also need a change that I thought I checked in several days ago but it only just now got checked in. Without the change, you won't be able to have multiple progress bars with multiple colors if the same key is used in multiple windows. It's a weird situation we've hit with these previews as there are multiple windows that have the same keys used over and over.

definite-d commented 4 years ago

Hello once more, @PySimpleGUI.

I admit, I took a hiatus from development. However, to make up for that, I've reworked the shuffle and preview system.

It works as expected, but there's a bug that shows itself when I try to merge the functionality of shuffling and previewing. That bug gives the effect of the auto-preview showing the default LookyFeely theme first, then future uses showing the immediate previous result. Not sure if that makes much sense, but in essence, the automatic thing goes back in time to preview the shuffled theme that was made before the one it should actually show.

Strangely, this bug only surfaces when I call the function to preview the shuffled theme within the shuffler event handler. Using its dedicated button works fine. Sure, it's a lazy way of looking at things, but this bug would be solved if previewing the shuffled theme immediately isn't implemented. That'll be the worst-case solution though, as I'll keep seeking for a solution.

While I'm at that, I've also worked on the Readability Adjuster. It now works as I initially envisioned, and can turn a gaudy looking shuffled theme result into something very readable, allbased on luminance values and the background color.

To fully atone for my absence from development, I'll try adding a new feature. It'll likely enable the user tilt his theme towards a "feeling" (based on the philosophy that different colors represent different emotions).

Is that next-gen or what? 😁

Well, that's all for now. I'll have the updates uploaded to this repo once I can resolve that bug I mentioned.

definite-d commented 4 years ago

The bug has been squashed, and all is set. Well, all except for the new feature I mentioned.

definite-d commented 4 years ago

The version is uploaded, so this issue can be closed now. Enjoy the new and improved shuffle system.

definite-d / Themera