PySimpleGUI 2020 – Part 3: Creating Your First Window! (A Must-Watch Tutorial)

Posted by


Welcome to Part 3 of the PySimpleGUI 2020 tutorial series! In this tutorial, we will walk you through creating your first window using PySimpleGUI. This is an exciting moment as you begin to see your code come to life in the form of a graphical user interface (GUI). Let’s dive right in!

Step 1: Install PySimpleGUI
Before we begin, make sure you have PySimpleGUI installed on your machine. You can install it using pip by running the following command in your terminal or command prompt:

pip install PySimpleGUI

Step 2: Import PySimpleGUI
To start using PySimpleGUI, you need to import it in your Python script. Add the following line of code at the top of your script:

import PySimpleGUI as sg

Step 3: Define the Layout
Next, you will define the layout of your window. The layout is essentially the structure and content of your GUI. PySimpleGUI uses a simple and intuitive syntax for defining layouts. Here is an example layout for a simple window with a text input field and a submit button:

layout = [
    [sg.Text("Enter your name:")],
    [sg.InputText()],
    [sg.Button("Submit")]
]

In this layout, we have a Text element that displays the message "Enter your name:", an InputText element for the user to input their name, and a Button element with the text "Submit".

Step 4: Create the Window
Now that you have defined the layout, you can create a window using the sg.Window method. This method takes two arguments – the title of the window and the layout you defined earlier. Here is an example code snippet that creates a window with the layout defined above:

window = sg.Window("My First Window", layout)

Step 5: Read Events
After creating the window, you can start reading events from it. Events are actions performed by the user, such as clicking a button or typing in an input field. You can read events using a while loop and the read method of the window object. Here is a code snippet that reads events from the window:

while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED:
        break
    if event == "Submit":
        name = values[0]
        sg.popup("Hello, " + name + "!")

In this code snippet, we loop indefinitely and wait for events from the window. If the user closes the window, we break out of the loop. If the user clicks the "Submit" button, we retrieve the value entered in the input field and display a popup greeting message using the sg.popup method.

Step 6: Close the Window
Once you are done with the window, make sure to close it to free up system resources. You can close the window by calling the close method on the window object. Here is the code snippet to close the window:

window.close()

Congratulations! You have successfully created your first window using PySimpleGUI. Experiment with different layouts and elements to create more complex and interactive GUIs. Stay tuned for the next part of this tutorial series where we will explore more advanced features of PySimpleGUI. Happy coding!

0 0 votes
Article Rating
11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@First.nameLastname
1 month ago

11:36 Just say 'shitload" when you want to

@royaltyfreebeats6415
1 month ago

pure magic!

@thalisapostolatos3428
1 month ago

Hey I've got a question:
Can you make the window resizable and also how can you change the size of a window(bcuz the default size is kinda small:))

@sheikhakbar2067
1 month ago

I like the idea of the layout being made just like a list of lists in python – very organic and makes perfect sense for those who know basic python. pysimpleGUI will be a game-changer once we are able to create smartphone apps with it!

@akbarghurbal
1 month ago

If only other python GUI frameworks had this amount of documentation; despite being present for so long! pysimpleGUI is the framework to go to for desktop python apps. I hope very soon we see it used in making GUI for android apps.

@anders6671
1 month ago

"The time is one o'clock" at 38:05 scared the sh*t out of me lmao.

Great tutorial!

@etrieusvet2070
1 month ago

i have a question about pad=
so mine is just pad=(10, 20)
and it went 10 pixels to the right and 20 pixels to the bottom
how do I position my button on top?
since typing a negative value thinking it would do the opposite just gave me an error

@jorgegil13283
1 month ago

Hi super Mike! I was wondering whther once I upload my project on github,you will be able to put your suggestions on it

@pfever
1 month ago

Reminds me a lot how CSS properties work and the CSS grid 🙂

@inarisound
1 month ago

Hi Mike, you've created one of the best GUI packages out there… it pains me to see how this project would be overlooked/not gain as much traction as it could potentially get.
While most of the packages 'under document' their creations your creation, that should be (and is!) simple enough to comprehend, is 'over document' itself.

To be absolutely clear… you are beating over the bush so much that it will draw most novice developers away.
Starting from your documentation page… it is a wall of text that is extremely hard to comprehend on itself, on top of that you repeat yourself so much about 'good practices ' that has nothing to do with your creation. So essentially you spend all the reader's first impression(retention) of your product by giving one simple example….and then speaking about ANYTHING, other than main thing – functionality.
Every time by giving advice on 'How to code' and 'How to post your requests on github' or 'how this package is different than other similar projects' you are creating distance between reader and your awesome work.

While I'm myself an avid 'Ctrl + F user' still it was very frustrating for me to read documentation in it's current form. Wall of text gets your attention away form important bullet points. Keeping everything in one page is just impractical, like you preaching not to separate attributes in order to keep everything neat and tidy… keeping documentation in one page is like squeezing all your code into one line, just for the sake of it. Would you like to scroll left/wright to understand what program is doing? I think not…. that is literary what is going on with documentation page right now.
 
You mentioned 'Pythonic way' a lot in your documentation yet documentation itself dose not follow good practices of Python documentation, take a look how they handle index page and sections short and tidy https://docs.python.org/3/tutorial/index.html , if you click on any of the sections you would see how there is nothing but what is relevant to this section, this keeps reader focused on subject he/she is interested in. Same goes to the Index, on the left side it shows only paragraphs that are relevant to the subject that user is reading.

Same goes with videos, you are not showcasing your library as much… but spend so much time on how it is different form others.
People will see that it's different, there is no need to explain and compare other libraries, believe me most people coming from the verge of frustration, like the one that you had/have with creating too many classes and just want to solve simple problems quick.

Concise takeaway from this long post is:

Rework documentation:
1) Remove or move to the bottom everything that dose not represent/showcase your YOUR product ('programming practices', 'your frustrations with other programmers/products','history of development of the project')
2) Make index bar( that is on the right side) collapsible by default, so main topics could be found at a glance without scrolling the index bar
3) Keep topics in separate pages (so if I go on 'The Quick Tour' it would only show that page).

Rework your Youtube videos:
1) Remove videos that are outdated or repetitions on the subject
2) Keep it short OR slice it into subjects.

______________________________
When I went to the Documentation page and this youtube channel I was looking for this information:

1) How to link Elements to functions
2) What Elements are available and how to call them
3) How to change placement (leftrightcentertopbottom) of elements
^ these things should be explained *first* everything else is **not simple**.

"Less is more" – it's really strange for me to tell that to the developer that created one of the best GUI libraries that is based on that principle.
I really hope you will spend some time to rework your resources because newbies will be lost in the information stream and pros will not bother.
sincerely yours,
inarisound

@drainis
1 month ago

Hell yeah, thank you man