Test eCookbook Integration

This commit is contained in:
PySimpleGUI 2022-06-30 15:30:25 -04:00
parent 43ea63bb7c
commit 05fd8ca891
109 changed files with 2092 additions and 0 deletions

View file

@ -0,0 +1,20 @@
## Custom Checkboxes
A common complaint I've heard from Python programmers are how dated the GUI look. With PySimpleGUI this is a problem that's easy to overcome. It's trivial in fact.
In this very short example, you'll see how making checkboxes look any way you want them to look by using Base64 encoded PNG images. There is a PySimpleGUI utility that makes the job even easier! `pip install psgresizer`to get the psgresizer tool that I used to create these checkboxes. This tool will encode an image into a Base64 encoded bytestring that is placed on the clipboard, ready for you to paste into your code. It will take you under 5 minutes, if that, to have checkboxes of any style you want.
### `psgresizer`
This is a screenshot of the psgresizer tool that you can pip install and run from the command line.
![SNAG-1678.jpg](/api/files/629f1fdfc10321f9272d0eea/snag-1678.jpeg "SNAG-1678.jpg")
The program is quite small that demonstrates the custom checkboxes. Instead of specifying a `Checkbox` element as you would normally, you use an `Image` element. Setting the `enable_events` parameter will cause an event to be generated when the user clicks the checkbox. You can then change the image shown in your event loop when you detect the checkbox has been clicked.
This is how this Custom Checkbox program appears when running on Windows.
![Checkboxes.gif](/api/files/629f20b8c10321f9272d1691/checkboxes.gif "Checkboxes.gif")
<iframe src='https://trinket.io/embed/pygame/86171316cc?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

View file

@ -0,0 +1,11 @@
## Custom Radio Buttons
Getting a GUI that's attractive isn't impossible using PySimpleGUI. tkinter catches a lot of "ugly" comments. It doesn't HAVE To be though. PySimpleGUI makes creating your own custom controls ***trivial***.
There are a number of ways to go about something like this. I've chosen a simple approach of using an Image Element and a Text Element.
The Image Elements are used to create a simple graphic that represents the state of the radio button. The images are included in the code as base64 encoded graphics. Because they are based on PNG files, they have an alpha channel and will blend with whatever kind of background you place them on. They are either on or off.
Both the Image Element and the Text Element next to it have the events enabled on those elements. This will create an event if either of them are clicked, which mirrors the behavior of a Radio Button. The "State" of the button is simply stored as Metadata in the Image Element.
<iframe src='https://trinket.io/embed/pygame/ec630aa227?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

View file

@ -0,0 +1,26 @@
## Toggle Button - Super Simple
This demo shows you how to make a toggle button using 2 methods.
1. A Button that changes color and text
2. A Button with a graphic that changes
It's a simple way to get a toggle button in PySimpleGUI using the Button Element.
<iframe src='https://trinket.io/embed/pygame/d9a29fa9b9?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
## Toggle Button - Super Simple Graphic Only
And this one is even more simplified.
<iframe src='https://trinket.io/embed/pygame/3027862692?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
## Toggle Button - Simple Graphic - No Button Animation
Maybe you don't want the graphic to move up and down like a button does. Not a problem....just switch from Button to Image.
<iframe src='https://trinket.io/embed/pygame/15059fc6f6?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

View file

@ -0,0 +1,22 @@
# Toggle Buttons with Disable
This example shows a 4-state toggle button.
Normally a toggle button has 2 states:
1. On
2. Off
Buttons can also be disabled. When using PySimpleGUI to disable buttons, it will use the underlying GUI Framework's disable which usually adds a gray overlay or change the text to gray.
In the 4.35.0 release of PySimpleGUI, a new button state was added.... an "ignore". This state means that the button will not generate events. Unlike disable, ignore does not use the GUI framework's disable capability, thus it will not change the color.
This example program has these 4 states for the toggle button:
1. On
2. Off
3. On and disabled
4. Off and disabled
Disabled in this specific situation means ignore. The program itself is making the button appear to be disabled.
<iframe src='https://trinket.io/embed/pygame/4d0aea3fb3?start=result' width='100%' height='550' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>