How To Install PyQt5 And Build Simple GUI App - PyQt5 GUI Thursdays #1

what's going on guys john elder here from codingame.com and in this video we're gonna start to learn to build gui apps with pi qt5 and python alright guys like i said in this video we're going to start to learn to build gui apps with pi qt5 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 the channel give me a thumbs up for the youtube algorithm and check out codingme.com we have dozens of courses with hundreds of videos that teach you to code use coupon code youtube1 to get 30. membership that's all my courses videos and books for one time via just 49 which is insanely cheap okay like i said in this video we're going to start to learn pi qt5 this is something people have been asking me to talk about for many many months so we're going to start doing that now so from now on every thursday it's going to be pi qt thursday doesn't really have a very good ring to it but that's what we're going to do pi qt thursdays and today we're just going to install pyqt5 and we're going to build this very basic app says hello world what's your name type in john click the button hello john right so just a very basic app just to get us rolling here and uh get this all installed and stuff so let's head over to our terminal i'm using the git bash terminal and the spline text editor as always and i've just got the git bash terminal open and the first thing we want to do is create a directory to hold all of our cool iqt5 files we're going to be building in the future so let's go mkdir and i want to put this in my c drive and i'm just going to call this iqte5 alright so now we can cd change directories to move into that directory and so let's go up c pi ut5 okay and you can see now we're in this directory if we type in ls there's nothing in there yet so the first thing you want to do when working with any sort of python project is create a virtual environment and virtual environment is a little walled garden where you can install all the things that you're going to be using in your project in our case piqt5 so to do that we type in v python-m n v stands for virtual environment and then just name this thing and i usually call this vert really doesn't matter and it takes a second to spin up and boom there we go now we type ls we see we have this vert directory so we've installed our virtual environment now we need to turn it on and to do that we just type in source and then vert scripts and then activate and you can see boom this little vert thing is on top of our command prompt that means our virtual environment has been turned on we can turn it off if we want by typing deactivate and now it's gone again and we can bring it back by that same command now if you are on a mac i think the command is source maybe bin activate something like that or source maybe slash bin activate or source vert bin activate something like that if you're on mac or linux that should do the trick so okay so now there's still nothing in here but our virtual environment directory and the first thing we want to do is pip install iqt5 so we just go pi qt five and notice capital p and capital q not really sure if you have to do that but i think you do so all right okay so now we can go pip freeze and we can see that pique d5 version 5.1 5.2 and pi t and pi qt5 dash sip 12.8.1 have been installed if these numbers are different by the time you watch this video no big deal just whatever the current version is go ahead and use that you should be okay unless there's like a major version upgrade to pi qt6 or something but i don't see that happening in the immediate future so we should be good to go so okay we've got iqt5 installed on our computer and it was just that easy to install it super super easy so let's create a file i'm going to call it hello dot pi and we can use the touch command or we can open up our subline text editor and do it that way i'm here so i'll just do it like this now we type in ls we see we have this file it's a blank file but it now at least exists so let's head over to our sublime text editor and now in the future we're going to use the pi qt5 designer thing to make apps but for this video we're just going to start building out a regular pi iqt5 python file we're going to do all the code ourselves not much to it so i shouldn't take us very long so let's open that file we just created so i'm going to go to my c drive i'm going to find that pi qd5 directory we created there we go and there it is hello.pi and it pops right up so the first thing we need to do is import pi qt5 so to do that there's lots of different ways i'm going to do it this way we're going to go import pi qt5 dot qt widgets as qtw right so i do a lot of videos on kinter and you know with kinter we do things with widgets everything's a widget and it's sort of the same way with pi qt5 there's widgets and we need to import the widget stuff from pi qt5 we don't want to just import everything from piquet we just need the widgets right now so we'll do that i'm importing it as qtw it's the sort of normal convention to do that and you'll see why in just a minute so okay we can go ahead and save this and run it if we want just to make sure this imported okay since this is sort of a new thing so we can go python hello dot pi it runs no errors we're good to go so pyqt you really want to use classes for this starting with a lot of my kinder videos we don't use classes all that often because you can get away without using classes and kinder and classes tend to confuse people especially newer coders so i don't use them that much in kinter but with pi qt you really need to so to do that let's create our first class here and i'm just going to call this main window and we want to pass in qtw dot cue widget now i know we're pulling qt widgets here but this is singular so sort of make note of that and now we need a define underscore underscore init underscore underscore or dunder if you want to say that like weirdo that's what people call that dunder double underscore i just call it underscore underscore and we need to call super dot underscore underscore and knit underscore underscore and i'm not going to get into a whole lot of what this stuff is just basic class initialization stuff right okay and then we also need self dot show right now this will show our app when we start the thing so okay that's our main class now to actually run the thing we need to create an instance of an app so let's go app equals and this is going to be qtw dot q application and inside of here we need to pass an empty python list maybe we'll talk about why later it's not super important right now and we also need to sort of initialize our main window up here so i'm just going to call this mw for main window and set the sql to main window and then finally to run the app we need to execute it so let's go app.execute and then this we need to use this underscore because exec is a special keyword in python so it needs to sort of change a little bit so we stick an underscore after it and that should do the trick so 15 lines of code well and some spaces but not much to create a basic app so let's run this and see if this worked and this should just give us a blank window basically so we go python load up i and when we do we get this black blank window nothing much going on here but it seems to work so it says python up here for the title so let's go ahead and really quickly change the title that's super easy to do inside of our class here let's add a title and to do that we just call self dot set window title and then just say whatever we want so i'm going to go hello world all right so notice the w and the t are both capitalized here so let's go ahead and save this and run it very exciting so we get the same blank window but now it says hello world for the title bar here and we're moving right along so okay now we need to set a layout so let's set layout so with kenter there's like pack and grid there are several layouts you can use with pi qt5 i'm just going to call it pi qt i'm tired of saying five after the so there's several layouts you could use with pi qt there's a vertical box layout a horizontal box layout there's a grid layout we'll look at that in a little bit for now we're just going to use the vertical box layout so up and down in a boxy sort of thing sort of like the box layout and kivi where it's just one thing after another vertical so to do that we go self dot set layout and you might be starting to see uh sort of a pattern here the first thing is lowercase and the second thing is uppercase like lowercase uppercase uppercase that sort of seems to be a theme so just sort of keep that in mind and then we want qtw dot now this is going to be a q v box layout and that's a function and you notice this qtw we're doing that for everything as well here here right here that's because we imported iqt5 as qtw so we have to stick this qtw in front of everything we want to do so that's why that's happening so okay that will set the layout this is the vertical box layout if you want the horizontal box layout it's hbox layout right but we want the v so let's set vertical layout say okay so that's good now let's create a label let's create a label just a basic label and i'm going to call this minor score label call it really anything you want and this is going to equal a q t w dot q label and here's another thing you might be noticing we're slapping q's in front of everything q q q right q that's another sort of quirky thing of pi q t so keep that in mind and uh here's our label we can put anything we want let's just put hello world woohoo now we've created this we also need to sort of put it on the screen so let's go self dot layout and then dot add widget and what do we want to add we want to add my underscore label right again notice this lowercase uppercase convention going on so okay let's go ahead and save this and run it see how this looks and boy i can barely grab it let me just do it like this there we go you see very tiny it says hello world and we can sort of resize this and it kind of moves around a little bit labels don't resize especially well buttons do a little bit better but uh yeah that's it's a label all right so we've got something on the screen so if we want to change the size of the label this is a little bit weird this is not really a property of widgets even though the label is a widget changing the font of the label is not it's part of the gui system so we need to import that if we want to use it so let's go import iqt5 dot t a gooey as and let's name this something let's just go i don't know q t g for q t gui and this is q t w for q t widgets so now we can use this so let's come down here and change the font size of label so let's go and actually maybe i'm going to go ahead and put this first and then we'll add it to the screen after we've changed the font so let's go my underscore label dot set font and again lowercase s uppercase f right and then we want to call t g dot q font and now what do we want to do well let's use our trusty helvetica and let's make this like size 18 or so and that should do the trick so let's go ahead and save it run it again boom and now our text is bigger so okay looking good so what do we want to do now let's add a button or let's add an entry box so that we can enter a name so first i want to change this from hello world to i don't know hello world what's your name right so now let's create a box or let's call it an entry box that's not what it's called but that's what i'm going to call it an entry box that we can type into right so i'm going to call this minor score entry and this is going to be a qtw dot q line edit right so this is a q line edit widget i guess not an entry box but entry box in my mind makes more sense so i'm going to call it an entry box so let's go my underscore entry dot set object name and i'm just going to call this name or name field whatever so we need to set an object name because we need to reference this entry box later on so okay and we don't have to do this but we can set the my underscore entry we can go set text and we can set the text to anything we want so if you wanted placeholder text you could type that in there i don't really want any placeholder text so i'm just going to leave it blank you don't have to add this at all it's just kind of interesting and it'll come up later so i thought i'd put it in there so we could see it so let's go ahead and slap this guy onto the screen and we do it the same way we did with our label so i could just copy this and instead of my label here we want to put on the screen my underscore entry so okay let's go ahead and save this and run it and boom now it says hello world what's your name we've got a little box here and if we resize this it kind of resizes as well it's kind of interesting the label doesn't but the box does so okay that's cool finally now let's create a button so create a button and this is a very basic app but you know we're getting some stuff up on the screen and we're seeing that hey this is really easy to do and really quickly to make something and that's kind of cool so let's call this minor score button because i have all the original names and let's go qtw dot q push button so buttons in pi qt are called push buttons right and uh so now we can say i don't know press me and that'll be all for now let's just get this up on the screen so to add it to the screen as always we just call this guy right here so i'm just going to copy this again and boom and this is going to be under my button okay so let's save this and run it just to make sure that looks good and okay we've got a button here it kind of glows when we hover over it when we press it it kind of does a thing we can resize and it it resizes the label still doesn't but everything else does and okay pretty cool now this doesn't actually do anything yet so to actually do something it's not that tricky we just come up to our my button here and we slap a comma in there and let me put this on another line and whenever the button is clicked we need to call clicked and set that equal to and now here we're going to use a lambda and we've done this sort of thing with kenter we call l-a-m-b-d-a and as soon as i do that this looks like an uppercase l it is not it's still lowercase i don't know why sublime does that but it does it here too so this is lowercase l just keep that in mind and let's have this call a function called press underscore it and we haven't created that just yet so we will do that now and we need to do it below here so let me just slap a comment in here show the app and this is really important don't forget to put this self.show on here because if you do your app won't show it'll sort of be there in the background running but it won't be showed and the terminal will sort of freeze so make sure you always have that so let's define press it and now what we want to do is take whatever is in the box and put it on the label so we can change the label we did it up here to where to go right here my entry that set text we could do that same thing with the label so we could go my underscore label dot set text and instead of here i'm going to create an f string and i'm going to say hello and then we can pass in whatever we want well what do we want we want whatever's in the my entry box so my entry dot text like that i'll put an exclamation point on there now we probably also want to delete whatever is in the box after somebody clicks the button so if they want to type something else later it'll be nice and empty for them so we can do the same thing we did up here and i'll just kind of copy this and paste that in and that should do the trick so let's clear the entry box and here let's uh add name to label okay so go ahead and save this and run it so we get hello world what's your name we could type in john click the button press me boom hello john and it's just that easy so that's pi qt in a very quick nutshell pretty simple to do you know very basic things and not a whole lot to it and it's uh you know kind of cool so like i said in the future we'll be looking at the pi qt designer and doing all that stuff we'll also get into all of this in more detail so thursdays from now on pi qt thursdays should be a lot of fun and looking forward to it so that's all for this video if you liked it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codabee.com where you can use coupon code youtube1 to get 30 on membership page it's 49 to access all my courses over 47 courses hundreds of videos in the pds of all my best-selling coding books join over a hundred thousand students learning to code just like you my name is john elder from coding.com and i'll see in the next video

Channel: Codemy.com

Views: 38,650

Rating: 4.9471006 out of 5

Keywords: pyqt5 gui tutorial, pyqt5 tutorial, pyqt5 gui, pyqt5 projects, pyqt5 examples, pyqt5 python, pyqt5 install windows, pyqt5 tutorial #1, python pyqt5 gui tutorial, python gui programming using pyqt5, python pyqt5, python pyqt5 tutorial, codemy, codemy.com, john elder, john elder pyqt5, how to install pyqt5, pyqt5 button example, pyqt5 buttons, pyqt5 pushbutton, pyqt5 label text, pyqt5 font, pyqt5 setFont, pyqt5 line edit, pyqt5 line edit get text, pyqt5 qlineedit

Id: rZcdhles6vQ

Length: 18min 22sec (1102 seconds)

Published: Thu Jan 21 2021