PyQT5 Designer Drag and Drop GUI - PyQt5 GUI Thursdays #6

what's going on guys john elder here from coding.com and in this video we're gonna look at the pi qt5 designer for making gui apps with python all right guys like i said in this video we're going to look at the pie qt5 designer but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to that channel give me a thumbs up for the youtube algorithm and check out codingme.com where i've dozens of courses with hundreds of videos to teach you to code use coupon code youtube1 to get 30 on membership it's all my courses videos and books for one-time fee just 49 which is insanely cheap all right it is pie qt5 thursday and today we're going to start to look at the pi qt5 designer and this is it right here it's a really nice drag and drop tool to make gui apps with python and pi qt5 now you still obviously have to write all the code underneath so like we've got this button here if you wanted to do something you still have to write the code to have it do something and we're going to look at that but just laying out your gui putting things where you want changing colors adding things dragging dropping this is great for that and so we're going to be working with this in the next you know bunch of videos here going forward because whenever you're using pi qt5 you're probably going to want to use this thing up until now i've been teaching you just the very basics of pi qt so you understand what it is and how to write the code for the basic things the basic widgets buttons labels all those things now that we have that basic understanding we can start to use the pi qt5 designer so that's what we're going to do in this video so we need to install this this does not come with pi qt and it used to be kind of a hassle to install it's actually really easy to install right now and that's what we're going to do right now so i'm in my c pi qt5 directory this is the directory we've been using throughout these videos i've got my virtual environment turned on now it's very important that you have your virtual environment turned on we want to install these things into the virtual environment so to install this guy we just go pip install and this is pi qt5 designer now notice the capitalization capital p capital q and capital d so pi qt5 designer now i've already installed this so it says hey you've already installed it but for you it'll go through and install it just takes a couple of seconds it's not that bad at all so now we can pip freeze and see not only do we have pi qt we also have pi qt5 designer all right and i'll set version 5.14.1 if that version changes by the time you watch this video no big deal just whatever the latest version is is fine now it used to be kind of hard to find the designer on your computer once you pip installed it but they've made it really easy recently all you have to do is type in designer.exe now you have to be in your python directory you've got to have your virtual environment turned on for this to work you've also got to have your windows path set correctly for python so when you install python way back when there should have been a little check box at the bottom of the installation screen that says add python 3.9 or whatever to path you make sure that check box is checked if it's not this is not going to work you might want to go back and reinstall python and go through all these steps again to install your virtual environment and all that good stuff so that you can do this or you could just google how to set your path in python if you're on windows computer it's pretty easy change some settings in your system i can't show you right now but you can google that and it's not that bad so when we do that boom nothing seems to have happened but in the background here if we close this boom here it is so this is the latest version of designer was not terminated correctly that's normal click yes now i've already had this opened so actually let me close this and let's let's start all over again so we get a fresh screen come back here designer.exe boom it pops up now here's the screen you will most likely see it says what do you want to build widget main window dialog without buttons you probably just want a main window to begin with so let's do create and there it pops up so let me just resize this stuff so it's sort of easier for us to go through all of this and this is the pi qt designer very cool and you can see all the things on the left here that you can add here's our layouts vertical layouts horizontal layouts grid layouts form layouts remember in the last couple of videos we looked at forum layouts we've looked at grid layouts you know horizontal and vertical layouts i think the very first video i did on pi qt so there's our different layouts we can use we have spacers we have different buttons there's item views so list views tree views table views all those good things we haven't really talked about those yet list widgets tree widgets there's containers group boxes toolboxes all the things all right input widgets we could scroll down so combo boxes text editors spin boxes all the things time editors down here we have labels calendar widgets and to use these things it's really just as easy as grabbing whatever you want for instance we want a button grab push button bring it over drop it boom there it is now we can resize this if we want we want to change the text just double click it let's go click me hit enter boom done right so really cool if we want to come down here and grab a label let's do that and we can resize change all the things let's go hello world and now over here on the right hand side we can change different properties and things like that so for instance if we want this text to be bigger i've clicked on it so it's highlighted we can come down here to font click on this guy and change this to whatever we want so just that easy same thing here change this font there we go we can move this around a little to sort of center it more [Music] i don't know whatever you like now one thing these are named generically so up here we see the object name push button right that's not a great name we might want to reference it so i might say click me underscore button alright whatever for here this label i might want this to be hello underscore world underscore label right so we want to reference this later because when we click this button we want this text to change so we need to have a name that's more easily recognizable so go ahead and change that and it really it's just this easy we you know obviously there's more to it we start getting into more advanced things like colors and adding different things and tweaking different things but strictly speaking this is all you really need to do you just sort of drag things around position them how you want and you're good to go now once you have it the way it is and obviously this is a very basic app and this is just an intro video so we're just going to do a very basic app but once you have this finished the way you want we come up here and we need to save it so let's go file save as and make sure you're in your correct directory it isn't by default so i'm in my c drive we've got our pi qt5 directory right and if we come back over here we see that's c pi q t5 we want it in this directory in our working directory that has our virtual environment and all the things so then we can come back here and let's just save this and you'll notice it's saving it as a dot ui file that's i guess short for user interface i don't know but name this whatever you want i'm gonna call it hello world dot ui so now we can head back over here and we can type in ls and we see we've got this hello world dot ui file right so okay that's great but now what how do we run this thing how do we actually make it work i've got i've got it here from an old version that i did before this video we want to click this and change this to boom how do we do that well we need to convert this helloworld.ui file into a python file then we can modify so to do that the command is a little weird it's pi uic5 right and then dash x stands for executable and now we need to designate this file so that would be hello underscore world dot ui now dash o we need to output this thing we want to output it as hello underscore world dot pi right so boom that's all there is to it write this down copy it keep it somewhere because you're always going to use this command it's a little weird but you know it's not too bad now if we type in ls we see we've got this hello world dot pi file right so we can play around with this and do whatever we want so right off the bat we could run this let's go python hello underscore world dot pi when we do we get the app when we click on this button nothing happens because we haven't programmed it to do anything when we click the button but the app does work so it's kind of cool so now let's open this and play around with this but before we open this i should mention this is the git bash terminal it's a terminal i always use also you can find a link to the code in the comment section below this video also you can find a link to the pi qt5 playlist to see all the other pi qt5 videos that we have so okay back to sublime text let's go ahead and open this go file open navigate to our cpiqt5 directory find that hello world.pi file and open it and here it is so there's some comments always at the top of these i always delete that and this is the file that that command generated that big long where did it go this thing this pi uic five dash x dash hello world ui dash o dot hello pi that generated this file and you could look through here and it sort of makes sense we've got our our main class right our main windows and here are the things like the click me button that's our button that's what we named it right the hello world label that's our label that's what we named it right so we could play around with this in the normal way we would do any pique decoding like we've learned in the previous videos so what i want to do is come down here and create a function that we can use whenever we press the button so let's define i'm going to call it press it we want to pass in self now i can go self dot now what do we call our label there it is hello world label let me just copy this and now we want to dot set text we've done this in previous videos and i'm just going to set this to boom all right all right so maybe i'll comment press the button function it's just a very basic function that changes the label when we press the button so now we just need to come up to our button and find where we defined it and that looks like right here click me button qt widgets it's a cue push button and here we just need to go clicked equals so here we want to go lambda and now this looks like a capital l this is a lowercase l sublime just does this drives me crazy but that's definitely a lowercase l so now we just want to pass self dot press it and that's a function we probably want to pass in i don't think we need to pass itself okay so that looks good let's go ahead and save this now we can come back over here and run this guy python hello world.pi and when we do we see this click me boom changes to boom and we're done so obviously a very very simple app but you know in this video i really more want to talk about the designer and get it set up get you started with it get it installed show you how to use it show you how to create a very simple app like we did convert that app into an actual python file and then from there you take it away do whatever you want in our case you know we made this very basic preset function so we press the button the text changes to boom right so but basically this is very different than the python code we've been looking at in a few videos up until this one but not really if you really kind of look in here you'll you'll notice most of the same things like this qt widgets in other videos i i imported the qt a little bit differently i imported pi qt5 as like qtew and then we used qtw dot whatever in our code right they're just not doing that it's it works the same way it's just a matter of style depending on how you do that we'll just go with this from here on out but really other than that things are pretty much the same we were looking at some things that we haven't quite discussed yet in prior videos like setting point sizes resizing window things explicitly doing stuff like this and we'll get into all this going forward set status bar but in this video just a quick intro on the pike ut designer really cool a lot of fun and uh should be fun in the next i don't know dozen or so videos playing around with this thing so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codingme.com where you can use coupon code youtube1 to get 30 memberships to pay just 49 taxes all my courses over 47 courses hundreds of videos and the pds of all my best selling coding books join over a hundred thousand students learning to code just like you name is john elder from kodibu.com and i'll see you in the next video

Channel: Codemy.com

Views: 45,294

Keywords: pyqt5 designer tutorial, pyqt5 designer python, pyqt5 designer layout tutorial, pyqt5 designer gui tutorial, pyqt5 designer install windows, pyqt5 designer not showing, pyqt5 designer, python pyqt5 designer tutorial, build real software with python pyqt5 and qt designer, python gui application with qt designer and pyqt5, create python gui application using pyqt5 designer, pyqt5 tutorial #6, codemy.com, john elder, john elder pyqt5, pyqt5, designer pyqt5, qt designer

Id: 5K__zwBj_nY

Length: 13min 24sec (804 seconds)

Published: Thu Feb 25 2021