PyQt5 Tutorial - Setup and a Basic GUI Application

Key Takeaways

hey guys and welcome to a brand new tutorial series on Pi qt5 in Python now pqt is a application or a framework story for python that allows you to build gooey applications very quickly now what I'm showing you right here actually is the main kind of interface that you're going to be able to use it's called QT designer to create your graphical user interfaces now let me show you how easy this is compared to some other things that you might have tried to use before so for example Sam creating a guey I want to have a label I drag in the label I want to throw a button somewhere well we'll find a button there we go maybe we want some checkboxes we want them to be here let's throw them in right I'm just showing you how easy and how quickly you can actually design and create a graphical user interface and you don't have to go back and forth from code and modify the positions and change all of that and this is just something that's super simple and it makes your life way easier especially if you're trying to create some kind of simpler applications and you don't want to spend a lot of time messing with the graphical user interface part of it you just kind of want things to work and you know sometimes it's really nice to be able to just come into a designer drag and drop it and see exactly what it looks like without having to keep running the code and all of that so anyways that was just kind of a little bit of a tease on what we're going to be getting into in this series and we're going to be learning how to use that properly and how that actually works but in today's video we're just going to be setting up pyqt5 and creating a very basic application by just writing a little bit of code so what that Designer actually does is it generates a bunch of code for us and you pretty much just take that code and use it so you kind of drag and drop stuff it says this is the code that you would need to create that then you can use that code so anyways what we're going to do now is we need to install and get that tool that QT designer from pqt so we're going to open up a command promp and we're going to be using pip to install this now for some reason when you type pip in here and you hit enter it doesn't work that means Python and pip are not installed in your systems path so to fix this I'm going to direct you to a video I have in the top right hand corner of my my screen it's called how to install P game but it shows you how to fix your pip if it's not working so if your pip is working what we're going to do is type pip install and then Pi qt5 um don't install four is that is the one for Python 2.7 and we're going to be using Python 3 next we're going to do pip install Pi qt5 hyphen tools now this is going to give us that QT designer and a few other tools that we might want to use later on with pqt once we're done that um we're actually ready to start writing some code and pop up our first main window so let's close that and let's get into some kind of uh text editor here so I'm just going to be using subline Text Now quickly before I go on something I forgot about pqt is it is actually cross- compatible and crossplatform which means that any code you write here will actually work on Mac it'll work on Linux it'll work on iOS it'll work on Android now I'm probably not going to be showing you how to package this up for all those different os's but it's nice to know that your code will actually scale and work for any OS that you want it to anyways what we're going to do now is just type a few import statements here um so we're actually going to start with from PI qt5 make sure to capitalize that P and the Q we're going to import and to start uh QT widgets like that now next we're going to say from PI qt5 do QT widgets like that we're going to to import Q application Q main window and finally we're going to import Q actually I think that's actually all we need for that one yep and the last import statement is Sy Ys so that's all we need to import for right now later on we'll probably be importing some more things up here from pqt but to create a basic application that's all we need so when we're working with pqt the first thing we need to do when we're creating an app or creating a gole or whatever it is is Define an application so what we're going to do is create a function that's going to do this for us and we'll just run that function at the end of our code so I'm going to call this function window and inside of here what I'm going to do is just say app and that's going to be equal to Q application now this is where we always have to start off some kind of application and what we need to do is we need to pass sy. RGV inside of here now I believe what this is doing and I could be incorrect is just giving some kind of config setup for a q application so it knows what OS it's running on kind of how to display the window because based on what OS you're running um there's going to be some differences right so that's kind of what this is doing just getting our application set up you don't have to worry about it too much the next thing we need to do is create some kind of window or some kind of widget that we're actually going to show in our application so in my case I'm going to use Q main window but you may see some people in tutorials using Q widget uh it's kind of similar but we're just going to use Q main window so what I'm going to do here say um wi equals in this case Q main window like that all right so the next thing we're going to do is actually set the size and title of our window so if we want to set the size of our window and actually the position of it on the screen what we need to do is call a method called set geometry so we're going to say Geo geometry I think I spelled that correctly and then inside of here what we're going to do is give four arguments the first one is going to be the exposition the next one is going to be the Y position and the last two are going to be the width and the height now the X position actually stands for where on your screen you want to show up so if I put this to zero and I put my y position to zero what's actually going to happen is our window is going to show up in the top left hand corner of your screen now if you set this to let's say 1920 by 1080 it's going to show up in the bottom right hand corner of your screen and you actually won't be able to see it now let me just quickly illustrate how this actually works so that any of you that don't understand this coordinate system kind of can get this pretty quickly so this right here is actually in computers typically when we're doing Graphics is actually 0 0 now excuse me cuz I'm wrong with my mouse so this is kind of difficult to do um so what happens is when we say something like 100 100 we're going to go 100 pixels this way and then we're going to go 100 pixels down now since we're starting with the top leftand corner what that means is this window will now be moved um oops I don't know how that happened um so it looks more something like that so we're going to move the top leftand corner of the window to be at position 100 100 and that's going to go for all of our widgets as well let's say we place a widget inside of our window at maybe like 50/50 well the top leftand corner of that widget will be at 50/50 which is something that's important you're going to have to account for when we're kind of moving and placing things so hopefully that makes a bit of sense so anyways I'm just going to set mine arbitrarily to be like 200 200 and then for a width and a height let's go with uh 300 300 awesome so now that we've done that we're going to set a window title now this is what's going to show up on the top little bar you can see like up here this is what the window title is kind of for my subline text um similar thing here for the pqt so we're going to say win. Set uh window title like that and then here you name whatever you want so in this case I'm just going to say like like Tech with Tim which is the name of my channel and now what I'm going to do is actually put some stuff inside of our window now before I do that I want to show you what this looks like so you can get an idea and then we'll start adding some things so to actually show our window we need to call window. show and after that we need to write this one line that looks a little bit confusing but essentially what it's going to do is make sure that our window shows up nicely and we'll exit when we click the x button you don't have to read too far into it but it just means that we get what's known as a clean exit so I'm going to do sy. exit app.exe like that now again this just means uh we're waiting for this Q application to exit and when that happens then we're going to exit and close the application so let's run this program now um oops I got to actually call this function if we want anything to show up so let's do that at the bottom of our program and you can see we get Tech with Tim we get a window that let me run again that initially showed up at what I say 200 200 with height and width 300 300 now if I change this again to be like 1,000 you can see that now the window is showing up further so it's actually useful and you can pick kind of where you want it to show up so anyways this is kind of boring we need to add some stuff into our window and look at it so what I'm going to do is actually just create a label and throw that label on our window and then we're going to end the tutorial there so if I want to create a label what I'm going to do is say label equals in this case QT widgets. Q label I hope you guys are noticing that everything kind of starts with Q here and inside of this what we're actually going to do is say where we want this label to be a little bit confusing because sometimes people want to put what's on the label but what we're going to do is set window because that's where it's going to be showing up next we're going to say label. set text and this is where we can change what it actually says so in this case we'll just say my first label like that okay so now that we've done that we can move the label uh if we'd like to do that so to move it we can do label. move and with move this we'll just take an XY position and it'll move it there so let's say we want to do 5050 remember that's from the top leftand corner so down 50 um to the right 50 and that's where the top leftand corner of our widget will be so let's run this and see what we get and we get my first label positioned at 50/50 again you can see it's that top left hand corner and that's inside of our main QT window so anyways that has been the basics of setting up pqt getting a very basic window going here I just showed you the label widget in the next videos we'll go in uh more depth we'll do a few other different things with this and then very shortly we'll get into the actual QT designer um talk about how that works and how to use the code that it generates in our actual uh application here we're going to start kind of basic um and just build our way up and if you guys have any recommendations of stuff you'd like to see definitely leave it in the comments down below with that being said I will see you guys in the next video