Building a tkinter App with a class

the last video in the TK inter playlist showed how to draw a line between two mouse clicks on a TK inter canvas in this video I'm going to develop a program that has the identical functionality that is draw a line between two mouse clicks on a TK into canvas but I'm going to do so in the object orientated paradigm which will involve creating a class and then creating an instance of that class if you have not already done so I recommend that you view the previous video in the playlist on TK inter before you view this video now the application I'm going to build is going to be a very crude one it's just going to allow us to draw lines on a TK inter canvas as shown here if you look at the curse and I'm going to click in that position and then I'm gonna come over here and click somewhere else and you can see it'll draw a line between those two clicks so I can continue and draw various shapes using this simple application so if I just continue here I can draw a very crude stickman here as you can see the application that you've just seen was covered in the last video and this is the program that achieved it and you can see we have a function here and if we come down here we create a window we create a canvas we position the canvas this will bind the left mouse click event to this function which is this function here and then we enter the main loop and you can see here we have a variable assign zero and if you come up and look at the function you can see here we have three variables click on the score number x1 y1 and down here we have x2 and y2 and we will be drawing as shown here using the create line method between the x1 y1 coordinate position and the x2 y2 coordinate position now this program is described fully in the previous video I'm including it again here because what I would like to do is to compare this to the object orientated paradigm solution for performing exactly the same functionality take a quick look at this function here and you can see we have a selection construct and what the selection construct is doing is either executing these program statements or these here and if you look at these program statements you can see we're getting the coordinate position when the mouse is clicked and these are given to x1 and y1 and then we assign one to click on the score number so that the next time we come to execute this we will find ourselves executing these statements because of this conditional test here and if you look here you can see we're cutting the second coordinate position and this is the program statement that draws the line between the coordinate positions found and then here we reset the number back to zero so the next time this executes we will execute these statements here now you will note within this function we have global variables declared here and in the previous video I pointed out that it was not a good idea to use global variables in this way and when we move over to look at the object orientated solution we will not need to use global variables as they've been outlined here so when we look at the draw line method as it will appear within the class here remember we're dealing with a function when we talk about procedural paradigms we will find that we don't have the variables declared in the same way now this is the object orientated program that will carry out the same functionality as the program we've just been looking at and the first thing you should note is that this looks a little bit more complicated to start with you can see that all of this code I'm highlighting is a class and the name of this class is here draw line up and if we look within the class you can see here we have the draw on the score line method now this is what we saw in the previous program when they was in its form of a function but if you have a look at the code you can see we have a selection construct which executes this or it executes this and this method here is pretty similar to the function we looked at in the previous program and it performs exactly the same task because if we come down here you can see that it creates a line using this method and within here you can see we have various parameters these two parameters are the start of the line and these two parameters are the end of the line but what you will note is we seem to have this additional complexity of having the word self here in fact if you look at the class you can see that the word self appears in many places now if you are unsure as to what self actually means I recommend that you locate a video I've produced on this channel that looks specifically at self in the object orientated paradigm when you build a class but briefly I'll give an explanation here you see when you build up this class as shown by the code I'm highlighting here what you will need to bear in mind that the class itself is not what executes it's the instance of the class ie D object now you can have many objects of this class many instances of the class and you need to think of the class as being a template or a factory if you like for producing these objects now each object that you produce is individual in nature it just happens to have all of the attributes that this class is defining now each object that's created will hold information in self that identifies that object so if you have ten objects created from this then self for each of those object will hold a different bit of information that identifies every one of those objects so object one for example will have information held himself that identifies object 1 object 2 will have information held in self that identifies object 2 now how does self get this information well when you build a class like this one you'll always require one of these methods and if you have a look at the name of the method it's double underscore in it's double underscore and you can see here it has a parameter self so when we come down here well we can see a program statement creating an instance of this class what will happen Python will arrange you don't have to worry about this Tyson will arrange to grab the identifier for that object and it gives it to this parameter self here now every time an instance of this class is created this will execute and this will receive an ID for that instance created so if you create seven objects of this we'll say then self for each of those seven objects we'll have a copy of an ID which identifies each of the objects specifically now the mechanism for achieving this involves you having an understanding of namespaces and so on so I'm not going to worry about that in this video but what I will say your responsibility as a programmer is when you create an instance of a class as this line is doing here then you have to ensure that inside your init in the parameter list here you have self because when this is created Tyson will automatically produce an ID that will be stored in here so make sure when you produce your edit you always have self here now let's consider this function which I showed you at the beginning of this video and it's the procedural solution that we also looked at in the previous video and I would like to highlight where the variables were declared inside this function and you can see they're here click on the stone number x1y1 and their global variables and here you can see I've used two local variables x2 and y2 now let's compare this function with its method equivalence as that method appears in the class that I've produced for this video and if we have a look at a part of the program you can see I've shown all of the class now here you can see we've got the global variables and here you can see we have the local variables but if I come down here you can see that click on the score number x1y1 x2y2 I've been placed inside the init method because when I create an instance of this this is the first thing to execute and these valuables here will be created as part of the init execution also note in front of the variables we've got the word self now this ensures that each instance created has its own copy of these variables it also means that because I've put self in front of these variables they will be available to all of the code throughout the instance of this class so every object and every method defined in that object will be able to gain access to these variables and if we come down to this method here you can see that's precisely what I'm doing here for example self dot X 1 is assigned what the event tells us the coordinate in for the X's when the mouse was clicked here self dot Y 1 is assigned the Y coordinates of the event here you can see the self dot click underscore number is assigned 1 and if you look to these 3 variables here you can see that they appeared if we look to the else part of the selection construct you can see here we've got self dot X 2 is assigned the x-coordinate of the event that takes place when I click on the left mouse button again and here you can see the y-coordinate is given to self dot y 2 and down here you can see that we have self dot click on the score number being assigned to 0 now if you consider all of the variables that I'm highlighting here you can say that they were declared here inside the init well as if you go back up to this program you can see the positions they were declared in so when we deal with the object world and we're dealing with classes its usual to put the variables that you want to available throughout your application here and this means that each of these variables is accessible in all of the methods that are defined within this class as you can see here those are the variables that are used which were effectively declared here also of importance is the header of the draw underscore line function and method let's have a look at the function first and you can see that we have event here now that means that this function is capable of receiving information from Python about the event that's taken place and the event were interested in is the clicking on the Left mouse button if you come down here and have a look at the header for this method you can see here we have the same thing happening we have a vent here but we also have this self now that is there because this method needs to know which object it is working with and the idea of the object it's working with will be held in here so this method then would be long for example - object 1 on the basis that when the instance called object 1 was created the ID would automatically be generated by Python and would be passed to this parameter here within the init method which is the method that would execute every time you created a new instance of this class and of course if you then create a new and different instance of this class this self would obtain the ID of that newly created instance and this method then would have here the ID of this newly created instance so you could have two instances in existence two objects in existence and they would have a different value for the ID and the self would be different so this self would be for an object one this one would be for object one all of these here will be for object one but in the other object this would hold the idea of object - this would hold the ID of object two and all these would be the ID of object two and so on let's now turn our attention back to the procedural cold solution so the program we're developing in this video and here you can see I'm showing part of that program what's missing is the top bit of the program and the function that is used for drawing the line but if we consider this bit we can see here that were creating a window on this line were creating the canvas associated with that window and these parameters are setting the width the height and the background color of that canvas this line uses the grid method to position the canvas on the window here were binding this event to the function the draw on the score line function that I haven't shown in this bit of the listing here we set the clique number to zero and then we enter the main loop now in the object orientated solution these lines here are set up inside the init method as you can see by this snippet of code on this line you can see we're creating the instance of the canvas class and these are the parameters were sending in on this line were positioning the canvas and here were binding the button click to the method draw line and here you can see were setting the clique number to zero of course if we look at this program statement we can see that the parameters look different to how they did when they were up here likewise if we look at this line we can see the parameters here look a little bit different than we set up here but if we consider this line you can see that we're still using the left mouse click event as we are here and here you can see we used a draw underscore line when we were in the procedure one the difference is here we still use the drawer underscore line but of course we have to have the cell from the full-stop in front of it because we're now in the object orientated world and if you have a look we can see that when we have this click underscore number equal zero here you can see we have to put the self full stop in front of it what we have got missing from this init method we've got this line missing my window is assigned TK inter in other words where we have this in it we don't use the unit to create the instance of the window that we're going to be placing this canvas on we are however using this parameter here to receive the window onto which the canvas is placed let's now consider these two snippets of code here you can see we're looking at the class and I'm concentrating on the init method if we come down here this is the code that creates the instance of a window and this line is going to create an instance of this app which of course is an object and it is an object of this class and here we go into the main loop when the program executes this is going to be the first line to execute and we can see we're creating an instance of a window and it's going to be bound to this name here when we come on to this line we're going to be creating an instance of this class and because it's this class we're creating an instance of the thing to execute next will be this init method now what we need to do is looking at the init method we can see here the parameters now these parameters are going to receive their input from these arguments here that I've lined up when I created the instance of the class the first thing we need to say is when this line executes an ID is going to be created for the instance we're creating and that ID will be passed to self so when you look at these parameters here you'll see if you count them we have 1 2 3 4 5 6 parameters if you come up here and count them you can see we've got 1 2 3 4 5 6 7 parameters now that's because we have to realize that when you create an instance of a class using a line like this the self is automatically generated by Python and stored in here when I say the self I mean the ID is automatically generated by this line and is put into this parameter here in the init so when this line execute an idea is created and that ID is passed here to this parameter this argument which is the name bound to the instance of the window created on this line is passed here here we can see we have an argument which is saying let width be assigned 400 now that 400 is going to be passed to this if we come on look at this argument we can see the height has been assigned 300 and that 300 is going to be given here this is color is assigned white and this argument white is going to be passed to this here we can see Rho is assigned 0 and this 0 is going to be given to this here we've got column is assigned 0 and that 0 is going to be passed to this so just to summarize with respect to the parameters these arguments here we can say there are six of them and here we can see there are seven parameters now that's because we always have to remember we need this self so if we come to these arguments here we can see that they are going to be passed to these parameters here self alter matically gets the idea of the object being created now these parameters we can see on this line are the arguments to the canvas class so if I take this my window here it's pasture here which in turn is pasture here if I take this width of 400 it is pasta here which in turn appears here to be assigned to width which is an attribute of the canvas class this height of 300 is pasta here that then is this which is assigned to height where height is a named argument defined in the canvas class here we can see we've got white being pasta here and here we can see were using that white and we're assigning it to BG we're BG is one of the named arguments inside the canvas class let's now consider these two arguments and in this case we can see ro is assigned 0 now that's 0 be passed - here and here we can see column is assigned 0 and that 0 will be passed to here now the row and the column that you can see here as the parameters to the init are used on this line in this position and this position here and here the value of 0 is given to Rho and here the value of column is given to column and this grid method now knows that it is to position the canvas at row 0 column 0 as an aside take a look at this what I'm assigning width to width now taking in isolation that might seem a little odd and so a human being looking at this you may say why am i assigning with to width however you have to realize that Python understands what's going on here and what is going on is the following here you're assigning 400 to width I'm not 400 is passed to here when it's this weight which we're using here it is a parameter of the init method this is an attribute of the canvas class although ii was assigning width the width looks a bit odd this is a parameter of the init and this is an attribute of the canvas class to emphasize the point let's look at this where height is assigned height now we have to realize that this height is a parameter of the init method and this height is an attribute of the canvas class of course it could be argued that here I could have used different words for width and height and a potential confusion such as this might be avoided when somebody else reads my code however I'm going to come back to this in a later video let's now turn our attention to the full object orientated program and concentrate on this line and what we can see we're using the bind method and we're binding this event which is the left mouse button click event and when the event takes place we wish to execute this here and this is the name of this method as you can see here and what you need to realize we have to have this word self dot in front of it and this tells us that the method is declared defined in this class as you can see here now when this program executes we're going to create a window with this line this is going to place the application we've developed in that window and then we're going to enter the main loop so when we look at the wrong time you're going to see this this is the application and this is the window and what's happening now we're here in the main loop and we've set python up to respond to clicks of the mouse I'm not going to do what happens when we click on the mouse in this video I'm going to do that in the next video check out the supporting website for these videos in addition why not follow me on Twitter as is you a tweet every time I upload a new video

Channel: John Philip Jones

Views: 10,076

Keywords: Object oriented tkinter, Drawing a line, Building a tkinter App, Building a tkinter App with a class

Id: eXunJhOpCRw

Length: 23min 21sec (1401 seconds)

Published: Sat Mar 30 2019