Python GUI | How To Make A GUI In Python | Best GUI Framework In Python | Edureka

[Music] in this machine driven era the interaction between humans and machines is one of the most important aspects to deal with this is exactly why gui has been developed with gui's or graphical user interface one can create marvelous and visually pleasing items that allows users to interact with machines now creating gui's is undoubtedly amazing but it just gets better when same can be done along with python so if you are a python enthusiast and want to create amazing gui's using python hi all i am junaid here from edureka with an exciting new session on python gui so without any further delay let's start off with today's agenda we'll start this session by understanding what is gui and what are the various components that revolve around it then we shall dive directly into gui development using python following that we shall discuss various frameworks such as tk inter tv pqt5 and pygame before we begin do consider subscribing to our channel and hit the bell icon to stay updated on training technologies also if you're looking for online training certification in python check out the link given in the description box below so let us now understand what is gui gui or a graphical user interface is an intermediate party between humans and machines so here we'll be making use of these graphical components like icons buttons widgets etc so what i'm trying to say here is every time we create an application that has a gui interface right we'll be making use of these icons and here icons refers to individual functionalities of an app so every time end user manipulates an icon i even gets triggered thus executing a block of code in the background and once that's done it gives us a desired response now to better understand this let's take an example of an mp3 player i'm sure everyone at certain point might have used this mp3 player right so what is this mp3 player so mp3 player is actually an application this application will have certain functions like play pause the music shuffle the songs so on and so forth these functions here in our application will be represented in the form of an icon and every icon will perform one specific task or function so if you want to play a pause a music you have to manipulate that button that visually represents that function all right so to conclude what i'm trying to say here is the visual representation of function is nothing but a gui so now that you have understood what is gui let us see what are the various components that revolve around it no matter what programming language or framework you use the concept of gui remains the same right so as you see here in the flow chart there are three basic building blocks of gui development so let's start off with containers or layouts the containers or layouts define the structure of our user interface so here what i'm trying to say is with layouts we can place our widgets according to our needs well now you might be wondering right can we place our widgets directly into our application window the answer for this is simply yes but we cannot organize or arrange our widgets according to our needs few of the examples of the layouts are float layout grid layout box layout and anchor layout all right now let's move on to the next main concept that is the main loop so the main loop performs three important tasks first one is the capturing of the event so main loop is constantly waiting for input from the end user and once the end user gives an input the second important task it does is implementing the logic so whatever the input is received or collected or captured by this end user this will be fed into the program logic and the outcome of the program logic will be displayed back out by refreshing the window so the refreshment of the window is the third important task that the main loop does the main loop breaks only when an application window is terminated the next important component is widgets or we can also throw them as components widgets or components are the basic building blocks of a gui experience so here we are trying to establish a two-way communication link between the end user and the computer there are various types of widgets that are available for different functionalities few types of widgets are canvas buttons label and text input etc so these are the basic components of the rgui so let us now understand how gui is developed using python we all know python is one of the most popular programming language among the developers this will not come to us by any surprise when i say that python provides support for countless number of gui libraries one of many reason is that with python we can develop cross-platform applications so what is cross-platform right well cross platform is nothing but we have a single code base for multiple operating systems few of the popular gui frameworks using python are pk inter tv pt5 and pygame so moving ahead let us now discuss what is tk inter so tk inter or sometime it can also be pronounced as tkinter is one of the most commonly used gui libraries in python so what makes this dk inter unique is that we don't have to explicitly install this library as it comes along with python standard library so let's now move to our code editor and see how we can implement gui using tkinter so the first thing that we are going to do over here is we have to create a main application window so to do that we have to call the object of our tk class and then we have to give a reference variable to it so the reference variable that i would be giving here is main window all right so now we're getting this error right that's because we haven't imported tk inter package so let's do that so from tk inter import everything perfect so let us now execute our code and see what happens so as you can see here that we have successfully executed our code but hold on shouldn't we see an application window here well that's because we haven't called our main event loop so to do that we'll take the instance of this tk class okay that's going to be main window and then call the main loop so let us now run our code as you can see here that we have successfully created our first application using tk inter so this is the main application window so within this application window we are supposed to add various types of widgets such as labels button frames etc let us now add each of this and see how it would look like so let's start adding off with labels so what are labels here labels are types of widgets that are used to display an output to the end user so to create a label all we need to do is call a label class and then we have to pass some arguments so the first argument that we are going to pass is where should we place our label widget so it's obviously within our main application window right let's take a instance of our tk class and place over here apart from that as i mentioned earlier label is used to display some text right so in order to initialize that text we'll use this text attribute and we'll pass an argument over here something like hello world all right and now we have defined our label but we have not yet added our label to our main window so to do that we can either use dot grid method or something called as dot pack method so what happens in dot grid method is dot grid method will allow us to arrange our widgets in the form of rows and columns there can be n number of rows the index of this will start from 0 1 and so on similarly over here so number of rows over here will also start from one zero and this will continue on till n minus one this is what grid does right so the another type is the pack so what pac method does is so consider that we have this application window right the default position over here is this particular part the pack method will place our widgets at any of these borders so let us implement these two methods and see what our application would look like now to add our label to our main window let's use pack first okay let's take another label over here so as of now we'll copy this so we are defining another label here we'll say this is tk inter okay and now let's run our code so as you can see here that we have successfully added two labels to our application window now let's implement the same using grid method so we have this grid also have grid method over here so within the grid obviously we have to pass certain arguments right like as i mentioned earlier here it's going to be in the form of rows and columns we're going to have arguments such as row the first one is 0 and the column is also 0. and coming down to the second label here we want it to be placed in row is equal to 0 and it will be in the same row and but the column would be different so it would be side by side okay so this would be one all right so let us execute our code so as you can see here we have our two labels which is nothing but two widgets and one widget is present on the left side and the other on the right side so let's try to manipulate this let's try to play with this more rather than placing on the same rows let's place them on the same column so to do that we'll change our row here and the column will become zero let's execute our code so as you can see here our widgets are like one below the other and now let's move on and go to the next type of widget that is nothing but text input in order to capture the text from the end user we have a type of class called as enter so every time we use this enter class we can capture any input data from the other side so to do that we have to define our enter class we have to tell where we want our enter widget to be so that's going to be in main window so there are a couple of other attributes let's see a few of them so let's consider something like the width right so let's give the width wi so we want width to be 50 pixels and then let's give a border width like just for the aesthetics reason here the border would be five and now we have to add this entry to our application window let's think something like this okay so let's make it creative so this is our application window the label one will say something like enter your name we will place our label one here so this would be like column zero and row zero right next to that we'll have another widget that is entry widget so this would be in column one but row zero so whatever the name is that the user has to put the name over here similar to that we have second label the second label over here let's ask the age of the person so this would be in our first column and the second row and similar to that we'll have another entry over here which would be in the second column and second row so let's try to implement this okay so before that let's add this to our main window so we are using grid here all right so here we want it to be in row 0 and the column should be 1 right the second column similarly let's try to create another entry widget here and here we want it to be in the second row second column right so let us now run this code and see how it would look like well this is the expected output right here we have our first label let's also change the text of our label here so this would be enter your name and the second label should be like what's your age so let's run our code now so as you can see here we have our first widget so enter your name so here we'll enter our name so coming down to our second widget over here so what's your age so i'm 24 so i'll just put here 24. this is not enough right so obviously we have to tell our system or somehow we have to put this value to our logic so to do that we use something called as buttons right so we use button widgets so what this button widget does is once we are done with this task over here we can give button widget and every time we click this widget we can have this printed on our console so let's implement that okay let us implement our button widget so we just need a single button right so here we are going to use button we want to place this button in a main window obviously so main window let's give some text to our button no one would understand if there is no text or button right let's give us click me all right and finally we have to add this button widget to our main window so to do that we are going to make use of grid okay obviously this would be in the third row right so row would be 2. so if it is third row obviously the index would be n minus 1 so it's 2 and the column given column 1 all right so let's now run this code so we have this button here but nothing is happening so let's enter our name like enter your name so also we want our age hit a click button but nothing is happening right that's because there is no callback function which is assigned to this button so what is this callback functions a callback function is nothing but a function that gets triggered when an action is performed on this button so let's see how do we define this callback function we can define over here so def let's give it as like we can give here any name so we'll give here as on click so every time we click this button right we want our name and our age to be printed on our python console so to do that we obviously have to extract our text input from this entry point over here right so to do that we'll initialize a variable over here so let's give it here as my name okay so this is just a variable name okay and then here let's cue it as my h so this entry widget right so obviously this my name and my age have the instance of this entry class this entry class has a method called as get method so we use this get method to extract all the values that were stored over here so let's print something like this print my name is should be my name and then we'll give here as and my age is my age now we have to bind okay even now if we click our button right this function won't be called so if you want this function to get executed every time we click this button we use an argument in button class called as command so here command this will be equal to just the function call so let's copy this and paste over here all right so everything looks good so let us now execute our code and see how this would look like right so here we have our widget right so enter your name so let's enter our name over here in our entry widget okay so i'm junaid here and what's your age i'm 24 years old and now we are supposed to click this button what are we expecting after clicking of this button so we are expecting that our name and age should be printed out over here right so let's click this button and see what happens so as you can see here that we have printed our name as junaid and our age as well so this was a basic example of how to implement you know basic widgets in tk inter so now that we have covered few of the topics let's create a simple calculator application okay so first let's erase everything over here uh let's first create our outline right so we'll have this application window here and within our application window here we'll have a text input area that is the entry widget okay and then we'll have various grids of button so here this would be like okay so we'll have like four grids one two all right so let's add one more over here so there are five rows over here and the number of columns that we want over here is on the first three rows is three columns and after that we'll just need two columns right so let's implement this in our program and see what will be the outcome all right so to start off we need to import our tk enter right so from tk inter import star now we need to create the object of a tk enter we'll first create a class and the instance of this class would be present in let's take as root the first thing that we need to do is we need to have this entry widget over here right we'll give one variable here and give here like call the entry widget the first parameter that we're supposed to pass is where we want our widget to be right so it's going to be the main window so here the name of the main window is root then let's have some random width so let's give the width here as 35 okay we can give any random value and then we'll give some border width here let's give here as five pixels and now we're supposed to add this to our grid right so this is the first component so this is gonna be in a row zero and column zero so e dot grid and this here our row this is gonna be 0 and the column will also be 0. so now that we are supposed to add this various buttons down but the layout over here is changing right so in order to cope up with that we use something called as column span so what this column span will do is it's going to initialize the number of columns that's going to be there from the successive rows here we have only one column right so within this area we want three more columns so we use column span and this should be equal to like we want three right so it's gonna be three we also have to add some spacing right we don't want it to look congested so like we have something called as pad x and pad y as this is the y axis and this is the x axis right so now we want some padding between these two buttons here so to do that we'll just use pad x okay so let's give like 30 pixels let's give some comment here so here we are just defining text input area right now we're supposed to add various types of buttons yeah so let's now add our buttons okay so we need buttons from nine to zero and apart from that we also need buttons to perform addition to clear our screen and also for equals and then we also need a button to clear right and then to perform the compute so we'll give the name as equal all right so let's define these buttons here so that's going to be like button so we'll have this button class obviously this has to go within the root that's nothing but our main window we'll give the text for our button later let's have pad x so that there's a space between each widget so pad x let me quickly erase this diagram here so we'll give you a pad x value as something like 40 and the pad y will give here something like 20 all right and we obviously have to add some function so we'll just give your s command we'll not write anything as of now we'll just give here us just some random value okay and then we obviously have to add this to our main window okay so to do that we'll just use grid and then we'll have to define at which row and which column so as we're going to perform the same function for all of these we'll just copy paste this and change the values later so let's copy all of these buttons so we'll add this over here so let's now give some features over here to our button so here we have like let this be for nine and the text that we want to represent is nine because this is button nine right we want this to be in the second row and the column would be over here is first column we want this also to be in the first row first row but the column value changes here so this would be zero one and two and then we let's go here let's change this values here this will be eight and this would be for seven so here this is going to be eight and this is going to be seven all right so now let's define for next three buttons seven and we'll give here as six five and here for four similarly we'll change over here six five and four now we want this to be in our third row right so it's gonna be n minus one so two same rows the column value changes so it's gonna be zero one and two all right for the next three batches of buttons now so this is gonna be for three again for zero similarly three two one and then here is zero so these three buttons would be in the same row so it would be in the fourth row that's n minus one so the value here would be three and then the column value would be like zero one and two so now we want this button zero like to be away from this right so here we like as i've mentioned earlier like we'll be having grid and we'll have like three set of numbers and then if you remember in the last two rows we had only two buttons right so in order to change that we have to change the we obviously the row would change that would be four and the column would be zero and now we have this add button right so we'll give here text as addition so we just give the symbol here and then obviously the row that we want this to be is the fourth row that's the same row the column would be one now if you don't add this column span right what's going to happen is as if we have mentioned column one this would be just below this we'll add the column span later so as of now let's also do it for the next two buttons here so here this would be for the clear button and finally it should be for the equals so here we'll just give here our cls and this to be equal so here let's also define our rows so this would be in like sixth row so it's gonna be five five and the column would be zero and one now we have defined our buttons let's also define our event loop so it's gonna be root dot main loop so now we have to define this functions over here so how we want our function to be is that we have this calculator and we have couple of buttons here so every time we give an input to this button we want this text input area to be updated right so if i press one we want one and then if i press two then i want to after that so let's get on with that okay so we'll have we let's define the callback function so we'll do for capturing the numbers right so here we'll just define the function here so number you can give any random name so i'm giving it as number input all right and here let's pass an argument like number okay so what's going to happen here is we need this current value like whatever value that we have entered right using our buttons we want that current value to be displayed over here like if i press 9 i want 9 to be displayed over here so to do that what we're gonna do is we'll just declare a variable that is current value so in order to get this value we obviously have to use the get method because this is nothing but entry widget right here e dot get now here we'll capture the current value we also have to delete it right because if you don't delete it what's going to happen is so if i have written 9 over here one will be present on the left hand side but we want one to be present on the right hand side so what we'll do is first we'll capture this after we capture this we'll delete it then again when we put the second number we'll reprint it along with that okay so let's implement that logic here so in order to clean whatever the elements which are present here so it will be deleted the column and then we'll have end here to delete all the values and now we have to insert the current value back right so e dot we are again inserting this in our entry widget okay so e dot insert all right obviously this would be in the zeroth column in rows we want to insert the string value so it's going to be like the reason why i'm going to use string here is because i can use a concatenate right so it's going to be like string okay and this would be number plus the current value so now we have to put this callback function in this command over here right but now the issue is we all know this command will accept only the function name it won't take function call so in order to combat that we'll use something called as lambda function okay so i guess you all know what are what is lambda function a lambda function is nothing but anonymous function right let's have our lambda function here followed by the name like the name of a function right so that's going to be number input and then we'll pass an argument as nine yeah it's going to be integer value and here we're going to anyways convert it back so similarly we have to do it for rest of the command over here so it's gonna be lambda it's gonna return number function and then we'll give eight all right i know we'll also have lambda again here and then we'll have number we have to pass 7 all right so let's do this for rest of the functions but we won't be adding this function to our command over here because here the functionality will be totally different right so for add clear and equals so now what's going to happen is here we have this number value right so if i provide 9 so the current value will be 9 but also this will be saved over here and after nine if i put on the new value right so the new value would be like considered as one that time it's going to concatenate new value and old value so that we don't get a single digit number so here i've done a small mistake so what we want to do over here is we want obviously the current value first all right so and then we want the old previous value right so let's now create a function for clearing the values so to do that so clearing the values in the sense we have to clear everything in this entry widget right let's have this all this thing we'll do is e dot delete everything here okay so we want everything to be deleted so yeah so apart from that we also need to define a function for summation right so sum of values so to do this what we'll do is we'll take the current value that is going to be number one and then that will be e dot get right that's because number one is obviously present inside this entry widget right so we'll have this number widget over here and now we have obviously every time i get this value when i'm performing addition or subtraction it's obviously between two values right so i need to save the numbers in our list right so in order to do that i will also create a list over here we'll also define a list okay so let's give that as list of numbers okay so this is going to be the list and now we want this list of numbers like every time you add a value okay every time you click a plus button right so it has to like you have you enter one and then you hit plus the one should be erased and it should be stored in our list here so to do that all we will do is we'll call this list over here list of numbers dot append right we want to append the number one at the same time we also have to delete the entry point right that's because you have to put a new value so let's do that so this will be e dot delete when you clear the values right we also have to clear the values of our list just so that we can perform new compute so to do that we'll just use built-in functions list dot clear so we are done with two so the final thing that we need to do is equals right so this equals is something that is responsible for displaying the output of our values okay so we'll have this def this would be like function name you can give any name so i'll just give you as equals so here what we're going to do is we'll take the current value so that would be from e dot get all right and we'll append this in our list will append number one as this would be in the form of a string we will just change this to like integer value like we just perform the compute on the entire list we have to delete the content of our entry widget there so that would be e dot delete so we'll have this sum value here so let's initialize it like sum initially the sum would be zero so let's compute our values within our list so this is going to be four values in list of numbers so the sum is equal to the sum of values right so it's going to be int values we want to print this value obviously on our entry widget right over here so to do that all we'll do is e dot insert and then we'll update the value that is sum this is going to be uppercase so let us now execute this code and see how it would look like but before we execute we have to add this commands over here right so let's do that we won't be using lambda function because we are not going to pass any values right any arguments here so we'll just do the function call here so for the add method we had used sum of value right so we'll just call the function name sum of values and next for the clear one so it's going to be clear values okay and finally for equals it's going to be just equals right let's give the function name equals so we have added all our methods to our command so let us now execute our code and see how this would look like so as you can see here that we have our simple calculator so now that you can see that we have a simple calculator we can input our numbers and it's working totally fine only thing that's not fitting over here is the position of our widgets over here right we can fix that all we need to do is we need to use something called as column span so let's fix that up all right to fix this up what we'll do here is we'll have column span will be two because we have just two arguments here right so will be two similarly for the last one here we'll have column span will also be equal to two so this would be two all right so let us now execute our code let's see if we have fixed this issue so as you can see here that we have obviously changed this but there is slightly there's an issue here that's because we have to just change the values we have to change the size of our widget over here so let's create a small compute here so if you have plus five so five plus one so the answer over here is six right okay so the reason why we were getting this error over here is maybe because we were computing the integer and sum but no we we have converted over here to all the numbers into integer right so here we have to define position of our value right so when we insert this value in our entry widget right so we have to obviously pass this position so let's run our code now and see whether it works or not okay so we have two plus one okay so this should be equal to three so yeah so our application is working here with this we come to the end of our decay inter let us now discuss kiwi framework so what is python keyword well python kiwi is the open source framework that allows us to develop cross-platform multi-touch applications with kv we can develop applications not only for desktop but also for mobile so because of this kiwi framework allows us to provide input feeds from various sources such as keyboard mouse multi touch events etc so now that we know what is kibi let us now jump to a code editor and see how we can implement gui using kibi so to start off we'll first create a class and here we'll give a random name all right so it'll be demo app okay and this app has to inherit from the app class all right this app class is present in kv.app library so let's import that as well from tv dot app import app so this app class will have something called as a build method def build so what is this build method well build method over here is responsible for combining all the widgets and layouts and put it in a presentable form so what this build method returns is a widget or you can also call it as main widget so right now we'll just leave it blank so in order for us to run our application right we have to call something called as run method so to do that we have to create instance of our app class so that's going to be demo app and then we'll call the run method if underscore underscore name is equal equal main then what we'll do is we'll create the instance of this class here so app this app will be equal to demo app right so demo app and now we got to call our run method so over here we have to return a widget right so let us consider here as label widget label widget as we have discussed in tk inter it is used to describe or display an external message to the end user so this label widget is present in kiwi.ux package so we should let's import that so from keyv dot uix dot label import label class so this label class will have certain arguments such as text let's give text over here as like hello world so now how the app works is first it will create the instance of this class and then call the run method so what run method does is it will provide as a platform so the platform here will be the main application window so within this application window we obviously have to add our widgets and layouts so it is a responsibility of a build method to combine all the widgets and implement that within our application window so let us now execute this code and see how our application would look like so as you can see here we have created our first application window so just to get a recap this run method is responsible for this application window and as we all know we have described this text hello world within a label widget right and this label widget is present inside the build method this build method returns the widgets so this widget is present inside our application window so let us now discuss what are the various types of layouts that are available in kiwi as we have discussed earlier layouts are nothing but containers right and there are various types of layouts that are available in python kiwi few of the example of the layouts are anchor layout box layout float layout grid layout and page layout let us now take an example of an anchor layout and see how we can create a gui using it before we start off let's see what anchor layout does so anchor layout will allow us to place our widget either at the center of our application window or at any of its corners so this will be nothing but top left corner this would be middle center corner and this would be bottom left corner so on and so forth so let us now create a gui application using this anchor layout so let me erase this program so to start off we first obviously have to create our class and we'll give it as demo right demo app and this will be inheriting from app class and we have to import our app class here so let's do that by from keyv dot app import app class so now within our app class we'll have this build method so def build so this build method is responsible for returning the parent widget so we'll fill this later so to run our application we have to call the run method right so to do that if underscore underscore name is equal equal to mean then create the instance of a demo app and call the run method so what i'll do here is i'll just write demo app and then call run method so as i've mentioned earlier here i'll be making use of anchor layout right let's import our anchor layout so from keyv dot uix dot anchor layout import anchor layer so let's create a class here again we can also create our anchor layout here but just to enhance our readability we'll just create the anchor layout class here and just return the object of our anchor layer so we'll have this class and let us give a name here as anchor layout demo which will be inheriting from anchor layout we will call this constructor so underscore underscore init and this constructor will have an argument like keyword orgs and now we have to access all the components of our anchor layout right so to do that we'll use super either we can use this or what we'll do here is we'll erase all these arguments here and just pass keyword arguments so with this we have all the components of our anchor layout so now we all know that layout is actually a container right so within our container will obviously be having various types of widgets right so let's make use of labels and text input over here so let's import that first from kv dot uix dot text input quick brief about text input we use text input in order to capture the textual content from the end user okay and now we'll import text input class and also here we'll be needing tv.uix dot label so we'll import our label class so now what we'll do here is we'll have like self dot label and now we'll have our label class here we can pass some text right so we'll give here as text and let's give something like enter your name so we have now just created our label class moving ahead we have to add this label class or our label object to our anchor layout so to do that we have a method called a self.add widget we have to add the instance of this label class so that's nothing but self.lab so now we have successfully added our label widget to our anchor layout similarly let's do it for our text input so we'll have this text input class so over here anyways we're going to capture our text so we don't have to provide any arguments here so let's now add this text input widget to our layout so it's going to be self dot add widget let's add our text input so self dot text input so before we execute this code we have to return some value over here right so here we'll create the instance of our anchor layout demo class and then pass it over here all right another thing that we're supposed to do is so as i mentioned earlier with anchor layout we can place our widget either at the center or the borders right so let's keep one of our widget in the center and the other one in the top left corner so let us now execute our code and see how it would look like right so let us execute our code and see how it would look like yeah so as you can see here that the entire application window has been covered by the text input but we didn't give this right so over here we also have defined our label widget right so why are we getting this so in anchor layout we can have only one type of widget in it and the reason why the text input widget is taking up the entire space is because we haven't defined the size so let's change the size here we'll use this parameter called a size hint so size underscore hint so now here we'll be giving values in the form of tuple and that's going to be like 20 percent and 20 so this is nothing but 20 of our entire screen like along x and y axis so let us now run our code so now as you can see right we have our label which is present somewhere in the middle so what about our label so as i mentioned earlier right in anchor layout we can have only one widget so what to do if you have multiple widgets within our anchor layout so then what we'll do is we'll have another layout so let me just show you by a diagram so now we have this anchor layout right so this is actually our application window and our anchor load is present somewhere here and this anchor layout as i mentioned is it will take only one widget so now what if we have multiple widgets then what we can do is we can create within this anchor layout we can define another layout within this layout right so they consider this is an anchor layout so within this anchor layout we can have a grid layout so within this grid layout we can define our widgets so let's see how this works so before we can do that let's understand what is grid layout well gridlayout is a type of layout wherein it will arrange our widgets in the form of rows and columns so here is necessary for us to mention how many number of rows and columns that we'll be using all right so before any further delay let's try implementing this so before we can do that let's import our grid layout so from kiwi dot uix dot grid layout import grid layout class let's comment this as of now first we're going to create an object of a grid layout so self dot grid layout so now let's create gridlayout class so this is our grid layout as i mentioned earlier we have to define how many number of rows and columns we'll have here so to do that self dot grid layout dot calls so this is used to define number of columns so here we have just two widgets right like label and our text input we need just one row so if you have like one row and one column then it would be side by side as you can see here now what if we want it to be like one about the other so in that case number of columns would be one and number of rows will be two so self dot grid layout dot rows so this will be two so now we are supposed to place this label widget and this text input widget within the grid layout so let's do that so everything remains the same here the way we define our label everything remains the same only thing that would change is instead of adding our widgets like instead of adding our label widget to our anchor layout we'll add it to our grid layout okay so to do that we'll just do self dot grid layout dot add widget self dot label and again we'll use the same thing here self dot grid layout dot add widgets so what we are doing over here now is we are adding this text input widget inside our grid layout so now this grid layout part has to be added to our anchor layout so let's do that so self dot add widget so here we'll just do self dot grid layout all right so let us now execute this code and see how it would look like all right so as you can see here unlike before now we also have our label as well as our text input so why do you think this label widget is too big and this text input widget is too small that's because over here we haven't defined the size of our label widget so to do that we'll just use size underscore hint parameter and then we'll just change it to like point two comma point two so this is nothing but twenty percent okay let's execute our code so now you will see that it's equally distributed right but still this was an anchor layout initially right we want our grid layout to be like the small size as our anchor layout but that can be done easily so to do that all we would do here is change the size of our grid layout so to do that self dot grid layout dot size hint and this would again take a tuple we can give here as like 40 percent and 40 all right so let's run our code so as you can see here we have our grid layout this grid layout is within the anchor layout and now within our anchor layout we have a grid layout and within a grid layout we have our label as well as our text input so let us now try changing this position here from here to this part all right so to do that all we need to do is like have the self dot anchor underscore x and anchor underscore y parameter setup okay so let's initialize this this would take a string value left corner right top left corner so it's left and this should be the top so let's rerun our code so as you can see here our grid layout has moved from this center part to this part so this is how you can create amazing gui's using python kiwi so these are the basic fundamentals of developing gui application using python kiwi so let us now move on to the next interesting framework that is pi qt5 iqt5 is one of the most advanced framework to develop gui interface using this we can create cross-platform application on a production level piquity 5 implements around 440 classes and over 6000 functions so let us now jump to a code editor and see how we can create gui using pyqt5 okay so in order to create a gui right we first need to create an instance of our application window so to do that we have to use something called as queue applications okay so q application app l i c a t i o n and this is present in pi q t dot q widgets so let's get that so from pi q t 5 dot q t widgets import everything so we'll assign one variable to this that should be an app so before that we can also put this within our class right just to keep it more organized we can put this definition of our application window in a method just to keep it more organized so let's curate here as window now we have initialized our application window we need to add this to our infinite loop or even loop so app dot with these two our application comes into an existence okay let us create an instance of our widget so let's take it as bridge so to create a widget we have this widget class so q widget right q widget and now we want the skew widget to be shown so v i g dot show let us now call this window function and see what happens so if underscore underscore name underscore underscore equal equal main so create call the window method so let us now execute this code and see what happens as you can see here that we have our application window let us now add some title to this and after that let's see how we can incorporate basic gui components like label text input and buttons so before we do that let's add some text to our window right so to do that all we do is w i g dot set window title so here what we'll do is pi q t demo so let us execute this code now so as you can see here we have successfully added title to our application window so let us now move on and see how we can implement the basic gui components so to do that let's create a class right so this class which is responsible for returning all the widgets so to do that we'll have a class here so we'll give the name of the class as like widgets so responsibility of this is to return all the widgets okay this will combine whatever the widgets are defined within this class and put it on our application window and this widget will be inheriting from a widget class so let's take this over here and paste it here we have to import this okay so anyways this cube widget is present in qtv widgets class so we don't have to import anything now let's remove this part as of now and instead of that let's create the instance of the widgets class this is going to be widget is equal to widgets and then we obviously want this widget to show something so now let's create a constructor so def underscore underscore in it and we'll pass some keyword arguments so this is something very similar to what we did in our kiwi okay then we have this super so this is actually used to access our parent class constructor right so let us now see what we should develop so we have this application window it is a responsibility of this widget class to written something to this application window so let's create our application window in such a manner that we'll make use of layouts as well here we'll create a form here wherein we'll have two widgets here one that says enter your name and another one is a label and there is another form over here wherein it asks your question something like which school you're going to and here you're supposed to provide answer and then we'll have a button now how layout works over here is as this is a vertical orientation right so i mean to say arranging these three blocks so this is in a vertical fashion so we use vertical widgets and these two boxes over here so this is something which is horizontal right so we'll be making use of horizontal widget so before we get back to our coding what we'll do is what our approach over here will be is we'll first design our vertical layout and then we'll define our horizontal layout this horizontal layout will be added to this vertical layout and in turn this vertical layout will be added to this application window so let us implement this in our code so first off we need a vertical layout so let's give it as like v layout so for this we have q v box so now that we have defined a vertical layout let us now define our horizontal layout and add these items here or widgets here so first off self dot horizontal layout so this will be equal to q h box layout so let's give it as one here let's give this layout as horizontal layout one so now we need a label right to describe an output to the end user so to utilize our label what we're going to do is we'll have self dot label one and we'll use something called a skew label now let's add some text to our queue label self dot label one dot set text so here we'll say enter your name now we are going to add this widget right so obviously this queue label or l1 is actually a widget right we'll add this widget to our horizontal layout one self dot h layout one dot add widget so it will be self dot l1 so we also need another widget here so that the end user can provide the input so we'll be making use of text area so in order to use text area we'll have something called as q line edit class so let's see that self dot text area so we'll give here sp1 is equal to q line edit so we have to add this widget q line widget or t1 widget to our horizontal layout so self dot h layout one dot add widget so it'll be self dot t1 so now we have so now we have successfully created our layout and widget for our first row so let's do the same for our second row we'll just copy paste the entire code here so we'll take this add over here and we'll do some slight modifications instead of layout one we'll make it as h layout 2 so this would be obviously the label second l2 so here we want to ask enter school name now let's add this label 2 to our h layout 2 and this is going to be l2 similarly we have to change here text 2 and then yeah now we also have defined our second row it's time for us to initialize this button right so now we have defined our two rows and before we get on to initialize the button let's add these two layouts okay this horizontal layouts to our vertical layout so to do that all we need to do is self dot v layout dot add layout and let's provide the layout name we sell dot h layout one so similarly we'll do this again here instead of layout one it will be layout two so let's execute this code so far but before we do that we obviously have to add this v layout to our application window right that's over here so to do that what we'll do is self dot set layout and here we'll pass self dot v layout so what we're trying to do over here is we are adding this v layout to our application window and these edge layouts and h layout 1 and 2 are being added to our vertical layout so this application should look something like this where this is our application window this is our h layout one this is the rest layout two and then we have two gui components here we also have to add this button right so instead of adding our buttons to any of this layout i'll directly create a button here so i'll initialize a button and add this button directly to our v layout so let's see how we can implement that okay so to create a button what we'll do here is self dot button so this should be nothing but q push button right and then we have to provide a label for a button so click so let us now add this button to our v layout so to do that self dot v layout dot add vision and self dot button and this has to come last all right so let us now execute our code well as you can see here we have successfully created this form so over here we can provide text input okay so enter your name so it's asking me to enter my school name so it's sjbit okay but this button over here is not performing any function so let's try to attach a callback function to this so to do that first off what we'll do here is we'll go outside this constructor will define a function so def on click although you can give any name you want just for the simplicity sake i'm providing here the conflict method and now this method will print whatever are the contents of our text input okay so in order to get the value of q line edit right all you need to do is just use a text method so let me show you how we do that so here my name is so here we have self dot t1 and then we'll pass like text text method and then we'll have we'll do the same for t2 so this would be something similar self dot t2 dot text but still this function will not execute every time the button is clicked so to do that we have to bind this method to our button uh we'll call this our button instance right self dot button and then we'll have something called as clicked and now once the button is clicked we have to connect it so now we'll pass off this function over here will be self dot on click just keep in mind this is just a function name and not the function call so let's now execute our code and see how this would look like so as you can see here that we are getting our application window let's add my name let's say that i go to like some college like mit and then i click here so as you can see here we are getting this sentence over here my name is janae and i have attended mit so this is how we bind a function to our buttons this is all guys when it comes to pyqt5 basics moving ahead let us now discuss what is pi games so what is pygame right pygame is a cross-platform set of python module designed for writing video games here it includes various types of computer graphics and sound libraries which can be used with python's programming language so let us now quickly move on to our code editor and see how pi games work so before we get on to the coding part let's see how games work in general so there are two important things when it comes to game development the first one is that we are able to constantly draw and update our image so what i'm trying to say here is like consider that this is our application window and now you have this particular object here and this object is present in point a and you want to move this object to point v oreo so what would you do like if you directly change the position from point a to point b it'll obviously look like as if we have jumped right but we don't want that we want a flow motion so what we'll do here is we'll erase this initial object or original object and then we'll place or we'll draw another new object which is something very similar to this or identical to the original one and we'll place it just after some some distance okay and in the next frame we'll delete this part and we'll have one more object over here so similarly if you repeat this procedure in a faster pace it will look like as if we are moving from point a to point b in a flow motion so this is the one thing right but this alone is not sufficient because if you're trying to achieve only this part like if you're trying to achieve only this constantly drawn update part it is just a video right but we also need to have a game logic like for example we have some kind of obstacle over here so this object has to go pick up this direction so obviously it has to go down and then move forward and so on and so forth right it should be capable of capturing events so this is what is called as implementing the game logic so these are the two main concept that is going on here let me just give a quick recap the first one is to continuously draw and update our objects and the second one is to implement the game logic let us now get down to the coding part and see how we can implement this the first off is supposed to import our pi game module so it's going to be import by game once you have imported this we are supposed to initialize the pi game window so it can be simply done by pycam dot in it so with this we have like actually initializer window so let's try running our application so you'll see here that we have successfully executed the code but we didn't see our application window right in order to see our application window right we need something called as event loop so as we all know event loop is nothing but infinitely running loop so before we implement even loop let's add some attributes to our application window so let's take up the size so let's give a size of our window as like this can be any random value and then here we'll have uh we'll initialize our screen so this will be pygame dot display dot set and here we want uh obviously we want a size over here so this would be taking up the tuple so yeah so we'll copy this and we'll paste it over here let's also set a title to our screen so that can be done by pygame dot display dot set caption so here it's gonna be like our first game or or we can just give it as buy game demo so let us now run our code so as you have seen here that our game window appears and goes off within fraction of a second so well there is nothing wrong in this only thing that's happening here is like it's executing this code moment this line of code gets executed it's obviously going to close down to prevent that we can either use a delay or we can also add an event loop which will infinitely run this program till we close our application so moving ahead now let's create something like this okay so moving ahead what we'll do here is we'll have this application window right within this application window we'll first try to get one image so this image it can be anything and then our next task would be to move this image freely within this application window all right let's see how we can implement this game logic here let me erase all of this as of now so first and foremost we're supposed to import our module right so import pi games okay so just to make sure it's well organized what we'll do over here is we'll create a function here def and now within this we'll we'll initialize our pi game module so pygame dot init after that obviously we have to set our display right so screen we can give any name here so this is just a variable so this screen this should be equal to pi game dot display dot set mode the first parameter over here is going to be the size of our screen so to do that we have to pass a tuple right so we will do this over here size so let's give like 500 cross 500 and then we'll pass this size uh over here looks good now we are also supposed to add like some kind of caption right like just to just to show what's happening in the window so to do that we'll use pygame dot display dot set caption all right so let's give the name here as pi game demo so so far we have just done uh like we have initialized our screen we have added a caption to our screen now let's add some more features to our screen all right let's add some background here as you have seen earlier right like before executing this code or the screen was black in color but we don't want that so to change our background all we'll do is screen dot fill here we'll pass a couple of rgb values so let's give some random values here so now we have successfully added background color to our application window so moving ahead we like as i mentioned earlier right we or we need some kind of object within our screen okay so let me draw that once again so this is our application window and we need this particular object so this is nothing but external stuff right so we usually call this as resources in order to like get this resources we use something called as load method and let's try doing that now apart from that make sure whatever resources you're trying to incorporate over here they are present within the same directory right and so let's now copy this path let's load our resources over here so to do that let's give some caption here so here we'll have like block okay so now to load our resource we have like we go for like pygame dot image and now we have this load method here and we should now provide the path all right we'll also add a method over here called as convert the reason why we are adding convert over here is like for example if this image is in some format or like if the frame rate of our application window is too high so with this what will happen is pi game window will automatically adjust to the current frame rate so that's the reason why we add convert although it's optional so now we have loaded our image into our program okay but we haven't still added this to our application window so to add this to our application window we use something called as blit and this brit method is present inside this part okay screen so we'll call our screen object here and the screen object will contain blit now we should pass the object of this image here so that's going to be block and after that we need to specify the position of our block so this will be a tuple value which would take like you can give any values over here so this can be zero comma zero so let me speak a bit about a positioning of this okay x and y axis in this pi games right this point over here okay this line over here represents the y axis and the value over here is 0 for y and as i move down over here the value increases and similarly this part is the x axis and this is gonna be zero and as i move over here right the value of the x axis increases so here it's gonna be something like obviously the y axis right so it's moving from origin to over here so x axis is anywhere 0 and as for y-axis it's going to be like some value some value from here to here so let's take it as 5 so it's going to be like 0 comma 5 so this is a little bit about how positioning works in pi games so now we have successfully added or loaded our image to our screen all right so let us now create our main loop so what is this main loop like as we have discussed earlier right main loop is something which is an infinitely running loop right and it terminates only when an application window is terminated so let's create something like that so while let's have something like running that's nothing but while application is running so now here are running right so if you want this to be infinite loop so we'll give here as running is true well running is true so now we have our infinite loop and now this will run like as long as it wants okay so let's execute this code so far okay so we'll give some pass over here so before we execute our code right we also have to update these values to our screen so in order to do that you can there are two ways you can either use like flip method or update method both are almost the same so here we'll have like pygame or display dot flip you can also use update all right let us now execute our code well you'll see here that our program is executed right but there is no application window well that's because we have defined all of this inside a method and we didn't even call this method so let's do that first so if this is the situation let's call our game over here okay so the game method all right so let us now execute our code again so as you'll see here right we have our application window and now none of this buttons will work the reason is because we haven't added any events but let's see what are the features that we have added first off we have initialized our windows so yes we have our window we have our display over here then we have also set our caption by game demo then moving ahead we have loaded our image and then added this loaded image to our application window so yep we have already done that and also we have set our background so here we have also added our background color so like by default it's going to be black but now we have added some random value which looks like purple so the reason why this window is not shutting down is because we are running this infinite loop so let us now add some events over here in such a manner that every time we click a button right like we click this navigation button up left right down we are able to move this block anywhere we want within this application all right so moving ahead let us what we shall do is we shall add some event over here wherein if i click our navigation button right like left right up and down we want to move this block of code so one more thing now we can't directly terminate our program over here so in order to terminate this application window we have to stop executing our code okay so yup we have forcefully terminated our application over here so let's add some event so if you want to add event right we have like even handlers here which is present in like even dot get method so like for even in let's call our pi game module by game dot event dot get all right this is gonna be a for loop what's happening over here is this pi game dot even dot get will written as a list and now we'll iterate over each of those list like let's see there are various types of even that are present right key up key down so on and so forth so it's like what we want our logic to be is if we press the button that's nothing but k down we want to manipulate our application right we'll write that so if event dot type if even dot type is equal to pi game dot key down so you can see here we have various types of events over here so it can be backspace anything it can be anything so we want it to be like k down if the key has been pressed down then we should see which key has been pressed down so if even dot key so this is gonna be like pygame dot key down all right as of now we'll write here pass we'll manipulate we'll define a function for this later but let's copy this for all the four directions okay so it's gonna be like here here and over here so uh it becomes elsif so it's going to be lf similarly over here and again over here we have even dot key right so it's key down let's make it as like up okay key up key down and then we have right and left right so it's gonna be like right and then it's gonna be left over here so every time a key is pressed down right it will see which key has been pressed down apart from this if you remember right in our application window we were unable to close our application window right using that close button so we had to close our application window by stop running our application so in order to prevent that what we'll do here is we'll add one more event here so else if even dot type if this is equal to pi game dot quit so quit is that cross button here okay it's a closing of our application right so this is going to be caps all if this is the situation we want to close our application oh yeah this is going to be lf right all right now that gets it done so what we want over here is we have to close our application right so if you want to close our application window right or our game window we have to ensure that this while loop is terminated so to do that we'll change the value of running to false so it's going to be running is equal to false perfect okay and anyways as i've mentioned earlier we're using this flip method here to update our screen let me mention that over here in comments all right so let us now execute our code and see how this would look like so as you can see here that we have now got our application window as you will see here we are not getting this error right application not running apart from that we can now even close our application by clicking on this button so let's try doing that well yeah as you can see we have close our application all right so now we want to manipulate the location of our block right so to do that we obviously have to change this position over here fine so to do this we'll create a new method here def block movement and over here we'll pass an argument like screen okay so we'll pass this argument screen or we'll pass this object of our screen so it's going to be screen here and what this screen will do is it will have the object of our set module right all we need to do is screen dot blit right so screen dot blit so anyways we have to update our block so it's going to be like block and then the positions we also have to pass block as an argument here and to just simplify our code what we'll do here is we'll have x so x over here will be equal to like 0 and then y here will be equal to 0 so these are nothing but the positions of our block so it's going to be x comma y so now we have this method and we we also have to pass x and y parameters so x comma y so we'll update this over here x comma y so this will give us the current position right so let's comment it out over here fine so screen this gives the object so the screen over here will give us the object of this right object of display dot set module and now block so this gives the object of our image right so image and finally we have x and y there are nothing but coordinates so what we're going to do over here is every time we want to move our object so we want to move our object from one position to this position we have to take small small steps right so that it it looks like it gives a look like as if there's a flow so to do that what we'll do over here is we'll first get down over here so let's go here and when the key is pressed upright so we'll call this function so block movement okay we'll pass the object of our screen and then we'll also pass the object of our block and now what we'll do is if we have to move up and down like now we have to pass the value of our coordinates so let's let me give you a brief over here like as we have mentioned earlier right so this is x coordinate and this is y and this starts from zero over here even x starts from zero so now if you want to move down right x value remains the same it is the y value that we are manipulating and we are when we are trying to move from left to right or right to left we are manipulating only the x values so let's create a logic something similar to that so now what we'll do is as it's moving up right so up means we have to obviously manipulate our x value so here we'll give something like y moving up so it's going to be like minus is equal to 10. the reason why i'm putting minus is because here it's opposite okay so if you want to move down the value is going to be positive the value is incremental only when it's moving down okay so it's going to be 0 1 2 over here and 3 and so on and so forth so now we'll pass the value of x and then value of y okay so this is for the key up movement and now for the key down moment so y plus is equal to 10 so we'll just change by a small value so this should remain the same all right so now let's do it for the left and right so here we're going to change the position of our x right when the block is trying to move to the right it's going to be like positive increment okay and then now we'll pass this argument similarly if okay and now we'll pass this over here so now what's gonna happen is every time you uh press a key down this kind of it will look for which key is pressed down and depending upon that it will trigger this method and now one more important stuff that we forgot to do over here is we are supposed to update our screen right so let's do that now so it's going to be like pi game dot display dot flip so this will update our screen and yeah and yeah it looks good to go okay so let's execute our code so as you can see here that now we have our application window and we also have our block and as we try to move our block right you will see that our block is trying to move like every 10 pixels so this is what i was saying when you said when i said right if you want to get this flow motion right so we have to increment the small small values but now we don't want this trail of blocks right so in order to remove that what we'll do is we'll go here for our block method we'll update even our background so in order to prevent that trailing right we'll also add a new background over here so once we have added a new background we'll then be adding our block object and then so on and so forth right like we'll update the screen so with this what will happen is in the earlier program we didn't use this fill over here so the same old background was carrying on because we are just drawing it over here we are not asking it to clear right so now what will happen in this new application window we have this old block right every time we execute this screen dot fill okay the old block get deleted it's overridden okay so on top of this old block we have a new background and within that new background we'll have a updated position all right so let us now see if this would work so as you can see here we can move our block from any position to the other like now if i'm pressing key down yes it absolutely works similarly if i click on the right or left or up as you can see here that it's perfectly working so similarly we can develop complex games using my games so with this we come to the end of our game demo all right guys with this we come to the end of our session i hope you enjoyed and learned something new so if you have any further queries please do mention them in the comment box below until next time goodbye and take care i hope you have enjoyed listening to this video please be kind enough to like it and you can comment any of your doubts and queries and we will reply them at the earliest do look out for more videos in our playlist and subscribe to edureka channel to learn more happy learning you

Channel: edureka!

Views: 97,808

Keywords: yt:cc=on, Python, Python 3, Tkinter, Python Tkinter, Programming, Python GUI, GUI, Python Application, UI, User interface, GUI Python, Graphical User Interface, Python UI, python tutorial, PyQt5, PyQt5 tutorial, PyQt5 gui, pyqt python, Kivy, python kivy, kivy python, installing kivy, installing kivy on windows, installing kivy on windows 10, installing kivy in python 3.8, installing kivy with pip, kivy tutorial python, how to install kivy, pygame, python, pygame tutorial, edureka

Id: _PHJvjQJa3w

Length: 79min 53sec (4793 seconds)

Published: Fri Dec 25 2020