COMP2069 – Lesson 4 – Part 3

Just another WordPress site

COMP2069 – Lesson 4 – Part 3

all right and we’re back I’m just going to start off with intro to kinter so this is just another framework that we’re going to be using and again we’re going to just two differents we want i’m talking about the kinder here and and I game all the same time is for a couple reasons one pie game is a lot to it right and we’re seeing what I’m seeing a bit of an ad here some stuff costs or second as I continue talking and check some of your your chat which I see there isn’t a good chat right now I see a couple user still on with me that’s cool I know this is not exactly convenient for all users and that’s why we’re doing the video as well and we’re back ok so again both pygame in pi n and again to enter our two different frameworks that we can use to kenter’s kind of built into Python we can use this more simpler framework to great quick buoys or interfaces if you will that work with standard buttons and look and look like standard windows that we’re going to be able to create to kinder whereas hugging everything that you create is customized so we’re kind of kind hit both of these two methodologies at once and again we don’t have a lot of time this course so I’m kind of trying to cram some of this material in here so that way we can do both and again you can do assignment number two with both my game into kinder this particular case we’re going to show you it to canter stuff and it’s going to be slightly different framework you know receiving this different approach than the pie game but quickly what I do want to mention is if you go on the web here what I want you to see is that two kinter actually is well documented here on the Python library on this particular case we’re looking at Python 2 dot 7 up 5 which is the most recent edition of Python for 22 X the two decks series of Python so if you notice they’re all of your modules here refer tech inter are documented very very well online so how to import how to perform their import and so on and also how to do two different things into kinder how to setup window and so on everything is when it comes to take into the basics of two ginter is here as well because I know it is that some of you are having questions or if you’re sending questions about documentation one thing I wanted to mention was I’ve also upload or changed your lesson archive a little bit so here’s your lesson powerpoint archive this is all the powerpoints we have for this particular series that we’re doing for comp 2069 courses hundred of 22 graphics I got the code archive that’s you know for all of our lessons and then on the bottom if I added this new resource called textbook resources and I put in the online resources that i keep talking about in class which is invent your own computer games of Python that’s a full book if you actually work to open this up and making games of Python and I game so from a support perspective these are a couple of good books couple degrees or so you can look at from the same offer I talked about how to use PI game and Python and there are different approach than what I’m I’m kind of using but it covers the same material so just I think this is another great resource for you to look at ok and I’ll also include something else down here I take hinter 8.4 reference which is a weaver Python I’ve kind of categorized as 2010 version I don’t think there’s another version out there right now but this is the latest update that they’ve they’ve got fistic inter reference in 8.4 version ok and again if you want to find that online and again if i was going to search using my google fool like we talked about before there you go say if i say it’s at inter reference PDF and you can actually find there is an 8.5 version that came out in February 27 2013 so you can actually look at this from New Mexico Tech you can download it for free if you bear with me it’s going to open up in a second right but the great thing about this is the latest versions of two enter the things that are compatible with python that we have our download when I put on a point for 8.5 and a foot for games are similar but the idea behind them is as soon as this thing comes up it will show you what I mean it’ll actually be a little reference that you can use when it comes to understanding how to put together to kinder so even though your two textbooks that kind of put up online for you may not cover tick enter this reference will cover it almost like a little cheat sheet of how to kinter functions from that wow this is really slow and that’s

why for those of you who care I’ve kind of put together this reference right here if I actually click on this right it’s going to bring up the tick into references the 8.4 reference which happens if you know if it’s dated 2010 March 27 that actually has what tick inter is you know and so on it’s hyperlinked so you can actually go quickly through it and understand how to use to tinter and so on how to make a button widget in the canvas widget and all that kind of stuff and it talks about the difference between buttons and widgets buttons and canvases and grids and everything else we’re going to talk about to content okay so this is a little reference that I would encourage you to use again when it comes to learning to kinder okay so I’ve kind of giving you the two things for pygame peers the 2pi game references and this is a tender that’s online but i encourage you to actually go on online let me see if it’s finally been this is actually download it looks like it has if you notice this is the same guy John W shipment and his 2013 februari 27 ok so again this is fairly recent and he does the exact same thing we’ve taught who talked about before which you talks about the grid method and he updates he just updated this document seeping it as current as possible because to canter believe it or not is a very common framework that scientists around the world used in different programmers without having the neat download any kind of extension modules okay so take a look at this when you have a chance and again let’s go dig right into it so again a couple of options that put up here in textbook resources what I may do later on is update this resource 28.5 just keep current but for now you’ve got the point for which is very good as well okay so this is from I’ve kind of taken this information from thinking into kinter what is the kids right so really this talks about here in this particular slide talks about really what a UI is right and really what we want to talk about in this particular case is and we’re talking about a structured you I whereas we look at PI game it’s a really more of an unstructured you I right or customized UI may be a better way to say right hi game you can create your interface the way you like it to suit your users it’s really good for making games but kinter is really a quick and dirty way of creating like standard windows and buttons and so on then that’s what I use to create my assignment of the tube solution set ok so again there’s two functions of the other UI it’s really one part is how it looks and the other part is what it does right and basically what it says here is you must associate but looking with the doing in other words we can listen for four input from the user with a ventless or bindings right and it also talks about some other GUI jargon and I think this is a good overall another different view of buoys and we hear they talked about callback handlers or event handlers or even event listeners you’ve heard that in the past to get to use something called something on binding right which is the way that they finds the control with a type of event and we’ll look at that it’s a different method different way of thinking python are start biking sort of we’ll talk about that this does also talk about an event loop which is very similar to biking so again you could use the idea and alter frameworks here as well okay so here’s an event loop and we’re going to look at event loop I to this kind of just the talk about two kinter a little bit so we go back to apt Anna you look at event loop top I and just close up move box alright so here’s it that loop top five and if you notice I’m still using the main function right and really this is a text based way of looking at how events would work right so I’m listening for different inputs in this particular case I’m listening with the console right so I’m saying well is it an A or B or C I’m actually taking raw input and I’m converting it to upper end depending on what the user inputs this is pretty easy to see whether you’re an animal vegetable or mineral mineral and you can use X to handle the 2x of the program this is actually a pretty cool little menu that you could you could have set up for Simon number one where this kind of system right we can pull up a minion so that’s kind of another little thing but that’s what event lift up I does right but the same idea with this event loop that pie is the same thing that we do with our pie our game loop and the same thing that dick inter does with its event loops let’s go back alright so again using the example of the idea framework the first statement imports to kinter so again a

standard Wade like it says right here is from two kinter input star which means that you know will not have to qualify anything that we get from to kinter with it to kinter prefix when we use this star when we from to Kent your input star we can also say import to kinder which is which what we do with fighting we could also say from pygame import star right we can actually do that as well when we create our code as well right this particular case we’re showing you how to do with the kitchen so think about this is the star is almost like a wild card that allows us to take away that the kids are prefix okay second statement creates this top-level window which we exactly what we do with my game so instead of once we say two kinter TK right let’s thus the normal state knows the instance of the class but now we don’t need it to kinder to KO we have to do is TK once we say TK that’s this TK method or class is part of the tech interlibrary so that’s creating our top level window right and we’re going to say window is equal to TK or in this particular case they like to call it root right window root screen it’s all the same in the third statement it starts off the main loop right so we actually use the root and we create the window okay so let’s take a look at the simple TK pie program for a real clear illustration of how that works and I did this kind of kind of thing with some of you last week kind of give you a preview of the kinder because it’ll some of you want to start off on your son limited okay so here it is so from tech enter in port star which is our mythic interlibrary it’s actually using our wild card and we’re saying here’s our main that’s an example right and inside there saying root which is actually a screen or window so in from up from a PI game perspective this would probably be the I in the idea framework so I’m just use that in this I was enter that in so this is the i right so in idso initialize in this show the technician type and important or imported initialize this is part of that framework same thing as we do right here so here’s initialize an input right here we actually defined the window right so this is the display portion of the idea framework so we actually would put in here the D portion which is our configure the display that’s what this does right which is exactly like we we have an or other my game frame which we talked about the idea for looking here we actually you know what we want to try and talk about is the event or the entities that we want to define but here there are no entities so we don’t have an e necessarily and we do have an a right so this is the a porch would have an e but the a portion of our of our framework is the altar framework and in the altar framework we have a loop which is what we’re doing right here this is the L are all we’re doing is kicking out this loop at all we’re doing there’s nothing else that the teacher is doing section this is that a portion of our framework right so again let me just get rid of this we don’t need any of this stuff we’ve just we’re going to use two kinter the way it is right here and this we press play or run the program right it displays a little window right now we is a difference between to contort bike Python or PI game in this particular case the way we’ve displayed everything we haven’t defined the standard size of window this is this the default size of window that it creates okay we’re going to pause for a second for break is looking like they’re good too they’re doing another ad and I’m going to check the chat see if you go into chatting or need anything see anybody ask any other questions so but otherwise for those you who are online and again I encourage you to read ahead look at the framework we’re going to talk about different methodologies and here’s a second edge right now that’s following up different methodologies for for for writing our Simon number two okay okay we’re almost done this ad we’re going to get back to the main okay and we’re back so again we haven’t really defined the size of our window much this is the same size that we’ve been using for before right but it’s these are almost like our default size right so if I click on the X here to canter has a built-in detection for

closing off our a window pygame is not so if I was to create a PI game loop without checking for tickles our window it wouldn’t close we’d have to actually exit by came by with root forest methodology if you close down the window okay so if you actually hover over here again what are we doing it says class TKS we’re actually calling the TK class which is which is part of the Dequindre framework right it’s a top-level windows at work creating right and it says I’m doing a couple things right I’m saying inside inside the window itself it’s showing me right a bunch of different things right the things that i can add into the TK this initial definition right my constructor includes the screen name which is a default set to none the base name which is none in my class name which is TK right again I can add some other options here i can create i can add children i can define this window this route windows part of another class another another surface and so on i can do all kinds of stuff and if you look at the tech inter documentation it has a bunch of things that that options that we are allowed to do here when we define our window we’re going to get into more of this as we move forward so we define our main window as TK this all you need to define your window and then we start our main loop and if you notice we have over main loop right it talks about if i if i expand this window right the main loop itself right is i’m using the main loop method on the surface that i’ve created which is called in this particular case okay or this is the top-level window and i’m just running a main loop on the top of the limo it’s all I’m doing the ticket okay let’s go back that’s kind of our first two kinter program right okay so want to specify how the GUI looks as that’s the first thing that they talk about here in this particular document right okay and what we’re going to do here is we’re going to create a GUI object so which is a surface object if you look just like we did with hiking right we’re going to talk about packing the object and we’re going to talk about containers versus widgets okay let’s talk about that a little bit so this is a bunch of containers that you can have with with the kintera one of them is a canvas which is really cool you can use canvas for for drawing applications like for things like if you want to make a drawing program for Simon number three which is something we haven’t talked about today or yet and we will talk about next week more you can actually use to kinter to end a lot of the stuff that happens in the time number three okay so you don’t have to use hiking show you how to do it in my game again you can use to contend and make it happen and again the most frequently used container in TK and Inter is frame right but you don’t necessarily have to use the frame container at all we’re going to see that right so an expression like frame my parent lipstick is my parents going to be root it’s gonna be the top level window actually creates a frame another container that’s inside of the parent window and that’s exactly what a surface is in my game I gametophyte game surface a surface object and really it’s another container that’s inside of the pie game top level window or the in this particular case that dick inter top level window is called the root right we’ve named a root and our frame is another to keep container we can put in route as my parent here is showing right let’s take a look at frame and pack we’ll look at what we can do with frame impact right packing of course we’re going to talk about packing a little more that’s the way you display stuff and in into kitchen let’s go back to attend so here’s frame and pack maybe pack alright so a couple of things at is so here’s your main function again again we’re accessing it right here we’re creating our route or top-level window there’s TK we’re actually activating it then we’re creating this container my container 1 and this could be we call this background if you will is equal to frame and we’re using root as the parent so actually linking our frame this this this container to the parent top level window that’s what we’re doing okay so and then what we’re actually doing here is we’re using the pack method and if I hover over here right over the pack method the pack method actually what it does is it displays the frame or this this surface object this container within the top level window to take hinter top of the window and then we’re going to actually kick off the main loop now for all intents it’s going to be the

