Test eCookbook Integration
This commit is contained in:
PySimpleGUI
parent
43ea63bb7c
commit
05fd8ca891
|
|
@ -0,0 +1,8 @@
|
|||
This example shows how you can use a new capability in PySimpleGUI.... the ability to create custom events that will be returned to you through your call to `window.read()`.
|
||||
|
||||
In this case, the desired events are when a window receives and loses focus. This is an advanced capability that most applications don't need, but it's nice to know it's available should you need it.
|
||||
|
||||
The same kind of constructions can be used to bind right clicks to buttons for example.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/49c5d264d8?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
**Animated GIFs**
|
||||
|
||||
Animated GIFs are shown by repeatedly calling a PySimpleGUI function or method on a frequent basis.
|
||||
|
||||
***A critical fact to understand ***is that you must make a call for every frame you wish to show. These functions are not **ones** that automatically playback and entire GIF on your behalf. You must make a call for every frame to be displayed.
|
||||
|
||||
The timing of the calls is not important for your application to keep track of. PySimpleGUI will figure out if enough time has elapsed for the next frame to be shown. In other words, your application does not have to accurately measure the time between frames and perform delays.
|
||||
|
||||
Instead of the application keeping track of the time, PySimpleGUI keeps track of how much time has elapsed since the last frame was shown. If enough time has elapsed that another frame should be shown, then the next frame will be shown. It not enough time has passed, then nothing about the image is changed. The last frame shown will remain the one showing.
|
||||
|
||||
|
||||
This program will shows animations using 2 different methods.
|
||||
1. By calling `popup_animated`
|
||||
2. By calling `Image.update_animation`
|
||||
|
||||
In both cases, a loop is involved.
|
||||
|
||||
The first animation played uses `popup_animated`. You cannot interrupt this particular animation. It plays until complete. The remaining animations can be clicked in order to advance to the next animation. When the last GIF is reached, clicking it will do nothing. It will play forever.
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/02b174d0e8?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<iframe src="https://trinket.io/embed/pygame/90b3c617ba" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
|
||||
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/86171316cc?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
## MenubarCustom
|
||||
|
||||
These are automatically paired with the custom titlebars, but you can also use them with normal titlebar.
|
||||
|
||||
Here on Trinket, all Titlebars are custom and thus all menubars are also custom
|
||||
|
||||
This Trinket program is also shown in the other Demo Programs page marked CustomTitlebars.
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/6fa4a60b7e?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
## Custom Titlebars & Custom Menubars - Bringing Some Style to Windows
|
||||
|
||||
One problem with running on Trinket is the lack of titlebars. Titlebars and Menubars are provided by the OS. Like all things software, it's a wonferfully terrible thing.
|
||||
|
||||
Wonderful that they just work. Terrible that the colors are not changable.
|
||||
|
||||
As Trinket has become a more and more important tool in the edcuation of PySimpleGUI programmers, the lack of a Titlebar wsa becoming a serious problem. Additionally, that aforementioned lack of color and other controls means your wonderful dark themed PySimpleGUI window is likely to have an entirely non-matching titlebar.
|
||||
|
||||
Let's look at both the default PySimpleGUI theme and a "Dark Red" theme.
|
||||
|
||||
```python
|
||||
import PySimpleGUI as sg
|
||||
|
||||
sg.theme('dark red')
|
||||
|
||||
layout = [ [sg.Text('My Window')],
|
||||
[sg.Input(key='-IN-')],
|
||||
[sg.Button('Go'), sg.Button('Exit')] ]
|
||||
|
||||
sg.Window('Window Title', layout).read(close=True)
|
||||
|
||||
```
|
||||
|
||||
If no theme is set for the window, we get this lovely window
|
||||
|
||||
|
||||
|
||||
Setting "Dark Red" produces this one
|
||||
|
||||
|
||||
|
||||
|
||||
They're not terrible by ANY stretch, espcecially given they're all of 4 lines long. But, they can certainly be made a bit more attractive and this is where the custom titlebar comes in. Not only does it solve a problem of a missting titlebar entirely on Trinket, but it also gives us very attractive windows on all platforms
|
||||
|
||||
By adding the parameter `use_custom_titlebar=True`....
|
||||
|
||||
```python
|
||||
sg.Window('Window Title', layout, use_custom_titlebar=True).read(close=True)
|
||||
|
||||
```
|
||||
|
||||
Our windows become these on Windows
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-----------------------------
|
||||
|
||||
## What About That "Trinket Problem"?
|
||||
|
||||
As mentioned at the of this page, this custom titlebar journey bagan with a problem happening here on Trinket. Because there was no titlebar, ***always***, it meant our nice, simple window:
|
||||
|
||||
```python
|
||||
import PySimpleGUI as sg
|
||||
|
||||
sg.theme('dark red')
|
||||
|
||||
layout = [ [sg.Text('My Window')],
|
||||
[sg.Input(key='-IN-')],
|
||||
[sg.Button('Go'), sg.Button('Exit')] ]
|
||||
|
||||
sg.Window('Window Title', layout).read(close=True)
|
||||
|
||||
```
|
||||
|
||||
Always appeared like this on Trinket:
|
||||
|
||||
|
||||
|
||||
That's not at all what Windows and Linux user experience. Not only was this a confusing situation, it was problematic should you want to move the window. There's no titlebar to grab and move the window.
|
||||
|
||||
It's enough to drive a PySimpleGUI user crazy!
|
||||
|
||||
|
||||
|
||||
|
||||
## Custom Titlebar to the Rescue
|
||||
|
||||
2021 was kicked off with release 4.33.0 on Jan 2, 2021. This is when the Custom Titlebar was released as part of PySimpleGUI. When PySimpleGUI detects that the program is running on Trinket, then a custom titlebar is added on your behalf, no additional code needed!
|
||||
|
||||
Now your program above, the simple one, results in this window:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Don't believe it? Let's give it a go and see how things work. Go ahead... poke the run button.
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/8f5b7fb5b4?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
You can modify this Trinket and you'll find that the Titlebar colors match your theme's colors (of course....).
|
||||
|
||||
-------------------------------
|
||||
|
||||
## Custom Menubars to Match
|
||||
|
||||
Custom Menubars are now part of PySimpleGUI. You can get the effect of a Menubar that is styled in a way that matches your theme, by using using the MenubarCustom element.
|
||||
|
||||
Like Custom Titlebars, it was initially released as a Demo Program. You can run this demo on Trinket here:
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/6fa4a60b7e?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
## All Elements - Listed in 1 Window
|
||||
|
||||
This program is a slightly modified version of the Demo Program found in the PySimpleGUI repo:
|
||||
|
||||
`Demo_All_Elements_Simple.py`
|
||||
|
||||
|
||||
The view of this window here on Trinket looks a little different than the code when run on Windows
|
||||
|
||||
### Trinket
|
||||
|
||||
|
||||
|
||||
|
||||
### Windows 10
|
||||
|
||||
|
||||
|
||||
### Titlebar and Menubar
|
||||
|
||||
The thing I want to draw your attention to is the Titlebar and the Menubar.
|
||||
|
||||
Because Trinket does not provide a Titlebar (it's the operating system's job to do this), PySimpleGUI provides one for you automatically. PySimpleGUI doesn't automatically switch your Menubar to a MenubarCustom which is what you need to use on Trinket for the 2 to match. The code in this Trinket has been modified to add the custom Menubar for you.
|
||||
|
||||
|
||||
### The code
|
||||
|
||||
This demo was written to show you the "pallet of elements" that you have available to paint your GUI window with. It doesn't tell the full story however as you can expand these GREATLY by using PIL, the graph element, images for buttons, etc. What it does do is list all of the elements using 1 line of code per element. It can't get much simpler than that.
|
||||
|
||||
|
||||
### Theme Previewer
|
||||
|
||||
This proram has a secondary function... you can see what all of the elements look like using the many PySimpleGUI Themes. Choose a new theme from the Combo element shown and the window will be remade with the new theme.
|
||||
|
||||
For example, I chose the "Dark Grey 11" theme and was shown this window:
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/f72e2992d2?start=result' width='100%' height='700' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
Simple Chat program front end
|
||||
|
||||
This demo was kept short and simple as to provide a foundation for something more elaborate (or not). Didn't want to make it so that you have to remove more code than you add.
|
||||
|
||||
This program takes input from the user and uses print statements to output information to the window.
|
||||
|
||||
A couple of features may not be what you're looking for and are easy to change are:
|
||||
* Enter key "sends" the message
|
||||
* After every send the input element is cleared
|
||||
|
||||
This chat program is synchronous in its design. It gathers input, "sends" it or processes it in some manner and then outputs the results. If you need is more asynchronous, then you'll want to use a PySimpleGUI async design pattern instead of this more simple synchronous one.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/7b058a66bc?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
**Control Panel**
|
||||
|
||||
Creates a grid of images with text labels that looks like a typical "control panel".
|
||||
|
||||
Note that there is currently a bug with the `Column` Element where the mousewheel only scrolls the Column if mouse is directrly over the scrollwheel.
|
||||
|
||||
This code contains a lot of Base64 Images in order to avoid needing to distributes a lot of individual image files with the code. This way a single source file has everything required.
|
||||
|
||||
On Windows the window looks like this:
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/d12422e22c?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
**Design Pattern 1 - The One-Shot
|
||||
**
|
||||
Use this design pattern to show a window, get some input values and then close the window. The window is not meant to stick around for very long.
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/87c8b8cdd6?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
||||
An exciting development in 2019 was the addition of the `close` parameter to the `window.read()` call. This enables you to write single line GUIs (again), a capability that was around in the early days of PySimpleGUI but disappeared as persistent windows became the primary use.
|
||||
|
||||
To make a single line, one-shot-GUI, you combine the layout into the call to `Window` itself. You also "chain" the call to read onto the end of your `Window` call.
|
||||
|
||||
The result is a line that looks like this:
|
||||
```python
|
||||
event, values = sg.Window('My single-line GUI!',
|
||||
[[sg.Text('My one-shot window.')],
|
||||
[sg.InputText(key='-IN-')],
|
||||
[sg.Submit(), sg.Cancel()]]).read(close=True)
|
||||
```
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/d4c897136b?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
||||
You can take this approach one step further and parse out the input value directly into your variable by adding more code onto the end of the line. In this case, a subscript to pick up the second location in the tuple that's returned from `read` and then the key.
|
||||
|
||||
```python
|
||||
event, values = sg.Window('My single-line GUI!',
|
||||
[[sg.Text('My one-shot window.')],
|
||||
[sg.InputText(key='-IN-')],
|
||||
[sg.Submit(), sg.Cancel()]]).read(close=True)[1]['-IN-']
|
||||
```
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
**Design Pattern 2 - Persistent Windows, output updates in window**
|
||||
|
||||
|
||||
***This is the most common design pattern you'll find in PySimpleGUI. ***
|
||||
|
||||
It's the same across all of the ports of PySimpleGUI. You'll easily be able to recognize a PySimpleGUI program by this basic structure.
|
||||
|
||||
This pattern is for windows that remain open with the user interacting with them. It's a "normal" window from a user's standpoint.
|
||||
|
||||
*This pattern has 4 parts:*
|
||||
|
||||
1. Layout definition
|
||||
2. Window creation
|
||||
3. Event loop - read window events and inputs
|
||||
4. Window close
|
||||
|
||||
Each of these parts is 1 or 2 lines of Python code when working with a basic window. The size of the event loop depends on the amount of processing you need to do when events happen in the window.
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/c0bf3a6754?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
It's sometimes useful to exlore what it would take to duplicate a GUI written in tkinter, especially when a nicely written article accompanies the code.
|
||||
|
||||
This GUI code duplicates a portion of the tkinter code posted on this page:
|
||||
https://www.devmedia.com.br/tkinter-interfaces-graficas-em-python/33956
|
||||
|
||||
It performs performs the logic for only the "Inserir" button.
|
||||
|
||||
To add the code for the remaining buttons, add `elif` statements onto the bottom of the `if` statement in the event loop. At the moment, buttons that are not handled in the event loop causes a "Not yet implemlented" message to be shown.
|
||||
|
||||
On a Windows machine, the window this code produces looks like this:
|
||||
|
||||
|
||||
|
||||
|
||||
PySimpleGUI is a package that provides an interface to GUI Frameworks that uses constructs familiar to Python programmers of all experience levels. With PySimpleGUI you can run your source code on tkinter, Qt, WxPython and in a browser... on Windows, Mac and Linux
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/c50932b36f?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
One of the "neat tricks" that PySimpleGUI has is the ability to run on multiple GUI platforms with a minimal amount of changes to your code. Often it is just 1 line of code to change.
|
||||
|
||||
You can't do this on Trinket, in your browser because Trinket only supports tkinter.
|
||||
|
||||
For the example code above, running on a Windows machine, the import statement at the top was changed to use a version of PySimpleGUI that runs on Qt, WxPython and in the browser (using Remi). Note that the windows produced are not perfect and may need a font size or other change to make it look better, but the several character change using PySimpleGUI is tiny compared to what it would take to port tkinter code to Qt.
|
||||
|
||||
Changed the import to run on PySide2 (Qt)
|
||||
```python
|
||||
import PySimpleGUIQt as sg
|
||||
```
|
||||
|
||||
The code then created this window running on Qt
|
||||
|
||||
|
||||
|
||||
Changed the import to run on WxPython
|
||||
```python
|
||||
import PySimpleGUIWx as sg
|
||||
```
|
||||
|
||||
The code then created this window running on WxPython
|
||||
|
||||
|
||||
Changed the import to run in a browser:
|
||||
```python
|
||||
import PySimpleGUIWeb as sg
|
||||
```
|
||||
|
||||
The code then created this window running in a chrome window
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
|
||||
# Welcome to the PySimpleGUI Interactive eCookbook
|
||||
|
||||
SOME of these Trinkets are older, but all work.
|
||||
|
||||
Use the navigation bar on the left to look through the pages. Each page has ***at least*** one demo program for you to RUN in your browser.
|
||||
|
||||
With this eCookbook you don't need to do anything than **click run**. That's it. You can see the code that's running, modify it, and if you find it particulrly useful, copy it to your machine and use it in your project.
|
||||
|
||||
## Example - The Basic PySimpleGUI Program
|
||||
|
||||
Let's start with the most basic of PySimpleGUI programs so you know how they work.
|
||||
|
||||
The code is on the left. Clicking run will show the GUI on the right side. The print output (stdout, stderr) are down in a window below the GUI. There are more controls, but that's enough to get you running. So, go ahead, **click RUN!**
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/36bf0df5f3?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
## The Regular (other) Cookbook
|
||||
|
||||
You'll find the full PySimpleGUI Cookbook where it's always been located, on ReadTheDocs as a tab in the user documentation.
|
||||
|
||||
http://Cookbook.PySimpleGUI.org
|
||||
|
||||
## The Demo Programs
|
||||
|
||||
There are over 300 .py .pyw files on the PySimpleGUI Repo that you can consider to be Cookbook Recipes. They show you how PySimpleGUI works and how to integrate PySimpleGUI with other packages. Ready to run bookbook recipes that are simple enough and commented enough that you don't need text.
|
||||
|
||||
http://Demos.PySimpleGUI.org
|
||||
|
||||
## The Full Documenation
|
||||
|
||||
The Cookbook, primary doc, readme, call reference, etc, can always be found here:
|
||||
|
||||
http://www.PySimpleGUI.org
|
||||
|
||||
|
||||
## Known (slight) Problems
|
||||
|
||||
### Missing Titlebars
|
||||
|
||||
Special code was added to PySimpleGUI to use a custom Titlebar when the program is running on Trinket. Not all Trinkets have this code added to them.
|
||||
|
||||
You will notice with older versions of PySimpleGUI and Trinket that there is no titlebar on the window. That is because the titlebar is provided by the Operating System and Trinket doesn't really have one and thus the need for PySimpleGUI's custom code.
|
||||
|
||||
### Smaller Screen Real Estate
|
||||
|
||||
800 x 600 is the size of a standard Trinket screen that PySimpleGUI has to work with.
|
||||
|
||||
That's quite small when you're trying to run Demo Programs from the PySimpleGUI project. Some won't fit. Most will though.
|
||||
|
||||
You may need to use the full-screen mode for some examples. Information about full-screen is on this page in one of the first examples.
|
||||
|
||||
## Consider Supporting Trinket
|
||||
|
||||
Trinket is a **fantastic** platform for teaching PySimpleGUI. It's easy for students to use. It's easy for teachers to use. It doesn't require anyone to install anything anywhere. All that's needed is a browser. Coding from a tablet is difficult unless you have a keyboard, that's true for every coding site on the internet.
|
||||
|
||||
I consider Trinket to be a partner. They've provided solid service to the PySimpleGUI community for several years. "It just works" is one of the most valuable traits for a product or service and PySimpleGUI "just works" on Trinket. Make a new PyGrame Trinket project, type `import PySimpleGUI as sg`, and you're ready to start having fun!
|
||||
|
||||
The prices are riduculously low what we're all getting to experience - PySimpleGUI running in the browser with zero effort on your part.
|
||||
|
||||
## Get on with learning!
|
||||
|
||||
Start clicking topics on the left table of contents and have fun while learning PySimpleGUI.....
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
```python.run
|
||||
runnable code goes here
|
||||
```## Collapsible Sections
|
||||
|
||||
Visible / Invisible settings on the plain tkinter based PySimpleGUI have been a real challenge. In release 4.28.0 a new function, `pin`, was added that will "pin" an element to a location in your layout. This will reserve the location for the element in the layout. Without it, the element will move when you make it inivisible and visible again.
|
||||
|
||||
There is a 1-pixel "penalty" of sorts when using this capability. A single pixel is needed to reserve and hold this spot, a small price to pay given what you can do with this new capability.
|
||||
|
||||
This demo shows how you can use this feature to make Column elements invisible as if a section of the window has been collapsed with the contents hidden.
|
||||
|
||||
Here is how the demo looks running on Windows
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/df2c15979e?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
## Menubar and Titlebar With Trinkets
|
||||
|
||||
## Menus - MenubarCustom instead of Menu
|
||||
|
||||
There's a tricky issue with Trinket. Trinket doesn't supply a titlebar by default. You may notice that many of the older examples here lack a titlebar. That's because it's only been in 2021 that a custom titlebar was developed and automatically added when the runtime enironment is Trinket.
|
||||
|
||||
There's one issue with these Custom Titlebars.... you need a custom Menubar to go with them. -sigh-
|
||||
|
||||
You'll find MenubarCustom is an element that works much like a normal Menu element.
|
||||
|
||||
## Info from original Trinket made in 2019, but code updated in 2021:
|
||||
|
||||
This demo shows you how you can add a menu bar to your program.
|
||||
You will receive events that are the menu item's text or the menu
|
||||
item's key.
|
||||
|
||||
The main purpose of this demo is to teach you the layout of a menu definition.
|
||||
It is a basic Python list with listings inside that respresent the cascading
|
||||
of menus. You can go as deep as you with.
|
||||
|
||||
Notice that the `ButtonMenu` Element is a little different. The MenuBar and right click menus both return the menu item chosen as the event. For the `ButtonMenu` Element the key of the button is returned. The menu item chosen is in the values variable. It's a 2-step process to get the menu item chosen for `ButtonMenu` elements.
|
||||
|
||||
|
||||
<iframe src="https://trinket.io/embed/pygame/b96cfa2f55" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
**Multi-Threaded Work - Running long tasks inside of a GUI**
|
||||
|
||||
This program demonstrates one way of using a combination of Python's Thread
|
||||
and Queue objects to implement a GUI that performs work that takes too long
|
||||
to directly perform inside of the event loop.
|
||||
|
||||
An example use would be if you have a button that you want to use to start
|
||||
some code that will take several seconds to run, then this technique is a
|
||||
good pattern to use.
|
||||
|
||||
Take a moment to examine the code dealing with the Thread and the Queue. These
|
||||
constructs are nothing to fear as the amount of code that uses them is only a
|
||||
handul of lines of code are needed. And they are simple enough that you'll
|
||||
be able to understand them.
|
||||
|
||||
***"Thread-safe"*** - This is an important term to consider any time you are using threads in your program. There are 2 things to check out:
|
||||
1. You must make sure that the calls you make from your thread are OK to call from a thread
|
||||
2. If you are running multiple threads, then the calls you make must be "thread-safe"
|
||||
|
||||
The authors of libraries you are using often tell you if their code is "thread-safe".
|
||||
|
||||
PySimpleGUI code is not thread safe. For the tkinter version (i.e. plain PySimpleGUI versus PySimpleGUIQt), you cannot run PySimpleGUI as a thread. To put that in simpler terms, you cannot make any calls into the PySimpleGUI package from a thread. For example, you cannot call `update` for any of your elements from a thread. This is why you see the updates happening from the main thread only.
|
||||
|
||||
Screenshot:
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/8f2aeea67b?start=result' width='100%' height='650' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
# Demo Programs
|
||||
|
||||
The [Demo Progams](http://Demos.PySimpleGUI.org) were the basis for many of the Trinkets you see on this page. There are over 300 of them to help give you a fast jump start on building your application, or they will teach you how to perform various operations.
|
||||
|
||||
If you want to learn how an element works, see example code, then check out the Demo Programs.
|
||||
|
||||
In 2022 a new PySimpleGUI application, `psgdemos`, was released to [PyPI](https://pypi.org/project/psgdemos/). All you need to do is:
|
||||
|
||||
`python -m pip install psgdemos`
|
||||
`psgdemos`
|
||||
|
||||
(Use `python3` if you're on Linux or Mac)
|
||||
|
||||
The command `psgdemos` will launch the Demo Browser, your gateway to Demo Program fun. The Demo Browser enables you to easily **search**, **run**, and **edit** the programs.
|
||||
|
||||
For example, if you want to learn more about using the `Graph` element, then use the Demo Browser to search for Demo Programs that use that element:
|
||||
|
||||
|
||||
|
||||
You can learn more about the Demo Browser and installing Demo Programs in the Cookbook, in the [Recipe on Demo Browser](https://pysimplegui.readthedocs.io/en/latest/cookbook/#recipe-the-demo-browser)
|
||||
|
||||
It's by far the easiest way to navigate the many examples available for you use.
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
### Settings File - Load & Save Programming Settings
|
||||
|
||||
This demo program shows one way to save your program's settings using a JSON file as your settings file. This code is particularly handy when you are building desktop-widgets like a Rainmater type of desktop widget.
|
||||
|
||||
The main program in the example is very small. The focus is on the settings window.
|
||||
|
||||
|
||||
|
||||
This is the settings window.
|
||||
|
||||
|
||||
|
||||
Now you can easily add settings to your programs that are saved to disk, a very nice touch that adds a lot of polish to your programs.
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/2d7e078757?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
### Config.ini format
|
||||
|
||||
In version 4.49.0.10 support for .INI format files was added. This is a quick example of how to use INI files with PySimpleGUI's User Settings APIs
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/9de8c06992?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
Menu Bar
|
||||
|
||||
There are 4 places you'll run into menus in PySimpleGUI
|
||||
1. Menu Bar
|
||||
2. Right Click Menu
|
||||
3. Button Menu
|
||||
4. System Tray
|
||||
|
||||
This demo showns how the Menu Bar element works and the format for the Menu Bar menus.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/cbd8d14a70?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
**Basic PySimpleGUI Program**
|
||||
|
||||
* The basic PySimpleGUI 3 part program structure
|
||||
* Enlarging windows on Trinket
|
||||
* Running PySimpleGUI on the repl.it site
|
||||
|
||||
------
|
||||
|
||||
The basic PySimpleGUI program, in 3 parts.
|
||||
|
||||
Almost all PySimpleGUI programs have this architecture.
|
||||
|
||||
First you define the window.
|
||||
Then create the window.
|
||||
Finally you collect inputs and operate on 'events'
|
||||
|
||||
This is a good one to copy as a template
|
||||
|
||||
<iframe src="https://trinket.io/embed/pygame/36bf0df5f3" width="100%" height="500" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
|
||||
|
||||
-----
|
||||
|
||||
**Enlarging windows on Trinket**
|
||||
|
||||
Sometimes when you're running these Trinket examples, the window is so small that it's difficult to make out the text. To view the examples in much larger sizes, choose "Fullscreen" from the menu.
|
||||
|
||||
|
||||
|
||||
|
||||
This will make your window go from this:
|
||||
|
||||
|
||||
|
||||
to this:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
----
|
||||
|
||||
**Running code on repl.it**
|
||||
|
||||
In addition to being able to run PySimpleGUI code online here on Trinket, you can also run PySimpleGUI on repl.it. The advantage to running on repl.it is that you have the ability to pip install nearly anything. Trinket severly limits what you can install and in fact with each of these examples the entire PySimpleGUI source code is being included. On repl.it the PySimpleGUI package is installed automatically for you.
|
||||
|
||||
Trinket seems to block embedding iframes to other sites. This link will display the above program on repl.it.
|
||||
|
||||
https://repl.it/@PySimpleGUI/Basic-PySimpleGUI-Template
|
||||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
All credit for this code, the video and hard work belongs to Israel Dryer. His GitHub repository is located here: https://github.com/israel-dryer
|
||||
|
||||
This calculator was developed as part of a YouTube tutorial. You can watch the video that describes how to make this calculator here:
|
||||
|
||||
https://youtu.be/x5LSTDdffFk
|
||||
|
||||
The GitHub location for the source can be found here:
|
||||
|
||||
https://github.com/israel-dryer/PyDataMath-II
|
||||
|
||||
|
||||
<iframe src="https://trinket.io/embed/pygame/e51fa16b0b" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
1-4-24 Dice Game (incomplete)
|
||||
|
||||
This is an exercise in duplicating a user interface written for Appjar. Duplicating another GUI has been a great way to compare and contract PySimpleGUI with other GUI packages. Something is always learned.
|
||||
|
||||
It's based on the program posted on Reddit:
|
||||
|
||||
https://www.reddit.com/r/learnpython/comments/ecykvx/more_help_with_1424/
|
||||
|
||||
This program is incomplete. I'm unsure of the rules of the game, so the game mechanics are there but it's incomplete as the scoring isn't right yet.
|
||||
|
||||
Based on this program
|
||||
|
||||
|
||||
|
||||
On Windows the program below produces this window (change size of score to 14 for windows)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/5977ff4cfe?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
**Popup Window with Delayed Text Output**
|
||||
|
||||
The idea here is to present text on a character by character basis... as if someone was typing it on a keyboard or "saying" something in a text based adventure game.
|
||||
|
||||
This Reddit mockup is based on this post:
|
||||
https://www.reddit.com/r/Python/comments/ed6pok/do_you_prefer_tkinter_or_pygame_for_your/
|
||||
|
||||
The user can interrupt the message causing the window to close immediate, or they can wait for the entire message to be displayed and then close the window. An option could be added that would cause the full text to be displayed on the first button click and then the second click will close the window.
|
||||
|
||||
On Windows this is how the window appears:
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/59505c03ea?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
**The Classic Simple Calculator **
|
||||
|
||||
This program is the beginning of a typical calculator. It was done to see what creating one in PySimpleGUI versus tkinter looked like.
|
||||
|
||||
A full-blown calculator was not completed. This was an exercise meant to duplicate the look and operation of the GUI, not the entire program. The things that are operational are:
|
||||
|
||||
* Numeric entry via buttons
|
||||
* Numeric entry via keyboard
|
||||
* Clear display using CE button
|
||||
|
||||
All of the other buttons are generating events, the logic hasn't been added to do somethiuung with the button click.
|
||||
|
||||
The goal was to duplicate this GUI
|
||||
|
||||
|
||||
|
||||
On windows the PySimpleGUI code produced this program
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/325ee1b208?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
A demo program to address this Reddit post:
|
||||
https://www.reddit.com/r/learnpython/comments/fdx0io/moving_a_slider_with_a_button_click/
|
||||
|
||||
The idea is for a slider to be updated to the value input by the user in the input box.
|
||||
|
||||
You can click the "Submit" button or press the enter key to complete the input.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/59a5fb58e1?start=result' width='100%' height='400' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
A handy demo pattern for you to follow should you want a user interface with a list of files along the left hand edge and something done with those files on the right side of the window.
|
||||
|
||||
This is a highly "responsive" PySimpleGUI layout in that it will immediately take action when the user interacts with the window. You do not need to click a button to indicate a choice was made. You can also paste the folder path into the input box and the listbox will immediately populare with the correct folder's contents.
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/3ed4c899c1?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
**Coin Calculator **
|
||||
|
||||
|
||||
|
||||
This is an example of a program originally written for tkinter. The length is roughly 1/2 the original program. However, it's the readability of the lines that is the more important difference.
|
||||
|
||||
Note - need to add formatting of the text being output so that it's closer to looking like dollars and cents. This can be done by modifying these 4 lines of code:
|
||||
```python
|
||||
window['Quarters_total'].update(quarters)
|
||||
window['Dimes_total'].update(dimes)
|
||||
window['Nickels_total'].update(nickels)
|
||||
window['Pennies_total'].update(pennies)
|
||||
```
|
||||
|
||||
Use f-strings insead of the variable names directly as paramters to `update`. It seemed better to keep the code simpler looking than add the formatting.
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/4788483a5b?start=result' width='100%' height='550' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
**Duplication of Reddit tinkter Tutorial on a Countdown Timer**
|
||||
|
||||
This post seemed like an interesting one to demonstrate the use of "async" windows in PySimpleGUI. It was roughly 1/2 the size of the tkinter version.
|
||||
|
||||
https://www.reddit.com/r/Python/comments/eh9461/countdown_gui_using_python_it_is_not_pretty/
|
||||
|
||||
Here is how it looks on Windows...
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/48dc15aa43?start=result' width='100%' height='450' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
**Another Reddit Mockup**
|
||||
|
||||
This time we're taking keyboard characters 1-9 and counting the number of times that character was pressed. There are labels going across the window with counters under them.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/ec6bf39d05?start=result' width='100%' height='450' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
Mockup of a car's dashoboard for Reddit
|
||||
|
||||
NOTE - This program requires use of an unrelease PySimpleGUI.py that you can download from GitHub and place in your application's folder. This file is also included here as part of the Trinket itself. If you download the ZIP, you'll get both the application and the PySimpleGUI file.
|
||||
|
||||
This was the hand drawn image provided as a mockup:
|
||||
|
||||
|
||||
And this is the window that the code produces:
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/226d754af2?start=result' width='100%' height='650' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
### Example of a "generated" layout based on a user's input
|
||||
|
||||
In this case the poster wants a GUI that will ask for a different number of input fields depending on the value entered.
|
||||
|
||||
I think this program does what's desired. First a number is obtained using a simple popup, then a full layout is made and finally the window is shown and available for interaction. Rather than it being a 1-shot window it's a fully functioning window should someone want to edit one of the addresses and re-calculate.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/51d5a7277a?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
## Fading Window
|
||||
|
||||
While it doesn't fade on Trinket, this window does fade away on Windows:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/2fec93919b?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
A simple GUI with 2 inputs for this Reddit post:
|
||||
https://www.reddit.com/r/learnpython/comments/jq17m3/ive_finally_written_my_first_script_for_work_but/
|
||||
|
||||
The window will be shown until a button is clicked or closed with an "X". This is called a "One Shot" window. Add an event loop if you want more user interaction.
|
||||
|
||||
You can add more advanced features such as adding a popup call to get the date, or adding a Date Chooser button to choose the date. This will be easier for the user and will automatically do a bit of validation of the input.
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/1609fbce85?start=result' width='100%' height='450' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
## Quick Mock-up of a Tkinter GUI Posted on Reddit
|
||||
|
||||
It's always a fun exercise to see what it takes to duplicate a GUI written using another framework. It's great practice and I learn something from the original author's work every time.
|
||||
|
||||
This one was unique in that most tkinter GUIs are not as responsive. The text color for the checkboxes changes to either green or red immediately upon making a selection. It's a clever touch that I don't recall seeing in another tkinter GUI. Kudo's to the original author.
|
||||
|
||||
There is an extra line of code required to set the icon because this example is running on Trinket.
|
||||
|
||||
All credit for this GUI's design goes to Github User saikatsahana77
|
||||
|
||||
You'll find his original project here:
|
||||
https://github.com/saikatsahana77/ipynb_to_py_converter
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/163401b155?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
**Example Program for Reddit**
|
||||
|
||||
|
||||
|
||||
Sometimes little programs are written to demonstrate concepts for Reddit posts.
|
||||
These make good teaching tools so you'll find a few have made it onto the list.
|
||||
|
||||
This program demonstrates simple input from and output to a window. Additionally
|
||||
a couple of parameters are used to "complete" the interface so that it's nice
|
||||
for the user. Think for a moment about how people will use your GUI... take a
|
||||
moment to design it. There were 2 options in this program that were nice
|
||||
finishing touches.
|
||||
1. The return key signals the user has completed input
|
||||
2. After the output is displayed, the input field is cleared for the next entry
|
||||
|
||||
This program also uses the `change_look_and_feel` call to quickly add some color
|
||||
to the window.
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/d863b4a36c?start=result' width='100%' height='400' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
## Simple Login
|
||||
|
||||
Prompts for a User Name and a Password. The password is protected from view while being typed in.
|
||||
|
||||
You can use the Return key or the login button to submit your entered information.
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/2dbf9307c7?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
A Mockup Of Another Reddit Project
|
||||
|
||||
This is an ideal project for PySimpleGUI. OK, so maybe it's claimed for just about every GUI problem, but only when it fits. And for this project, it fits.
|
||||
|
||||
The Redit post where this project was mentioned:
|
||||
|
||||
https://www.reddit.com/r/Python/comments/ee6n53/advice_on_code_before_i_make_it_bigger/
|
||||
|
||||
And here's the project's GitHub:
|
||||
|
||||
https://github.com/wigglememore/Machinerys-Hanbook-in-Code
|
||||
|
||||
What made this project especially appealing to add a GUI onto is the fact that it was written in a well-structured manner. All of the input was isolated in a single file. It was easy to go from that file to a GUI.
|
||||
|
||||
At the end of the function the values dictionry is returned.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/9dfcbcc591?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
A Maze Solution Finding Algorithm
|
||||
|
||||
This program was initialy posted to Reddit as a command line application that produced a folder full of PNG files representing the maze solution. It was only after you concatenated these images together to create a flip-book style movie that you got an appreciation of the graphics.
|
||||
|
||||
Rather than outputting these PNG files to a folder, how about outputting them to a GUI window?
|
||||
|
||||
That's where the idea of adding on a GUI came to be. An hour later and this was the result.
|
||||
|
||||
You are first asked to choose the TXT file representing the maze.
|
||||
|
||||
Then you'll be shown the maze and an animation of it being solved.
|
||||
|
||||
You can view this program without the source code here:
|
||||
|
||||
https://pysimplegui.trinket.io/sites/maze
|
||||
|
||||
Here is how it looks running on windows:
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/75c51d0bf3?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
Here's a little demo program in response to this help request on Reddit:
|
||||
|
||||
https://www.reddit.com/r/learnprogramming/comments/h884vg/is_there_any_easy_gui_maker_for_python/
|
||||
|
||||
The idea is to get an initial value in an input box, then get 3 more values in the same box.
|
||||
|
||||
In this implementation you can press the "Enter" button or the return key to enter a value.
|
||||
|
||||
The result is put into a single list that is shown at the end.
|
||||
|
||||
On Windows it looks like this:
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/89f47bbe54?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
## Navigating Focus Using Arrow Keys
|
||||
|
||||
This example shows how you can navigate through your windows's elements by using the left and right arrow keys. The down arrow key is set to exit the program.
|
||||
|
||||
The code that sets up the use of arrow keys are these 3 bind statements. They cause events to be generated when those keys are pressed on the keyboard:
|
||||
```python
|
||||
window.bind('<Right>', '-NEXT-')
|
||||
window.bind('<Left>', '-PREV-')
|
||||
window.bind('<Down>', 'Exit')
|
||||
```
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/88c7cbc070?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
GUI for checking for a correct password using a hash code.
|
||||
|
||||
If you enter "gui" as the password, then you'll get another window that enables you to create a hashcode based on your own string.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/c26f8fefc5?start=result' width='100%' height='400' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
A super-quick mockup of a replacement GUI that was originally written in tkinter.
|
||||
|
||||
It's meant to run on a Raspberry Pi but has the GPIO stuff not present at the moment. It's only the GUI.
|
||||
|
||||
It would be best to completely separate the hardware / GPIO code into functions. This will allow the GUI to be run and tested on platforms other than the Pi that don't support GPIO. For those platforms the functions that do GPIO can simply return.
|
||||
|
||||
|
||||
|
||||
The original tkinter code can be found here:
|
||||
|
||||
https://www.reddit.com/r/learnpython/comments/e2qcdz/pid_interface_keeps_crashing/
|
||||
|
||||
When run on Windows the code produces this GUI
|
||||
|
||||
|
||||
|
||||
Running on the Pi it looks nearly identical
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/73280f3dc5?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
##PNG Image Viewer
|
||||
|
||||
Super-simple image viewer.
|
||||
|
||||
Click on the image to move to the next image.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/c4d42dfc71?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
"Printing" to a GUI window
|
||||
|
||||
Demonstration of displaying your program's text information in a variety of ways.
|
||||
|
||||
|
||||
|
||||
There are a number of ways to display text information using PySimpleGUI. A few include:
|
||||
|
||||
1. Use the "Debug Window" by calling sg.Print
|
||||
2. Call a `popup` where the parms passed in will be shown in a new window
|
||||
3. Create your window with an Output Element in it
|
||||
4. Change the value of a `Text` Element by calling its `update` method
|
||||
5. Change the value of a `Multiline` Element by calling its `update` method
|
||||
|
||||
This code demonstrates several of these ways. You'll see 2 windows displayed. One is the Debug Window, the other is your custom window with output and text elements.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/6b13c65907?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
A Simple Input 2 Files Frontend
|
||||
|
||||
As specified by Reddit post:
|
||||
|
||||
https://www.reddit.com/r/learnprogramming/comments/egql7t/help_understanding_guis/
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/bbb6924592?start=result' width='100%' height='400' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Demo of using a list comprehension to generate a multi-row layout
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/a01859663a?start=result' width='100%' height='400' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
Reddit Scraper - Status Update Front-End
|
||||
|
||||
If you want to see a fully functional Reddit search program that uses the Reddit PRAW APIs, then check out the [Reddit Search Demo Program](https://github.com/PySimpleGUI/PySimpleGUI/blob/master/DemoPrograms/Demo_Reddit_Search.py) found on the PySimpleGUI GitHub.
|
||||
|
||||
Waits for a Start button then simulates reading from Reddit and updating text in the window with the current posts's title.
|
||||
|
||||
You can choose the subs you want to read using the listbox and then click "Start Scrape" to loop through reading the subs.
|
||||
|
||||
If an "Abort" is desired, then a call to `window.read()` could be added and checked inside the download loop. For now it's a simple get the list of subs and read each, displaying the information as it's read.
|
||||
|
||||
A progress meter runs along the bottom and varies depending on the number of entries in the sub.
|
||||
|
||||
Looks like this on Windows:
|
||||
|
||||
|
||||
|
||||
In response to Reddit post:
|
||||
|
||||
https://www.reddit.com/r/learnpython/comments/efw4c8/help_updating_tiles_on_tkinter_gui/
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/833048e03d?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
An example solution to this Reddit post:
|
||||
|
||||
https://www.reddit.com/r/learnpython/comments/jgmvl7/this_is_probably_a_stupid_question/
|
||||
|
||||
The problem is a basic sales calculator. This particular example is quite primitive. It simply takes a single input, does a simple calculation and outputs a total.
|
||||
|
||||
The window produced on Windows looks like this:
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/c06e152578?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
Another "Quick Mockup" (under an hour) of a GUI requested on Reddit
|
||||
|
||||
The GUI design was provided in this post.
|
||||
|
||||
https://www.reddit.com/r/Python/comments/eilntg/should_i_create_gui_on_tkinter/
|
||||
|
||||
This was the design provided
|
||||
|
||||
|
||||
|
||||
Here is what the PySimpleGUI mockup looks like running on Windows.
|
||||
|
||||
|
||||
|
||||
The code has a couple of places where padding needs adjusting when running on a real machine versus Trinket. It's a quick mockup and can certainly be improved from this prototype. It's meant to show what's possible.
|
||||
|
||||
|
||||
The "Published" (without showing the code) version is here:
|
||||
|
||||
https://pysimplegui.trinket.io/sites/reddit-mockup-shopify
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/b5b274e06c?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
Quick mock-up of a window spotted on Twitter.
|
||||
It's a fun challenge to see how difficult it is to duplicate tkinter based programs.
|
||||
|
||||
I don't know the number of lines of code for this source window:
|
||||
|
||||
|
||||
|
||||
|
||||
The PySimpleGUI version required 11 lines of code to duplicate it.
|
||||
|
||||
|
||||
|
||||
Here is the source code for the above window:
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/c760b1679f?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Super-Simple Periodic Update Demo
|
||||
|
||||
This one is a window that runs every second and updates some text in the window to reflect the values of 10 random numbers. Modify to add whatever kinds of Elements you want (like Tables, or rows of text). Just drop the changes into the event loop
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/2962511ca0?start=result' width='100%' height='400' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
A Text Adventure GUI Mockup
|
||||
|
||||
A quick mockup for a GUI in response to this Reddit post:
|
||||
|
||||
https://www.reddit.com/r/learnpython/comments/dza038/is_there_a_way_to_request_and_save_user_input/
|
||||
|
||||
This program creates a window that takes in user input and displays "results" in the window. The results are displayed using simple "print" statements.
|
||||
|
||||
On Windows, the window look like this:
|
||||
|
||||
|
||||
|
||||
Note that colored text output to an `Output Element` is not currently supported. You can have colored text in the main window itself but not in these scrolling type Elements. However, that was a very recent change to PySimpleGUIQt that DOES allow colored text to be sent to a scrolling output Element (the Multiline). Looking at adding it to the tkinter (plain PySimpleGUI) port very soon.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/fe2a3c3008?start=result' width='100%' height='400' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
## Tic Tac Toe
|
||||
|
||||
In response to Reddit post:
|
||||
https://www.reddit.com/r/learnpython/comments/iq4wfs/question_how_do_you_manage_events_lots_of_events/
|
||||
|
||||
The basic question is how to handle events coming from a large number of sources, or a large number of buttons in this case.
|
||||
|
||||
The answer is to use the information about the button along with a datastructure to record some information about it. In this case, for Tic Tac Toe, the "Game Board" is where you want to record information. You want to know if a spot is taken and if so, by who.
|
||||
|
||||
One simple way to do this is via a dictionary. Record each spot that's been played in a dictionary. The "key" will be the board location and the value will be which player played a piece there.
|
||||
|
||||
Because keys can be "anything" in PySimpleGUI (the exception is they cannot be lists), a tuple would be a good choice. This gives you a (row, col) description of the piece and fits well visually too. You can use the row, col in a loop to create the board. Because list comprehensions can be used to create layouts, then it works out well to use row, col as the key.
|
||||
|
||||
This is how the window looks runnins on Windows:
|
||||
|
||||
|
||||
|
||||
|
||||
The main board is created with this single line of code:
|
||||
|
||||
```python
|
||||
[[sg.Button(size=(3,1), key=(row,col)) for col in range(3)] for row in range(3)]
|
||||
```
|
||||
|
||||
Because lists can be combined, it's possible to "build" a layout up from pieces. In this case, there are 3 sections to the board. There's a Text header at the top, then the board, then a couple of buttons on the bottom. This layout can be built with 3 lines of code. There's the initial Text Element at the top that starts the layout. Then the board is added on and finally the buttons. The layout creation is thus:
|
||||
|
||||
```python
|
||||
layout = [[sg.Text('X Starts First')]]
|
||||
layout += [[sg.Button(size=(3,1), key=(row,col)) for col in range(3)] for row in range(3)]
|
||||
layout += [[sg.Button('Reset'), sg.Button('Cancel')]]
|
||||
```
|
||||
|
||||
The rest of the code is pretty self-explanatory. It involves using a dictionary to store the locations that have been played and which player played that location.
|
||||
|
||||
Because the board is small, you'll want to click the upper left corner of the code display and choose the Display Full Screen option.
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/09309ffae2?start=result' width='100%' height='450' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
Ticket Reservation Example
|
||||
|
||||
This program duplicates the window that this tutorial creates.
|
||||
|
||||
https://www.reddit.com/r/Python/comments/dk3rff/python_gui_project_ticket_reservation_style_and/
|
||||
|
||||
When using tkinter 41 lines of code are used. This PySimpleGUI program uses 19
|
||||
That makes the PSG program roughly 43% the size of the tkinter program, which is within the estimates of 1/2 to 1/10.
|
||||
|
||||
Because this is a "data entry" type window, care was taken to clear the fields after the record was submitted and the cursor (focus) was placed back up at the name field, ready for a new record to be added.
|
||||
|
||||
This is a screenshot of the tkinter version
|
||||
|
||||
|
||||
|
||||
And this is what the PySimpleGUI window produces
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/7bfc5ce349?start=result' width='100%' height='400' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
**Visual Basic Program Duplication**
|
||||
|
||||
The exercise here is to duplicate a program originally written in Visual Basic.
|
||||
|
||||
This is the provided screenshot
|
||||
|
||||
|
||||
|
||||
The first thing to do with all PySimpleGUI programs is to define what your "rows" will look like. In this case it appears as if 3 rows are present.
|
||||
|
||||
The bottom row is a series of "container elements" including Frame Elements and a Column Element
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Here is the start of the code needed to implement this particular layout.
|
||||
|
||||
Information about the program's operations are displayed in the middle of the window. It's assumed that will be perhaps a table in the future, but for now it is a handy location to route printed output to the window.
|
||||
|
||||
Clicking the "Process Files" buttons will print out the values of the `values` variable which is the values dictionary returned from the call to `window.read()` as can be seen in the code.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/8ea933f356?start=result' width='100%' height='550' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
This page shows how PySimpleGUI can be used to duplicate (or nearly duplicate) Visual Basic interfaces with ease.
|
||||
|
||||
This is the target program to duplicate
|
||||
|
||||
|
||||
|
||||
This short PySimpleGUI program is under 40 lines of code and implements the first row of controls. On Windows, the special characters (arrows) show up correctly. On Trinket they do not and will in fact give you an error if you click on one of these buttons.
|
||||
|
||||
This is how the program looks when run on Windows
|
||||
|
||||
|
||||
|
||||
VERY little time was spent creatring and even less time spent polishing it. Stuff doesn't line up perfectly, etc. Like any GUI, time needs to be spent making these kinds of fine adjustments. The point here was to show something representative quickly.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/e4cd64d5eb?start=result' width='100%' height='650' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
**A GUI front-end for a Battleship or Minesweeper game**
|
||||
|
||||
This is not a complete game but rather a GUI that's ready for you to add your game logic to it.
|
||||
|
||||
There are 3 versions of this code, each with different levels of use of list comprehensions.
|
||||
|
||||
This window is a grid of buttons with each key being the row and column of the button.
|
||||
|
||||
It takes in clicks and will randomly change the button color and text that was clicked to either an "M" for Missing or "H" for hit.
|
||||
|
||||
The idea here is to drop in the code for the hit/miss logic and call this code when a button is clicked.
|
||||
|
||||
The `layout` definition is unusual in this example compared to other PySimpleGUI programs. Normally the layout is done all at one time, in a single statement `layout = [[.....]]`. This code uses a "contactenated layout" because the buttons are created using a list comprehension.
|
||||
|
||||
Note that these programs are using the new expanded Look and Feel Themes released in version 4.6 of PySimpleGUI.
|
||||
|
||||
Screenshot from Windows:
|
||||
|
||||
|
||||
|
||||
**Implementation 1 - List Comprehension for Board**
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/288c9a4396?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
**Implementation 2 - List Comprehension for Board Rows**
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/bcbf86a590?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
||||
**Implementation 3 - No List Comprehension**
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/242e2828a4?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
**Conway's Game Of Life**
|
||||
|
||||
This demo is an adaptation of a text based Game of Life. The PySimpleGUI code was added to an existing engine. The GUI code is pretty well isolated, especially the board creation / setup code which is in a couple of class methods.
|
||||
|
||||
It demonstrates utilizing a `Graph` element to draw rectanges based on user mouse clicks. This kind of interface works well on both a traditional window + mouse setup or on a tablet's touchscreen.
|
||||
|
||||
This same code can be run on Android for example using PyDroid3.
|
||||
|
||||
The "Published" version of this code can be found here:
|
||||
https://pysimplegui.trinket.io/sites/conways-game-of-life
|
||||
|
||||
It's the same output but done in a full-window, without the code being shown.
|
||||
|
||||
<iframe src="https://trinket.io/embed/pygame/447e96f4d4" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
## Dice Roller
|
||||
|
||||
A classic beginner problem to solve.... simulate rolling some dice.
|
||||
|
||||
This little program allows you to choose the numer of sides on the dice and the number of dice to roll.
|
||||
|
||||
There's nothing really tricky about this program. The rolling and display of the results has been compressed down to a single line of code:
|
||||
```python
|
||||
window['-ROLLED-'].update(' '.join([str(random.randint(0, int(values['-DICE-'])-1)+1) for i in range(int(values['-NUM DICE-']))]))
|
||||
|
||||
```
|
||||
|
||||
A list comprehension is used to generate the list of dice results, combined into a single string and then output in the window.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/cc8f84f76b?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
The classic Minesweeper game!
|
||||
|
||||
The user interface requirements for Minesweeper are a little unusual compared to most GUIs. The use of the right mouse click to mark squares with flags is the most difficult part to implement in PySimpleGUI because right clicks are not normally passed along to the user.
|
||||
|
||||
The specific action needed is the ability to right click on a `Button` and receive an event. In version 4.11.0 of PySimpleGUI this capability was made easier with the addition of the `.bind` method for both Elements and Windows. It is what is used to "bind" the right mouse button click to a button.
|
||||
|
||||
This implementation is based on a post made here:
|
||||
|
||||
https://learnku.com/articles/37714
|
||||
|
||||
There are 3 noteable changes:
|
||||
|
||||
1. Button keys were made into tuples instead of strings
|
||||
2. Right mouse button clicks are received through `window.read()` calls instead of tkinter callbacks
|
||||
3. Graphic images were moved into the source code by using Base64 images
|
||||
|
||||
The posted code was written prior to the `bind` method being available.
|
||||
|
||||
Because Trinket's display size is so small, the board size is limited to a 10 x 8 board. Running on your local computer you'll want to change the display variables at the top to 24 x 14 and change the bombs from 10 to 80
|
||||
|
||||
On Windows the game looks really nice thanks to the author paying attention to the details and choosing nice graphics and by matching colors
|
||||
|
||||
|
||||
|
||||
To play this game in your browser using this Trinket, you'll probably want to play the "Published" version as it doesn't show the source code and provides a cleaner view of the application.
|
||||
|
||||
Here's the published version's linke:
|
||||
|
||||
https://pysimplegui.trinket.io/sites/minesweeper
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/6db8011bff?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
## Sudoku In a Line
|
||||
|
||||
This demo began as a demonstration of the many ways a Sudoku board could be created using PySimpleGUI. It ended up being more complete application. The "build-a-Sudoku-board" port of the code can be represented in a somewhat boring single line of code.
|
||||
|
||||
```python
|
||||
sg.Window('Sudoku',[[sg.Frame('',[[sg.I(random.randint(1,9), justification='r', size=(3,1),key=(frow*3+row,fcol*3+col)) for col in range(3)] for row in range(3)]) for fcol in range(3)] for frow in range(3)]+ [[sg.B('Exit')]]).read()
|
||||
```
|
||||
|
||||
This layout uses list comprehensions to create the classic Sudoku board that is 9 boxes each consisting of 9 numbers. The single line of code produces this window when run on Windows 10:
|
||||
|
||||
|
||||
|
||||
The board isn't a "valid" one. It's filled with random digits.
|
||||
|
||||
Building it out further required adding on a board generator and then a few fun features. The board generation was discovered by searching through GitHub. I finally settled on this elegantly simple implementaiton found in this GitHub Repository:
|
||||
|
||||
https://github.com/MorvanZhou/sudoku
|
||||
|
||||
A big thanks is thus owed to Morvan Zhou for creating these puzzles for our enjoyment.
|
||||
|
||||
You begin the game with a board much like this one:
|
||||
|
||||
|
||||
|
||||
You can check your progress at any point by clicking `Check`. This will color each cell depending on the status of the cell.
|
||||
|
||||
* If the answer is correct, the background will be white (or whatever is normal for the theme you're using)
|
||||
* If the answer is incorrect, the background color will turn red
|
||||
* If the answer is blank, the background will turn yellow
|
||||
|
||||
|
||||
|
||||
It makes it easy to see what you've won the game. There's also a popup that's displayed when you click `Check` and the board has been correctly solved. Click `Solve` and the answers are all filled in for you.
|
||||
|
||||
|
||||
|
||||
If you wish to start a new game click `New Game`. The "Mask Rate" determines what percentage of the cells are erased at the beginning.
|
||||
|
||||
If you wish to run this program using Trinket without the debugger, the "Published" version is here:
|
||||
|
||||
https://pysimplegui.trinket.io/sites/sudoku
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/bb346ef125?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
**Uno Card Game**
|
||||
|
||||
Demonstration of how to use a Graph Element to "draw images", in this case
|
||||
cards, so that they overlap.
|
||||
|
||||
The low resolution on Trinket resulted in the top and bottom being cropped
|
||||
from view. You can see enough to play and get an understanding one way of
|
||||
using PySimpleGUI buttons and the graph element to create a card came.
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/4f351525ea?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
# Wordle
|
||||
|
||||
A front-end for the popular Wordle game
|
||||
|
||||
You will need to add some additional code to hook up to a dictionary of words. This Trinket has the code to handle all of the user input & output. It takes in characters, converts to upper case, handles backspace key and enter key. It also color codes the submitted answer against the "Current word" (currently a single constant).
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/a047e5303f?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<iframe src="https://trinket.io/embed/pygame/9f838232bd" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
The beginnings of a Dashboard. Shows dummy data as a moving line graph, some Elements to gather input, a play and pause button.
|
||||
|
||||
This demo uses a construct named "User Defined Elements". These are functions that return an element and thus the function call can be made from inside of a layout. In the layout there 3 elements on a row that look like this:
|
||||
|
||||
`[ColumnParm('Model', 1, model_dict), ColumnParm('Parameter', 2, parm_dict),ColumnParm('Data Set', 3, data_set_dict), ],
|
||||
`
|
||||
|
||||
`ColumnParm` returns a `Frame` Element that has a number of radio buttons inside.
|
||||
|
||||
This link shows the program running on Trinket in "Published" mode:
|
||||
|
||||
https://pysimplegui.trinket.io/sites/quick-and-dirty-dashboard-for-reddit
|
||||
|
||||
|
||||
And as usual here is the code:
|
||||
|
||||
<iframe src="https://trinket.io/embed/pygame/3fed5650f4" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
### A Fourier Transform Graph
|
||||
|
||||
|
||||
|
||||
This compact and impressive Fourier Transform demo program was submitted by an innovative PySimpleGUI user named Jason Yang (https://github.com/jason990420). He's created a number of other amazing PySimpleGUI programs such as the solitaire and minesweeper games. Not only did he write this impressive demonstration, but he also figured out how to create line drawings in a highly efficient manner that resulted in a new Graph Element drawing primitve.
|
||||
|
||||
The underlying drawing primitive that makes it all possible is a new Graph Element method, `draw_lines`. If you want to run this code, you'll need to download the latesst version of PySimpleGUI from the PySimpleGUI GitHub (http://www.PySimpleGUI.com). The code will be released to PyPI soon as release 4.19.0. For nom you'll need to get it from GitHub as version 4.18.0.9.
|
||||
|
||||
When run on a desktop PC, the update is much smoother.
|
||||
|
||||
You can run the Trinket "published" version for a cleaner look here:
|
||||
|
||||
https://pysimplegui.trinket.io/sites/fouriergraph
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/e73472d2bc?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
## Graph Element - Bar Charts
|
||||
|
||||
Sometimes using Matplotlib is overkill.
|
||||
|
||||
Some graphing can be done trivially with PySimpleGUI. A **Bar Chart** in particular is *quite easy*.
|
||||
|
||||
The reason bar charts are simple and easy to make can be found by breaking down a bar chart. A bar chart is literally a series of rectangles.
|
||||
|
||||
## A 6-line Example
|
||||
|
||||
Here's an example with the minmum number of lines of code I could write and still have it be readable.
|
||||
|
||||
Each of the steps is 1 line of code except for the for-loop being 1 more
|
||||
1. Import PySimpleGUI
|
||||
2. Make the Window
|
||||
3. Loop through the data
|
||||
4. Draw a Bar
|
||||
5. Draw a label above it with the value of the data point
|
||||
6. Wait for window to be closed by user
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/73aab03d9a?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
## Drawing X and Y Axis
|
||||
|
||||
This example is a copy of a chart produced using Matplotlib.
|
||||
|
||||
The chart data is contained in 3 lists.
|
||||
|
||||
1. The X-Axis labels for each bar
|
||||
2. The color of each bar
|
||||
3. The Y-Value for each bar
|
||||
|
||||
This example is rather specific as the number of data points was known ahead of time as was the maximum Y value. A minumum amount of code enables you to see each component of the graph.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/ada96fdf1b?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
|
||||
## Another Example
|
||||
|
||||
This chart updates every time you click the button. The bar values are labeled as well with the label being at the top of each bar. This is just the starting point for you to jump from and modify.
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/966cc03477?start=result' width='100%' height='660' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
## Graph Element - Draw a square, drag it around
|
||||
|
||||
This program is meant to show just how simple the Graph element can be to work with. The code has been trimmed down to a base minimum.
|
||||
|
||||
The number of lines of code is 22 lines of actual program code, many of those are because of putting parameters on separate lines to make it easy for you to see them. It's 16 lines of code if you're counting "statements". The number isn't important. The simplicity is.
|
||||
|
||||
Like many Demo Programs, this was written to demonstrate a bug that was happening. Testing new features or replicating bugs have been an excellent genesis for many of the Demo Programs.
|
||||
|
||||
The high level summary of the code is:
|
||||
* Create the layout that is a single Graph Element of size 400 x 400 pixels
|
||||
* Make the window
|
||||
* Draw a square on the Graph Element
|
||||
* Event loop
|
||||
* `window.read()`
|
||||
* If the event is the Graph element's key, then it's a mouse click or drag event
|
||||
* Move the center of the square to where the mouse is located
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/bef90956a6?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
Dragging Stuff Around
|
||||
|
||||
This is where the Graph Element really begins to open up some powerful applications. In this short drawing we're creating a paint program where you can drag with your mouse to create shapes and move them around on the Graph surface.
|
||||
|
||||
Also demonstrated are the cursors that can be set. When moving things, the dursor is changed into a movement cursor.
|
||||
|
||||
To run the program without the code on the screen, use this link to get a much larger view:
|
||||
https://pysimplegui.trinket.io/sites/graph-drawing-and-dragging
|
||||
|
||||
Here's what it looks like on Windows
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/3dc5fee958?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
A line graph showing the values of the data points along the line.
|
||||
|
||||
The original source to this program can be found in this repository:
|
||||
https://github.com/okajun35/practice_pySimpleGUI/tree/master/chart
|
||||
|
||||
Thank you to the PySimpleGUI fans from "Start Python Club" for submitting.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/32186f2ea5?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
Using the Graph Element to make a line graph complete with X & Y axis labelled
|
||||
|
||||
On Windows the program looks like this:
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/ac825fc3a2?start=result' width='100%' height='650' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
## Utah Teapot - Using a `Graph` Element
|
||||
|
||||
https://en.wikipedia.org/wiki/Utah_teapot
|
||||
|
||||
To quote from the Wikipedia page:
|
||||
> The Utah teapot, or the Newell teapot, is a 3D test model that has become a
|
||||
> standard reference object and an in-joke within the computer graphics community.
|
||||
> "Using a teapot model is considered the 3D equivalent of a "Hello, World!" program"
|
||||
|
||||
This PySimpleGUI program originated from GitHub user [EdwardChamberlain](https://github.com/EdwardChamberlain/) who has given permission for it to be used here in the PySimpleGUI eCookbook. Thank you Edward!!
|
||||
|
||||
This is a link to the GitHub repo where you'll find the latest version of the project:
|
||||
[PySimpleGUI-3D-Viewer](https://github.com/EdwardChamberlain/PySimpleGUI-3D-Viewer)
|
||||
|
||||
You can rotate the object using the top-most slider labelled "R" or you can use your mouse to rotate it by dragging your mouse (hold the left mouse button while dragging) in the Graph area.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/5cb3229fe8?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
This demonstration shows how to use PySimpleGUI's Graph Element's drawing primitives to create a simple animation.
|
||||
|
||||
In this case a Bubble Sort and an Insert Sort are shown. Other sorting algorithms can be easily added. You can adjust the speed in realtime by using the slider.
|
||||
|
||||
This is how it looks on Windows:
|
||||
|
||||
|
||||
|
||||
Here on Trinket the animation may not be as smooth
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/91808cb432?start=result' width='100%' height='800' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
## Simple Window with Elements Centered
|
||||
|
||||
This little demo has several concepts that may be of help to you
|
||||
* The elements are all centered in the window
|
||||
* The graphics are base64 and contained in the .py file itself
|
||||
* It has an animation
|
||||
|
||||
|
||||
It looks like this running on Windows:
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/ee95a11842?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
## Collapsible Sections
|
||||
|
||||
Visible / Invisible settings on the plain tkinter based PySimpleGUI have been a real challenge. In release 4.28.0 a new function, `pin`, was added that will "pin" an element to a location in your layout. This will reserve the location for the element in the layout. Without it, the element will move when you make it inivisible and visible again.
|
||||
|
||||
There is a 1-pixel "penalty" of sorts when using this capability. A single pixel is needed to reserve and hold this spot, a small price to pay given what you can do with this new capability.
|
||||
|
||||
This demo shows how you can use this feature to make Column elements invisible as if a section of the window has been collapsed with the contents hidden.
|
||||
|
||||
Here is how the demo looks running on Windows
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/df2c15979e?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
## Fixed Size Columns - With `element_justification`
|
||||
|
||||
Generally speaking, PySimpleGUI likes it when you don't force sizes of things to be a specific number of pixels. Instead, it's suggested that you make things "float", to size themselves.
|
||||
|
||||
The `Column` element supports setting a specific size for the Column, however, the use of the paramter `element_justification` does not work on these fixed size Columns. Instead, another approach is needed.
|
||||
Two options are (there may be more of course):
|
||||
1. Use a `Frame` element
|
||||
2. Instead of `size` parameter, use a `Sizer` element
|
||||
|
||||
### The Frame Solution
|
||||
|
||||
The easiest approach is to use a `Frame` element instead of a `Column`. If using a `Frame` element, then setting a fixed size works with the `element_justification` parameter.
|
||||
|
||||
In order to get the vertical alignment the easiest solution is to use the `VPush` element above and below the layout. This will "push" from the top and the bottom with the result being that the layout is centered vertically.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/e240ba6e38?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
||||
### The Column Solution
|
||||
|
||||
The way to get both a fixed size Column and have the interrior be able to be justified is to use a little-known "helper element" called `Sizer`. This element simply adds space in horizontal and veritcal directions. The implementation of it is that it's simply a Column with padding added.
|
||||
|
||||
To help you use these, this demo was created. It makes a "User Defined Element" (a function that looks like an element and can be used in layouts) that acts like a Column that enables you to have both a size and an element_justification parameter.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/f38bc15b69?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
## `Push` and `VPush` Elements For Justification
|
||||
|
||||
The aliases `Push` and `VPush` are aliases for `Stretch` and `VStretch`. `Stetch`, `VStretch`, and `Push` was in the 4.48.0 release. `VPush` will be in the 4.49.0 release.
|
||||
|
||||
There are a couple of new Elements that help with layout justification (functions that act like elements to be precise).
|
||||
|
||||
`Push` will push elements in a row away from it. If you have a row with a `Push` element on the left, then it will push the elements to the right of it to the right. If you have one on each end of a row, then the result will be the elements between them will be centered.
|
||||
|
||||
`VPush` pushes rows of elements vertically in the same fashion that the `Push` does horizontally. Place a `VPush` on the first row and it will push the other rows to the very bottom of the container (e.g. window).
|
||||
|
||||
This example centers a couple of elements in the middle of the window by surrounding them by `Push` and `VPush` elements.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/752555630c?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
**(Simulated) Swapping of Entire Window Contents**
|
||||
|
||||
While it's not possible to make layouts that are truly dynamic in PySimpleGUI, you can make things appear they do.
|
||||
|
||||
In this demo the goal is to swap out the entire window, except for the bottom row of buttons, with a completely different "layout".
|
||||
|
||||
The way this is accomplished is to create multiple `Column` Elements that are all hidden except for the currently visible one.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/90e0dd133c?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
**Generated Layouts - To Do List Program**
|
||||
|
||||
|
||||
|
||||
This program demonstrates how you can a Python "List Comprehension" to create
|
||||
a GUI layout. The layout is created in 3 steps.
|
||||
1. A title line
|
||||
2. The list of checkboxes and descriptions
|
||||
3. The buttons
|
||||
|
||||
That is the layout that these 3 lines of code create
|
||||
|
||||
```python
|
||||
layout = [[Text('My To Do List', font='Helvetica 15')]]
|
||||
layout += [[Text(f'{i}. '), CBox('', key=f'-CB{i}-'), Input(k=f'-IN{i}-')] for i in range(1,6)]
|
||||
layout += [[Button('Save'), Button('Load'), Button('Exit')]]
|
||||
```
|
||||
|
||||
This program is a little different in that it imports the individual objects
|
||||
being used. Typically the import you'll find in most PySimpleGUI programs is
|
||||
|
||||
```python
|
||||
import PySimpleGUI as sg
|
||||
```
|
||||
|
||||
The result of importing each object is that you do not need the `sg.` before each function call, thus making the code even more compact. The layout looks cleaner as well.
|
||||
|
||||
However, there are a few drawbacks. One is being able to easily spot calls to the PySimpleGUI package. Another is code completion. If you type `sg.` (control+SPACE) in an IDE, it will show you a list of choices from the PySimpleGUI pacakge that are available to you.
|
||||
|
||||
It's being presented simply as another way of doing things. You'll find the other demos use
|
||||
|
||||
```python
|
||||
import PySimpleGUI as sg
|
||||
```
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/45e4bb64b8?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
---
|
||||
|
||||
**To Do List using "normal" import (`import PySimpleGUI as sg`)**
|
||||
|
||||
In this version, the typical import statement is used. The program is identical to the one above, but you'll notice that each element and PySimpleGUI object now has `sg.` in front of it. Nearly all demo programs use this import convention and users have adopted it as well. It's a standard of sorts at this point.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/3be33cd9ee?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<iframe src="https://trinket.io/embed/pygame/aef3bd845c" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
**Browse Matplot Examples - Click on list, See the Plot**
|
||||
|
||||
This Demo Program was adapted to run on Trinket by shrinking down the size of the display window from 650,650 to 500,500. Shrinking the area makes the plots look a little crowded.
|
||||
|
||||
These screenshots are from Windows. Click on the list on the left to view a plot.
|
||||
|
||||
|
||||
|
||||
Slide up the "pane" on the bottom to reveal the source code for the plot you're viewing.
|
||||
|
||||
|
||||
|
||||
Your application doesn't have to be this fancy. You could display your raw data in the hidden pane so that you can slide it up and view the underlying data.
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/5585dc51c4?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
This demo program shows how to create a single Matplotlib graph and show it in a GUI window.
|
||||
|
||||
Note the it lacks an "Event Loop".
|
||||
Normally instead of:
|
||||
|
||||
```python
|
||||
event, values = window.read()
|
||||
```
|
||||
|
||||
You would see an event loop:
|
||||
```python
|
||||
while True:
|
||||
event, values = window.read()
|
||||
if event is None:
|
||||
break
|
||||
```
|
||||
|
||||
If you wanted to show multiple graphs or have other GUI elements, then you would replace that line of code with the event loop above and you'll have a "Normal" PySimpleGUI window.
|
||||
|
||||
<iframe src="https://trinket.io/embed/pygame/4602ef03b1" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
## Single Matplotlib Plot
|
||||
|
||||
This is your basic simple Matplotlib example
|
||||
|
||||
What's nice about this demo is that it shows all of the parts required and each section is tiny
|
||||
|
||||
You will paste your Matplotlib code at the top. The important thing to do is leave your drawing in a variable named `fig`
|
||||
|
||||
There is a "helper" function in the middle.
|
||||
|
||||
The bottom portion of the file is your GUI. There is only 1 line of code needed to take your Matplotlib drawing and place it into your GUI window. It is the call to `draw_figure`.
|
||||
|
||||
This is how your window looks on Windows:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/4c1ecb316a?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
## Desektop Widget - Launcher Bar
|
||||
|
||||
### Trivial Operations - Changing layouts
|
||||
|
||||
This demo has a nice little "minimize" feature. You click on a downarrow and the entire interface will "minimize" down into a single image.
|
||||
|
||||
Here is the code that does those minimize and restore operations:
|
||||
|
||||
|
||||
```python
|
||||
elif event == sg.SYMBOL_DOWN_ARROWHEAD:
|
||||
window['-BUTTON COL-'].update(visible=False)
|
||||
window['-MINIMIZED COL-'].update(visible=True)
|
||||
elif event == '-MINIMIZED IMAGE-':
|
||||
window['-BUTTON COL-'].update(visible=True)
|
||||
window['-MINIMIZED COL-'].update(visible=False)
|
||||
```
|
||||
|
||||
If you're minimizing, then you want to hide the buttons and show the image. If you're restoring, then you're hiding the image and showing the panel of buttons.
|
||||
|
||||
A simple thing to describe means less code for you and less complexity too.
|
||||
|
||||
### The Button Bar
|
||||
|
||||
Add a floating bar that enables easy launching of all programs on your system. Or launch your Python program or anything you want because you're a Python programmer.
|
||||
|
||||
This is a copy of the Demo Program you'll find on the PySimpleGUI Repo:
|
||||
|
||||
https://github.com/PySimpleGUI/PySimpleGUI/blob/master/DemoPrograms/Demo_Desktop_Widget_Launcher_Bar.py
|
||||
|
||||
It's a simple "launcher" application that you can run, move anywhere you want, and it'll return there next time you run it.
|
||||
|
||||
Add your own buttons, images, etc, to launch your favorite programs, Python code, or call functions. Anything's possible when you write your own utilities
|
||||
|
||||
|
||||
|
||||
For this Trinket, I matched the background color and used the settings feature to set it. This is why you will see a JSON file with the Trinket.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/2593918099?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
## Using a Thread to complete a long task
|
||||
|
||||
The demo shows you how to use a thread to perform an operation that takes a long time to complete. Normally if you attempt to do these operations in your GUI code, it will cause your GUI to appear to have stopped.
|
||||
|
||||
This examples relies on global variables for the handshake between the GUI and the worker thread. Other demos you'll find here use Queues to communicate. This demo is meant to be very simple so that you do not need to use a Queue.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/a656aafde4?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
### Using a Thread and a Queue To Accomplish Long Tasks
|
||||
|
||||
Queues are a great way for threads to communicate. In this demo program we have a single long-operation that needs to be run. You'll find a function named `long_function_wrapper` where is where you will place your code that takes a long time to execute.
|
||||
|
||||
When this function completes running, it sends a message to a Queue which is monitored by the main GUI thread.
|
||||
|
||||
The GUI enables you to run more than 1 of these long-running tasks if you want. It keeps track of how many have been requested and tracks when each completes executing.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/0a48f0afe8?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
### Multiple Background Threads Outputting Results in GUI
|
||||
|
||||
Sometimes you have situations where you have persistent threads that run constantly in the background. These threads may need to output information to your GUI. Becuase you cannot directly call PySimpleGUI (tkinter) from another Thread, a communication mechanism is needed for the threads to communicate with the main GUI thread.
|
||||
|
||||
This communication is often in the form of a queue. This demo program runs 3 threads. Each update their status in the GUI by sending a message to a queue that the GUI is monitoring.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/a92c0346e2?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
## Example using `Window.write_event_value`
|
||||
|
||||
In July 2020 an important upgrade was added to the multithreaded capabilities of PySimpleGUI. Gone are the requirements to poll for incoming messages from threads. Now "events" from threads are received through the normal event loop.
|
||||
|
||||
The technique has several benefits including:
|
||||
|
||||
1. Efficiency - Polling is inefficient. Removing the polling added back a lot of CPI time
|
||||
2. Simplicity - Communicating between a window and a thread is a single function call, `Window.write_event_value`
|
||||
3. Encapsulation - The actual communication between the thread and the user's application is encapsulated within PySimpleGUI itself using a `queue.Queue` object.
|
||||
|
||||
This specific demo shows a couple of newer features in addition to the `write_event_value` call. It also shows how the routing of `cprint` calls can be accomplished by the `Multiline` definition itself.
|
||||
|
||||
### Communicating Between Thread and Event Loop
|
||||
|
||||
The most important line of code in this entire program is this one:
|
||||
|
||||
```python
|
||||
window.write_event_value('-THREAD-', (threading.current_thread().name, i))
|
||||
```
|
||||
|
||||
This call will cause an event to be generated and is read in the event loop when the main program calls `window.read()`.
|
||||
|
||||
In this example, the event that will be generated is `'-THREAD-'`
|
||||
The values dictionary will also have an entry associated with that "key". In this call we passed a tuple with the values:
|
||||
```python
|
||||
(threading.current_thread().name, i)
|
||||
```
|
||||
|
||||
The first entry in the tuple is the name that Python assigned the thread. The second part of the tuple is a counter. You will see these values in the output window in red.
|
||||
|
||||
|
||||
### Screenshot on Windows
|
||||
|
||||
On windows, the output looks something like this:
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/f1e7022af2?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
## Easing into threading
|
||||
|
||||
I'm assuming you're on this page because you've learned something new.... that calling a lengthy function from a GUI is not a straightforward operation if you want a good user experience.
|
||||
|
||||
At some point in your GUI programming you're likely to run into this common, but distressing, problem of dealing with lengthy operations in a way that feels good to the user.
|
||||
|
||||
The PySimpleGUI Cookbook doing into this in much more detail in this section about multi-threading:
|
||||
|
||||
https://pysimplegui.readthedocs.io/en/latest/cookbook/#recipe-long-operations-multi-threading
|
||||
|
||||
### Threading with some help...
|
||||
|
||||
To get you over the initial hump of multi-threaded programming, you can let PySimpleGUI create and manage threads for you. Like other APIs in PySimpleGUI, it's been simplified down as far as possible.
|
||||
|
||||
Here's the basic steps using `perform_long_operation`:
|
||||
|
||||
1. Pass your function name and a key to the call to `window.perform_long_operation`
|
||||
2. Continue running your GUI event loop
|
||||
3. Windows pend using their typical `window.read()` call
|
||||
4. You will get the event when your function returns
|
||||
5. The values dictionary will contain your function's return value. They key will be the same as the event. So, `values[event]` is your function's return value.
|
||||
|
||||
### Detailed Example
|
||||
|
||||
In this example, your long operation takes a full 15 seconds.... an eternity when you're waiting with a GUI that is not operating during that timeframe.
|
||||
|
||||
In this Trinket you're given 2 basic ways of performing your long operations:
|
||||
1. "Go" Button - This will directly call your function
|
||||
2. "Threaded" Button - This will use a thread to make the call
|
||||
|
||||
Use the "Dummy" button to generate events to see if a window is responding to your clicks and typing. Try moving the window as well. You won't be able to when directly calling the function here on Trinket. You'll be able to on Windows, Linux, Mac, but not here on Trinket because of how titlebars are implemented. The details aren't important. What's important is that your window is not happy when you directly call your function.
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/9b3a04320d?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
**Running Multiple Windows in PySimpleGUI**
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/9f702879de?start=result' width='100%' height='400' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
## "Read All Windows" - The easist multi-window approach
|
||||
|
||||
Beginning in release 4.27.4 / 4.28.0 you'll find a new function `read_all_windows`. This function makes it possible to run multiple windows simultaneously without the requirement of running them with a timeout of the read call.
|
||||
|
||||
The concept / function is simple. Instead of reading a window and getting back the event and values for that window, you call `read_all_windows` and get back the window, event, and values for the window that caused the event.
|
||||
|
||||
This architecture makes the transition from a single to multiple windows much easier as the event loop remains exactly the same what you're used to for a single window.
|
||||
|
||||
The demo program shows 2 windows that are both "live". Each window is capable of modifying the other. There is no timeout call made on the read, but the capability is there should you wish it put a timeout on the read all windows call.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/1063a8ff1e?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
## Multiple Windows - Re-open Capability
|
||||
|
||||
This demo uses the `read_all_windows` function (avilable only on the tkinter port currently)
|
||||
|
||||
Each window has the ability to update the other. Additionally, Window 1 has a button to re-open Window 2 should you close Window 2.
|
||||
|
||||
Here is how the program looks on Windows
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/a14c1b2d78?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
## Comparing PySimpleGUI with tkinter
|
||||
|
||||
These are a fun exercise to go through... compare a tkinter solution to a problem with a PySimpleGUI solution. I like doing them because I'm basically copying an image of a window. It's easier to work on a problem when an image of the solution is provided.
|
||||
|
||||
A number of sites have excellent problems for Python programmers to work through. Creating is how programming is learned. Project-based learning is perhaps the best way to learn to program because you're directly applying what you've learned and often you're adding something new to your knowledge as well.
|
||||
|
||||
This problem is from the GeekforGeeks website.
|
||||
|
||||
https://www.geeksforgeeks.org/python-mcq-quiz-game-using-tkinter/
|
||||
|
||||
|
||||
|
||||
As explained on the website, the data for the quiz is located in file named data.json.
|
||||
|
||||
### The PySimpleGUI Solution
|
||||
|
||||
Because I wanted to duplicate the window exactly, the normal PySimpleGUI themes were bypassed and the default gray was used.
|
||||
|
||||
The only part of the window that's been hard coded is the width of the title across the top. This was made extra wide to match the tkinter solution's hard coded window size. Rather than hard coding the entire window size, the preferred PySimpleGUI technique is to allow PySimpleGUI to fit the window to the content's size. If you want a larger window, then the best way to do that is to make the contents bigger.
|
||||
|
||||
For spacing, the pad parameter could have been used, but to keep the program simple, I decided to simply add a Text element with spaces onto rows. It's more readable for the user and has no actual downside.
|
||||
|
||||
The code is significantly shorter... The actual lines of code is 35. The tkinter version has 75. Some of this is due to the json package being wrapped by PySimpleGUI in the UserSettings API. There is a lot of whitespace in the tkinter version, so counting lines in the file is definitately not fair as the tkinter version is 219 lines and the PySimpleGUI version is 47 lines.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/a25af2eede?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
### The tkinter Solution
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/3052272fae?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
## Mono-Spaced Fonts
|
||||
|
||||
Let's start tables using text.
|
||||
|
||||
One common problem when working with text and tables is how to get columns to align properly. Most fonts, including the default font, are variable spaced.... each character is a slightly different width than others.
|
||||
|
||||
Here's an example using the font used on this webpage. Each of these rows of character are 10 chars long. But, they are clearly different lengths.
|
||||
|
||||
|
||||
1234567890
|
||||
aaaaaaaaaa
|
||||
iiiiiiiiii
|
||||
|
||||
|
||||
What to do? Entry our friend the mono-spaced font where each character takes up the exact same width as all the other characters. The most common of these mono-spaced fonts is "Courier". These same rows of characters, when formatted using a Courier font have the same length:
|
||||
|
||||
```
|
||||
1234567890
|
||||
aaaaaaaaaa
|
||||
iiiiiiiiii
|
||||
```
|
||||
|
||||
Now let's try this out in a PySimpleGUI program.
|
||||
|
||||
This program presents a table in a Multiline element using a default font, which will have variable spaces. As you will initially see, the table is a mess. But, by changing the font of the Multiline to a Courier font, the table become tidy and clear.
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/192aeae1a7?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
A "Mini-Excel" Table
|
||||
|
||||
Can be used to:
|
||||
* Display numeric data
|
||||
* Use arrow keys to move around the table
|
||||
* Click on a header to sort table using that column (Column header will be bolded)
|
||||
|
||||
On a Windows machine, the window appears like this:
|
||||
|
||||
|
||||
|
||||
Clicking on one of the Column Headers (A - F) will cause the entire table to be sorted using that column as the key
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/8c28a62cec?start=result' width='100%' height='650' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
|
||||
"Simulated" Tables - Tables that are constructred using other Elements than the Table Element
|
||||
|
||||
In this case it's simply some Text and InputText Elements combined.
|
||||
|
||||
Here is what the window looks like on Windows
|
||||
|
||||
|
||||
|
||||
|
||||
This is a subset of the larger Table Simulation program that you'll also find on Trinket. This smaller demo shows a table and enables moving around with arrow keys.
|
||||
|
||||
The larger demo includes the ability to sort columns. The reason for 2 demos.... make one that's smaller in case that's what you need. It removes the need for you to strip out unwanted code and you can instead begin to add your code to this smaller base of code.
|
||||
|
||||
|
||||
<iframe src='https://trinket.io/embed/pygame/cbb302bd6a?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
# Table Element
|
||||
|
||||
## Click Events
|
||||
|
||||
In relerase 4.48.0 a new parameter was added for all those Table Element fans out there.
|
||||
|
||||
The boolean parameter `enable_click_events` in the Table element enables clicks of individual cells and the table headers to be detected and returned to you. This is exactly what's needed if you want to sort your table by columns for example.
|
||||
|
||||
This example code can also be found in the Demo Programs section on the PySimpleGUI GitHub at http://demos.PySimpleGUI.org
|
||||
|
||||
The Demo Program is named `Demo_Table_Element_Header_or_Cell_Clicks.py`
|
||||
|
||||
Here's the demo code ready for you to run. Try clicking on the Column Headers to sort by that column.
|
||||
|
||||
500
|
||||
<iframe src='https://trinket.io/embed/pygame/baca37f8b2?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue