PyQt5 Crash Course: Button, Label, Text Edit, Check Box, Spin Box and Combo Box [for beginners]

and welcome back to my channel for another pi55 tutorial video so this video is actually a python crash course into the most basic elements in python so how to build a basic graphical user interface with python and pi qd5 now how does this really work now i you can probably tell that the graphical user interface that you can see at the moment isn't really the most attractive one so it does look very bare it's missing probably a lot and it's sort of messy so that's something to keep in mind that like i said this is something for beginners we can later on choose to style this further make it a bit more complex and obviously build a real world application with a pi kg5 graphical user interface but for now this crash course will cover the following basic elements the first element that we're going to cover is actually a label so a label is as you can see here some static text so you have here create your profile first name last name you can even this one says label so this is just text that you have on the screen it doesn't really change you can't really edit it um not not through the interface uh you cannot so you can't do the code obviously so that's the first labels the next one is text edits so text edits or text boxes or text fields so depending on the language or framework that you're using this has different names but it's basically this box that you can type stuff into so now i have the first name i also have you know the last name and yeah we can actually type stuff into these boxes so these boxes will take some text and store it in them we can also make these boxes to be read only that means they're not editable and we can also sort of disable them now what else can we do so we said labels and text boxes the next thing we're going to cover is actually spin boxes so spin boxes are this thing you see right here they store integers or numbers numbers actually doesn't have to be integers and they just you know go up and down depending on a certain step size so here our step size is one and we have set the maximum to be five and the minimum to be one and we can see here that every time the value is changing the console is printing out current value fi current value and the actual value so here we can see the current value is one if i change this to two it's obviously two now so this is what a spin box looks like you can set the minimum the maximum and you know somewhat reaction whenever something is changed so whenever the value is changed now the fourth element we're going to cover is a checkbox you can see here we have this employee check box and here we have occupation which is sort of blank so there's nothing going on here there's no where to type in your occupation now if we do check employed we can see here that we have now a combo box now this is the next element that we're going to discuss a combo box is sort of this drop down that you have where you can select one of many things um one of many items you could say and if i uncheck employed you can't see the occupation box disappears check it it's back uncheck it it's gone again now if i do keep it checked this is a combo box and i said we're going to cover this as well so if i change one of these i can see doctor selected product manager selected now obviously this should be made much bigger so you can actually see the words but you get the point we're altering this label that we have here the static text depending on what we're selecting in the combo box now if this is confusing no worries because we're gonna code all of these step by step and we're gonna go through them in this video now the next thing that we're going to cover and this is actually the last one so following labels text edits spin boxes check boxes combo boxes tons of boxes we're going to cover buttons now if i do press this button we can see that it disables the first name and the last name so here it disabled um it disabled you know the first name and last name field so we can't really type anything anymore they're all grayed out and it prints a value here so it prints the first name last name is employed and if if employed hasn't been checked it will have printed is not employed so these are the elements we're going to cover this is the sort of basic graphical user interface that we're going to be building now stay tuned in this video we're actually going to build it together and code all of these things so let's see because you are actually beginners it's worth mentioning that iqtv5 is a python graphical user interface library you may already know that but it's just something worth mentioning to install pique5 all you need to do is actually go to your um terminal and then just pip install by qt five obviously i have it so it's gonna tell me requirement is already satisfied on the other hand to use something called cutie designer and let's first explore what qgi designer is and then i'll tell you how to install it if this is a bit confusing i do have a separate short video on simply how to set up iqtv5 as well as setting up the designer and really getting started with working with them so what is qt designer qt designer is this tool right here so it is a drag and drop tool you can see right here that enables us to design our graphical user interface using a simple drag and drop functionality meaning if i want to suddenly add another button here i can just drag one onto my screen and now i should have a button here if i want to add a checkbox i can add a checkbox here and this is a very convenient way for us to actually be able to really do these different things so it makes the process of building graphical user interfaces super fast and super intuitive that you don't need to manually code all these things especially if you have a very huge ui now how does this really save them it saves these files as dot ui files you can see here qt crash course dot ui these dot ui files should be added into your pycharm project or into the same folder if you're using a standard text editor and not no python so you add these into the same folder once these are in the same folder you can actually load them through a specific function that we're going to explore in a second and once you load them these elements become part of the code the dot ui files are actually xml files so if i do open this and here you go so they're actually xml files so the reason that took forever is somehow uh python doesn't really support them but it's worth mentioning that you can edit them from here you can't change the xml files and this is really the actual interface that we are using so enough about that let me just go back to the python project so after this how does this you know work how do we load this ui that we're designing in drag and drop how do we load it into our pytron project so the way you can actually load it is simply with this function right here although it's not as easy as it sounds first things first to actually use qty designer and use all of this drag and drop functionality and exploit its many benefits what you need to do is actually install it and it doesn't get installed with iqtv5 on its own so this is a common misconception what you need to do is to install ipt5 dash tools and qg designer is actually one of those tools and you can see requirement already satisfied in your case you'd wait a couple minutes once it downloads you're good to go okay now we have have it actually downloaded what do i have here so let me just hide this part of the code for now and let's just focus on here so here we have our imports so these are the inputs you're going to need regardless of your pi 255 application so you're going to need the widgets obviously so the different elements that you have in your user interface you're gonna need a queue dialog so this will be what you open up to actually launch your application you're gonna need a queue application so this is the actual application that we're launching and you're gonna need to import your system just to actually be able to execute and run this application another thing you need is this so from pique5.uic import load ui load ui is actually a function that we're going to use here and we use it to simply load ui give it the name of the ui so here it would be qtcrashcourse.ui so this is the ui here and south once we do that we're able to actually load the ui into a class so this is why we use the class main window and then we actually simply define a constructor and in the constructor we load the ui why do we use classes you have to use a class for every different ui you have in pi q85 because these different elements the buttons the labels the text fields they become actual variables or attributes for this specific class so later on you can actually refer to this checkbox as self.checkbox it will do this and we're gonna see that in minutes so don't worry about that but this you can see here that there is actually no variable called checkbox but once you load this ui you actually create multiple and multiple variables so that's really it for loading the ui now the other part here you can see it's commented with main this is the actually the main part of the application so we're done with defining our classes how do i run it you create a queue application a queue application is basically an application using pique5 then what you need to do is actually you create a widget and this widget will have to contain the main window so you create an instance of this class that you have defined above and add it to a stack of widgets what does this mean this means that okay you have this class this can have you know infinite number of screens with the same like layout you create an instance of it once the instance is created actually you are able to um add this to a widget and then actually show it so which did not show here the fixed height and fixed length sorry fixed width are just integers that we choose that you know help us um you know like set the actual fixed height and width for the application without being able to drag it and you know mess things up so i just you know change the values it depends so whatever you like whatever you designed it to be you can change these values then finally what you need to do is execute the application and then if it doesn't work out you can simply exit the application so that's really it for running it now at this point if i do press run what do i get basically what i've done so far is i've simply loaded this ui and no worries i'll get to designing the ui in a second so now i'm running it here we go i have the ui it's open up in front of me and we can see here that we have all the different elements obviously now i can click the button i can type stuff i can change stuff here um there is actually no stuff here and nothing is happening because our code really contains no handlers nothing whatsoever so that's really our first starting point we were able to load the ui and there's really no code involved yet so the next steps that we're gonna follow is one we're gonna actually design this ui and two we're actually gonna start coding so let's go back to designing the ui let's go back to qt designer forget about code for a bit and see how does this whole thing work what i'm going to do is i'm going to design a separate ui file in parallel so let's see file new let's choose dialog without buttons so here dialog without buttons and this means that this is actually just an empty dialog i can click create and we can see we have an empty dialog here i can resize this to have almost you know a similar size to its parent and yeah so this is our current dialogue so i'm just gonna keep this here and we can't choose to save it save it in the same place so let's say qt crash course 2 okay so we're not going to be using this one but i just want to show it for the sake of demonstration and show you how actually these uis are coded i'm sorry are designed so no coding involved here we can see the background color is a bit different in this case all you need to do is right click and change style sheet so don't be scared if you see style sheets you don't need to be familiar with css to be able to do these sort of things what you need to do is simply just you know okay add color background color you want to add color white you want to add a grayish color you want to add you know whatever color you like just make sure it looks you know somewhat presentable so let's say it's very pale yellow that's not maybe presentable at all but you know you get the point and that's really it you you have your background color so it pg-5 is really intuitive it really helps you out with the css part if you are interested in more css i have a video specifically on styling pi 25 um you know stuff so python graphical user interfaces with css okay so i have my background color now it doesn't look the same as this one but okay so like we said our very first thing that we're going to do is called labels so coming here we can see these different widgets that we can actually involve in our um pyqd 5 application so here we have maybe a label so yeah that's really what we need you can get a combo box from here you can get um a push button from here so let me just delete these for now and let's first actually use the labels so i have a label it's very tiny doesn't really contain anything i can change it to create your profile so that's really what we're doing and i can make it bigger another thing i can do is actually change the style sheet again and let's say here i want to add font let's keep the same font and maybe make it bigger 26 you can make it bold if you like now you can apply you can see the label just got much bigger you can also change the color of the font so you can make it this dark blue and then you apply so it doesn't really show here but yeah it was just changed so okay we have our very first label now this label here is static text now the user will not be able to change it also if you do want to preview what you can do is simply press ctrl r and you'll be able to preview your design on a normal graphical user interface so this is how it would look like so yeah we have our very first label now what we can do again is add another label so we go back here we drag another label and this label let's say first name and obviously i also want to make it bigger it doesn't really look that great so i'm gonna first add the color add this maybe brighter blue so that we can actually tell the difference and then i'm going to add the font same font let's make it 14 16 make it bold and then press apply so okay that looks pretty much like what i have above and yeah that is our first label now we go here and the very next thing i'm gonna tell you is this part here so here this is the object name the object name is what the variable inside python will be called so now i can call this f name or let's say first name actually okay so i just called it first name i can go back to python here let me run this and let's see if the graphical user okay i should change this to qt crash course 2 okay so now i'm running this and here you can see that okay we just have these two very static labels and now there's really nothing that can change so yeah they exist they're loaded now why did i call it here first name so i call this label first name i want to be able to refer to it through the code so let's see it's self dot first name dot satisfacts hello okay so i'm just gonna erase this later but it's for the sake of demonstration i'm gonna run it now and you can see here that in place of first name you can actually see hello which means i was able to change the the text from the static text label thing and actually change it through my code so later on whenever you're actually changing stuff you're building this application let's say your application welcomes a user and it should say hi username so let's say hi john hi jane hi mark so depending on that you will be able to change your labels so that's one thing to keep in mind changing the labels text is something that's very possible so i'm just gonna erase this now because we don't really need it at the moment but we can refer to this later on now that i have first name it makes sense to just copy paste it and create others so i'm gonna call this um last name so this is the last name and what we have before is we have age occupation let's see and this label i'm gonna just come here and paste okay so yeah that should make sense okay so now we have like a somewhat like fine set of labels and we're just gonna use these to refer to stuff as we use them so this is how our graphical user interface looks at the moment okay we have labels now what we need next is actually text fields so next thing we're going to add are text fields or actually sorry text edits so i add a text edit here it looks like that okay so i can also just create another one and here we go okay so these are the different text fields so now if i control or to preview i can actually type stuff in here and then type other stuff in here so these are my text fields i can also change the font size if you can feel that the font is too small so let's say out font same font just make it you know bigger size you know apply let's copy this as well and apply it in the other text field so okay here we go now if we ctrl r we can type in and obviously the text looks much bigger so this is a text field and this is how it looks like it looks fine right okay for now we have the text fields and the um labels that we have on the screen here you can see the object name is text edit later on in my code i'd like to differentiate between the first name and the last name text fields so we can see here let's call this f name and let's call this one l name sorry typing okay other names okay we're gonna use this to be able to get this in the code all right what's next what's next is we're gonna add a button and then we're gonna refer to the different types of boxes that we have but first let's actually get a button so here we have push button you know it looks very yellow you can also right click change the style sheet again then change the background color make it a dark blue you know apply um obviously changing the font color would be a good idea so let's make this one white and also apply uh we can change the font let's make this bigger as well just like big enough and apply okay so now you can also make this bigger and here we go so we have a button ctrl r you can you know preview this and everything looks solid for now okay so this is what i have let's say my first goal at this moment is to exploit what i have so far so let's just forget about the spin box the combo box the checkbox i want to exploit what i have right now and really just whenever i press on the button print out the first name and the last name separated by space that's our first goal okay if you're interested in this being more interactive you feel free to pause and try to quote this yourself but otherwise let's just go ahead okay so this is my button the actual object name is push button so let's just call it button okay let's go back to default so we said to refer to elements in our code all we need to do is self dot object name so self dot button how will i say that whenever you are clicked this is this is my goal when the button is clicked do this you know print the name and the last name when button is clicked how do i say that in the code i say self dot button dot click dot connect okay and then i would just write in the name of any function here so self dot button click and what is this button clicked it's a function i'm going to define myself so button clicked and here you go okay and here we're going to just print stuff so what happened now i just told that when the self.button thingy when this variable when this object is clicked connected to this function the function being self.button click and this is the function here and what it's going to do it's let's say here let's first make it print hello okay let's forget about all the other stuff so let's see push button push button we're pushing it and it's printing hello every single time so pushing it again it's printing hello every single time so what's happening it's connecting to self.button clicked going to print hello and this is the task that's being accomplished okay that's my very first thing let me create an output string okay first it's empty and what i'm going to print is actually the output string itself i want the output string to actually take the values from the very first text edit and the very next text edit and actually print them out so here's what i'm going to do i'm going to say self dot f name that's what we called it two plane tags so that's how you get the text from attacks edit plus a space board plus self dot l name dot two plane text right okay and now i'm gonna run this again so let's see i'm gonna say john and here i'm gonna say smith and then i'm gonna push the button and it will print out john smith so self dot fname dot two plain text changes uh sorry not changes takes the text from the actual text edit and puts it in the output string so this is what we're doing okay this is a good idea now what if every time i press this button i don't want to make this editable again so okay you know what the guy decided his name is john smith i don't want him to change it i want to disable this so similar to what i showed you before here's what you can do so let's see self dot f name dot set read only and i'm gonna set it to be true by default it's false meaning it's not readable and i'm going to do the same for l name and the next thing i'm going to do is i'm just gonna self dot f name dot set disabled disabled to true and then self dot f main dot set disable to true okay this should be our name all right so what am i doing now i'm disabling it after the button is clicked so i'm not allowing the user to type after you know they press confirm they're done okay so let's see john smith and let's see okay we confirm it's gray now we can't edit it anymore it's gray it's done okay you made a decision you can't go back now that's really what we just decided for the user so that's another attribute we have for these different text edits so my goal out of this is to show you what there are so many properties for each of these widgets so for a label for a box for a text sorry text box text edit uh button there are so many different properties so here you know we just set disabled set um you know set to read only and we get the text so there are infinitely many functions and i wish i can cover them all i'm trying to cover you know the relevant the interesting ones but this is just something for you to keep in mind to see like the possibilities are actually endless okay so now we covered this part so let's say for now we're done with the text edits and we're done with the push button actually for now let's move on to something different so let's go back to our cutie designer and see what we're going to do here we actually have a checkbox a checkbox yes so let's copy it and paste it here let me drag it here okay so what is this checkbox a checkbox is basically um just you know the thing that you can check or uncheck so i'm just gonna control r to preview again and yeah it can either have a check mark or not okay now what happens next what's gonna happen next is the following so okay i added the checkbox the name object name is here is checkbox and what i want is to print something whenever the checkbox is changed so i go back to the code and let's say here i'll add a section for the check box so let's see self checkbox dot state change dot connect and what i'm going to do is create another function called checked okay so whenever the state is changed meaning it's either checked when it wasn't before or it got unchecked because it already was in this case i will go to a function called chat okay i'm gonna define this function myself so i'm going to say is checked plus okay okay str self dot check box dot is checked and we're going to see what this function does here so now i'm going to run this okay so i have here like one doesn't i don't need to demo this i check the box is checked is true i uncheck it is checked is false so this is a boolean value that's being returned okay so i can use this boolean value to perform other things depending on whether or not the check box is actually checked so we said before we actually want to add a combo box so let's go back here to python sorry cutie designer and add a combo box so a combo box can be gotten from here so you can actually get a combo box from here again you can make this bigger and you know look better so it follows the same logic you can again change the style sheet change the font make it a bit bigger and yeah so there is one thing i want to talk about related to combo boxes if you double click on a combo box you can actually add elements so let's say i've got one and let's add no item two and so on so okay we have these different elements that we just added now what if i want to actually add this to code and you definitely can and you definitely should because in some cases you're getting this information from a database you're not necessarily having it predefined the things might vary they might be different so now here you can see um okay i just did not save this okay let me run this so yeah you can see item one item two okay like i said we want to change this to be more you know added to the code how can we do this okay let's see so we're gonna create another section here for our combo box okay so self.combo box is that what it's called let's check so here we can see combobox is the name so self.combobox dot add item and here i can add the item hi and i'm just you know trying things out just to show you and you can see here that we have a third item hi okay so let's go back let's you know delete these items that we've already created and you know add more solid occupations what we can do is create a list so list of the patients and we're going to say engineer uh doctor and manager okay and what we're going to do is for job in list ock self dot combo box dot add item job so you can add strings and they will be different items in the combo box so let's run it again and you can see here we have engineer doctor manager okay so for now let's you know sort of keep this so let's um let's actually finish up the combo box and change the label accordingly and then we'll see how to make it disappear whether or not the employee is actually checked okay so how am i going to change this label depending on what is selected here so we actually explored this earlier in the video so we can use set text so what we're going to do is actually have another function here so we're going to say self dot combo box dot value changed dot connect and in this case we're gonna connect it to combo change which is another function that we have defined so we'll come here we'll define a new function so let's see that combo changed south and we're gonna create this function and for now what we're gonna do is let's say print uh value change okay just to verify that everything is working so now okay so obviously i messed something up so self.combobox.value changed um yeah okay actually this is for the spin box so let's see this should be current index change okay so sorry for that now we can run this and here if i actually change the index so you can see here okay value changed i change it to manager value change if i keep managing itself the value is not changed nothing will happen engineer value changed okay so we're actually printing now we said we won't actually change the label so going back to designer this label has a name output label so we're gonna go to the code and let's see self dot output label dot set text and now we're gonna set this text to be the following so we're gonna set it to self dot combo box dot current text so this is actually the attribute we use to get the current text from the combo box space is selected and this reminds me to actually make this label bigger so we can actually see everything and now let's run it so okay engineer okay so that wasn't actually changed so okay manager is selected doctor is selected engineer is selected and you can see it's changing depending on how we change the combo box so this is another attribute we have for the combo box we can um you know whenever the current index is chained we can get the current text and we can also use it to set the label okay great what's the next thing that we're going to do the next thing we're going to do we said that whenever we want employee to be unchecked we don't want to see this combo box like we already told the application i'm not employed so please do not actually show me the combo box okay how are we going to do this so the first thing we're going to do to make sure it does disappear on startup because as soon as we launch the application employed is unchecked is we're gonna set it to not be visible so self dot combo box dot set visible to false sorry okay so the visible is false now if i run it okay it's not here you can't see the combo box even though it does exist in our code what we want is when the checkbox is checked so the state changed we go to checked now we were printing is checked so i'm going to take this part here check whether it's checked okay that's a mouthful okay so if self.combox is checked so it's checked i am employed okay so self.combo box dot set visible to be true else if it's not checked self dot combo talks dot set visible to be false so now if we run this okay employee is unchecked i can't see the occupation i check employed here we go so now i can see it i can change it and this will change the labels and let's see i decided i'm not employed so i uncheck it and it's gone and i check check it back and it's back again so what's happening is every time the state is changed for the checkbox it's connecting me to self.checked and what checked is doing it checks if the checkbox is checked and it will set visible if it is so it will actually shows the occupations otherwise it will not set it to visible it will keep it to be invisible so that's really how we're connecting everything together for now what we've done is we've covered the check box um the buttons and the labels and the text edits and the combo box another thing we had in the earlier part that i saw that i showed you in the very first part of the video is when we do press the button it prints the first name last name plus whether or not they are employed so what we can do here is if self.checkbox is checked again so we're checking if they are actually employed output string is equal to output string so we're concatenating to it plus space is employed else okay we're going to make them to be not employed so we're going to go down and let's say it's not empty okay and in this case we're gonna print the output string so now i'm gonna run this again so let's keep them not implored let's say john and his last name's just us so i push the button okay i didn't push it here we go so john s is not employed and we can see that they got disabled just like how we defined them earlier on okay now if i do check it you can see the occupation shows up back here and the doctor is selected okay so that's it for the first five four different elements so for the label the text edit the button the combo box and the checkbox so yes five the final one is actually the spin box so let's go back to designer let's see so the spin box is here so the spin box is from here and it has an integer value can make it bigger again we can change the font so it's really not that difficult so you're probably used to this by now okay again if i control r i can just you know increase this and decrease it however i like so it's gonna be any number i can even you know type something here okay how do i set a minimum and a maximum for this spin box and then how do i print stuff whenever it's changed so these are our next two goals the first thing we're gonna do is in my constructor so everything i write in the constructor is things that i am initializing so as soon as i launch the app i want these to be applied i want the combo box to be not visible i want the comm box to have these items i want to connect the click and the button to this function so this is everything in the init function the others are things that happen when certain events happen so when a button is clicked i want to do x when the checkbox is checked i want to do y so that's really what we're doing so this spin box so let's see the spin box okay first thing i'm going to do is self.spin okay spin box dot set minimum to be one and then self dot spin box dot set maximum to be 10 okay and yeah that's the very first thing we're gonna do let's run it okay the minimum is one and i go up i can't go beyond time okay what's the next thing we're gonna do next thing we're gonna do is send dot value change dot connect so in this case when the value is changed i want to connect it to a function called spin change or you can call these functions anything by the way although you probably knew that so that spin change and what we're going to do here we're going to print the following so what we're going to print actually is the current value and then actually retrieve the current value so we're going to do self dot spin self.spinbox dot value what this returns is actually an integer so we need to cast this into a string and here we go so here's our str now we should be done with our mini application so okay main window object has no value okay what have i done let me just check okay self.value change so this should be then box apologies for that okay so i change it to do it to two current value is two every time i change it it's something else i can even directly type so seven uh four that's right three and so on so that's really our first application we learned multiple different types of attributes that are associated with each of these different widgets so the spin box has you know a minimum and the maximum value it has a value changed a combo box has a current index changed a text sorry checkbox has a checked or state change and so on so there are multiple attributes associated with each of these i really hope this video was useful so please let me know if it was please let me know about other different widgets in pyqd five that you'd like to see videos on i do have a pyq 5 playlist feel free to check it out and yeah that's really it for this video see you on the next one bye

Channel: Code First with Hala

Views: 15,907

Keywords:

Id: JYZzO__ulLw

Length: 39min 13sec (2353 seconds)

Published: Mon Dec 28 2020