exact same thing except once we define a frame we haven’t defined the geometry of the frame but all if you notice we can define a lot of stuff in the frame widget like for example if you scroll down here you create you can actually use all kinds of options here so valid research names are background BD background bordered with class color map all kinds of stuff we can actually add in the end in the frame once we’ve defined the geometry of the frame it’ll expand to fill the window let’s take a look at him and you find any geometry and the frame is just saying where our parent container is root which is our top level window it’s going to be a flat window with just a a title bar and that’s it so let’s take a look at that so I run it and there it is way up here in the corner of the screen so I’ll just move it for a second oops again it’s hard to move because it’s I can’t I can’t kind of click on anything there’s our title bar and if you notice it’s got TK as our title because it’s got that the default title for any inter window and I stole it will be resizable if you remember you remember hi game wasn’t resizable didn’t come with a resize the window at all you have to kind of define that later we haven’t talked about yet okay this close this on off and go back to the to the window here alright so we talked about frame and pack and again we talked about how this prove this statement here what it does it links this new container that we’ve created my container 1 links it to the parent window which is which is actually root which is the top level under ok and here when we do a pack packing really what it does it says let’s set up a visual relationship between the GUI component whatever it is whether it’s a button control we’re going to define or frame or whatever we’re going to define with the main window itself so we’re gonna actually pack this container in this particular case my container one because my LinkedIn or my parent container is the the top-level window it’s going to pack or display the surface to my top of window and I haven’t defined anything on the surface so you don’t see anything it just kind of it’s there we know the frame is there but it’s there in the background ok and again what it says here if you don’t pack a component you’ll never see it because pack is like bleeding a biking ok it actually displays the the object or the control onto the screen or on the surface that is that it’s linked to I think it’s better way of saying and again it talks about three different geometry man use pack grid and place and i’ll tell you right now pack and to a lesser extent grid are most like widely used because they’re easier to use but i think place is the way to do your assignment number two and we’re going to talk about that a little bit more if this place gives you a lot more control ok so here’s an example of another button we’re going to create our first widget now called button one and remember in my game you have to kind of create your own buttons from scratch there is no container we have to create MIT we have to create our own button there’s a lot of code involve it’s almost to create that place to click in my game but in here in winter it’s you know quick and dirty like I said so here this particular statement here we’re saying I’m going to create and Stan she ate an object a button object right this may be linked back to my container one remember my container one is the frame that we’ve defined right now I can simply not use my container one I can actually display my button on my top level window but again we’re just what we’re doing here is we’re showing how we can link control button to a container a parent container okay so so we’re doing we’re kind of referencing the control to the container okay again it says witches have many attributes which are stored in their local namespace dictionary and I think we can explore some of those those different attributes for buttons and for so on example if you wanted to find that text of the button right because it’s the button itself is an instantiated object of the button class right the text attribute of the button we just put in text and it’s equal to hello world this is again using the whole dictionary style that we talked about last week for python python has it uses the class button user dictionary style properties to define its attributes okay so text button one text is equal to hello world our button will change the step to own the world but one background is equal to green and green is a standard color that we the button class has it’ll change it

to a standard green colors green and are red and blue are going to be 0 then we pack the button we display the button on the screen by using that pack method so these three lines right here are the way we first define the button the widget we’re defining and then we’re help putting it to the screen right now doesn’t do anything we’re just defining the button itself okay so it’s the first thing we have to know so let’s go to this button hi they kind of look at that okay so killing this one going to buttoned up by okay let’s take a look at this again same counterbalance here’s our top level window my container is define the frame which is linked to our top level window right is route passing route into our frame so it says hey the route window or this type of limitless TK class accentuated object is our root container right this is our container that the second container is layered on top of our top level window right and then we’re going to pack we’re going to display our container and then we’re going to create our button we’re going to stanch it our button class and if we don’t put any of these attributes going to come up blank we don’t take we don’t actually define our the text or the background it’s going to be some standard values that the button class has built in okay when this tickler case you’re staying at Texas win the world and our button one background value is equal to green okay we can change that later on then we’re going to pack the button right we actually display the button some of you may be right now saying hey wait a minute but where is that button going to be displayed to is there going to be if there’s no geometry here right and right because frame and pack a methodology for ticket or it doesn’t specify a x and y geometry it uses left right up and down north south and so on and you’re going to see that that is not as and in my particular opinion as useful as the place geometry mode okay let’s take a look at this button here see how it looks like so here it is I can expand the window so I can actually move it again I haven’t changed the caption of the window is still TK but if i click on the button it does what a normal button should do it actually looks like it’s being clicked right so I’m defined a button here now if I change this and if I changes from green them to take a gander at a guess and say black right if it’s true if there is such a value then sure enough I button is black bump I my foreground colors are also black and that’s why you can’t see the color and there’s a little bit of a commercial some to pause for a second pausing for the add some of you may see it some of you may not and that’s our first ad and here’s the second edit I see some of you come back why don’t you come back any questions so far guys if you want to send up a question up online we can try and answer them as we go on and again I should have a little bit of time at the end for questions relate to assignment number two I can see a little longer as well I don’t have to finish exactly two clock for those people who want to ask some questions we can also do some one on one question answer with wamu which I talked about before all right and we’re back so again but I did before was I change this value to black that’s background value in the button if I want it to just I’m guessing that if I went button one and it might have been foreground and I’m just guessing it would work this way it is equal to white right then we actually can see our button notice it’s giving me an error and saying hey oh it wasn’t error didn’t know what this foreground function meant let’s see if I’m right run the program and it doesn’t crash and here you go so I’ve actually changed the foreground about it another foreground attribute create a foreground @ r you made it white and that’s what’s generating are our power button to be black background white foreground if notice and if I click on it it does what a button should do okay pull this often if i was to delete this okay and i change this back to green that’s what we had it before and if I just just for the sake of I’ll keep a low world of the text but I will well comment out this this command so I’m not actually putting this a background attributed Allah to the standard attribute is I should run it and here we go this is their standard button this is what a standard button looks like with no configuration right without except for maybe the actual text so I click on it again click it click it works like it feels like a standard

button okay and we’ll just go back I’ll put it back the way it was alright and we’ll go back to our presentation okay so we’ve done a couple things to recreated a button is no real geometry that we’re using right now for the button alright just creating the button and throwing it on the screen and it’s throwing it if you notice in the middle of the screen okay I really should handle classes and objects now because as you move forward and you’re going to notice more and more stuff about classes and objects if we’re going to talk about class that not just a little bit today we’re going to revisit them again as you move closer more deeper into the PI game framework because we have to understand how classes work especially to take into it all right so I know we’re kind of lesson in the form of talking more classes but really that’s what we got to be at this point I’m alright so I’m not going to go into detail what an object is if you don’t know what an object is and you know by now this is like your ex or enter class that you’ve done I’m sure you can even exposed to class and object but really the things that think about is you know there’s different types of values that are stored inside inside of class and really class is a group of objects I think it’s the main thing here in one convenient space that you can access right so here’s how we define a class so let’s say for example here’s a person and this is a you know from the basics of defining a class and we’ve seen classes in other languages again so we’re defining three methods here right the class person itself just like we would if we’re defining a function instead of the Deaf being in front of a function now we’re putting the keyword class right class person right if you notice classes from a best practices perspective our own caps right the first or the first characters caps right now we’re defining some methods each of these functions inside of a class are all methods now right so inside of a class or methods outside of the class just like another the language that they’re there are kind of viewed as just functions okay but in this case if you notice we also have this self keyword here right itself and that’s a difference between how you can see if it’s a class method or a function doesn’t have a self a keyword chances are it means it’s just a regular function right it’s outside of the class okay so here’s a method so the first method is set name some getters and setters right as you normally would see other other kinds of languages right and you have your you’re basically your input here is named as a variable right and what you’re saying is you’re creating this a property for the class itself a class variable across what class property I same self name so the name of the class itself is equal to name whatever the name variable is that comes into this center right and if I want to use the a getter I’m basically what I’m seeing here is I’m saying get name right and I’m saying I’m a return the name of this field or property or variable class variable that I’m return out when I access the class itself and here i don’t have an will a getter or setter i’m actually done actually outputting anything here i’m actually doing something right with my matthews remember methods do something right so i’m actually i define a method called greek well i’m gonna greet this person right and i’m going to say hello world I’m whatever my name is here’s my name I’m gonna output no obviously my name hasn’t been defined here as an example it will give me there because I feel to find my name victory find the default my name may be blank in my class itself so this is kind of an incomplete class here at least you understand that these are three methods we’re defining thinner class ok so the person’s name of the class set name get name and greet our names of the methods that belong to that class and attributes again these they actually that we’re talking about here is self or is name that’s the name attribute self name is the way you make it a class attribute or a field or variable different names for the same thing and here’s some for example of class car you might have a name for the color for the car number of tires miles per gallon all these things are attributes or properties for the for the class itself ok so we’re not going to go into what classes are too much emphasis and then methods of course do things so let’s start you can stop method number of tires and so on and you get you might have a start and stop particular objects you know it within your with your your game look you might have a start and stop four types of enemies or start and stop for a type of

door or whatever so there might be different methods that use in your class right to do things ok so really the self parameter is like this in other languages you might see it as this but self is also used in other other language syntax as well right so here’s an example I’m defining a class class right which you can totally do and in this particular case I’m saying my method is called method right and my method actually prints I have a self that’s what it does right and here’s a function which is totally not part of this class this outside of a class they’ve you noticed that’s what I before a method has a self and a function does not right and here’s where I’m saying instance is equal to class I’m actually instantiating the class here when I say instance method I’m actually calling the method of that class and pretend we’ve been doing that all along actually seen that in and the pygame side we’ve seen that on the tkinter side I’m just zeroing in here on this stuff so you understand a little bit about classes before movies more difficult up all right so the init method which is really the constructor that’s really the constructor of our class whenever we see this init method when you create your own classes you actually create the constructor for that class so this something that the signature if you will you know of that class you can also create more than one in it methods or overload the constructor fuel as you go so you can have more than one option for the constructor as we do with other kinds of programming languages okay so really what we’re talking about here in this slide is why we use a class dresser because it’s much easier if you remember if we were to keep taking your assignment of a one and you use classes instead of functions right you can define and I kind of ended at this in class right if you were to use object oriented programming for your your solution for some number one I would definitely give you the bonus more because I think that’s kind of the way we have to go towards but also want to kind of give you a very little a quick and dirty here’s an intro to iphone right so I didn’t really kind of make you do it but going for we’re going to talk about how you how you should use classes when you when you develop your coat as you should with any other class that you do here at georgian okay so here’s a a restructured version of the program okay we do three different things here’s my app my app it force is the an instantiated object of the class okay and let’s take a look at the my app class okay so we’re going to run my app that files look at this program if I switch back to aptana and here’s my app right so we’re doing the same thing here except now we put it all inside this class structure ok so we’ve defined you class called my app right and now in here we have a constructor and the constructor is going to basically create my container one which is going to link to my parents and my parent is going to be passed into the class right here right into the constructor remember you can pass variables into the constructors up so here I’ve got my my app I’m convinced ang ating my app and when I do I’m passing into the constructor this variable called root which I’ve defined here as the top-level very top level ok and you’re going to do the same thing with again later on ok so now I’m saying here’s a couple of objects you my container is equal to my frame and it’s point it’s kind of linking to my parent at the top level container I’m packing it exactly the same stuff as we did before I’m actually when i instantiate this class i instantly create my window of course and I create this other containers frame the surface object or this container that’s going to include a button with a text value of low world and a background of green and then I’m going to pack it on I’m going to pack this button onto the frame that I’m looking at ok so as soon as i instantiate my my app which is mine the app that I’m running I’m going to do all this stuff with inside the inside the constructor right here all this stuff is going to be run as soon as I call my app as an instance of the of the class my appt capital one ok I still got to do this though it still gotta run main loop which is basically the method that’s going to kick off the window alright so after i define my class and define my object my app it won’t do anything until I’ve defined this route main loop method once I once I call this method everything kicks off and then the main loop and I can do stuff in it ok so that’s really a modified version of our

of our ticket okay and let’s take a look at that so I run it it does exactly the same thing for forms the exact same way there is no difference between 11 version that though non the the version that didn’t have classes and objects and this version here looks like it performs the exact same way ok so why bother using this because this is more structured and we’re going to see as you move forward this this structure using classes and objects is much preferred over the non object-oriented approach ok let’s go back and my shockwave flash is crashed all right i’m just going to pause one second while i go back to my line but am I on a machine here it’s kind of crash my browser’s kind of crashed anyways alright continuing is where we do the edit alright so we talked about how to use classes and objects right a little bit let’s take a look at this other example which is called multi button pie right multi button vampire ok so I’m going to switch out of this and go back to multi buttons that pie alright here it is so again this is a much more complex class oh it looks more complex actually but it’s the same thing really what you’re looking at is a larger constructor this is all within the constructor method right all this stuff here happens within the construction ugly right alright so inside the constructor method itself you’re going to have the same first button that we’ve created here pack that on now we’re going to create but number two which we’re going to define and we’re going to pack down on right we’re going to define the text and the background is 10 right we’re going to do that as well and here we’re going to pack that we’re going to frame we’re going to pack we’re going to define figure the button and then pack it on we use pack geometry to do that right and the same goes with this button three and four we’re going to do this all the time so it’s going to a bunch of buttons still they don’t do anything these funds and if fine display this program alright you’re going to see each of these buttons is one on top of the other it’s like here here’s the next one here’s the next one here’s next week they’re all kind of one after the other and they all pack in the middle they all display in the middle of the of the of the window which is kind of useless right this is not good this is doesn’t give us any control right so we’re going to talk a little bit more about controlling this in a sec okay so let’s take a look so here we have a couple of attributes we can use with the pack geometry manager you can say side is equal left right again we can use left right top or bottom these are kind of user friendly constants to find into kinter right but if you notice the pack geometry manager doesn’t allow us to do x and y coordinates but let’s let’s go on with this first so let’s look at side by side down by another another option another program that would be kind of the same thing and again all we’re doing here in multi button or go on is we’re still defining my app again as we’re instantiated my app of class and we’re running this code after we instantiate it well the constructor does all this stuff right soon as the any kind of class is called the constructor is is initiated if you up okay so let’s go to the next one and again we’re going to call it side by side alright so here’s another class that looks very similar to the first class right right so the class that we have here is a bunch of buttons again except this time you’ve added some attributes right here’s left left left left these are all side by side right to the pack geometry manager right so if I look at the options if you look at it you can actually define as many attributes as you want now if I was going to type in this this command I went to self here i’m in tana button 1 dot and if i look at different options

button 1 dot I don’t have attributes as an option right but it says inside if I hover over it that I do we’re going to go over that a second so I’m just looking here for a second if you look at pack if I hover over this look what it says self button 1 dot pack right and the button two attributes there isn’t actually an attribute method we’re going to configure that as well okay so you can pack left right and so on and let’s take a look at how this works again this is not very good right because again all it does is allow us to pack buttons all in a row not cool right again a lot of control here okay let’s go back but it’s a little better because it does allow us to do some kind of formatting but not a lot okay and binding we’re gonna talk about finding the second before we do more formatting binding is actually what creates the event handler all right and here’s what we this is the general form of the event so you have your widget whatever your widget is right as an example in this particular case our which is a button right the event type name so that’s it for listening for our mouse up or mouse down there’s a bunch of different event tech names remain going to and then the event handler name we’re going to create we can create its own method or function if you will that it can go to you know again from a Java perspective they’re called listeners and Python the handlers okay same kind of it okay but really this is the general form the event type name and the event handler name and this the but when you find that’s one type of event handler that we can create four buttons or other objects Thanks so let’s take a look so again button1 if you notice this is just the format button will be your left mouse button right we’re going to bind with for this particular button that we’re going to create so we’re going to listen to button one right and then what we’re going to do is we’re going to create our own button 1 dot click method that we’re going to that we’re going to do stuff in okay so let’s take a look at that okay so let’s look at event button dot pie for more details and this is the last line of this before we go into some assignments stuff if you talk about assignment of a tube more detail okay so I’ve been buttoned up I something close this off would invent buttoned up I ok and if you notice we have the same kind of thing with our frame we have a top of the window we have our button and we have the configure we have our configure command we’re saying our button marked and we’re doing it a 1-1 blow here before we did it in two lines here we’re doing it only one line texts is equal to okay background is equal to green if you get foreground and so on all in one life okay here we’re packing the button and after we display the button right here then we’re binding it all right and we’re using a standard set of listeners so in this particular case we’re listening for button1 these attributes by the way I have them in a separate file for you to use and look at that in a second and then what you’re going to say is self you’re going to call this function self button1 click well this function or method right is right in here so here’s button1 click right and if you notice is still part of the my up class so it’s a method of the Maya class and it has to have self as number of methods herself in them and it also has to happens this other object called the event right here’s the event object so if self that button one background screen with in this particular case it starts off as when we use this before we hit button1 click right it is green then I want to change my button my button background yellow so this is this event handler is going to do else my button one my background is going to go back to Greece if it’s yellow or another color it’s going to go back to green doesn’t this button one click event does so that’s the method let’s tie it into this handler so this is the handler mine again we’re doing a couple things here this bind method actually creates the handler okay we’re listening for that this is the type of event we’re listening for a button one click event right and this is what we’re going to do when we hear that event right we’re going to you know activate this going to call this method okay you can actually call this method on its own right remember because it’s still part of a class i can actually go whatever the class name is my apt up button click button one click and then it will accept as long as I tell the type of event it’ll do different things okay same thing for cell of button too here’s button to that we’ve defined as a button right same as we defined up here and they state in this in this case we’re going to create a cancel button right so this is the ok button is to cancel button my cancel buttons going to be read by my background state and my state

