PyQt5 Tutorial - How to Use Qt Designer

hey guys and welcome back so when today's PI QT 5 tutorial what we're gonna be doing is learning how to use this QT designer how to first of all open up this program run it install it and secondly how to actually transform whatever we created here into code that we can actually use play with and run so the first step is actually bringing up this design or window and making sure it's installed on our computer so to do this we're gonna go to our command prompt and we're gonna make sure that we've installed PI QT 5 tools now I did this in the previous video but if any of you weren't following along what you need to do to do this is just pip install PI QT 5 - tools you're gonna do this in whatever version of Python you're working with and now what we're actually gonna do is look for what's known as the site packages folder inside of our main Python folder so whenever you install python on your computer you're gonna have a directory that has python and all of the pip packages that you've installed and that's what it allows you to import them and use them and install them actually using pip so we need to find this folder now this can be kind of difficult and it depends it's gonna be different depending on what machine you're working with the first place i usually check if you don't know where your python is installed is in this program files x86 scroll through look for PE look for python if you see it there you see python 3 6 whatever it is click into there click into the lib folder and then click into the cite packages folder now if for some reason you can't find it there what you can always do is just do a python search through your entire c drive so just make sure you're in that root directory so the c drive search for python wait for the search results to finish and then it should show you where that folder is now for me i actually know where my python folder is and i'm using a version of Python called anaconda so for me mine is in users my user name which is Tim OTT and then anaconda 3 so some of this might apply to some of you guys if you're using anaconda and then you can see here that there's this Lib folder and this Lib folder is what you guys are aiming to find so you can also search Lib but there's a bunch of different Lib folders for different applications so that's why I don't usually recommend that and then from Lib we're gonna be looking for site packages now again you can also search for the site packages folder up here if you're not having any luck finding the Python folder and once you get into that site packages folder now you're gonna scroll through and you're gonna see these are all of the different packages that you've actually installed into pip some of them are dependencies of others you're gonna scroll down and we're gonna look for PI QT 5 tools I'm gonna keep going here I have a lot of packages I'm if you can't tell and look for pi QT 5 wherever that is and then tools so PI QT 5 underscore tools I guess you could also search for that folder as well it will just take a long time to find it once we're inside of here what we're gonna do is look for this designer application it shows the little cutie icon and it shows up right here now the first thing I'm gonna do because I don't wanna have to go through this process every time I want to open up this designer is just create a shortcut so to do that I'm gonna right-click and I'm gonna go to create shortcut like that now it's gonna pop up a shortcut for me like that and I'm just gonna drag it to my desktop or summer where I'm not gonna lose it now I have a I've already got one there but I'll just override that and now I have a shortcut to Qt designer and we're ready to start using it quick sidenote here if you are not finding this in anaconda it might be because you're using a virtual environment so go inside this en B's folder look through your virtual environment and then you'll be able to open it and run it okay so next we are actually going to run this now and start playing with QT designer so we're gonna open this up here and the first thing we need to do is select what we want to create now typically what we're going to be doing is selecting a main window or a widget now a main window is what it says is that main window similar to what we created in the last video a widget will be something that we can place inside of the main window so sometimes if you already have a main window and you want to create a widget then maybe you'll place somewhere inside of it then you would choose widget but in our case since we're just starting out here we don't already have anything we're gonna use main window now for screen size you can select whatever you'd like I'm just gonna do default size and then go ahead and hit create and now what I can do is start by resizing this window and I can start dragging and dropping things into here like I showed you in that very first tutorial so let's say I want to add a push button somewhere I go ahead and do that and just throw my push button right there I can make it bigger I can make it smaller I can do whatever I like with it I can add some maybe check buttons again resize that resize those really it doesn't matter now I'm not gonna show too much of this right now because we are gonna work with this more in the future and create actual applications and use layouts which will actually be in the next video but what I'm gonna do for now is just create a button and a label and I'm gonna show you how we can actually turn this button in this label that we've created here into code that we can actually use so for this label you all I've done to modify this is just double click I was gonna say hello my name is Tim now for this push button same thing I want to modify it I double click and now I can change this button to say something like press me now the first thing we're gonna want to do whenever we're create some kind of objects in here is we want to change their object name and the object name is gonna be how we actually reference these objects from the code so for example this button here right now it defaults to the value of push button but that's not very useful to us so what I want to do is change this to be button 1 something like that ok now the label same thing the name is label now for us maybe that's ok we want to keep text we only have one label but in this case I'm just gonna make it label 1 in case we add any other ones now you guys can see there's a ton of different options on this right bar here and this is what's known as the property editor that you can mess with you can change and you can change the background to do whatever you want you know all that kind of stuff I'll let you guys play around with that you can change the font size here how big everything is very useful and up here is what's known as the object inspector so on this right-hand side of my screen now this is useful because you can actually see what all of the different items you have are and where they sit so for example the menu bar which is up here and I can modify it by double clicking and maybe add file or something like that and you see when I do that it actually asked me if I want to type something else in this menu bar as well which I'm not going to do right now and now if we look here you can see menu our menu file cue menu and it kind of goes through everything that we have so let you guys play around with this and add some different objects and but we will be talking about these throughout the future tutorials but for right now I'm just gonna go ahead and save this and it saves these files as a dot UI file now a UI file is gonna be what we're gonna use to actually transform this into code so what I'm gonna do is just save this into my tutorial folder which I believe is somewhere here maybe I'm in the wrong one um one second guys I think I passed by there it is so I'm gonna save this as test and just go ahead and hit save and make sure you know where you save this file because we need to use this to actually turn this into code now a quick side note here if you actually want to view what this looks like and um in like a real window I believe what you can do is go to form and then go to preview and what will this will do is pop this up so you can actually see how it looks without kind of that little grid behind it obviously no logic is gonna work cuz it's just a what do you call it a GUI but you get the idea there now to turn this into code I'm gonna show you how we can use a command line interface thing to do this so I'm gonna navigate back into that folder where I save this so I gotta find that so Python YouTube pie cutie tutorial and this is the folder the file I just created so test out UI now I'm just gonna open the command prompt up here and I'm going to type a command that is gonna turn this UI file into a python file for me so it's gonna take all the code generate it for me and then allow me to actually see it and edit it so to do this what we're gonna use is PI UIC 5 so start by making sure that this command works by just hitting Enter and if you get some kind of output whether it's an error like this it says one input UI file must be set specified then it's working properly so we're gonna do PI UIC 5 - X which stands for executable and then we're gonna type the name of our UI file so what we want to transform into code so in this case test our UI and remember that this command prompt window that I just opened is the inside of this directory so make sure that you're inside the correct directory with your command prompt you can simply open it by just typing CMD in the top bar of your Windows Explorer and it'll automatically open it in that directory and you can test by just having a look here okay so we're new PI UIC - five test out UI - o which stands for output file and then the name of the python file you want to save it to so in this case maybe we'll just do test dot PI I'm gonna go go ahead and hit enter if you don't get any output that actually means that this worked properly and to verify we can look and see that we now have this test dot PI file in our main directory so let's go ahead and actually open this up so I'm just gonna open this up in subline text like that and now you can see that we actually get the code that generated this for us and if I go ahead and run this you can see that it pops up that same window that we created before so with this code now we can do everything that we've done in this other code file which was the last one we were working with and we can mess with things we can link things to the button and all of that so with that being said that is how you kind of use the Qt designer how you get the code to actually pop up and run obviously this is a little bit messy and maybe you want to modify it and change it a bit but you can see that you know button one is the name of that button that we created it has the name button 1 you can see label 1 same thing set object name label 1 and then we have that main window the menu bar that we created and a status bar as well which we don't really see but he's actually there so if we want to create on like a button link create a method you can link that to the button up here like you've done before and all is good so with that being said that has been it for this video I hope you guys have an idea how to use QT designer and got it up and running alright if you have any questions as always let me know down below or join my discord server with that being said I will see you guys in another video

Channel: Tech With Tim

Views: 459,151

Keywords: tech with tim, pyqt5 tutorial, python gui, pyqt5 gui development, how to use qt designer, how to use qt designer with python, qt designer tutorial, qt designer, qt designer python, pyqt5 designer

Id: FVpho_UiDAY

Length: 10min 53sec (653 seconds)

Published: Sat Jul 06 2019