PyQt5: The Python GUI framework

1. Welcome to this course! : Hello there, guys. My name is Alex and welcome to this PKD five Tutorial. I am a currently employed software engineer that is fluent in various programming languages, including Python and this PkDFiveFramework, and I have done various projects in this actual environment. In this tutorial, I will show you how to learn and also get the most out of PCT five. This class is created for any programmer that is curious on how he can improve its Python graphic user interface, and no prior experience is required in order for you to take this class. If you're wondering what PICT five is, it is that lets you use the QT GUI framework from Python. So QT itself is written in C plus plus. By using it from Python, you can build applications much more quickly while not sacrificing much of the speed of C plus plus. Pi QT five refers to the most recent version that is five of QT from Python. You may still find the occasional mention of i on the web, but it is all the no longer supported as a version four. Now, an interesting new competitor to PCT is QT for Python, and the TPA is virtually identical. About this course this project, the project class would be to recreate a new I that I will attach with a photo using Python and Pi QT five, and all of these notions will be teached during this course. It will have a few widgets, and it will look very intuitively for a new user. If all of this sounds interesting to you, I look forward to seeing you guys in our first lecture. 2. How to install PyQt5?: For this first tutorial, I'm just going to quickly show you how you can set up and install the cell Piketty five on your local machine. So first of all, you need to, as prerequisites to have it installed, the Python and the beep. So you can, if you're on Windows, open your CMD app and just write Python. And if you have Python installed, it should read direct you to the Python command prompt where you can write stuff like two plus two plus two n. Eat the will, of course, compile it for you. But if you don't not see by pantry that nine times whatever version you might have on your machine when you write pipeline. And instead of death, you see that Python is not a program. Dante's recognize them decent machine. Well, then it means you have to first install Python, and then of course beep. But B becomes installed along with Python if you follow the procedure that die, I'm about to mention. So first of all, are going to quit Python script and second default, once you want to do a few things you've done to have it installed on the honoring those 10. This cmd prompt, it will automatically open for you and Microsoft Store page where you can download to Python 3.9, which is the latest version for free of course, and it will automatically install the two from there. So if you go to the Microsoft Store, it will automatically read the right you to this page right here. And you can install it from here and we'll automatically, as I've said, also install Python, also install pip and also add to path, the Python command. To Tibet means that basically when installing Python, between position i at the default bath that's in your app data, the binary for your Python. So Python dot EXE, that's an executable. And we'll map that executable to your CMD. So we'd know stipulating apart from like these, to run that executable from debt. And basically just try and Python code cell. Along with installing these bytecode debt, we're going to consciously made the 31 to do any coding, the GUI, that's called bucket the five. We are going to also need to install beep because we are going to install Piketty 5. Okay, and as I mentioned, beep should be already installed it at this point if you installed Python from Windows, but if he's not, you can just install it from the CMB ds. Well, so once you have it installed, when you should, when you write, you should have something like this. So a bunch of data and comments in general options that are going to furthermore show you how can you use the zip command. But for installing Packet D35, I'm going to, first of all right, installed by Qc D5. Like this. Can then hit Enter is I didn't have that. I haven't installed the ti's going to install the account by machine as we speak. So you can take these as reference. So you can see on your machine it looks just the same as this. It also gives me a warning to they don't have the latest version that does that trading mentor, because before that it says successfully installed by 25. And the non debt. You can also go rely bike you D5. These are some other stuff flow from Piketty fact that we are going to need when creating color, fairly simple GUIs. And of course, we are going to need those. S will sell them. Now that everything is installed. We are pretty much ready to kill interest. Writing bypass creams, B2, D5 code. If the re-import them, of course, F3 import the package. We'd like you to pick five. Pretty much where I'm running. Python code. We might read must have. Here you're already at the pair of GUIs are favorable for us. Interim. Yep. This is dumb. I set up art, so to speak. In the next lecture, I'm going to quickly show you how you can make go your first GUI that's very simple and very intuitive. So thank you guys for following this setup tutorial to the end and look forward to seeing you guys in the next one. 3. Hello world form!: Hello guys and welcome back to the spike. If the 5 tutorial. Summing this lecture, I'm going to very quickly show you how you can write the Python code for your very first Python GUI that you wrote yourself. So what I did here was basically, I opened by official Studio Code editor that you can download from Google. And of course, just opened a new window safety tundra GUI that buys so the system knows that it's a Python script. And then I start by importing the QT GUI and keep the widgets modules. Draw by cute D5 package that I just showed you how to install in the last lecture. And after debt importing that idea from line 21 to four, as you can see the screen before you, I declare the function that I called window. And what this function does, it firstly creates an application object of the Q application class and gives it the parameters seeds.rb, EC50, and the DCS basically be application. It is going to be shown at the dead. I declared a widget object that creates a top level window, sill one. As you can see, this is the case with the KE Omega window, which I declared as a variable. And I also added a queue label. It may be you set the text for these, be labeled to be hello world. And I moved it from the left most, the corner to a 50 and 20 pixels. And after, of course, also set the window title of these application to bike it the five. So like here, it would be this one. Well hm, the title would be GUI dot py Visual Studio Code in my application will be packet the five in the upper left corner, as we will see in a few minutes to run, I would run that application. And then you set some geometry for this window. What these coordinates actually do, the first two cards in it from the leftmost corner. So it is going to instantiate the 500 pixels down in 500 pixels to the left. And then the next two. It's the size of the window, so it's going to be 200 pixels wide and 200 pixels high. And yeah, after all this, so after creating the window and examining it ties in a position declaring its title, and also declaring the label within it that we declared also, it's positioned and it Cleaning fixed. We aren't going to call the show function on this window that we just declared. And then we're going to execute with the app.use function. And the after all these method is written, you need to also call the theme noise. Therefore, you were GUI to open up when running this code cell. Well, running it, it's basically just died currently doing any other Python script. So we can't go to a terminal. And then C, D, two that, that you were scraped. My case, Desktop. And then you can say python. And then the name of your script, which is GUI dot py. And when clicking Enter you can see that it worked. Sell on my heel application needs 55 treat of pixels down in 500 pixels to the right. The title of the application is by Kupiec five. And we also have the labor lean meat that has the Hello World text in it. And as you can see, we have our first GUI wrote in Python, width and not so much effort. You can also resize it, make it big, small, big to the taskbar and also of course close it. And when closing it, it will automatically stop the application from writing. So I think about it for our first basic tutorial on bracket 25 and your first GUI. So by now, you might have a pretty good IPO and how this works. So in the basics and how to install the 10th. Just to write your first GUI. Now, in the next lecture is we're going to get in more depth on some specific features that these back each of the GUI framework code by 25 has for you cellular by the end of this course you will p equal to, well, right? You are very own useful GUIs that you might use for your Windows application and the script that contains the GUI I0 from cross-platform. So you can use them on Android or Microsoft or things like that. Thank you guys for following this tutorial, and I will see you next one. 4. Qt Designer Overview: Hello guys and welcome back to Lecture 1 pi to 35. The Python framework that allows us to make graphic user interfaces with relative ease. In this lecture, we are going to discuss a bit about the QT consign there. First of all, I'm going to start with the bath where you can find these QT designer. So in my case on my Windows machine, there keep the peace sign or dot EXE. Nice found that this bath, that is users then AppData Local Packages by God Software Foundation to 0.9. And then the alcohol packages, BIPAP 39 site packages, 25 applications. And then B cell, of course, the bath or it can be of the top bit more complex. And that's why I advise you to just go onto your C drive and then just try it in the search box. And it will eventually find it if you installed D35 with the pip install from your CMT, as I've showed to you in a previous lecture. So we're just going to wait a moment here to show you that there are fewer sleep. The search tool from Windows, he's going to find these UTP signer executable sooner or later. And you can then just right-click on it and create a shortcut that you can position on desktop. And of course, cricket from there. So you won't have Q and 30s login complex Beth, each term you want to open up the designer. In the meantime where this is certain for executable. I'm going to talk a bit about the consigner and they're looking supposed to do. So each row, It's basically as you can see. To make the graphic, you say there's a phrase that you are building with bucket the five, see a ball. And the more intuitive for the user desk developing that to a graphic user interface. So it basically looks a lot more like wind farms. If you've never worked between chords before. It's pretty much a graphic user interface method of doing things that seem no visual Studio. And it's done with C-Sharp. So this is pretty much like the signer of form there. So basically, you create a form here and you can assign to it a lot of staff. And the best part is obviously, but you can see what you're assigned to read until you can position each item exactly where you want it to be. And of course, it's much easier to use weight then if you would have done that history in the last lecture where we positioned all those elements from the coat and the width pixels and stuff like that. So you can see that the third found my EXE here, you can right-click on that debt, click on Open file location. And then of course, create charge out here and then copy it on your desktop. So I think that's pretty straightforward there. But once opened AND gate, it opens up. The seigneur, as you can see, the it is speaking to multiple parts. So first of all, we have to find where the Form View, settings, window help type of menu that's available right there. Here we have, of course, the possibility to choose some templates and we have the dialogue with buttons, that's OK and Cancel hard-coded. And then you can enter a lot of stuff in the upper part of it. We can have these buttons to derive without buttons, we know and the weight drip. And of course here we have jets. So I already created the score. That's kind of a quick buttons in the bottom kind of form. I just clicked on Create and open this one up. You can save these. Of course. I bought this debt down. At the signals. We are going to talk about signals and no future lecture. We can add it by the step orders and that we can of course, also adjust the size of our form. We can move all the stuff and that's why it's stuck there for you to use the Qt designer. As you can see what you're moving. Don't you can't have more visual control of how your form He's going to once you compile it. So here in the widget box, It's a very important part because we have some layout that you can of course edit them, but they're not going to do this right now. We have the spacers, Then the buttons, we have push buttons, tool buttons, radio buttons. So we'll push button, It's basically like v sub k or castle. But Tool button, it's something that opens up something. Now radio button in the checkbox, I think you know what the art the art up. Breathing much stuff that you can select. The radio button can be selected. Only one. Oh, a few. The checkbox, it's not the case with the checkbox. Then we have, of course, the widgets that we chart, least widgets three, week two, and so on. I'm not going to add these ones right now. We have containers input, we get input from the user that's using the form. So we have some dates, a combo box, font, combo box, a lane at EPA text edit. So these what they think you can add text to Amy. And we did have some display widgets. We progress bars, OpenGL widgets and things like death. Now, when opening these items, you can see in the right part of the screen, first of all, we have at least three of them here in the object be inspected and you cannot, of course, filtered domain search their name there. And of course, and also we have the property editor that show us, shows us on that of information about that object. So for example, if we click on this checkbox, which shows us the geometry is still low. Values into parentheses are where are the pulsation? Wherever the def to the left top corner, then we have the maximum size, minimum size. Of course, the cursor that we want to be when the conference is over these control and other stuff. If you want to be, for it to be checked by default. And all that other good stuff that look pretty intuitively. But of course, after sometime of dealing with this QP beside New York going to pre-K question. Note that by heart, but just to give you a broad presentation of DOM, so you know what's up with. You can also of course check the font, the point size, so the size of the font and stuff like that. Of course you can go got to convince you can see heat to change the font in real time. So that's what I mean when I say, you can have a much better visual representation of your form, can give you a beaker formed, but then you would have to expect that space. Then the cursor you can, you may want to 0.5 thirt cursor while half read about this checkbox right now. Well, it doesn't replicate that, but you will see that the web UI, doctor, you are going to see that of course, we have the resource browser here. We don't have any resources yet. We see slot editor Eddie 33, source browser pick. You cannot select from the set menu right there. As I said, I will address signals and the action seems better. Lecture. But what I want to do right now is to show you how can you compile it. This UI form from Python, which is a pretty straightforward process. It's something that you may want to know how to do. So first of all, we are going to save it as and then unite untitled UI entire going to save it, not stop. Click, Save. And now the Q peak designer went ahead and documented five desktop. So right now it's there, which will wanted to make these open your CMP up. And then change directories to go back where you saved that file in my cases, the desktop. And then you are going to want to basically turn these UI file that we just saved on desktop and lead campaigns, that dialogue that you see in the QP be signer to a Python file so we can compile the. So how are we going to do that is by wrapping in this AMP document B Five X. And then we're going to write the name of that, that UI file. Dark UI, then dash, and then the name of the pythons, keep good, 31 to gender. So in my case, I want to generate the Python file demo dot py. So right now, if we go desktop, you're going to see that the demo dot py file is created. Maybe if we hope to meet, you can see that the peak or lack of stuff right here that are going to help us understand the market, the five in more detail later. But for now, we're not going to want to see demo death by actually corresponds to the UI that we made rank here. So how we would do that is basically like executing any other Python script. We would just write iPod. And then the name of discrete, since we are already at the Python script kiddies. So we aren't going to write the Python and didn't demo dot py. And as you can see here, UI that we implement it, right? So here you can write some text. Here we have buttons that should open up manures, but obviously they don't do it not being, as I've told you here when hovering the checkbox, our power sector and two across. And of course we have to cancel that. Don't keep that actually. As you can see here, have signals map to them to accept or reject the end. That's why when I click on cancel, the dialogue actually closed-up. So this was a pretty basic overview of the acute D5 GUI Python framework. And the, in the next lectures are going to dave some things into more detail. Light signals and actions aimed at some other controls and how you can write your form also form the code that actually maps some actions. Do the elites and the text boxes or tick boxes that you feel in that UI. So thank you guys for sticking with me through this tutorial and I really look forward to seeing you in the next point. 5. Layout management: Hello guys and welcome back to this back UP 50 tutorial. In this lecture, we are going to discuss layout management when it comes to the Python graphic user interface that is developed using the framework Piketty five. So a GUI widget can be placed inside the container window by specifying its absolute coordinates measured in pixels. The coordinates are relative to the dimensions of the window defined by the set geometry method. We already discussed this a bit in the previous lectures where I told you how those numbers work and that they are relative to the AP most left of your screen. So the set geometry method has the syntax of the widget that you want to set the geometry for. Then that set geometry, and then it takes four parameters. The first two are how many pixels? First of all, you want on the x axis from the leftmost corner. And the second parameter is how many pixels you want from the utmost quarter. Then the next word, the width and the height octet widget that you want to give it. So in the following code that you see on screen right now, you can see that the top level window is a window of 300 pixels by 200 pixels. You can see that on line 13. And it is displayed at position 100 by 100 on your monitor. So if we would run this right now, you would be able to see that it is a 100 pixels from the left, 100 pixels to the right. And then it is 300 by 200 or so. This is what the geometry method does. Now, push button widget is added in the window. As you can see, I made this being one widget and it is positioned at 50 pixels toward the right part of the window and 20 pixels below the top left position of the window. So this is done with the move method is you can see on the screen as well. And a note here would be that this absolute positioning, however, is not suitable or because of the following reasons. So first of all, the position of the widget does not change. Even if doing that with resized, with this absolute positioning, then the appearance may not be uniform on a different displays and different resolutions. And also the modification in the layout is difficult as it may need redesigning the entire form. So these absolute positioning is really not so great because it does not involve no responsiveness to it. Now the Piketty API provides layout basis for more elegant management to help positioning of widgets inside this container. The advantages of their managers over absolute positioning are that the widgets inside the window are automatically resized, so on. And you can make a parallel to any web application is responsive when you resize the window of Chrome, for example, in I don't know, responsive application, you can see that changes are made and you can still access all the content that you would have Xist if the Chrome browser was full-screen. It also insurance uniform appearance on display devices with different resolutions into adding Grinch moving good, which is dynamically as possible without having to redesign. So there are a lot of, as you can see, the entities too, the layout classes that we are going to discuss right here. Now, before I jump into some of these classes, I also want to show you in the QT designer did in the widget box. In the left of the screen. You have these widget box to play out and you can select these layouts from right here. If we would have window, we're done right here. So this is the part that handles that if you want your GUI to be, first of all, designed from these design or not, they actually dynamically go deep from a Python script directly. Now, at least of class is reached. We can discuss that are unrelated to this layout management are the queue box layout, the qg read layout tend to form layout. Now the cube box layout lines up the widgets vertically and horizontally. The queue grid layout presents with a read of cells arranged in rows and columns is you can see right here, this is the third one. And the also, the form layout is, you can see Last one here. And basically these bases are met these layouts right here. So you can either dynamically coat them, but by declaring them from your Python script or use the layoffs that you see right here. So the q from layout is a convenient way to create two column form where each row consists of an input field associated with the label. So as a convention that left column contains label and the right column contains the input field cell. Well basically, this is the case where you would login on a site and you can see that label is first name to that. And then you have an input two text box where you can write your name. So this layout management can be very useful if you want your GUI developed in D5 to be more responsive and more Nate and also have a more professional aesthetic two-week. Now on a more concrete level, I have three Python scripts right here that we can look at and see a little bit about how these layout management works. So they are pretty basic in the sense that I just put all the script in the main function and died, declared all this stuff here. So first of all, I declared our application, that secure application, and then I got a widget. And then I have three buttons which date the parameter, their name. And now the box, which is boxed layout. And this is the part that really is interesting to us. So we declare QH box layout, that iss going to take the perimeter of the window. And it's going to create an object that's going to be called H box at these, in this H box, That's the layout. That has a box layout. We are adding the widget that we have. In the Python programming language. We know from this parameter right here that this layout is going to be in our window. And it is going to then show us the window and it will then exit the app. And right now, let's run it in Python and see how it looks. So as you can see, the box layout basically puts the buttons right next to each other. Of course, they could be put in a vertical position as well. So this is the QH box layout. Next we are going to move on to the creep grid layout. So again, I declared all of it in the main application. So we have the Q application which takes no parameters. Then we have a widget, which is the subject W right here that is an object of the class key WeChat. And then the greed that again is instantiated as a layout class object that takes the perimeter of the window. And then I have to force right here. And for each iteration, the layout is going to add the widget if q push button, and that you know, the two parameters right here. And then the window is going to be shown, and then the application XY, good. Try. Now if we run this from the Python script, you can see that the grid layout is showing these buttons in greet form. So I and j is right here used to specify the coordinates of the bot then. So as you can imagine, it's got these one is going to have the coordinates 0, 0, 0, 1, 0, 2, 1, 0, 11, 12, and then 200, 21 and 22. So debts, what this INJ do here in the Add Widget of the Greek layout. They are parameters specifying the position of the buttons. And lastly, we are going to look at another design thing right here. There's not really related to the layout. I mean, we did a grid layout as well here. But this one is more so about the Calder center themes that you can apply to your graphic user interface when you develop it by q p, because that's also important to have your graphic user interface that looks besides how it works and how functional. And user-friendly. And for your user to have a good user experience. Do. So. Here again, we have our Q application and we are going to set the stuff for it. There's fusion. And then we are going to declare a queue palette, which we are going later to set the width of our application is this kubelet. And in this belt we're going to set some colors. First of all, the button of the texts should be black. Then the window should be black. Background of the window should be black, and then the Becker and Dr. button should be great. So we specify the scholars as you can see as a cutie and then that, and then the name of the predefined color. Then we do an adder, reach it, which will be w, that will be, that is going to be our window. It is declared as subcu WeChat. Then we're going to declare the QC we layout of this window as parameters. And these grid layout, we are going to add four buttons. We are going to also specify basic can see hard coded, this time their coordinates in the grid layout, and also keep them their corresponding task texts as to where they are placed in our window. We are going to next show this window and then exit the app furthermore. So right now if we run this from Python, you can see that the styling can make a huge difference on how our, how our application is going to look in the end. So you can see that the background here is going to be black. I specified on line 12. The buttons background is going to be crazy specified on line 13. And also the button text is black is specified on line 11. So all of these is done as you saw using the Padlet glass provide eat by bike at D5. So again, the QC grid layout also helps us to have a more, but to get there look in our form. So thank you guys for following this tutorial. I really appreciate your time and I hope you learn to think about the bite you D5 GUI framework. That's basically as you saw using Python code to develop graphic user interfaces. So now if you went in the future to develop some Python applications, but you would also like, besides the script that you are writing to have a graphic user interface. For your users do see some stuff or to be more of course user-friendly. You now have an alternate the full four I looked at. So we're going to tune out during lecture where we'll talk about the summary of the framework. But these was about to eat wheat. Programming, get DO showing stuff bar. So to say. Thank you again, and we'll look forward to seeing you guys in the next tutorial symptoms. So in this summer.