here’s another attribute will be disabled right so I can kind of create different enabled or disabled right and here we’re going to pack it it’s going to be at the right side of this other button here right and we’re still listening for the button to one or left mouse button event as we’re doing here except this time we’re going to a different method we’re going to hit this other self sorry button to click method that we’ve defined down here it’s part of our class right and we’re going to say is hey as soon as I click on this on this might cancel button I’m going to destroy my parent move that means I’m actually going to cancel my the entire thing its up but you know what it’s going to be disabled at first we can’t really enable it because I haven’t really told it to being able so in this particular case this in this cone here it’ll never be enabled will never be able to click on it because we haven’t said once we click on enable my button we never said that right because right now the stage is disabled okay let’s take a look and see how that works okay so here’s our two buttons now if you notice I can’t oops I shouldn’t be able to click on it at least get it yet because it should be disabled but guess what i can click on the ok button they’ll change color but as soon as I click on the cancel button it doesn’t matter if it says disabled or not and this is one of the foibles of this configure and this type of binding it’ll never work it won’t allow you to be timid to disable the button not from you ok so we think from the state perspective fish and stop the button from working but it doesn’t now get another version of this cold build event button 1 PI right so here it is again here’s another another method I’ve got just run this thing so you see it all right so I’ve got one plus two right and if i click on here’s one here’s to this different buttons here but could one equals right 1 plus 2 is equal to three if you look at the bottom of my console right one plus two plus two if i click on equals x is equal to three right it actually does something on the console so let’s see how that works you have three buttons two of them are useless only the equal sign really matters right just going to keep on spinning out equals two three all right that’s all that’s going to do but this is another way of creating buttons here right and if you notice all the back will just define the backgrounds and in it for these buttons a little differently than before this time these print statements if you notice all these print statements are going to the console we’re actually creating a an output to the console with it with this event button one okay so we’ve covered a couple of things here and we’re kind of coming on to the opinion kind of going for about two hours and 37 minutes now minus a break so we’ve kind of covered the pic interframe work a little bit we’ve covered by game and we’ve covered a simple button but we really haven’t covered the geometry manager that I really would prefer that you use all right so let’s talk about that a little bit and I talked about this before too i said hey you know what I’m just cancel out this what I really want to do is and I’m just look at the button which is closer this this presentation right the problem with with the pack geometry manager is it just packs it in any old place so here’s some button options you can you can actually combine your active background your active foreground there’s anchor and so on I’ve taken all this from you know that the tech inter documentation that I found online this is all stuff I haven’t created this salsa that you can find online when it comes to take inter okay so this is all your button attributes here your border with your background your bitmap these are all things you can do to find your buttons okay and here’s some more so I’ve kind of create almost like a reference card for all this stuff here right you can also talk about dimensions for your button right so if when it comes to dimensions see is centimeters eyes inches Emma’s millimeters and P as printers points right so sometimes you’ll be using these dimensions for four units when you when you talk about stuff for buttons themselves okay so here’s an example of some event sequences and that’s what we were talking about before your button one is really an event sequence of your listing for there’s also a key press the mystical H is your listening for the H key then you have a control shift key press H right what you’re actually listening for a control to ship to the H

right so this is the different kinds of this is the format or the general form of advanced sequences okay let’s take a look at some others so here’s some modifiers alt penny control double so on these are all different kinds of wonderful are you can add in to your your key presses as an example ok so here we go sorry alt l will be the left hand Alt key all our will be the right hand hold key and so on these are different kinds of sequences that you can put on you know you can actually listen for when it comes to your key presses for your buttons ok so in your key presses or whether it’s actually Mouse presses these are all them and they’re inside this file that I’ve kind of put up online under lesson for the button widget but there’s still something else we need to cover which is hey how about this pack jump to the tom says really sucks how do we deal with that and in here right it talks about you know different kinds of geometry managers you’ll actually look through here this documentation was pretty good but I actually click on Python tkinter resources it’s going to go through and redirect me a different places wreck and learn to enter right and that one document I just download it here’s that the latest document of to kinder 8.5 reference because the latest one right we talk about different geometry managers in here as well right so if we want to find the this is all for the pack gel much margin but we need is a place geometry manager if you notice it’s not covered in here because majority of the geometry managers that are cut or recovered our grid and pack right so that’s the most people’s in the most common ones but if you notice look at this so here they talk about how to manage the grid when when it comes to your your geometry and I recommend to you that you look at pack our place geometry alright so if I look up the place there it is let me w go back to Google is my google food right and it go so place the geometry manager the engine okay and then if I want to look at it again I’m just looking at the first place I’m looking at here’s an example so again w would be your window place would be a different type of geometry manager and then you have something called relative x and a relative y coordinate system and different anchor if you want or no so this is what it looks like if I’m creating a button so B’s a button I’m creating here’s my pain pain is my frame right my width is 12 my height is 12 i can define the width and height of my buttons right i can also create an image for my the of the actual button itself this was called a launch icon but that’s my image itself but i’ve defined and I my command different kind of binding command binding instead of the a method binding right itself don’t launch right here’s where I would actually do might have I would make my my buttons work but if you notice the place geometry manager tells me where my button lies right relative exmouth of y x and y coordinates and all that kind of stuff that I want to use ok so this is the stuff that really worked well from accept it looks really complex so how do I I was going to create this slot machine program how do I do it what’s the main method that I want to use to quickly create my slot machine program and I’ve kind of said it last time when you guys are there there is a quick drag and drop through a tool for to kinder called page again I would go and find that in google and if i go page for the kinder at one of my searches in Google i can actually it says their page at Python GUI generated so if i go here it’ll tell me a way to download page now i’m all for type of things by hand but this actually creates all the details that you need for an you know for assignment to framework ok so let me explain that a little bit ok so right now in order for you to use page you need to have you know python 27 or Python 3 a 2 working in your system ok and what you want do with pages are all the widgets that are supported all right with paige these are the things that are automatically generated all right and there’s also something else called ttk this is an extension of the tick interlibrary that I’m going to be using okay here ok so you install page tells you how to install page and everything else and

other generate stuff so I would encourage you to look at this all right to generate your your basic functions but I’ve got my page already set up so once i think i’ve i’ve kind of loaded page up let me just go to my desktop here so here’s my desktop and now i want to create my page if i will so here’s my page this is this is my page drag and drop code very very rudimentary like i showed you guys in class so once i double click on it and eventually it’s going to run it’s going to show you the the framework here it is so there’s a few things that come up there’s tears the attribute editor that comes up here it is and this is my my widget toolbar that i can choose from so i want to create a top level 10 so first they want to create now for page once you have to set up properly and running all you do is point at top level you don’t to double click on the site point out at once so here it is alright so here’s my new top of the window and if you notice my top level window i can define its attributes right here so right now my alias is top level right i can define my attributes for the top level 10 right here the maximum size and then emphasize the window width and height and so on so for example if i’m on my window to be 320 x 480 right if you notice my window changes automatically way 325 folks 320 x 480 here it is right so here’s my new top-level window and it looks like the same size as that mobile phone device right so I this little lifty attribute editor allows me to change what my windows going to look like before I open it up okay that’s number one now I may want to or may not want to add in a frame I don’t have to i can use the frame i cannot even frame it’s up to me right and a frame is just another container within my window okay but what if i want my window this window itself to have a background image and if I if I look through here can I do it and if you look through these are different options that allow you to to get a a hint of what you can do with your top-level window I can add menu if I want you know i can actually can actually set the focus take focus my on my own little window will will initially start with focus and so on right i can state i can create my state whether it’s icona fight or not or withdrawn I can make it visible or not the whole thing but I can’t really establish a background to this window if you look at see here’s a my highlight background and here’s my container is eight a container yes or no right right now it’s not a container I can make it a container right so it says look can’t modify my container anything I want to try and do is give me here’s my background my back room right now right as an example I can create different colors my backgrounds so right now I can make my background red right I can change my background to whatever I want right or i can create i can kind of look up a color palette of colors that i can choose from that i can make my my background color so here’s an example of that my border width i can create my board with a 2 as an example right i can change my borders my window or not i can unclick that i can unclick this to write anything i don’t want i can i can do kind of destroy can go back make it white as an example and it’ll do whatever I kind of tell it to do to Kent this again this tool is very simplistic right so here it is or with the two I can take that away here’s my color map I can change the kind of person that I have when it’s in my window I can make it so my cursor is a boat right so here’s the boat see that’s kind of silly but I could I mean there’s different options for the theft curses you you add a circle or a box or spiral here’s a circle look so I can change my cursor type from my window like I have a lot of control in this window right now I can also do things like add in a button I can add some button cylinder here’s a button right now now that I’ve clicked on this the button right I’m actually my property are now aligned to the button because I clicked on effective on the window again my properties are lined to the window so here’s my button right and now if you notice my button doesn’t really have a name here’s my texture my button that can change this to okay right there’s my text of my button right without knowing the properties and I can create another button let’s just drag in another button here right and then this button i’m going to call cancel so here’s ok and cancel and again i’m going to move this button around i can position this button exactly where i want it as opposed to kind of guessing where it’s going to be that’s why i like that and this is all done with the place geometry manager right if you notice here’s my x and y position 30 and 4 30 right 30 and 4 30 I

have a Northwest anchor will talk about anchor another time or I can make it a centering but right now Northwest is and we’ll talk about where where that is but really it’s north right and less right 30 and 4 30 and then I can choose relative excellent relative wife I need to alright so here and if you notice I’m I’m created these two buttons now if I want to define my Python I want to generate my Python it I click on this page window here and I can say generate Python it’s going to ask me to save my cone somewhere but I don’t have to and in fact if I just use this to generate my Python I click cancel it’ll throw up an example of my code right so here it is here’s my Python code right now there’s a couple things I don’t meet here right I do need this class this class here new top level one I knew I do need this part right because this is where i define my class and i’m going to call this class new top level one whatever I want later on I can redefine this class to whatever it needs I don’t need this other stuff I can just kill all most of this this stuff root g ki need root title is my top level window root geometry this is how big my window is 320 x 480 and it starts at eight-thirty 2 x 2 14 that’s where that’s what this means right and then here when I’m do I’m saying I’m creating a new window my I’m create once I’ve created my my route I’m creating my new top-level window by just by using my my new top level one class right which is kind of silly and I’m creating it with making of calling it w right so this is kind of like a template to create what I need which is kind of cool right alright so let’s continue with this example for sale might cancel out of this right and I’m going to actually close this off and quit okay wait not gonna save anything and i’m going to start it again ok so here we are same thing as before a new top-level window make great here’s my top level window right so again new top level one is what it says here i want i may want to change this this alias to whatever I want so i’m going to talk call it top level maybe i’m going to call it may main window that’s what i really want to call it right there’s more you know my top level window right that’s my first thing i’m going to do if i’m going to try and change my my alias to whatever I want let’s move this away let’s see if it works alright so my window right now if it works right this is my window right my class myclass i can’t modify not from here but i can do it after i generate my window okay here’s my title from the title of my bar so here’s my page test right that’ll change the bar itself to my page test right so change the geometry I can actually this is my x and y position my starting x and y position of where this is if i move it will just change my x and y position this is what this is right here right and here’s my width and height and again if i want to make it 640 by 480 i can control this a lot better than I did before right okay and there’s some minimum maximum size I can also say can I resize the width yes or no I’m the clip know and I can’t resize the height so now my window is just like my pie game when do I can’t resize it it’s exactly as it was before right this is the kind of stuff that controls that I use when I created my game right so all I’m doing here is I use page as my framework to create my game so let’s take a look at my initial version of the game I’m giving you a hint here what to do this I think this is a great little tool to create your structure from scratch okay so let’s take a look here I’m just x out of this and not say anything let’s go back to tick inter I’m sorry to to my code and let’s look at assignment to solution set which is what I did so remember the first one that created the stuff i shared with you all it is is text based game so that’s what I do here okay exit the second part here’s my second part this part i used my python slot machine class i renamed the slot slot machine way to python slot machine right from couple of a window that is my class that i’m defining right if you notice hey down here right route is equal to K root titles Python slot

machine here’s my route geometry 600 x 400 you can change it to whatever you like this is what match my my image that I loaded it right and here i’m defining my my python slot machine as its my class and i’m creating my attention in my class with double yeah this is i’m using the same i use this to point out that i use page that’s my structure if I will I first I have to understand to enter a little bit but once I do I can use page that use drag-and-drop controls to help me describe my food all right which is really really cool alright so here we go there’s a couple other imports I made here to from took interior import star our TT camp or star from tech intern for so this is all stuff that comes right out of a page itself ok so did a couple things here and I’m showing you this because you and I’m going through this with on video so if you were to actually look at the video you can actually go through this and figure out how I set up my class ok let’s take a look as I move further down what I’m doing here when I define my second option Mary’s I’m saying hey here’s my class I’ve set up some some properties of my classes up my win number my bet my turn and so on and here I’m actually defining my buttons but I’m using the new jug jiya geometry manager right here’s my height and width here’s my relative X and relative why you don’t have these relative Ekstrom relative are you can actually use x and y-coordinates like actual X&Y coordinates with it for your your window and then I want a hand my curse is going to change to a hand i’m configuring my text of clothes and i’m creating a button a button one and i’m putting this self button1 click event ok us from doing it so this is an example of the first buttons when I actually run this code right here’s what it looks like this is the second version of my phone this is like me translating the the other type of code that i use it for you know which was just a console into something that works with the tech interlibrary and page as much structure so here’s X my jackpot 501 money two thousand my current Brett is a hundred bucks as an example once i click enter my spin button becomes available I can spin it and then i can continue to spin and lose money as I go and then I go and then I if I win especially to give you some output here I can close and it will pull out my program right so again i use my spin button here’s my reals right and then we’ll define different different kinds of buttons so here’s my three reels one two three so this is where my information for my reels are going to go right as an example right here’s my my jackpot different labels that I’ve created and again these are different objects that you can define with tic enter if you read as a kinder documentation I can configure the font in the text of label just like I knew the button we haven’t talked about labels yet but we will and I’ve created other things here a jackpot entry which is an entry type of control where you can actually enter information this is a text area that I can actually enter information right and so on so I’ve configured all this stuff with this inside my class which is actually as soon as I run my life our instantiate my class this is all inside my constructor right here this is my constructor right and then I have a bunch of different kinds of methods right that allow me to to do something when i click on my buttons right and if you notice i still have reals just like I gave to you guys in slot machine one and pull the handle these two functions that are outside of the class are still being accessed down here right so as soon as I run my my class right i still use reels and pull the handle there outside of my class I can do that right not a great practice theoretically all this stuff these should be actually methods that are inside of my class itself and actually further iterations and echoey I do that okay but that’s the kind of stuff and if you notice in version 3 i’ll stop after this I’m version 3 of the code again I’m doing the same kind of thing right except this time if I go down I’m actually using a pie gay mixer I’m actually including my game right here is the way we do fight game audio in my code right and i’m actually using my mixed controls to define a couple of sounds that i have in my library and if you notice here are my resources at images and sounds that’s where i’ve broken down my my resources from my game

right and i’m using different objects so i’m creating a canvas this is where i actually have my images this is what I suggest you do right for your for your particular phone as well I don’t use a frame i’m using a canvas for my for my button not from my for my background for my slot machine and then i’m saying well you know I’m going to load in something called a photo image right of my slot machine gif file that I’ve got right and then what I’m going to do is may use this create image method to actually throw it up on the background this is the actual background for my slot machine code right here and then after I do that I got a bunch of labels that I I layer on top of my image right and if you notice right here’s my canvas I call it background panel right and my labels are actually using the background panel as the parent for my that they that they kind of lay on top of her layer on top of my leave answers my labels and the same thing goes for all my buttons so my back my buttons are actually using the back mount battle as well right so there’s a bunch of different things like go on here that you can you can use this page a program to define anyways that’s it for me for this week and we’re going to do more on this next week when we get together during a regular schedule class again I’m going to stick around to see if you guys have any questions but for now I’m going to sign out and stop this stream right now and it will start it up again with just questions and answers for anyone else that’s sticking