perryhuynh / kcauto

kcauto, the successor to kancolle-auto, a Kantai Collection (Kancolle) bot/automation tool
GNU General Public License v3.0
68 stars 22 forks source link

[Question] How are you simulating tabs? #417

Open PySimpleGUI opened 4 years ago

PySimpleGUI commented 4 years ago

I was going to suggest that you upgrade to version 4.9.0 of PySimpleGUI that was just released as the Tab styling is working properly. They look really good now.

But then realized you're not actually using tabs.

What are you using to make the "tabs" appear / disappear. Are they Column elements that are each invisible until you click a button? It's an interesting construct that I've not seen before and would be good to make a Demo Program that's similar for other people to use.


In PSG 4.8 you could set the tab text color but that was about it. Then in 4.9 came the ability to set the tab colors for both not-selected tabs and for the selected tab. If using the Look and Feel settings, then the tabs are colored for you according to the current Look and Feel.

With no look and feel set.

image

The only color setting required is a call to change the look and feel theme:

sg.change_look_and_feel('Dark Brown 4')

All of the colors are done automagically to make it look like this:

image

mrmin123 commented 4 years ago

@PySimpleGUI I moved away from the Tkinter tabs for the GUI because I found the Tkinter's built-in tabs somewhat limiting in terms of customization. I wanted button-style tabs. So that's what I implemented; the tab buttons are actually Button elements, and like you guessed the tab content themselves are in Columns that have their visibility toggled.

I have a separate method that actually goes in and toggles the visibility and button colors. Since I have two tab groups I intend to extract this out into a more generic method, but for now I have a separate method for each one.

The other trick I had to employ was how the tab content Columns were laid out in the parent class. If you stack them vertically, you ran into the issue where Tkinter wouldn't re-draw and re-calculate the vertical height of the parent so you'd get an increasingly taller window as you swapped through the tabs; but if you lay them out horizontally, you don't get this issue.

I also had to specify a fixed size for each tab's Column since they weren't aware of each other's sizes so would re-size when switching tabs otherwise, which was a behavior I did not want.

The one other tricks I employed was adding empty columns with defined sizes to force content sizing to cascade properly for justification purposes but I think that's more of a caveat with Columns; I also don't know how true Tabs handle justification.

PySimpleGUI commented 4 years ago

You didn't ask any questions on the PySimpleGUI GitHub?? And just did all this? Wow, you're either really skilled or I'm just lucky that just enough stuff worked that you found a way to do all this.

It's a really slick interface that I wouldn't have thought was PySimpleGUI based.

I want to check on making Tabs stack on top each other in multiple rows. At the moment they all expand horizontally. The tabs are all the size of the biggest tab. You can see this in the latest main() test harness that comes with PySimpleGUI. I moved a ton of stuff into tabs so that it would fit on the small amount of space Trinket provides.

I need to study your stuff more still and parse the above into action items.

Interesting that the Columns needed laying out horizontally. What I think was happening is that when you make something go invisible, for it to TRULY be invisible, you also have to make the "row frame" invisible too. To do this, call Element.hide_row() and to make it visible call Element.unhide_row(). That should take care of any stacking problems in the future or use it when you want layouts to be completely missing of an element.

The reason for leaving the row-frame in place is that other stuff could be in there and it also saves a spot for you to make it visible again. Otherwise everything would go to the bottom of whatever container the element is in.

Your code is likely more portable using the methods you've used. Some platforms may not have tabs at all (like the Web port) but with your method they could. It's a great trick and is one of the reasons I go out searching for PySimpleGUI code to read. I learn something from pretty much every user, beginner and advanced.

Question for you.... why so many class methods? It seems like all the classes I looked at had all of their methods marked as class methods.

It's CRAZY how much code you wrote for this thing. I can't imagine what it would look like as raw tkinter code. Maybe it's not much worse given the stuff you had to work around.

PySimpleGUI commented 4 years ago

Here's an options for using tabs..... change the location to the side?

image

They are looking a lot better now for sure due to the correct styling.

Not sure how difficult it would be for you to pop your columns into tabs but could be interesting to check some day now that they look good. You can use the ttk_theme setting to change how they look even more.

PySimpleGUI commented 4 years ago

Oh, also I forgot to mention that there's a Sizer Element that can be used to expand a column to a specific size. You achieved something similar I think with your empty columns.

Haven't researched multi-row tabs yet, but did manage to release 4.11 today.