Test eCookbook Integration
This commit is contained in:
parent
43ea63bb7c
commit
05fd8ca891
109 changed files with 2092 additions and 0 deletions
21
docs/eCookbook/examples-for-reddit-posts/1-4-24-dice-game.md
Normal file
21
docs/eCookbook/examples-for-reddit-posts/1-4-24-dice-game.md
Normal file
|
@ -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>
|
24
docs/eCookbook/examples-for-reddit-posts/calculator.md
Normal file
24
docs/eCookbook/examples-for-reddit-posts/calculator.md
Normal file
|
@ -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>
|
19
docs/eCookbook/examples-for-reddit-posts/coin-calculator.md
Normal file
19
docs/eCookbook/examples-for-reddit-posts/coin-calculator.md
Normal file
|
@ -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>
|
11
docs/eCookbook/examples-for-reddit-posts/countdown-timer.md
Normal file
11
docs/eCookbook/examples-for-reddit-posts/countdown-timer.md
Normal file
|
@ -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>
|
9
docs/eCookbook/examples-for-reddit-posts/fade-window.md
Normal file
9
docs/eCookbook/examples-for-reddit-posts/fade-window.md
Normal file
|
@ -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>
|
||||
|
7
docs/eCookbook/examples-for-reddit-posts/login.md
Normal file
7
docs/eCookbook/examples-for-reddit-posts/login.md
Normal file
|
@ -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>
|
13
docs/eCookbook/examples-for-reddit-posts/navigating-focus.md
Normal file
13
docs/eCookbook/examples-for-reddit-posts/navigating-focus.md
Normal file
|
@ -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>
|
21
docs/eCookbook/examples-for-reddit-posts/reddit-scraper.md
Normal file
21
docs/eCookbook/examples-for-reddit-posts/reddit-scraper.md
Normal file
|
@ -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>
|
16
docs/eCookbook/examples-for-reddit-posts/text-adventure.md
Normal file
16
docs/eCookbook/examples-for-reddit-posts/text-adventure.md
Normal file
|
@ -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>
|
37
docs/eCookbook/examples-for-reddit-posts/tic-tac-toe.md
Normal file
37
docs/eCookbook/examples-for-reddit-posts/tic-tac-toe.md
Normal file
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue