Python GUI Development Using PyQt5

[Music] what is going on guys welcome back in today's video we're going to learn how to easily create graphical user interfaces in python using pi qt5 now pyqt5 uses qt which is a framework for graphical user interface development or design so we're not going to use the core python module tkinter today we're going to use a separate framework the qt framework in order to create graphical user interfaces and this video is going to be split up into two parts the first part is going to be uh python code only so we're going to create a whole ui using python code and in the second part we're then going to look at the qt designer which is an application that allows us to drag and drop and build our graphical user interface just by clicking and dragging and changing the values and then we can import that into python and give it some functionality so this is what we're going to do and in order to get started we're going to have to install pi qt5 onto our system and for this all you need to do is need to open up cmd or a command line of your choice and you need to say pip install pi qt5 like that now that should be enough but for some reason maybe it won't be enough and in that case you're just going to have to install qt itself now for me this was enough because i think it's in it installs qt already but if for some reason you don't have qt installed and it doesn't work just go online and look for qt5 download and then you're going to be able uh to install this onto your system so this is what you need to do and once you've done that you can just go ahead and import from pi qt5 dot qt widgets not windows widgets we're going to import everything so all the ui elements that we're going to need and we're going to start with a very basic structure here we're going to define a main section so if name equals underscore underscore main underscore underscore we're going to call a main function and we're going to have the main function here and inside of that main function we're going to design our graphical user interface and as a starter we're going to say that an app is just going to be a q application and usually what we do is we pass an argument vector as you can see here the suggestion sys.arc or arc v in this case we can also if we don't need any arguments just pass an empty list and it's going to be sufficient uh besides that we're going to create a window the window itself of the application this is going to be a q widget so a generalized widget and uh basically all we need to do then is we need to say window dot show and app dot exec underscore and that's basically the whole application to get a window running so if i run this now you're going to see that this is my graphical user interface but of course we don't have any elements now adding elements to it is very simple we can just go ahead and say label equals q label for example it's going to be part of the window and we're going to set the text of the label to hello world for example and by just doing that we already have a graphical user interface with hello world inside uh but you can see it's quite small so if we want to increase the font size all we need to do is we need to say label dot set font and here we need to pass a so-called q font now in order to be able to use a q font you need to install uh not to install from port from pi qt5 dot qt gui we're going to use q font and we're going to set the font to cue font and arial and size 16 for example and we can now rerun this and you can see it's a little bit larger we can also move the labels so we can say label dot move we want to move it to the coordinates 50 and 100 for example and there you go it's now there we can also change the geometry of the window we can say window dot set geometry and i think we need to specify first the x and y coordinates of the window and then the size of the windows so let's say 200 and 300 and there you go so as you can see this works it's a very easy way to create a graphical user interface all you do is you define a window you can also of course set a title so set window title my simple gui uh you set the properties for the window then you add the ui elements then you show the window and execute the application that's all we need to do here and besides labels of course we have text edits or text boxes you could say we have buttons and all that so let's go ahead and try something else let's try a basic application where we have like a label that says press uh press the button below and then want to have a button below that we press now before we do all that let's first of all get rid of that actually uh we want to talk a little bit about layouts because of course you can just position all the elements manually you can say okay this is the label move it to that position this is the button move it to that position and so on you can do that but it's more convenient to use a layout and we can start with a basic box layout so we can say layout equals and then q v or actually q uh yeah these find q v box layout uh which stands for q vertical box layout which means that we're going to stack the elements on top of each other we can also go with an hbox layout which is horizontal then we would set them we would place them beside each other but a v-box layout is more it's the better choice in this particular case now so we're going to say label equals q label and it's going to have the text press the button below then we're going to have a button which is going to be a cue push button press me and we're going to now add these things to the layout so we're going to say layout dot add widget and we're going to add the label first and then the button [Music] and then we need to set the window dot set layout we need to set the layout of the window to the layout we just created so if i now run this you're going to see that i have pressed the button below here and press me now i can press that button and nothing's going to happen because we don't have any functionality yet we don't have this button linked to any function so if you want to do that let's first create a basic function you can call this function whatever you want i'm going to call it on clicked so we know that we know what it does or when it's triggered so we're going to say one not one on clicked and we're going to just print hello world when this function is triggered now we can link that button to that function by just saying button dot clicked which is the event dot connect and then on clicked as a function so if i now run this and i click the button you can see i get hello world down here now maybe we don't want to have a console message maybe you want to have a message box in this case we can just change this to a message box so we can say message equals q message box and we can say message dot set text hello world and then message dot exec underscore there you go so let's run this and when i now click the button you can see that we got a basic hello world prompt so next let's go ahead and try to make uh this a little bit more dynamic let's add a text edit so that it doesn't just say anything it says what i wanted to say so it doesn't say hello world it says whatever is the content of the text edit so that we can learn how to interact with the individual elements so what we do is we add below the label a text box and we're going to say that this text box is a text edit so a q text edit uh and actually i don't think that we need to set any parameters here so all we're going to do is we're going to add that as well to the layout text box there you go so if i run this you can see we now have this text box here and all i want to do is when i click that button i want it to um to have a message but to show a message box with the content of the text edit so we need to to change that function a little bit we're going to pass a message and we're going to set the text to that message and do the same thing and when we click on the button we want to have a lambda expression and the button is going to call the on click function with the text box dot to plain text result as a parameter so two plain text basically just gives us the content of the text box as plain text and then we pass that to the unclicked function we call it with that parameter then it's going to do the same thing with the message box again and we use a lambda expression because this is a function call and we don't want this function called to happen unless this event is triggered so let's see if it works we can run this and now i can say hey guys what's up hello world and now i can say press me there you go you can see a message box with the desired content now i personally think that this is already quite easy and quite convenient but we can take it a step further by using the so-called qt designer this is a software that allows us to create graphical user interfaces by using drag and drop so uh probably if i don't forget it you will see a link in description down below to the download otherwise just go to google and type qt designer download it's nothing too complicated it's quite simple so let's go ahead and delete actually almost all of this and let's create a new main function which we're going to leave empty for now going to pass and then we're going to also import from pi qt uic because this is what we're going to need in order to load the ui file that we create with the designer so once you have installed the designer all you need to do is you need to start a new form and you need to click on main window here as a template you click on create and now you can go ahead and design your graphical user interface like that so it's really really convenient you have all the elements here on the left and you can just drag and drop them in here so what we're going to do first here is we're going to start with a basic uh where are the labels there you go with a basic label that says uh let me just double click that says user name then we're going to have a second one which says password and then we're going to have two text edits from here and we're going or actually text edit is a little bit too much let's go with line edit we'll have a line edit here and we're going to have a second line added here and then we're going to have a button a push button which is going to there you go i'm just going to say login or something so the goal here is to make a sample application we're going to have a basic username password login and if we enter the correct data we're going to be able to access the ui elements at the bottom here and those ui elements are going to be just a basic label that says your message let's just make this a little bit larger there you go your message then we're going to have a basic text edit i'm going to make this a bit larger here and this text edit is going to be for our text maybe let's make this a little bit smaller the whole ui there you go and then we're going to have another button at the bottom that says say it or something like that say it so basically we're going to do the same thing we're going to have a text box with our message and a button that triggers the message box but in order to access these elements we're going to have to enter the correct password and we can also add some menu here so we can save file and come on file and in here we're going to have the option close to end the application so now we can resize that maybe make that a little bit more beautiful by shifting the elements up a little bit that's a bit too much there you go there you go and there you go so this is a very basic graphical user interface you can spend some more time designing if you want to we can resize that a little bit here and put that to the left a bit resize that as well there you go and once you have that done once you're satisfied with your graphical user interface all you need to do is you need to save it i'm going to save mine on the desktop as my gui dot ui and this file is what we're going to need now in our project directory so we're going to go to desktop and drag it into pycharm into the directory that we're currently working in and as you can see this is an xml file so the whole graphical user interface is basically just full of tags and this is the whole ui uh it's going to be parsed then into an actual graphical user interface and in order to load this into python what we're going to do now is we're going to create a new class which we're going to call my gui and it's going to extend from q main window and we're going to have a basic constructor which is going to call the super constructor so we're going to pass my gui and self and we're going to call init and after that we're going to just say uic dot load ui and we're going to provide the path to the graphical user interface file my gui dot ui like that i'm going to pass self as the second parameter here and then self dodge show now actually this should be enough to be able to run this so in the main method we're now going to say app is q application [Music] with an empty parameter list again then window should be my gui and then app.x i think that should be it that should be working let's run this and see if this works there you go you can see that our graphical interface graphical user interface is now actually real we can click the buttons uh we can go into the message boxes and so on into the text boxes and we can also open up this menu of course the functionality is not there yet and we need to change a couple of things first of all we don't want these two things here to be enabled unless we have already entered the right password so maybe we should go back to the qt designer click on this here and check off enabled and the same goes for the button so we're going to disable this we're going to set this to false so to say and now we're going to save this again and i think i need to replace this file so let's delete it and drag it in here again there you go now this time i moved it or actually i moved it last time as well so now if i run this we should not be able to access as you can see these two ui elements at the bottom and in order to make them enabled we're going to have to enter the right password and username and this is the functionality we're going to implement now and in order to access these ui elements since they're not defined in python we just need to access the individual names that we can find here for example this button has the object name push button so we can access it using push button this box here is line edit this box here is line edit underscore 2 and this is text edit and so on so this is how we access the individual elements and in here what we're going to do is we're just going to say self dot push button which is the name of the login button clicked dot connect and we're going to connect this to self.login which is a function that we don't have yet so going to define it self.login and all we're going to do here is we're going to say okay if self. what was the name here line edit and line edit underscore 2 by the way you can change these names by just clicking in here you can also call them username and password if you want to customize them and i recommend you to do that in an actual project for now we're just going to go with line edit dot text if that equals neural nine for example and self dot line edit underscore two dot text equals password and of course never ever check a password like that um but if that's the case we're just going to say that uh this is correct so we're going to say self dot and we have the text edit and the push button underscore 2. so text edit dot enabled or actually dot set enabled to true and then push button underscore two set enabled to true as well so this enables that and otherwise we're just going to have a message box so else message equals q message box message dot set text set text and we're gonna set this to invalid login message dot exec there you go so at least that part should be working let's see if i enter some nonsense here you can see invalid login and if i enter the correct data so neural nine and password we should be able to see that now this is uh enabled so all we need to do now is we need to implement the say it function again so we're going to say self.pushbutton underscore 2 dot clicked dot connect self dot say it and we need to of course implement that function as well uh define self or actually say it there you go i'm gonna pass a message and all we're going to do is message equals q message box and message dot set text going to be message and then message dot exec like that and we want to make this a lambda expression again because we need to pass a parameter which is self dot text edit dot to plane text like that so again let's log in neural nine password and login and now let's just type something say it as you can see this works now what we need to do here is we need to also implement this close and this should be quite simple we just need to find the name of it uh which is action close so we go back into pycharm self dot action close dot i think this is not clicked but triggered dot connect am i right yes uh and then we're just gonna say exit with the code zero which is a lambda again so actually we don't need to do this we can just pass exit here let's see if it works there you go works uh so the only thing that i would like to change here now is i would like to make the the password field an actual password field and i think this is done somewhere here by just uh what was it by changing the echo mode password was it that not sure but i think that should be it so let's try it out we're going to save this again and we're going to replace this again so we're going to delete that ui file we're going to drag this here and we're going to see if it's now a password file there you go it's a password file and it's still going to work so if i write password in here and neural nine here the login still works everything else works as well and we can close the window here so that's it for today's video hope you learned something if so let me know by hitting the like button and leaving a comment in the comment section down below and of course don't forget to subscribe to this channel and hit the notification bell to not miss a single future video for free other than that thank you much for watching see you next video and bye [Music] you

Channel: NeuralNine

Views: 6,997

Rating: 4.9626169 out of 5

Keywords: python gui tutorial, python, gui, tkinter, pyqt, qt, qt gui, pyqt qui, pyqt5, qt5, qt designer, pyqt5 designer, pyqt tutorial, qt gui tutorial, pyqt gui tutorial, pyqt5 tutorial

Id: MOItX2aKTGc

Length: 22min 7sec (1327 seconds)

Published: Wed Sep 15 2021