The Ultimate Tkinter Masterclass: GUI for Python projects | John Harper | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

The Ultimate Tkinter Masterclass: GUI for Python projects

teacher avatar John Harper, Cambridge Programmer, AI engineer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

41 Lessons (3h 35m)
    • 1. Promo vid

    • 2. Introduction

    • 3. Setting up

    • 4. Your first window

    • 5. Adding text

    • 6. Geometry managers

    • 7. Buttons

    • 8. Decorating buttons

    • 9. Command interactive buttons

    • 10. Frame

    • 11. L9 Getting user input

    • 12. L10 adding a title

    • 13. L11 adding an icon

    • 14. L12 adding images

    • 15. L13 editing default size of the window

    • 16. L16 fill

    • 17. L18 using grid

    • 18. L19 aligning

    • 19. L20 spanning columns

    • 20. L21 binding functions

    • 21. L22 common event labels

    • 22. L23 creating a click counter

    • 23. L24 left and right click

    • 24. L25 left right click counter

    • 25. L28 creating classes oop

    • 26. L29 menus

    • 27. L30 submenus and separators

    • 28. L31 drawing using canvas

    • 29. L32 drawings 2

    • 30. L33 creating a basic paint program

    • 31. L33 scale

    • 32. L35 storing scale inputs

    • 33. L38 message box

    • 34. L39 window colour

    • 35. L40 dynamically creating widgets

    • 36. L41 dynamically styling widgets

    • 37. L46 how to keep improving

    • 38. L45 thank you

    • 39. L49 intro to portfolio projects

    • 40. L51 creating the game

    • 41. L52 creating the game plusplus

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


Master practical Tkinter concepts and fundamentals

My course does exactly what the title describes in a simple, practical and relatable way. I help you to grasp the fundamentals of Tkinter with live coding, practical examples, projects and quizzes, moving step by step through beginner and then intermediate concepts - getting you to the point where you are ready to being a career in python - to apply the foundations of python into real life projects that users can easily interact with.

Why you need this course

Coming to grips with Tkinter isn't easy without the right resources. On your own it can be quite confusing, difficult and frustrating. I've been through the process myself, and with the help of my peers and mentors I've quickly become a proficient Tkinter developer. I want to share all I've learned with my fellow Tkinter aspirers. My inspiration comes from believing that, if taught effectively in a carefully planned and considered way, the vast majority of people will be able to master python..that's why I've created this course.

What you will get out of this course

I will give you straightforward examples, instructions, advice, insights and resources for you to take simple steps to start coding your own programs, solving problems that inspire you and instilling the 'developer's mindset' of problem solving into you.

I personally provide support within the course, answering questions and giving feedback on what you're discovering/creating along the way. I don't just throw you in at the deep end - I provide you with the resources to learn and develop what you need at a pace to work for you and then help you stroll through to the finish line. Studies have shown that to learn effectively from online courses tutorials should last around ten minutes each. Therefore to maximise your learning experience all of the lectures in this course have been created around this amount of time. 

My course integrates all of the aspects required to get you on the road becoming a successful python developer. I teach and I preach, with live, practical exercises and walkthroughs at the end of each section!

How long will it take?

Although everyone is different, on average it has taken existing students between 4 - 6 weeks to complete the course, whilst developing their skills and knowledge along the way. It's best not to speed through the content, and instead go through a handful of lectures, try out the concepts by coding, yourself, and move on once you feel you've grasped the basics of those lectures.

Who this is not for

This course is not for anyone looking for a one-click fix. Although I provide you with a path walked enough times that it can be a smooth journey it still requires a lot of time and effort from you to make it happen. If you're not interested in putting in your energy to truly better yours skills in python then this may not be the right course for you.

What materials are included?

The majority of my lectures I have chosen to be in video format so that you can hear me and see me live coding when we're going through each and every area of the course.

Aswell as the course lectures, practicals, and quizzes the course will soon also offers my full support as an instructor to answer questions, provide feedback and support.

I will be constantly adding more content and resources to the course as time goes by. Keep checking back here if you're not sure right now and feel free to send me a message with any questions or requests you may have.

Meet Your Teacher

Teacher Profile Image

John Harper

Cambridge Programmer, AI engineer


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Promo vid: Python is an incredibly powerful and versatile language. Sometimes they I want to create something that I can show my friends something that they can interact with. And that's not maybe online, something that could run directly from their computer. So I want to be able to create buoys. This is what lots of python programmers tell me once they've gone through the basics of learning. That's why I've created this course on Kinzer course, created specifically for using Kinter to create buoys in python. In this course, I lead you through all of the basic concepts of Kinter everything from how to create your window to creating widgets like buttons, bringing in images and creating much larger projects. So once up, she knew the basics of Kinter on showing you some of the intermediate concepts and how this integrates with python programming languages a whole. I'll be leading me through a range of large portfolio projects, which you can use to show off your friends on potential importance. So my name is John Harper. I'm a python programmer on a machine learning engineer and an award winning entrepreneur trained Cambridge University. I'm also a recent scholar from the pie school in Rome, leading the way in artificial intelligence and created. By the end of this course, you'll be able to confidently creates your own buoys, using Kinter everything from using the basic concepts going through some of the go intermediate ones and be able to solve problems you may have no for possible have been doable using python. This course is highly practical, and I make sure that whenever we go through concepts, you could be right inside me. Coding on Landy House and print it yourself perfect student for this course is somebody who has at least a small amount of experience using python in the past. But enrolling will be given lifetime access to over three hours of content lectures, presentations, quizzes and practical projects. The course comes with a 30 day guarantee where if you don't find the course useful, you can get all of your money back, no questions asked. Have in this course, you also get a certificate to show you have completed the entire course. There are no prerequisites on. Enrolling is a simple as clicking a few buttons, so you take a look at the description below reviews that previous students have left on. You can see some of the previous lectures for free before you enroll. And when you feel ready, I'll see you on the inside. 2. Introduction: welcome to the ultimate Kinter masterclass. Thank you from running on the course. I'm very excited. Teoh, show you the ins and outs of using Kinter to create your own grease on. I assure you, we're gonna be get making this very practical. I just want to introduce you to the basic concept in this lecture run for really quickly how to set up on your computer. Most likely, if you already have Python distort, do you already have to contend anyway, on then? By the third lecture, you already be creating your own windows on seeing how to create your own widgets. So let's go with it. Start with a quick introduction here. So, Kinter, first of all, stands for TK Interface. Essentially, it's talking about how you can create goodies to create your own interfaces to the programs that you've created. What is it really agree? Is a graphical user interface just like on your Windows start menu. All of these different buttons. It's a graphical user interface with a collection of design assets. So all of these buttons have a different purpose as the graph equation face to help the user to interact with the programs so widgets. We'll be talking a lot about widgets. So what are they essentially within an application or component? Often interface. They enable the user to perform a function or access of service. So we're talking about things like buttons, drop down menus, even text or images. All these sort of things, a widgets. And you're gonna be getting very used. Teoh talking about widgets, Onda plying them into your own programs. So, wife Kinter, why have I as a developer chosen to use Kinter, and why am I teaching it? Well, here are two really good reasons. First of all, we have a very large community. So whenever you have problems, you can look online. And most likely, you will see that someone's already said that they're experiencing this problem on the community's help to solve this problem. So one of the big reasons is that if you have any problems, you can easily find out the solutions online on also, it means that there are a lot of different people out there sharing their code on get hub of their different projects. So you can look at how people using Kinter to make some really cool stuff. Skitters also really well documented so that you can go through the fissure documentation and pick up a lot of stuff from there. Also as a programmed Kinter is really easy to use. I find eyes very simple to apply the concepts on. It's easy to get practical very quickly, which is why I'm excited to lead you three to the third lecture where I can show you just how easy is to get set up. So without any further ado, let's get started. We're gonna run through very quickly how you can set up Kinter on your computer and also Duke to notebooks. If you so please, to use that on, then we'll be getting practical very quickly. So good luck, and I'll see you in the next lecture. 3. Setting up: Okay, so now that you're in the course, I want to get you doing practical things as soon as possible. So we're going to quickly go through just to make sure how to set up Python, Kinter and Jupiter notebooks. I'm assuming that you have some basic knowledge of python, so this should actually go quite quickly and quite smoothly. So the good news is congratulations. Kinter comes pre installed with python onda conduct, whichever one you using so time for celebration. So first, let's just talk about how you want to set up. I think if you don't already have python set up on your computer, you can either doubt you can download. Python directing from python dot org's were working using Python three So selector. Download Python three on. It's very simple. You choose your operating system Windows, Linux or Mac aan den. Once it's installed, you can get up and running straight away, and you can work out of the I D E, which you can select from your start menu. Or you can use Jupiter notebooks, which is recommended, and I'll be talking about to the second. Anaconda is also a useful package installer, which installs not any python, but a lot of other frameworks associated with python again. You want to select Python 3.5, I recommend if you had to choose using Python because later on in the course we will be using a few other libraries, and it's kind of easier to install it using Pip, which is pythons installer s. Oh yeah, we'll be talking about that in a second, but I'd recommend Python out of the two, but you're absolutely fine. She's Anaconda if you like. So let's just talk about installing Jupiter Notebook If you use Anaconda is actually a lot easier with dupes notebook because it comes preinstalled sometimes with by thing, you have to install it yourself. It just in case it's not installed on. Either you go to the man mind you type in pip, or sometimes you have to type in pip three Installed Jupiter notebook or conduct. If you're using Anaconda and for some reason doesn't already have dupes. Notebook Conduct in store duped a notebook and then once has been downloaded. All you have to do is either from the command line you can type duped in a book or from your start menu. You'll see an icon kind of like this, and you can just search for it on, do you open? Duped a notebook and it should open up just fine. So let's get started. I'm just going to show you quickly what do tonight? Book looks like. So since you when you opened open jump to know. But you're gonna go to the home screen, which looks something like this you can see here in the u. R l that is a local host. It's not being run on the Internet. It does run through your browser. Andi, this is showing what my directory is. So essentially, I'm working out of this folder called Kinter, and these are all the files that are within it. So whenever I try and run something that requires use of outside file, unless I specify a different path, is gonna assume that it's in this working directory desktop you to be Kinter. Okay, So from here, what you want to do is click on you and then select pie from three. And this is what you got to see. So this is where I'm going to be working out of because it's extremely useful just to play around with learning new things. And it's helpful for me to show you what I'm working. Three. So I'm just gonna show you a basic function to do. Hello, world or Hello, Kinter. World, dear lady. So in order to run a cell or to run this program will have to do is do shift, enter and then the outputs gonna appear right below this cell. Ah, few useful shortcuts. A If you have a it produces cell above, if you'd be producers sell below double D. Deletes a cell shift. Enter, as I said, runs a cell on if and for example, if I type something that might take a while. And if we don't? Sometimes if I try and import something called tensorflow, which is a different framework, you don't worry about this associated with machine learning. It tends to take a few seconds. As you can see, this Asterix here is basically saying that this excel is currently running and you could have to wait. So once this turns into number is it basically means that the cell has has finished running . If I try and run something else while this is going, it's gonna be waiting in this key. So this isn't gonna work until I've used used this here. So those are the real basics of tensorflow A. I want to mention So what's a good idea in terms of you working alongside me during this course is I recommend you minimize this window toe half. So like this. Essentially, you make this hard feel screen, and then you have another window that's going to be me giving the lectures so that you have half off on your own, the left half or the right half. Whichever you prefer your coding out. You're doing your stuff on the right hand side. You could be watching in my tutorials on seeing the code is being done. I think that's a really effective way for you. Teoh not only learn but to actively learn, be practicing and getting used to it yourself. So that's everything for setting up your computer. If you feel like using your I d. That's comes with python or anything else, you're very welcome to do, say, Jupiter. No, but I find could be avarice for way of practising new concepts and running the very quickly in getting feedback so I do. Whichever feels best for you on a k a. The next lecture, we're gonna be actually getting right into learning how to create your first window and your first gooey using Kinter. So when you're ready, I'll see you in the next lecture. 4. Your first window: the case. Now that you have set up with everything on your on your computer hopeful you've got python installed on bond. Kinter actually comes pre in stores with Piket Python, so you don't have to do anything about that. So let's get started with the absolute basics. So you're going to want to imports, Kinter, but and just to make things easier for myself in pronouncing it, I'm gonna be calling it just Kinter s. So don't get too confused by that. So instead of just typing imports, Kinter, Kinter, which you'd expect is actually better Just type from Kinter Import and then Asterix. And that means import everything from Kinter. Simply because when you try and run a lot of things from Kinter and you haven't done it this way, it will say that it can't be found, which is just frustrating. So it's always for best practice when you're importing everything from Kinter. If that's we want to do, do it this way instead of just putting import Kinter. So let's get started creating your first window. So what we're going to do is we're going to write Creator variable, and I always cool that call this you're going to be doing these three things so importing Kinter, creating a window on running the window on a continuous loop, which we'll talk about in a moment. But these three things you're going to be doing in every well, I'm 99.99% of your projects in Kinta. You will be doing this every time, so it's important to find a way that works for you. So for me, I put route. Some people put main. Other people will put window for me. I just like putting root. It zipped my own preference and T k is just stands for Kinter, and it's just saying, And so when you know, run it. Eso if I were to run this now, so if I were to import Kinter and then just run this essentially, what happens is that it will appear for like, a split second. You have to put basically, you want the window running on a continuous loop. It may sound silly, but essentially what can two dozen it creates a window is if you just tell it to create the window just once, it would just create it once for like a mini second, So you have to run it on a continuous sleep. So every time you create akin to window you want puts roots or maine or whatever. You have decided to call your variable dots main loop. Okay, so when you when you run this now, so hope you have imported. Kinter, you've set this up on this. As you can see, we've now created our very first window in Kinter. That's because, as you can see in Jupiter notebooks, when something's still running, you have this. It'll Asterix. That means that this is still running the main loop. So assumes I close it. It was stopped running and I could run it again. Let's try that again. You can see the window appears again and it's still running. Okay, so this is your first window Now in the next lecture, let's look, getting some text in there, and then we'll go on to how you can add a lot of different widgets. 5. Adding text: now that we've gone through how to create a basic window in Kinter, and I hope you have had a few chances yourself to set up a few windows were going. Teoh, we're going to work on how to add text in the windows now. So we're going to do this in three stages. We're gonna go back, go through setting up a window once again. Then we how we can add a label or had add some text into the window on. Then finally, how we pack it. That's what we were recording it. How will basically, say packing? How would be putting the text into the window? So let's get started. Hopefully you'll be coding alongside with me. Eso First of all, we're going to imports, Kinter. So instead of just putting imports to contrite this like we talked about last time we get from Kinter Import. So we run that. And then what we're gonna do is we're going to set up our variable root equals, or you may be calling it main or window or whatever. And so then right to the bottom of our code, we want to have this this mainly. So what do we do. We put roots dot main loop on empty parentheses. Okay, now in the middle here, this is where we've said right of set up a window, and at the end, we're going to say, right, run this window. So in the middle, we can say what we want to be put into this window. So what we're gonna do, we're going to add what's called a label. So if you basically if you want to ads, text or even an image very often you'll be adding them as labels. So I'm going to call this amazing label because it's gonna be the best label you've ever seen. So the first thing you do with with most of widgets is is where they are creating a label or button or a check button or form whatever it is most the time you're going to be putting with a capital letter. The name of what? ISS. So this is a label. So the first thing we we have to do is just white label with a capital l. And that's literary are saying create a label. It's a simple as that which is awesome. So first of all right now, we're any work with 11 window, right? But maybe later on down the line we might want to separate our window into different sections. So right now, first, where we say, Where do we want to put the label? For now, it's relatively simple. We just say, Put it in in the window because we just got 111 day. But as I say later on, or we're gonna be doing is separating a window into different sections. So it's easier for us to perform at some of the windows. And at that point, we're gonna be wanting no, he just to say, Put it into the window, but actually put it into this section of the window. So that's why you that's why it makes sense. You need to put the position every time, and then we're gonna put text because it's gonna be in the labour. It's just could be text equals amazing. This is awesome level. Okay, excellent. Say that's what the roots where it's gonna be Andi also, this is the text that's gonna be put into it. So there are other things that you can add to it. For example, the background color the foreground color, different things like that. But for now, we're just focusing on setting up a basic label. And we will be going through all of this in a later lecture. So don't Don't worry. Eso I would have done so far is we have imported Kinter, we've set up a there are variable toe for the window. And then we've created a label, and now we're running on a main loop. So we're going to say, right, keep running this one day. So if I run this as you're going to see, the label is not actually going to appear. As you can see, it's still an empty label. We need Teoh do something to say to the program. We need to say, Say to control, Right. Okay. We want you to now actually get this into the into the window. So actually, what you have to do is amazing on school label dot pack and for now it's empty parentheses . There something so you can put into it to say, Where do you want to package on a pay to the left? To the right, up or down on this is one of three different geometry managers which you can tell your Kinter exactly how you want to put your widget into the window. So Doc back is probably the easiest one, because literally, just saying Just pack it in there wherever you can. Don't worry about it. So if we run this now, you will see we have a beautiful, amazing label. Isn't that fantastic? Okay, so I hope you are coding along with me. So it's create another label really quickly. So first of all, we create the variable. And then we say we want to create label, which I just think it z amazingly simple. It's a great way to do it. We're saying, Put it into the roots. And they were saying the text ISS, This is right. Okay. And then we we can run this and, as you'll see, will still only see the first label because we haven't yet packed this 2nd 1 So we could just right under this one or above. It doesn't really matter. Label on score to dock pack now. If you're on it, we have to awesome labels. By default, they come up center top, but we can play around in the future. Lecture where Where we can set this up. So that's it for this sector. We will in the next, sexually talking more about geometry managers. Basically, how we can dictate where the widgets go on our screen. So I'll just be introducing the basic concepts of that so that you get start to build an intuition about this. But for now, give this a try by yourself, once or twice, create a few windows with text in them. Play around with it a bit on when you're ready. I'll see you in the next lecture. 6. Geometry managers: So after receiving some really helpful feedback, I've decided at this point in the course to give you a really basic introduction to pack, grid and place, not going to the nitty gritty just yet. Because for now, using pack will be easily sufficient for learning the basic concepts. When we move into the next section, I'll be showing you the ins and outs of using grid Onda bit in place as well. So we've already been through talking about using pack. So this is the easiest in most people's opinion. Easiest way of just putting widgets into your window York into one day because you basically you could just say, you know, just work it out yourself, just packed those widgets in there. And, you know, I'm sure I'm sure you as a program could work out where it should go on. And Kinter doesn't have a problem with that. It just shoves it all in on. And as we'll be going over, for example, if you were toe, you can say whether to pack it left or right. And if you just tell it to pack two things to the left, whichever one you have said two packs the left. First. That would be the formula, the furthest on the left. So back is a really easy unuseful way to set up things in your window grid allows you to go into even more detail. So what's used for about graders that essentially you can you can map columns and rows onto your wind? A. And you can dictate exactly within those rows and columns where things should go, whether they should span more than one column or more than one row s so that you can really help. You can really put things just in right place so they line up to each other. So we'll be going through an example of using like a log inform, you know where there's where you enter your email on your parts. Wouldn't where you have the Texan stuff like that, Then with place, essentially, you just get even more control. You won't really need to use place for any of the products that we're doing in this course , because it's really just if you have a super complex program, but we will touching it. I think one of the really important things to go over now is that in the same window or the same frame. So the same section within a window. You can't news both grid and pack or or you kind of places. Well, you have to just choose one simply because for each of these algorithms, if you try and tell your Kinter Teoh within one frame or sorry, one section of a window. If you tell it to use two different two of these different ones, it can't handle using the two different algorithms. So one really important thing for you to to realize is that you can't use the same same anyone. You can't use more than one of these in any section off your window. So that's an important thing to keep in mind. Okay, so that's all I want to touch them. For now, we will be getting a lot more into detail about pack, and especially about grids in the next section. So don't worry on Garcia in the next lecture 7. Buttons: right now that we've gone over how to set up your window, how to add text and how to place it with the different ways that you can place it within your window. Let's move on to buttons. I find giving the buttons lecture very satisfying because finally, actually, you're creating window. That kind of looks like something that someone could use. So I might be a big gig by find buttons. Very exciting. So in this lecture, we're basically going to be talking about buttons. How to create them on did how we can put them on different parts of the window on the left , on the right, on the top of the bottom. So let's get started with the basics, Shall we say, First we need to import Kinter, and I hope you're coding along with me. So hopefully by now you've realized that you don't do import Kinter like this. You do from Kinta Import Asterix, which basically sounds for import everything and they won't set up our window. So we create a variable. Okay, don't worry. For the whole course, I would be You're talking through this so much in being very boring. But for now, it's really important that we go through these steps just a really make it that, like second nature to, you know. So at the end we were starting out this loop, which just keeps the window running on a for loop. Okay, so I was saying before when we were creating our labels, that it's very simple, you know, we have to do is create labor one whatever equals and then in order to say you're creating enable It's a simple as doing this, right. So if we creating a fantastic button, so for creating a bus and what do you think? The first thing we need to put in? Okay, so what you want to do is button with empty princes. So just like we did before with adding text, the first thing you do is say where it's going to be. And so for now, because we're not using different sections were not separating. Different sections within the window were saying, Just put it in the window. So first we say route, and then it's the exact same thing we say the text within the button is going to be, uh, click me. Okay, so we're going to be creating a button that says Quick, Me now again, just, like are saying When you're creating labels, you can add different colors and things like this here on, we will be going over that in a very, very near lecture. So if we run this, of course, nothing is going to appear. Why is that? Well, it's because we haven't said any geometry managers, so we haven't used a pack grid or place. And so for now it's gonna be using pack, so we're going to do. And do you know what? This is kind of a long variable. Let's just call it. But someone I don't against have create annoying. We had very boost too much for you guys. Really button dot pack empty pregnancies. So if we run this now there you gay your first ever button. Isn't that water? For some reason, I always love giving this lecture because you've really got an actual batter now, which is really cool. So if you expand it, you can see that it's at the top of our window on it says Click Me. So that's very cool. Um, now let's look at how we can move this button two different sides. So it's a the top by default, top center of the middle top center by default that moment. So let's move it to the left. So we don't actually put this in this part where we're defining the button. We're actually putting it where, where we're telling telling it how it should be put into the window. So in our dock back. And if it's in dot grid, it might be so different you put side equals and then in capital letters, the direction it wants to be in. So if I run this now, you will see that it's now on the left side, left middle. Similarly, if we change this too, right? Yeah. Who knows why they wanted to put it in capital letters, But they obviously wanted you to really, really be forceful about where you want to be. Bottom. Okay, so you run that on DA. As you can see, it's now at the bottom. So what we've gone over in this lecture is we've talked about how to create your first button on gets exactly the same as setting up your label. Except you put button here. Um and then we talked about how you can when you use the doc pack to say where it's supposed to go. You can actually say in what direction used to be top bottom, left or right, And those are the words that work for this. So let's just add the two together now. So let's have label one as well equals label roots text equals. I'm there to label sure turned Start, and then we're going Teoh packet as well. One Doc pack and we're gonna put this one side equals left. So now we're going to have a label on the left and a button on the bottom. Cool. So we're starting to get the hang of this now where we can, but labels and buttons on screen. So what if I were to say, Put the button on the left as well, So it take a second for yourself. I did mention this in a previous lecture, but have a think if when I run this now, I'm telling them both to go on the left hand side. So if this were a really dumb program, they would be overlapping, right? But especially the word packages packing all in there. But what do you think is gonna happen, however, Think, and I'm gonna run it now. So what happens is they both go to the left, but the label's farthest on the left. That's because we've packed the label first. So essentially, if we were to meet this round and put this above, what we're going to see is that the button is now furthest on the left, so it just goes in in order like that. That's chronicle. So that's how to create a basic button. And now you know how to orient. Very basically your buttons, your labels. So in the next next lecture, we're going to be talking about more how to decorate your buttons. So have a go this creating some label with some buttons moving around the screen on when you're ready. I will see you in the next lecture 8. Decorating buttons: It's another we've gone over how to create buttons and how to put them, either on the left, right top of bottom of the window. Let's now take a look at how you can make these buttons look a bit nicer, and you can change how it looks. So by the end of this lecture, you'll be able to add padding to your buttons, and you also be able to change the colors in the foreground and the background of your buttons. So, first of all, let's get started with setting all up in creating a button so we'll do. This is normal. So from Kinter, import everything. And then we want to create our window. We want to make sure that we're telling this window to stay on a loop. So with the route dot mean and this is the bread and butter off your kinter windows and widgets. So we're going to create one button to begin with so but in one equals and then so to create a button. Hopefully you remember or you to do is put the word button, but you don't do it like this. You make sure you have the capital B a start. Okay, so then we tell it where it needs to go. We're just saying, put it in the root for now, because we're not using. We're not creating different sections within a window just yet. Will be doing that in the in the next section. Now we're saying what text wants to be in it so we can say text equals I, uh, a button And you notice when I run this, nothing's going to appear. That's because we haven't yet talked. Told the geometry geometry manager how it needs to be put in there, so we're gonna pack it as usual. But in one Doc pack and we're just leave you in here, we could put this thing with all that last time. Side equals top bottom left, right. We're going to do that for now. So who run this are? Button is now going to appear. And as you can see with the button, the buttons always just fits the size of the text. So at the moment is this length. If I were to put a load more letters afterwards like this, you'll see the button will be rather big. Now say the busting is basically just smartly programmed so that it would just fit the text . So let's say we want to with a button. We want to make the button even bigger. So let's say we have I'm a button. So basically, now we can say Oh, but we won't have some some or space between the text on the borders of the button. So basically weaken waken set two variables so we have X and y. So let's just run this show. So basically X is the horrors on tour length of a button or with anything? Really, This is the X, and the vertical is the why. So, As you can see, the X is longer than the y. Okay, or X has a large number than the way so with padding. What we can say is we want there to be more distance. If we're doing patting X, for example, we're saying we want more distance away from the text in between the text and the edge of the border. Right now, you can see it's very tight. So if I want to increase that padding on the horizontal line, I can say Pat X equals on. I'm going just a really, Shea, I'm gonna put us 200 which is relatively high. Let me just close this one day. One thing I know if any of you have experienced this and still not sure, I'm hoping not. But, you know, before you can run this in Jeeps notebook, you have to close the previous one day. So now ill automatically. Sony we were doing patting of 200. So as you can see now, the button has a lot more space on the X axis. So now if I remove that, you'll see that it goes back to normal. Okay, so it's back to nor button to now let's add padding in the Y direction so it pad apply equals 200. It's just for good practice. Keep keep. This base is minimal. So now you can see we have this really weird tor button, which I think is kind of cool. Actually, they have a pipe party button anyway, so that's Ah, tool button. Right there. So now if we had padding X on pad, why he cools? Let's go for 300. Okay, we're gonna make a gigantic button. So he changed this to I am a gigantic buttered. As you can see, that is a beast. That's the Godzilla oval buttons right there. It's quite quite satisfying. Just a click of big Button. Actually, don't quote me on that, so we've done the padding. Now this is how you can pad out your button, which is which is, which is very useful if you want to change how the buttons look, how you If you want to be bigger than others, it's now let's look at adding colors. So what we can do is you got background color and foreground color. So first of all, let's play with the foreground. Color we have to do is type in F G equals. And then, in quotation works, you put the color you want, so it handles all the basic colors just fine. Blue, red, orange, yellow green. So logistic to those. For now, as you can see, the foreground color is basically the color of the text. So now it's in blue, and now, so F G stands for foreground. Then we had the background color BG. We'll put that as yet. Okay, so now the background is yellow and the text is blue and just for fun Let's, um let's put this on the left side so you put side equals left. So I'm basically putting in all the different things that have been learning now. And when you're decorating like this, you could do the exact same with text with labels. So let's just add a label as well. So what we're going to do is put label one equals and then capital letter. L label which opinion the roots text equals. Hi there. And then we're going to add full grounds, hopefully, according along with me and you and yet you're playing around with colors and the padding or stuffed your however you like it to be. So I'm going to make the text green where the backgrounds of blue just to make things lasting, confusing. So if I were to run this now, of course you wouldn't appear because I packed it yet. So she did the labour one dot pack here and there you go. You can see at the top there. It just says hi there, and we've got this gigantic button here which kind dwarfs this little text it. So what we got over in this sector? We've basically gone over padding in colors. Hopefully, this hasn't been too much for you. I would say at this point now you've picked up a lot of the basic concept. It's re important for you to have a strong foundation so that it's almost second nature to start creating the buttons and labels, giving them patting in colors. Because if you could do this fluently, everything else will come a lot easier. So what? I'd say it is now that we've gone over this just just to recap, unless you have gone over the expanding, which is the horizontal distance between the text on the outer borders of the buttons. So in the horizontal and then the vertical, you've got the Y padding. So, pat why? And that's the distance between the text, the the top of the bottom of the text between the top of the bomb, with the top in the bottom of your button borders. And then we talked about four grounds and background color. Four grounds is basically the color of the text. Background is the background to cut eso. We showed that we could do this for both both buttons and for labels. So why recommend Judy now? is. Just take your time. Maybe create three difference windows where you're creating a number of different labels and buttons and you're playing with the padding and the colors. So try and get flu with creating these. So you got you got intuition. You've got confidence with creating the basic windows, and the rest will come ready. Released, ET. So have I got that? And when you're ready, I'll see you in the next lecture. 9. Command interactive buttons: So by now you should be able to set up your own windows in Kinter, add texts and add buttons and decorate them slightly. So that's all well and good. But I'm sure this point, you're saying like a john. But how to actually make this interactive? It's a bit boring. Someone just opens wind a and they can just see buttons. So now we're gonna add a bit a bit of fun to the windows and start making them interactive . So I'm going to show you how you can put functions into the buttons using the command function. So, as always, let's just start from beginning. I want to say, actually, just before you start that with functions for buttons, there are three different ways you can do it. Commanders. Just one. You can also use number, and there's one other will be going into those over those Maurin a future sections. But for now, we go fix on command because it's a nice, easy one that I think works very well. So it first of all we're gonna do from Kinter import everything on. Hopefully you are coding along with me because that really does help to solidify what you're learning s then root equals t k on the bottom within our main loop. So, as always, you know, this is just simply so. This is just simply how we get started. How this is really the foundations for creating a window, OK, it's not gonna create one button. We're gonna make it very simple. So in order to create button, first, we use the capital B, and then we say where it's gonna go just in the root. For now, text equals quick. Me. Okay, so now we're gonna add command here, basically in command. All you do is you put in a function that you've created somewhere else. So I mean, there is an assumption that you you do understand the foundations of python if you struggle with this. But I do have a course in python on you to me. So do you do check it out if you find this part confusing. Essentially, what you're doing is you're defining a function, so it's gonna dio uh, button for now. Okay, empty parentheses. Okay. And then we want to see what happens. So this is the first thing we're gonna do. Essentially all we want to do is when someone clicks the button. We want to appear either in due to notebook or if you're using a different I. D. You basically want to see an output just saying button has been clicked. Okay, So what we do now is to put the command here. We put the function in our command. We don't have to put parentheses here. We don't have to call it like that or anything. We literally just have to put the name off the function. That's really important, Andan. Other important point is that this could go either above, um, or below is complete up to you in general, I think it's best to put it above. So if I run this now, what's gonna happen is absolutely nothing because we have not packed it. Say is always important to remember these things on, Do you know? So when you when you're running your windows, I'm sure sometimes you're gonna forget to do one of these things on you. Hopefully, you'll start to be creating having this intuition on the checklist in your heads of what things that may be missing. So you have to pack it first. So we're gonna have a button that says Click Me and they're gonna have outputs here in Jupiter notebook saying the button has been clicked. Something quick. This and they gave. Each time it's going to say Button has been clicked, so that's cool. Um, but I think we could do something even cooler because, I mean, it's not that exciting to get it in the output. It could be useful in some ways, but let's create function now where the person actually with the window when they click it , I want something toe actually happen on the screen. So let's do a couple of things. First of all, I'm going to introduce you to dot com, Fick said. Doc on FIG is basically saying, Configure something, make a change to something. So what we could do is we can configure the button. So what we could do is do button one. So basically saying when we're saying convict were saying Change something with the butter . So first of all, let's say we click it that changes to on Ah, I've been clicked like it say, um, we're introducing some artificial intelligence here, Not really. So if we click this, know what's gonna happen. Hopefully is this get changed to Oh, no. I've been clipped. Excellent, Onda, we can do more things so we could We could change the foreground color, for example to read. So now if we click it, it turns it tends to read Andi It changes the text, which is I think I think it's really cool. So these are just some of things also, One thing we can try is instead of just confirming the button here, we could do this wound up back side equals left. So now if we run this when we click it, it moves over to the site, which is quite cool on bond. We could take this even further. We could create a random list for their list of off top bottom left and right, And then you choose a random one. There's so many cool things you can do now. So this is the basics off. Adding functions are adding interactivity to your buttons. So what we got over in this lecture? Well, quite a lot. So, first of all, what we discussed is that with your buttons, you can add something called commands in the princes here, and we have to put here is the name of a function you have created outside of this. So we created a function called Button and all we had to put with the name of the function . We did not have to add a set of empty parentheses here. Then within this button, what we did first of all is we just had we just put prints and this went straight into our output operative. Whether so, we click this as you can see, it's just out putting like that. That's the first thing we did next. We we were introduced to come pick where we can change most things about our button so we can change the text, for example. We can change. We could change what could have changed the padding. We could change the color, all that sort of thing. So if I click this now, what changed too high? No. Oh, of course. So So So he's But text equals high. They're gonna spit more happy. Okay, so we we've reformed with dot com fig, you could make changes to the button itself on. We even showed that we could pack it differently by just putting the Pac PAC command here instead. So these are some of the basic commands. I think at this point you really have a chance to be creative and start to think about right. How could this be cool? So, for example, one thing you could try, like I was talking about what would be create to create a list of top bottom left, right, randomly select. Have one randomly selected using the random library from python on. Then each time you click it, you could. It could be that it appears in a random place, or anything like that could have random patting each time. Who knows? But there so many things you could do. So at this point, you really have a chance to use everything of lend to start to get bit creative. So have a go a couple of times, creating your own your own function, join commands, and when you're feeling confident with that, I'll see you in the next lecture 10. Frame: Okay, so I've been through an exciting range of different widgets. Weaken news within windows. So now let's start to talk about as well as geometry managers, like pack and Grid, How we can use frames to help toe group and organize our widgets in the same wind. A. So, in order to do this, we're gonna be using something called frames. Frames are essentially invisible rectangles that say, in which you can then put widgets into that. So you're basically splitting your window into separate parts on This is, of course, useful. Once, once you get into big programs, it's really useful to separate everything into different small widgets. Small frames. So let's have a good creating a couple ourselves. So I hope you're coding coding along with me. So from Kinter import everything. So an important point soon asked me about Kinter. Here they were you. They were looking at someone else's code and trying to run it on their having problems importing Kinter. So in pointing to, they had Kinter with a capital T. So now we just have, ah, lower case t. So that's often the problem. So just make sure your kinter is a lower case T if you're coding along with me in Python three. So first what we're gonna import, Kinter. Then we are going to set up our roots on the bottom and then at the bottom here, we're going to put out of Do Root stock made loop. So now let's set some stuff up. First of all, let's create our first frame. We're gonna quote frame one. And so we've done labels so far, and we've done buttons. So as you can remember with labels and buttons how he said it up, since she is the same thing of frames, capital F frame and we have to do is say, put it, make sure it's in the root. Okay, so then we can have another frame. So go split our window into two frames. Great print. Okay, so now let's put some stuff into these frames. Let's put a couple of buttons and a couple of so the bits of text. So first of all, we're going to create a label. One I know. They're very boring. Boring variables. Feel free to to play around with those Labour one equals label. And then, instead of putting this in roots, we're gonna put this in frame one. Okay. On text equals, uh, in frame one. And then we have a button as well in this frame sequence button. So it because, you know, with me here, we're gonna put this along in frame one. A swell. So being 11 label, basically one button in both of the frames. So Texaco's but in a wipe it princes here, so yeah, in each each frame, we're gonna have one label on one button say I'm frame one to like it. So let's just cut and paste this because I am lazy. Were you able to hear? But in two, putting these in the two different Fred hopes we don't have a friend three just yet. Time in frame to to did you to for him to to just make sure you couldn't tell the difference there. So we still need to pack all of this. So only level one dark pack. Little Teoh back table three Morning button one dot back button to dock pack. Okay, so I mean, so I was thinking about just fast forwarding these slow bits, but seeing as I want to be capable of creating, along with me. If for any reason you're not the highly recommend you do. You know what I'm doing? These sort of things. Feel free to just skip through by 10 seconds or something. That way, it works for everyone. People who life coding with me can go through it with my face and those who want to just get through it conduct a bit quicker. So I've run it and nothing has appeared here, which is interesting. So let's take a look at why. Okay, so we also have to remember to pack the frames. Say frame one dot pack. Most important, important to make frames always need to impact, just like everything else. And there were gay. Oh, dear God, that does not look like a nice program. Oh, well, so, as you can see, we've got one rectangle here on one rectangle here. They've been separated into two different frames. So let's now play around with this. So let's put their second frame right of the bomb. So we're gonna put side equals as we went over in a previous nature bottom. And now they'll be one of the top on one of the bottoms. They'll be fully separated like this. So now we kids, for example, in a pit neighbor, one side equals left. You can play around with this, however you want S O B. But this'll one, uh, sides those rights. You can see things a scientist to mix up a little bit. So essentially what I want you to take away from this lecture is that frames are used. Teoh group organize and separate widgets into different rectangles within your screen. So the moment I mean, we're running quite a city program here that doesn't actually have any applications in the real world. So that's where the real world applications comes in, and the practical exercises that will be going through to make sure you understanding why these things that useful. But in this lecture, I just wanted to give you the foundations of how it all works, that you understand how to implement it, and then we can move on to how this confused in the real world. So what we've done here is we've created two frames on goal of habit is right the word frame with a capital F, we put it in our route. And then, instead of putting our labels and buttons in route like we've done before. We decided to put them in. One of those two frames were then made sure to pack the labels buttons on the frames, and we saw that when we we can actually orientate everything within these frames by just in the PAC, putting side equals bottom side equals top left or right or whatever. So that's everything to do with basic the basics of using the frames. So have a go now and playing around with orientate ing. Two different two or three different frames on the labels and buttons within them. Once you've done that, you feel ready. I'll see you in the next lecture. 11. L9 Getting user input: Okay, Let's look at how we can make our programs, even Mawr Interactive with our users now. So we're now going to look at how we can get input from our users using entry on using dot gets so essentially, if used, the python, you know, input for you. So you can just put a equals inputs. What's your name? And then you print a for example. Then you will see that first of all, it gives you this nice little field here where I can say my name is John. If I put this in your printed back So that's how it works in Python. Let's look at how it works with Kinter. First of all, let's do the standard stuff from Kinter. Import everything. Fruit equals Okay, bricked up. Okay, so first of all, let's put in the entry. So instead of writing input, we're going to write something court entry. I'm just gonna call it a variable E one. Okay, I've got per entry. Say this is going to basically create a blank field in which the user can type in text. So we're calling your entry. We have to do to say where we want it to be, So we're gonna put it in the roots on. So now we have this stored in a variable. So if anyone types anything in this can be stored in this variable, Well, that this is actually sorry the name of the field. In order to get the the actual text, we need to do something something a bit more. So we look at that in a second. Next less creative button. But someone equals Sami. Just use the button with a capital B. Gonna put it in the root text equals. So let's say we want someone to put in their name. So we're gonna put this as submit, and then we're gonna have to create some kind of function here. I'm also gonna put a label. Uh, they were one equal ist label, and then we're gonna put in the root and then just say text equals What's your name? Okay, so we're gonna have the label saying what's your name and then a blank field where the user can write in their name, whatever in something in they can then click on the submit button and something's gonna happen toe. So let's create that something So for commands. Hopefully, you know, you define the function. So we just caught their food or death name. Submit this quote up. Okay. And then all we have to do is put, so we're gonna print out. Ah, your name is and then we're going to use this place older and don't formats from Python. So basically, just in case you don't know what this is being curly brackets into the quotation marks and then foot dot format, and I'm gonna say what to put into those curly brackets. This is just a place holder. So this these two brackets will be replaced by wiping here, which is going to be the one dot get, and that's basically saying put in whatever the user has written into the one. So it's just getting whatever is in e one. Okay, so now you put the command here, which has named, submits. So now what? I run this sense of what we've done. We've created a start from here. We've created a basic label just to say what's your name? And then we've created this empty field that is essentially just be below the label with quarter 81 they have created button were saying Whenever someone clicks the button, we're gonna print off and we're gonna get whatever has been written anyone on we're gonna prints off just like this. Okay, so let's run it. I get so the problem is here. I have made the mistake of not backing everything. So Labour One Doc pack you one dot pack but one doctor back. So if we run this now, they advocate what's your name? So it submits So Dr Powerful Face. Don't tell him I'm using his name. If I click, submit now you will see here on the outputs. Your name is Dr Perper face. So it is making things just a little bit more interactive. Now, Andi, you're able to get input from the user using this form, so I haven't played around with it. Make sure you create a few programs now where you can get information from the user on. Then. Later on, we can look at what you could do with this kind stuff. So have a go on when you're ready. I'll see you in the next lecture. 12. L10 adding a title: So for this section, I got fewer questions from students asking how they can add titles to the windows. So we're gonna have a beautifully short lecture here, just showing you how it can very simply be done. So essentially, we're going to do what we always do. We're going from contar import or on. Then we're gonna set up everything as usual. So root equals T k. And then we're going to have the bird root dot main leap. So all we have to do is have add one might of Kate. We put the roots dots title in parentheses. We put exactly what we want. So let's put the best window ever. Okay, so now if we run this, you'll see that you have a beautiful title saying Best window ever so you can put whatever you want in your text. Here. All you have to do is whatever you have defined this as for your window. So it may be rude, so you might decide to put it is Maine or wind A. Or whatever we have to do is, but that's variable dot title and in print sees you put the text, and that's it. That's all you have to dio add in the text eso in the lecture. After this, I'll be showing you how you can also add a nice little icon into that one day. So have a go yourself and then I'll see you in the next lecture. 13. L11 adding an icon: So now that you know how to add a title to your wind A. I just want to show you something quite fun that you can do that you can play around with. That I think, is quite cool. And that's adding your own icon, drawing in on adding it to your windows. So let's have a bit of fun. The link is here, so it is www dot r w slash designer dot com slash online Underscore icon underscore maker dot PHP Okay, so visit our website and you'll see this. So this is just a coup online thing you can do for free where you can create your very own icon. You can draw yourself on, make it look however you want. I'm just gonna do a nice money face, but you can do whatever you please say. Let's give him a purple ahead when we shall call him Dr Purple Head. They Doctor Purple head is so essentially you can draw it however you want to play around with. This is just a bit of fun. Really, Andi and then you down the daikon. So I now have fabric on dot c A and so what? I do now is I go back to my program and let's start creating this out. So essentially, it needs to be a dot i c o phile toe work on Windows or Mac for Linux systems dot xbm sometimes work. I mange to get it working once when I was preparing this lecture, but it's still very buggy. Phonetic systems. I'm afraid so. If you only been to or something that I'm really sorry. Kinter is. It's still a bit buggy with with adding icons and sometimes on the Mac. But give a gay say from Kinter imports absolutely everything. And then we do roots, not rot. Root equals T k the root dot main loop. Princes. Okay, so let's start by. Create title root dot title Dr. Purple Faces, uh, wonderful hospital capitals full. I am poor. Okay. And then, in order to add our icon, we knew root dot by con bits map a bit much, and then in parentheses, we just put the path. So, for example, I'm just going to make sure that it in the right directory. Okay, so I took the file and I basically moved it from my downloads folder. I moved it into the correct folder from where my dupes notebook is running Onda se. Why do is the initial chains name is gonna be fabric on dots. I see a on this is what we have to do. You see the root dot icon bit map and then put in the name off the file If it's in a difference folder than May, maybe need to put the path before it, but it makes a lot easier. And it's good practice to make sure that you're putting everything in the same place so ever. You're this notebook is being safety. You want to save your icon in the same place. So if I run this No, just accept. Look, a that doctor purple faces. Wonderful, important. And he got Dr Purple Face up there. If I were if I were on this program and was asked me to buy something from Dr Purple Face, I would be sold in the second. That is, that is just beautiful. So, um, you know, I'd love to hear what you guys are creating as well. So if you feel free to leave a comment on the icons that you drew, I'd love to hear about them. Eso essential have gone over in this nature. We have really gone over how to create a title. You just take root dot title and put text into quite traditions. And then we've done root dot icon bit map for Windows. It's an dot rco file works pretty much every time with Max. It works most of the time with Linux systems. You want to get a dog xbm file on bond. It's still a bit buggy with clinic systems anyway. But once you've got your daughter, I see a file. And using this website is a good way to get it. If you want design your own, then you put route that I could bit map and put in the name of your file. Make sure the files in the right directory and that, ladies and gentlemen, is how you put a Nikon into the wind day so you can play around with this now on and you make your programs like even more professional. So I have found this useful on when you ready? I'll see you in the next lecture 14. L12 adding images: Now we're going to go over how you can add images into your windows, which is nice and fun. So unfortunately, with Kinter this part, we add photo images. It's still a bit buggy on, and it's a bit strange working with different file types. But why found from my research? Is that the ones that work the best and the most likely to work for you A PGM follows ppm files and give files. So I'm gonna be using GIF files. Essentially, they will just take it would be a single image taken from a gift. But I thought this would be a nice fun thing to do to get you into the habit of or to get you give you a bit more intuition how you load images into Kinter. So if it's slightly buggy, I'm gonna cells of effort cues for this lecture. So if you have any bugs, do you let me know and we can try and solve these together? If no, don't worry about it. Controls quite buggy. And I think they'll be improving this over time. But here have just set one up for loading in a dog. So what I've done is on Important Kinter Setting up my window route Equus TK On now I'm creating variable photo image and the file is dog dot gif. Now the important thing is that in due tonight book if you running from here, make sure that from wherever you're running your dupes notebook that you have this far in the same place. If it's not, then provide the full path for how it could be found. And then essentially, I'm crit. So you are saying earlier with labels it could be more than just text. So this time I'm putting in an image something in the exact same thing w equals label on picking the Roots says that being text equals on the amping image equals R photo, which is hip and then packing in. So if I run this, you will see an image of a name to get a case on you to import this. Okay, we will see an image off a noble dog on their we gay this little dues taking some exercise . So that's it basically. So if you want toe, try it with your own images, give it a try. I recommend using GIF files J pegs and PNG's unfortunately seemed to be quite buggy at the moments on and wouldn't be recognized as images. So try it with these four types. Onda. We will go over this in a future lecture and house you how you can add this into your windows. So have a go yourself, see if it works, and then I'll see you in the next nature. 15. L13 editing default size of the window: recently in this part of the section we've gone over how to add on icon, a title to the wind? A. But sometimes you know when when we first run that window. It's so small when it gets kind of annoying. So especially if you want other people to be trying this. You wanted to look nice and professional when the window starts up, so we're just going to be looking very quickly how you can change the default size of the window when it 1st 1st appears. So we'll go through the basics of first. So from Kinter Import. And I really hope you're studying this along with me. So routes equals t k roots dot mean. So all we have to do is use something called the geometry. So we have to do is type in roots just like we do for the icon, um, for the title root dot G on a tree and then parentheses in quotation marks. We condemn, put the size nor have to do is let's give some really weird one to start with actual escape from so getting 300 in length and width, and then we just do a lower case X that saying 300 by 500 say three. So it's going to be shorter than it is longer, so it's gonna be taller than it is wide say, I think it actually looked better to be slightly wider than it is to. So if we run this now, you see we have a much nicer looking one day. So without that, let's just have a look. That's Ah, let's just call it this out. Oops, we would just comment this out here. As you can see, it doesn't look as nice, so we can then change it using dot geometry and elects like that. I just looks a bit mawr professional, bit nicer. So let's go for a really weird one. Let's go for 50 by 700 and I don't know why I would want this to ever appear on your screen . But you might do so. You can play around with it. So let's do roots titles. I think every time we're doing this, we are making Doctor Purple Faces Wonderful Emporium, just that little bit better on me. So it in the root dot title to add the title into the wind, a Yemeni roots dot icon bit and we're adding that fabric on dot c A. Because it's still there. And then we change the route geometry on a good. So why don't like about this is that you can't see the title straight away, So why don't we just complete change this and we'll have 700 with and have the 50 in heights? That's much better than it's a doctor. Dr. Perper faces Wonderful, wonderful import. Um, and it's a weird start up one day. So these are three things just to keep in mind for the real basics of when, when you want your windows to look nice and professional, you've got the title dot, dot icon, bit map and dot geometry. So you ever play with those And when you're ready, I'll see you in the next picture. 16. L16 fill: great. So congratulations on making it to the next section. I'm sure you've learned a lot so far, and you're able to already create some cool, basic programs. So moving into more of the intermediate concepts now we're going to be looking about a lot more into the geometry managers. How we can ADM or interactivity to your programs on much, much more. So it's weird stuff with something quite light and easy, they'll just start to get rolling. So right now we got to about Phil, so you might have noticed that some of the times when you put in text on if you had in background colors, it's It's limited to the text size itself using Phil, which is one of the things parameters you can put into your doc pack. This is something that makes sure that it fills out the whole line, so it's gonna go to that really quickly. So get imports, as always, winter and then roots equals. Okay, en route. Stop, main loop. Okay, so what we're doing is will create a label first just called labor one. He whose label then route where we're going to put it on and text equals which could well create three different ones. Three different labels worm or create have them is blue, green and red. So hopefully you remember how we were going to do the background colors. Essentially. Just put foreground for F G, for background is just be G equals blue. We don't have up case for this BD equals green and then BG finally equals red. Okay, so when we run this first week to pack all of these So label one talk back. Copy that. Change this toe able to label three run this now able to is not defined. Oops, my mistake. There we go. So as you can see, this has got a bit of strange. So I got reds. Let's see what's going on her off. Some reason it's bridged off twice in a strange way anyway. So anyway, here we have our little program. As you can see, it's only the colors only go around the text itself. So we now want it to go away from left to right. So doesn't look so lame. So you something called Phil and we put this in the back. So we have to say is Phil equals and then a capital X. So we're just saying Philip Philip, fully up in the X excess, which means horizontally, just completely fill it. So let's run this again, as you can see, looks a lot nicer now, and it's pretty expended. So that's just one simple concept to get warmed up, moving into the intermediate concepts. So you have a go this yourself. Fitting out on next will be looking it grit, which is a new way of formatting, a LeVar widgets within a window. So when you read, er, see you in the next lecture. 17. L18 using grid: so, up until now, we've been using just the pack method for putting things into our windows. So I've been using dot pack. Now I want to show you dot grid, which could be used to basically put your widgets inm or define places. You're being more specific now. I'm not just saying they're packed into the left back into the right. We're actually going to define right exactly where in a window it should go. So within any given window you have rows and columns. So Rose are basically rose like this in the horizontal. So goes rose. Zero row, one row to row, three etcetera downwards. Like this of the columns, it goes rose zero sign from left column zero column, one column t I get a say in the horizontal. You describe it as rose. No. So in the horizontal, describe it as columns, starting from the left zero and for Rose, it's describing in vertical going downwards, starting from zero at the top. OK, so we can decide exactly where things going a window and be a lot more specific. I say, Let's have a look of that now. What we're gonna do is we're going to create Ah, seven entry for for user inputs for their email and their password. Okay, so we've already gone over how to you put in labels and how to put in entries. So now we can do that. And using dot grid, we can make it look really nice. Okay, So, essentially, let's start off with creating our labels. So I'm going to start having these in a lot of them already, so that we'd have to go through every time. So Labour one equals capital l label. I'm gonna put in roots as usual text is going to be, Ah, email. Colon. So looks very nice and professional were create a second label here or so just type in capital l label roots text equals password. And if you are at a computer and you are you able to access dupes notebook, I highly recommend that you code along with me even for these basic things. It's get about getting into the habit of be able to do this so it becomes second nature anyway, So we've got our 1st 2 labels. Now let's create entries. Let's put this cool. This email entry equals Let me put capitally entry putting in the roots. And then we That's what we have to do for this one. And then we can have our passwords entry here route. Let's give these labour with something a bit nicer so we can just put email passwords a little bit nicer. Okay, so now what we could do as usual, we could do email dot pack. We call this email label, so I don't like just going the email password. It's not pretty readable. Okay, so email underscore label Don't pack passwords months ago. Label pack female entry don't pack. So this is what happened. You see, in seconds. If we just use pack would get this on. It doesn't exactly look that nice, does it? I mean, we could do a few things toe, make it better like we could. For example, do the email entry pack here. So then at least you know it's in order because we talked about before. The It depends in what order you pack them. That's how they're appear. So the top one will appear at the top here, etcetera. So at least this way looks a bit better. Hi. At me dot com. Me, me, me So this is my actual email and password. So please state steal it. And anyway, so we have our labels that we have our entries. So now let's look at what we could do to make the signet nicer. That's try using dot grid instead of dot pack here. So, with with dot grid, as I was discussing area, you can define which road and which great it goes into. So if I West Teoh to say for one to go into the top left, then that would be rose zero and columns eerie if I wanted it to go one line down. But stay on the left. That would be rose zero columns, area and very one. So essentially what we want is our email label. We want that to be top left. So what we do is we define our road. We put this is ro equals zero. Call him equals zero. So we're saying basically, put that in the top left. So then, for the entry, we want to put that one to the right of the label, right? So we want the road to stay the same. We want to stay at the top, right, equals zero column equal was one that's gonna be next. And then after that, we want the password label and the entry to be one below the email label uneven email entry So we can put RO equals once that's gonna be one row below and then call him equals zero hoops. And then here we can also put we want the right to be one we want it to be one to the right column equals one. So let's run this. As you can see now we have a lovely email and password that's been formatted very nicely using grid. So what we have here is the email label is stopped left, so that means the row is zero on the column. Missouri. So let's just recap with rows and columns. Rose, go downwards. So this top one here is row zero. This is red one underneath. That would be right to row three, etcetera. All of these will be row some rogue ex row anything. Sorry. Column zero. So this is row zero columns. Oh, Row one Collins. Eerie row Two columns, airy, etcetera. So this way. Going horizontally. Left to right. A columns. We have column zero here than the entries. COLUMN one. THE next Willie Collum T but these will be column zero column, one column tea It'll be rose zero below its they'll be. COLUMN zero row zero column one row one SO COLUMN zero ROAD one column, one row one column to row one, etcetera. So we have this done very nicely here. So that is essentially how you can use grid to place different widgets within your window using rows and columns. So this is helpful. Why I recommend you do is have a look at this yourself and try and put widgets in different places using the rose on the columns. When you're feeling comfortable with that, move on to the next lecture and I will see you there. 18. L19 aligning: so don't about you. But sometimes I'm testicular for fine detail on. And when we run this what we were doing in the previous lecture where were created on email and passwords inputs here that was that was arranged nicely using grid with rows, rows and columns. There's one thing that was still niggling at me, and it leads nicely into this lecture, which is all on aligning. So usually when you go on an online form this text here, for example, email it would be on the right hand side would be a lot closer to the actual form. So we want to look actually aligning things now. So what we look at is something called sticky. So when we're putting into the grid here that we just close this first we were a great help . We can add something called sticky and we can give it four parameters and E s w So have you seen that anywhere before? Maybe, maybe not. Stands for north, East west on itself. So the way that I remember it is I always remember never eat shredded wheat. So I mean, it's the same as saying up, down, left and right for some reason they've decided to put a north east South west. Okay, So never eat shredded wheat. That's why, remember, anyway, And I go around the opposite way Two o'clock. So for this one, what I was saying, if I just, um it's just coming out for a second. So as I say, I want this one, which is gonna be label one. I want that to be aligned to the right side of this column. So what we're going to do is we're gonna put in this sticky, and we're gonna put it to the right hand side so it would be to the West, So I put w as you can see. What? I run it now. Never. Oh, sorry. I've got it the wrong way around. Eso this is west on the left side. So it goes around the way of a clock. That's what is so my mistake. I still need to have some coffee so you can have on this site. But if we don't properly know so on the right hand side, it is E apologies for the confusion. As you can see, it lines a lot better now. Okay, so that's how we airline. Things in the north, east, south or west going round like a clock. Never eat shredded wheat. Okay, so the next thing we want to do I want to show you a bit about padding. So we've already done some some small bits and planning. We're going to use the entries for this one. So you have two types of penny you have inside padding, and you have outside planning. So if we run this, what I'm talking about is the inside planning would be patting out this this label itself, right? The entry field itself. But outside padding would be saying that there should be patting outside of this outside of this field, but still in the same column. Let me show you example. Um Hey, so to do inside panics, that would be just to increase the actual size of the field. You per I, Pat. Okay. And then if you want to do it, x a wiser exes for the horizontal. Why is for the vertical batting we put ipad equals? Let's give something large for now. Just to show you what it does is close this. So when I run it, as you can see for the entry entry One grid, which is the email we have padding inside of 300. Now, if I change this to just normal Patty, this will be the outside panning. You'll see the column will still be this large width, but the field will still be short. Is this difference between inside patting outside putting? So we could put if we put padded pad X for this as well has five hundreds, then the whole thing will be 500 because they're in the same court. So that's inside padding and outside planning. Let's just have fun here. This is when you do in the Y direction. So let's do a little bit less so it's You can actually see what's going on as you can see this padding in the Y direction now and we've got planning in the X direction because we're doing that below. So if we just have the padding in the Y direction, so we're gonna have one where the padding is large on the outside. More merits large on the inside. So that was very strange. I know, but as you can see, we've created created the padding outside here on the padding inside here. Okay, So what have we got over in this lecture? First of all, we're talking about sticky. So essentially, this is a lining things within a widget. So we're aligning our text within the label so that it goes north, east, south, west. We're relying to the right by saying sticky capital Letter E. If you want to do it to the left, we would put capital W for West. They were moved to the left. We then talked about padding. So inside padding and outside patting which you can do both in the X or the horizontal direction or why which is the vertical direction inside padding for entry, for example would basically make the field larger outside batting would make That would be more space, but the field to be the exact same heights. So have a play with this yourself. When you ready? I will see you in the next lecture. 19. L20 spanning columns: now. So far, I've gone over using doctorate. How you can decide where to put widgets Much mawr Define Italy than how you would when you using Doc Pack, for example. But what if you want something Teoh span over just more than one column. Well, let's look at that with a useful example of when, for example, you're logging onto a page and you want to check a little button where underneath that says you keep me logged in. So, for example, you want the check box to be in the column and then keep me logged in because it's a bit of a longer sentence you want it to be underneath. But you wanted to span between two columns. That's one example. So we're gonna look at that time. So I'm going introduce you how to create a tick button. And I'm also going to show you how you can span things like a label across across columns. So we're all set up here on. The first thing we're gonna do is to create a check button so we got put check equals check button root. Get Sophie run If we just do checked out pack, for example, As you can see, we have a nice little check, but so they call it check, I guess because I'm English. I call it Dick. Who knows? But, yeah, it's called check button with a capital C. So now let's add, uh, also, did you Did you dio said label to say, Keep me logged in So labour equals capital. L'd able keep me locked and Rube Kimmy lubed and keep me logged in. Okay, so now what we can do is put check dot grids and let's just put them. First of all, let's give this the road. So you want this to be top left, so we're gonna do you row zero column, see? Right a number going to put labour one dot grid. And we want to put this just below it. So we want to pet throw one, but because right below it will have columns there. Okay, so this is what it looks like when we're not spending the columns. Let's see what's happened to him. Of course, it will use two years to add the roots. Text equals, that's better. So let's take a look it up. Here we are. So what's happened now? is, they're both in the same column. So because this is quite long, sentence is created. Quite a long column on this is kind of in the middle of all of that. But what we want actually is to this this to be over on the left side, and we want this to span two columns. So we have to do. Here is where we have a label. We just add another parameter called column span, and then we can say how many columns who won't spend so we can put to, for example, So if we run this now, you will see that this is nicely on the left, and this is actually covering two different columns. So essentially, that's all there is to column spanning. You can also do the exact same thing, but using the word roast ban here instead. So that's it for column spans. In the next section, we're going to be going over how you can bind toe bind functions to events that are going on from your user, interacting with your one day, so have a go with practice columns. Been yourself and creating a check button on when you're ready. I'll see you in the next picture 20. L21 binding functions: Okay, so we're not gonna move on some really fun stuff, and that's binding functions. So, up until now, what we've been using his command for doing Kaing out functions when someone clicks a certain button bind is an even more powerful tool than that. So it can basically respond to any events that's happening from the from the user's perspective. So if, for example, you they click somewhere or they move somewhere, they type in something on their keys. They do a left or right click. There are so many different things like that. So the difference between binding command commanders basically only used for when someone left clicks on a button on you can add a function to that S O binds does this exact same thing. But it can be used in so many different widgets. It could be used in in roots or in a frame or in a button or the field. All these different things, eh? So it's a much more powerful and versatile tool to use. So let's have a look. And let's use the first example of doing the exact same thing and doing left click on a button just to make the first example. Quite easy and a and easy to understand. So we're going to create a button first called Button of One equals button. So it's exact same thing as we always do. Putting in the root Tex equals Click me. I'm not gonna put a command. Say that's gonna be one different. Eso won. We're do is I'm gonna create a function. So I'm going to find my function Button clicked 50 Prince sees, okay. And so then what I'm gonna do is just have something like other name Prince. Great click, buddy. You're the best clicker. Here's a medal, Kate. So then the user will be very, very happy when they click. That looks a bit like wow on the best click forever. So I'm not gonna put a command here. I'm gonna do is below the button. I'm going put button one don't bind. And with this, I'm essentially going to do put in quotation marks and then these nice things. So in here, I'm going to put button Dash one. So that's basically saying like I say, it's ah, left click. And then what we're gonna do is we're gonna say we're binding this event So if the user doesn't left, click on bottom one, then we want to do the function button button underscore Clicked vessel. There is tip. But now, of course, we need Teoh a pack it in. So it's gonna pack it because it's a simple, easy way to do it. Se No, When you run this, if I click, this is then gonna have so basically goes but not bind. If I do a left click on the bus and one, then our way to the function busing clicked So we'll click it. Okay, let's have a look. Okay, so one important thing when you're doing bind is in this these princes there No, no empty. You put something like I always write in event So it's no empty. So again. So this time when you click great quick, buddy, the best quicker ever. Here's a middle. I mean, that is just doing my self esteem wonders. So I'm very happy. I hope you, Artie. So that's what happens when we have a button. Now let's try something else. I was saying earlier that you can also bind something to the root if you so please andan other event you could do is if you if the user types any, any keys whilst there on that frame. So there's go for that we can do this. Creates the function first. So define. Keep rest. So this is a function we can put the exact same thing. Just event, um, and them against prints out. Um, I see you typing. Okay, so we're gonna put roots dot bind. And then we're going to the brackets. Quotation marks, and then these in a week when I was just called less than or more than keys. And then you just type in capital letters. Capital first letter key. Okay. And then we're saying so if in the roots. So in the basically in the whole window, if someone uses a key So taps writes anything with a keyboard, then Dukie the the function or cool the function key pressed. Okay, so now let's give this one a try. That's close our old window first. Okay, so when we click it, we get you the best clicker. But if I then type anything, I'm just tapping on my keys. Here. I see you typing. Really cool her. So now we're looking at when any events happen now we can start. Have you two Muppets were really making this a bit more interactive now, which, in my opinion, makes everything you 10 times more exciting because now it's re signed to come something you can show off to people on. Do you can have uses interact with it more and your programs against Marta. So they just go over what we've talked about in this lecture, essentially of shiny. What's bind is essentially a binding a function to a certain event, but on one here. So the syntax is that you do. Whichever widget dot binds, then in parentheses or brackets you put in quotations and the more than in less than signs you put in the event. And in the next lecture I'll be showing you a range of different events, and then with a calmer than after that, you put in the function that should be called and that's it. So you can do that on buttons. You can do that on the routes you could get on different frames, you know, the possibilities are endless, really, And so also, one other thing to keep in mind is when you're writing at your function you now need to. But just something in here I call event because readable. But you could put whatever. So we've gone over basically how to create your first bindings to widgets. Eso Why recommend is you have a player. They see what works, What doesn't on? Do you re test the limits of bind? Eso with command you can do is really have it on left click of a button. But this provides you with so much more versatility. So have a play around with that. I really recommend that you create at least two or three pro little programs by yourself. You know, that might take you a few minutes. And then once you've done that and you feel a bit more confident with it, I will see in the next lecture. 21. L22 common event labels: the case. And now that we've gone over the process of binding functions toe widgets, you know, Windows, let's have a bit of fun. I'm gonna show you a few different events that we can put in to bind to widgets. So for most of these that I'm just brought up here. Essentially, they can be done on our route. So I mean, they could be done on Aled different widgets. But just to keep things simple, let's start on the route, or almost all of it on the route, sort of self, a function called food on. Essentially, we're going to test out each of these events by putting, working just fine, so highly, highly recommend that you do the coding along with me. So I get up your Jupiter notebook or your i d type in these basic things to start with on Let's get started. So we're talking about before how we combined functions to events we have to do is whichever widget we want to bind this function to In the event we talked that in first, then dot bind simpler that and then in the parentheses, first, where we wanted put these crayfish marks and Then I found online these in court carrots, but I prefer to call them water or less than science subject. Keep doing that. So what did we dio? So we did last time. We did key, for example. So it's just test on this one first. So any time a user taps any of the keys on the keyboard whilst there in the root or the window, then do this figure event, Remember, we don't, but we need to call the function by paying brackets here. We could just leave it this. So let's test this out first of all, So I'm gonna run this now in my window. I'm gonna obviously click on it first. Because if it was, it's not selected. Then it would obviously be in focus, some tapping keys here and you can see it saying, working just fine. Really? Okay, that's excellent. So let's try on some of these new on showy. Okay, so the first fund one will go look at his enter, so we'll replace key with Enter Onda. Essentially, what this is gonna do is every time my mouse enters the window, it's gonna come up with working just fine. Say yep, works. See that as I put my customer in down there, down here in the input output. Sorry. You can see that. Says working. Just find each time I did it. Excellent. I connected. Let's try that again with leave. It's closed, the old one. Okay, so nothing happens when I put the cursor in the window. But as soon as it leaves the one day well, I can just find but but Excellent. Okay. So I hope you having fun with this as much as I am. Okay. Next. Basically, you can have type in a for example, without these more than a lesson. Science. So essentially, if if the user ever so for run, this ever taps. So make sure you stay to the window. I'm tapping keys. Absolutely. Nothing's happening. Assumes I tapped the letter A Now it says where I can just find so I can change this, Teoh. Why now If I type? Why, you just like the window first? Yep. Working just fine. And obviously you can't see my keyboard. So you're gonna have to do this along with me in order to really make sure that I'm telling the truth. Okay, so now Let's go for, um, we've done that. Let's go for return, OK? Say, basically, this is if I press the return button and as you can self put here, includes so many different ones. So if I press the backspace button, the tab we have to do is put in any of these caps lock print, F one, F two F three or four number lock all these things. They will work just fine. So we're going to focus on the return one. So I run this slight, the window tapping these different keys back space shift. Nothing can get up. Enter navigate, working just fine. Excellent. OK, let's go into the next one, which is double button one. So this basically means if I double click on make sure that all the words you use are up Case up here. That's a mistake. So I'm just gonna change that. Now change this. So that will up case shift up. So double bottom one. If it's just button one, that means But, um, yeah, you've left correct once. This is only going to work. If I double click with my left button by left click. So I'm clicking once Nothing's happening now? I'm good. Double click every day where I could just find That's 70. So let's look at next one. Okay, So this these ones are gonna be really useful if you want to create games using using Kinter. So if I run this now inside here, I can tap the up button toughing up, and it works just fine. OK? So you could do it with up, down, left and right. Finally, let's do shift up. Just because we can really do a lot of different things with these events on, you know, the ones are resting here and just just a few of many. So, you know, you can really say if I said this and just to shift up every day, I can just find exit. And there are so many different events that you can use. This is just a short sample for you to have a nice practice on. Do you just have some fun with it? Basically. So keep in mind that this is very basic what we're doing here. You combine it to any widgets? Not just the root, for example, You could, but the please on buttons. You could put them on forms. You can put them on texting for them. Put them on images you can if you've got things moving around. Like, for example, you're creating a game. Then you know you can You can do all these different things, so you can be incredibly creative. And I find that really, really exciting. One of the reasons I love Kinter so much so you can do it. Any widgets that you like. There are a range of different events you can have. Andi. Yeah, The functions you could do. The possibilities are absolutely endless. Just go bought boring things, saying, working just fine. You could retake this to another level once you start getting creative. So why I recommend that you do now is go through this list of how we got here. Four, def, eight different events and give them a troy get used to binding events, toe widgets and functions on. Have a play with them, so you feel confident. And if you have any ideas on cool programs that you could make, give it a try and let me know what What you're coming up with a really love to know how you getting creative with this stuff. So, as I say have ago that yourself when you're feeling ready, I'll see you in the next sector. 22. L23 creating a click counter: Okay, so now that we've gone over how to make your buttons interactive using command, what we're gonna do now is make a bit more practical and put it into a real life project. So together, what we're going to do here is we're going to create a button where whenever you click it, essentially, it's on the same window. You can see the number of clicks they have done so previously. In the last lecture of what we were looking at was, you know, when you click a button, Okay, you can get some outputs in your due to notebook or your I d. Okay, that's all well and good. But now we want to start seeing some kind of output on the window itself so that the user, when they're when they're playing around with this year, they would actually see something themselves on the actual window. So, like I said, we're going to create one button and above it, we're gonna have a counter to show you how many times the button has been clicked. Actually gonna make it below the button. But that doesn t matter. So we're gonna put button once we're gonna create a button first in the usual way. Said button in parentheses. First we put where we're gonna put the button in the root text equals always like being click me because, I mean, that's just what buns one in life. So next week we're gonna have a command. We haven't defined it yet, so we just leave it blank so below. We want to have our label. So we're gonna, uh, counter record, but encounter. So for a bus encounter, we're just gonna put equals label roots. And there are text isn't actually, text is gonna be a variable, and we're going to create a variable that's a counter. So the top here, we're going to find this counter equals eerie because obviously, before you count anything, I mean, if if you've done by thing before, you're very familiar with doing this kind of thing. So essentially we bring in whatever number discounter is OK, but now what we do is two things. First of all, we want to say in the command. Okay, so whenever you whenever the user clicks on the button, we want toe adds another number plus one onto the counter, and we also I want this label to change to the new counter. Okay, so let's create a function. We re deaf. Ah, uh, button clicked. Quick clip counter. Look it. Say, uh okay, essentially, what we're gonna do, you hear? We depend. Event. Yeah. So, in the function here, we're basically gonna First of all, we need to get this variable into our function. So we have to put in global counter, okay? And then what we want to do is we want to add one to the counter. So we just encounter plus equals one. Okay, then after this, what we want to do easier. Okay, then, after that, what we want to do is we're going to use the conflict. So we want to change within this the label here, so within, but encounter, bounce, Barton. There we go. Get there eventually. And all we want to do is we want to change the text to being this new counter. Okay, so this should work. Fine, except lasting. It's do is put in what the function is here. Okay, So before we run this program, I just want to go over everything we've gone through here. If you have done by them for a while. This will love. This will be intuitive, but I want to make sure this will make sense. So, first of all, we saw the normals we imported everything from Kinter create the roots put into a leap. Okay, the first thing we did was after that we created a button in the normal way. So we put it in the roots. Texi was click me and then our commands we haven't yet defined. And then we creators label called butting. But encounter We want this able to basically be the current number of times that near the button has been clicked. So we create this variable called counter, which obviously would start zero because the button has not yet been clicked. So what we had after that as we set up this function where whenever which we linked to the button. So whenever the button is clicked, essentially, what we do is we take this counter variable and we have to tear down the function. We have to call it as a global variables. But global counter that we say that we're now adding one onto the counter. So it becomes one. And they were saying configure or change the button encounter, which is our label. Change that text to this new counter variable. So I hope that will make sense now if we run the program. Oops, it will. Comptel, what's happened here before I come right out. Congratulations. So, essentially, why haven't done is have a packed these to our window. A pack? Okay, let's try wearing this again. So now we have this. Click me button on. Then we have the counter below it zero, just like we hoped. Now when I click it, what's going here? Missing one position. Oh, okay. My mistake. So their way we don't spend event there. Okay, So since you what's going on here is I've put it the wrong way around. We're not, but encountering the conflict where configuring the but encounter. That's just my bad syntax. There we get. Now, if I close this one, we have a new one here. Okay, Let's just make this very clear of running it now. If I click this now way, it's time to go up by one. There we go. So we have a working button clicker. So I recommend you do is you go through this exact same thing again on try and do it as best we can from scratch. The main points here is first of all, you're just creating a standard button on your creating a label that doesn't output normal taste outputs of very cold counter, which you could define at the top. Then we're creating dysfunction, which we can put into the commands. Essentially, we bring in the variable, adding one on. We're configuring this this label. So there's the new variable counter, which is gonna be plus one whatever it was before. So, Heidi Heidi highly recommend that what you do now is you try and create this yourself from scratch. It may be frustrating, and that's absolutely fine. It's all part of the process. So give it a try. See how well you can do You keep this lecture on the side so you can look at it if you need help. But once you could do this from scratch, then you're really starting to get the concepts that underlying for this part. So you have a go yourself when you ready. I'll see you in the next lecture 23. L24 left and right click: the previous lecture, we looked at how he combined the event of a left click on on any kind of button. So now I just want to show you how you can do that with the right click of the button, just to help to improve your intuition around this on because it's very useful to have them both. Eso Without further ado, let's take a look at that. First of all, that's let's create left button on the right buttons so left button equals. But in roots, text equals by right, um, command equals and they will put in the function in the moments next will create. All right, button button, roots, text D'Cruz I'm left. But that was part a Kentucky Say that we're gonna have the command as empty as well. Say what would work. Or here Two buttons. Now we want to bind to different functions, so we'll create the to function. So first function is left click. Prince, uh, you have left clicked. Well done. It's the small things in life, isn't it? And of course, it within these functions, we want to put something in there. Deaf Rights click event. Okay, then print. Wow, that was the best right click I have ever seen. Well, thank you very much. I do practice in my spare time. Say we've created are two functions here which are going to be part of the command. So on the left button, obviously we want to have the function left, click, and here we want tohave are right Click. Okay. And if anyone's wondering just for that doing this whole thing Auto complete. I'm just tapping on tab and it comes up with all the potentials. It could be so right click. Ok, so we've created our function to have create the buttons now always do apart from binding them apart from packing them is we to bind them. So let's find them. So left button Don't bind. No, of course City me. I got weighing very much in the habit here. We're not using the command here because that would be for a left leg and right click and we were looking at doing bind at the moment. So apologies for that. We're putting in the quotations on the brackets here. So within here, what we want to do is button the bottom one just stands for left click. So we're binding. The left click event toe are left button were saying, When you do when this happens, we want to call the function left. Click Okay, that we're gonna do the same thing with the right button. So we're saying for the right button, we want to bind an event. The event is going to be so no, but someone basic means left click button to is middle click button three is right. Click. So saying to the right button, we want you to bind the event button. Three. When this event happens, we want the function to be called right. Click. So now let's run this. Okay? Yeah, of course. I forgot to pack my my left button. We never go on holiday. I always forget to pack my left button on my right button. Terrible habit. OK, Doc back. So now if I click, I'm left should happen. Uh, okay. So it's happy with the right click. There is no happy with left. Like so let's take a look. What's going on here? Okay, now, that is just too funny. Essentially, what I've done. I've just got my left and rights mixed up, so let's just change this one too, right? This change, this one to left. I have no idea how I could have done that for that is hilarious. So that exhibit Noser click left here. You've clicked left. Well done. Thank you very much. Right. Click here. Wow. That was the best right click I've ever seen. Well, it's pre get so essentially it successfully working. I just made a slight error that so just ah, go over what we've done in this lecture. So have created two buttons, right button and left button. And what we've done is to each of these has blinded the button to an event. The event here. But someone stands for left. Click and bind it. The function left click, which basically just prints out You have left collect. Well done. We about blinded the right button to this button. Three, which basically means the event right quick. And then that calls the function right click, which we defined here. So I hope that makes sense. Give it a try yourself with different outputs, different types of buttons, different text, etcetera. Have a bit of fun with it on in the next section. What we're gonna be doing is the exact same thing we're going to be building on the next size we did in the first section, where we were creating a counter. It's now we're going to create a counter. When you left quick left click and when you right click on, we'll be talking about how you can expand this into lots of different events. So you have a go this on. Do I look forward to seeing you in the next lecture? 24. L25 left right click counter: So in the previous lecture, we created this awesome clicker counter. No account. Sorry. But essentially we had left and right click where we But we blinded these functions to the buttons where if it was left clicked what was left collect, you'd get well, you have left clicked. And if you don't, the right click you get Wow, that was the best right click I've ever seen. So now let's add a layer of complexity to it That's create to but to button click counters . So first of all, we're going to create two labels. Hopefully from previous lecture. You will remember that we did a simple but encountered just on the left clicks. So we're just building in that with the right clicks now. So we're gonna put ah yes, but left table, Go create that label. So going to use the roots text iss is going to be called to left counter. Okay, So going to create a left counter that will essentially tell tell the user how many times the left button has been clicked. We're going to the exact same thing for right Mabel route text equals bright counter. So no number of producing text were producing variable, which we would have fine here at the top. So when the user first comes along for this, they're basically the counters give you zero, right? Because the the button has never been clicked. So we're gonna them both at zero. So now we're going to change these these functions slightly. So first of all, we have to we want to the counter to increase. And then we want to change the text to reflect that the button has been clicked. One more time, sir. Vestibule weeds You use global to bring the variable in for the left click we left counter . They were just left counter plus equals one. And then we're going to use the con fix. I hope you remember. Come pick. Which basically means configure or change. So for our left label, we're now going to configure it. So Conficker left. They were dot com fig and then we'll change the text to this new counter. So before a zero, next time he gets clicked, it will become one the case. We're gonna do this exact same thing for the right click as well. Except obviously we're going to change this to write counter change this. And actually, we should change this to left counter. And this one too. Right counter. Okay. Taking. So now we have the tea functions. Essentially, we're bringing in the variable for the counter, adding one and then we're changing the label to reflect this new variable, which is plus one what it was before. So we're gonna be binding these to the the buttons, Of course, because that's what we want. Teoh the event to be about right. So we've still got all right, but in our left button. So essentially, this is everything we need to do. We just had to change these to the functions, to be counters adding one each time and then configuring the label or the text. So let's run it and let's have a look and see if it works. So ah, of course. As always, I have forgotten to pack my labels. So let's do this in a nice order so we can have left label a pack here, and then we're gonna have rights lit right label here back. And of course, what we could do is use grids to make this even nicer. But the the fact that we're no actually focusing almost concepts right now, So obviously we could use grid and it be very easy to do say, but I think this will save us time and will be able to focus on the important concept. So when we left click on this one, that's a good if I right click on this one, nothing happens. Keep that in mind on the right one on this one here says I'm right. If I left click on it, nothing happens. But if I right click on it, that starts to increase as well. There we go. We could make it just even nicer if you if you like. Um, So what we could do is changed this The Where is it? The text to be something like left clicks and then got formats just like this. But then this could be right. Clicks formats. There we go. So now it just looks even nicer when we run it again that are left clicks. Of course. So we need to change in the configure as well. There's no asked many more time on this. I think we've got the basic concepts of it. So now at this point you should be able to not only understand how you combined different events to widgets on a cool set in functions to it were able to make this so that it's visible to the user. The effect of these events is not just printing on her out, but like a love. If you going on 90 tour was a lot of the time, it's it's slightly boring and you just get out of here. So we're actually creating things already now where the user can see the feedback directly . So I recommend you have a goal in this. It changed the former, make it look a bit nicer. Your player over the background colors were sort stuff on. When you When you've had some fun with that, then you can move on to the next lecture, and I look forward to seeing you then 25. L28 creating classes oop: So I just wanted to introduce you to the concept of using classes in Kinter because as your programs gets larger and larger and they will over time, you're gonna want to use classes. So you'll probably see in one of our later sort portfolio projects last using glasses. So just round this quick, quick one. To go through it, make sure that you're comfortable with using classes, first of all s O that then we can When we come to using it in a real program, you'll feel a bit more at ease. So it would just run through the basics off this class. So we've got our basics in here already. So basically using a class, it's kind of like being able to create a template from which have a template from which we can create objects. Eso we always use this class first, and then we we give it a name, usually with names will give it a capital next letter at the start. So class one button. So then what we do is we always have this initialized function of the start. So two underscores in it. Two underscores basically means initialize. We always have to have this self parameter first. And then whatever promises we want after that, when we create, when we use this template to create objects. So here we creating a frame, and essentially, we're making sure that you put it in master on. Then we're packing the frame. So we're essentially just creating a frame. Whatever. We use this class, then creating a button on with the command recording this other function within the class called print message, Um, which just been self congratulation, you classy person. So whenever we click the button that's created, we get this nice message. So we've created our class there. This is essentially our template. And so here we're seeing button equals one button route. So essentially we're feeding into this class, were saying, creates the frame in the button. And our master is this route that we have here. Okay, so when we run this now, we should have a nice button which will be click. Congratulations, you classy person. Excellent. So that's the basic introduction to using classes with Kinter. I heard that makes sense. If you have any questions, leave in the comments. Andi, I will see in the next lecture 26. L29 menus: so now going to look into you, creating menus and sub menus just like you see here in duped a notebook. We have file edit view insect. This is what we mean by menu and with sub menus. Essentially get them in pretty much every program. So it's important that we we learn how to do this within Kinter. So by the end of this lecture, you should be able to create your very own menu with sub menus just like this. The basic ones. Not yet these kind of ones. But we'll get you there. So first of all, we used to create a variable. So I'm gonna quit my menu. And then, just like we created button like we create a frame like we create anything with my menu equals then menu with a capital M, and that we could create this menu within the root. Okay, so then we're going to say we're going to configure our roots by, say, roots dot com fig. And then we're going to be putting in menu equals my menu. Okay, so when you're you're basically saying you want to configure route on menus already already a built in thing, so it understands completely when you say menu, you're saying the menu of roots wants to be this my menu. This I, too, have just created this object. Okay, so if you run this now, you might think that we'll have a menu. Unfortunately, we don't just yet because we need to create some things to go in there. So let's start with creating file, for example. So let's create sub menu equals and then we put menu so the capital in will create another item. But this time we're creating a menu within this menu object we've just created. So that might tell you had to get a little bit. Might take you a little bit of time to get head around that. But if you think about it, it kind of makes sense. So your Grade one menu and now you have to create a menu within that. For each of these file edit view, each of these is a menu within a menu, essentially, so we create this item, and then we do something called really my menu. Sorry sub menu dots, and then we do something called ads underscore Cascade. And that's just a function built in So it's saying basically ad in one of these Cascades, which is kind of like a drop down thing. So first we have to define what we're going to call this, so we want to call it file. So we put a label equals file and then menu equals sub menu. Say, now if we run this, so I mean you. So let's look at the problem. It say it's Ah, we want to add this to the Met main menu or my menu, not the sub menu. So we're making sure that we're adding our sub money that we've created to our original menu. So that's cries this and it's one again. There were gay, So you have a beautiful little file up there. Nothing in the moment, But not to worry. We can have things later. So we've added our first sub menu. So created our menu, which is up along here, and this is our first menu within a menu. So just to get practiced this I hope you're doing this little with me. Let's try creating the Edit Bar just after it, so we create. Ah, that said, this change sub menu now into file menu s o rry changed here as well to file menu. Okay, so edit menu. They were creating a menu object, and we're creating this within my menu. Okay? And they were saying, Adds to my menu my then you dot had Cascade. The label is now going to be edits menu G course. And so, before we put it is a file menu. So this time we want. But it is Edit menu. Run this. And now we have both file and edit. Excellent. So I have you. You find this useful? Essentially, what we've done here is we've created a basic menu here by creating a menu object, were then configured that into our roots so that we're actually saying, Put this menu into the window and we're saying so using dot com fig. And we have this already built in parameter menu. So we define it as my menu, the object we created. And then we've added to cascades or sub menus into that menu by creating another object file menu and screen that menu object from my menu. The editor is a cascade. The file The label story is basically the name Andi named it The label was filed. And then we added added, It's as Firas, a farmer near the object we created above. So that's the basics of creating your first menus and sub menus. Next week I will be looking into how we can add things in here and even add these little nice separators in between the things. So I had this been useful, takes some time yourself to practice this and get get handle of it on, and then we can go over some or in the next lecture. 27. L30 submenus and separators: Okay, So carry on from where we were, we left off last lecture. Essentially last time we created this menu and thes sub menus for file and edit. So we'll just take a quick look of that. So I've got file and it there's nothing in these yet on it doesn't look too pretty. So what we're gonna do this time is we're going to be able to add items in here, Onda. We're gonna add some separators and we're also going to have it just say that for now. When you click on any one of these, it will it would do a command that we're going to define. So let's get started. First of all, by creating these. So, for example, we have fireman you. Let's just create a couple of these. Let's create new notebook and open to start with. So for this, essentially, what we What we want to do is you take the file menu and all we do is we say dots, add command, and then within this way, we could defined label just like we were doing when we're according it file above for the ad cascade. So we got for a 1st 1 against two new notebook, new notebook, and we're gonna have the command for the same one for every single one. Let's just create a function up here. Could food on essential. Let's just say print Nice. Excellent. OK, so we're gonna do this command. Okay, So why don't we do that a few more times and essentially is quite easy now because, well, you just did the exact same thing that you had a different text. Say we're gonna have open make a copy. That's a first opened on make a copy. And for now, we'll just have the same function for all of them. So this is literally or you need to do is take a look at it when we click on file. Now, look at that. We got some lovely low drop downs. Whenever we click on any of them, they're just gonna come up with a nice so it's quite cool. I mean, eventually, you can create commands that do a lot more open things up here, you know, open files, etcetera. But for now, that's all we need. So one thing this is missing the if you look here and then we take a Look here, you can see that there's a separator in between them. It's just a nice s that athletics thing. So let's add one. Just here in between open and make a copy. And this is just have a few dots. Okay? So essentially, always do for this is do you file underscored menu dot Add Sepp power raped or always after that. Slowly. Otherwise I miss type it. Okay, says they could look at it again. There we go. We have this beautiful little separator, So let's add a couple for edits just because it's taking kind of lane lead. So this idea hopefully you are, um, coding along with me on this. It's really good practice veto code out yourself even change the names. They do different things with it. So we're going to write this out at least the 1st 1st line together, and then we could do their copy and paste, So I'm gonna add So for the edit menu, we're going to add a commode, which is basically saying just adds another sub. I guess you can just you can cool all of these different commands. So you do edit many don't add Kamande and then the label. Well, let's see what's under edit Cut cells. Okay, so put neighbor equals cut cells and the command. Let's just have it the same. This food. I mean, we could be adding different things, but I think this is enough. I like to keep these things succinct so that, you know, you are able to learn as efficiently as possible the important concept. So it brother, creating another function. I will create a few more of these eso. Let's look what else we have here. Copy sells and paste cells above. So copy Say it sells and paste cells above on just for funds. These let's add a separate here. Say edit menu dot ad said Pirot tour. Okay, so now if you're on this now, we're now we're seeing some cool stuff. Hey, we'll click on this. Nice. That was nice. That was a very good quick, etcetera. So this is a really get this will make sense. It is quite straightforward for this stuff, you know, we're creating on menus, get on main menu, and then we're adding our sub menus essentially by using this dot adds cascade. And then what we're doing is we're doing dot Add commands. Add all of these different options down here on beacon. Put in the command over the function you wanted to be on. You can add separators as well. So using this, you can actually create a full menu like this. Obviously, it won't be able to do all the things that you want just yet. But you went on your way to creating a full on menu for your your program. So have a go at this trying. Create a full menu if you can. It's kind of like Boris, but it's very, very good practice. So do your best with that. And when you ready, I will see you in the next lecture. 28. L31 drawing using canvas: we're now going to move on to drawing using something called Canvas, which is provided by Kinter. Essentially drawing using canvas allows us to create things like lines, dotted lines, rectangles, circles, ovals. Also, that helps us to create our own paint programs, which will be running through with you later. But to start with, let's just go over the basics. So first of all, we need to create our encompass, so we'll just create a variable called canvas. And then, as we create everything, like buttons, like anything we do capital letter on, then the name of it. So here we have campus. OK, then we're within it. We can then say what the width and height might be, so we can. We don't have to define this. If we weren't Teoh, then essentially it would just pop up is normal sized window, but it's usually helpful to define that mentions so that we know whether starts and the base the top left basically so in other dimensions off the window. It makes it easier for us to navigate with our shapes that were creating Let's put it that way so we can create with off 300 height off to hundreds. Just keep the best parts is up. Okay? And then just to make sure I didn't forget, I'm good. Either. Kind of a stock pack now. Okay, so then we want to add things. Teoh campus. So essentially, all we have to do is use dots, adds whatever we want to add, so we can do canvass dot at underscore. We want out of line. Okay, add underscore line. And then the parameters that we had in here are the X coordinates X one. Why one x two and whitey. So what? I mean by X one. Why one x two y t. Well, first of all, let's just take a look at the campus. Okay? So when I say x and y so that these are any coordinates on here. Okay, So when it's x x, If X and Y are both theory, then it's here. X defines how you go. Car isn't lee. And why defines how you gave vertically. So the higher the number, the further away you gave from the top left hand corner. So x one y one would be the point of which some your shape begins. Why, Teoh? Why Sorry, x two y t would be the end point, for example, off your line. So if we were to do canvas dot add line So the ads underscore line it, then what we could do is so we have X one. Go right underneath. Sets clear x one. Why one going out two x two. Why do you? So let's say we want a line to go from the top left corner to the bottom right corner. So it's easy for X one y one because thats 00 on, then to get it to the bottom, right? What we want to do is you want to have the full width, which is 300. We know because we dictated it above on the full Heights 200. So if we run this now, well, of course they were just commenting out. It's create line. Was game mixed up there se Let's just get one that she looks normal here. Those with strange every gate. So as you can see it, it goes all the way from the top to the bottom. If we really wanted to go halfway, for example, we could say 1 50 by 100 and they goes half the way. Now let's create a line together. So I want you to do this with me. Hope for your life treading along with me. Essentially, we're going to create a line that goes through the middle here all the way to the other end . So essentially, the why is going to stay the same. But we're gonna span from the starts to the end of X se. That's how to think about this. We just close this as well. So we want X to be right in the beginning, so it's gonna be zero. We want it to be half the way down, so it's going to be half the height, which is 100. We wanted to get away to the other side of the box, which is gonna be 300 and then we won't stay at 100 because why I stayed the same. So you're on this. As you can see, we get a lovely line like this. We can also do something called Phil. So Phil equals reds, and this will make the color of the line. And you could do that for other shapes as well. So you almost more. Excellent. OK, so now we're going to the same thing. But this time we're adding a rectangle. Say, we're going to start from the beginning once again. We've already imported contract yesterday to do that. So first of all, let's set up our campus. So what's gonna call this canvas wrecked angle? Which court canvas r equals and then we create a canvas object. Andi, let's keep this relatively small with equals, which cover 100 by 100. Box hired heights was 100. Okay, And then just to make sure I don't forget, I'm gonna put the pack in here, but you can put it at the bottom. There's always, um, here. Okay, so now we want to create a rectangle and not a line. So we do canvas dots create underscore. What do you think? You probably guess. Writes rectangle, say canvas stock create rectangle, so we're still going to use four points. So always saying is that the top left points on the bottom right point of our rectangle, because that will the program comptel, which the other two corners which haven't been defined. It's kind of logical way they're gonna be, So you need to define the top left in the bottom, right? So let's start 10 pixels down and pet 10 pictures in from the top left corner. And let's just make it a nice small rectangle and let's do 40 40. Okay, so that's going to search. Going to start 10 down and 10 in on. Then it's going to be 30 down and 30 long from there for this. So if we do this invited command name canvas. Interesting. Let's take a look. Essentially, I haven't forgotten to put the score are so we're basically I just need to add defining him , saying within our canvas that we've created create a rectangle so that's run that. And there we go. We have a lovely little rectangle. They strangely produced two different windows. There we go. We have a lovely rectangle, added the fil red here also, so you can have different fills if you so, please, if you don't add the Phil as you can see, it's just nice blank rectangle, so we could create another one that's created warn Canvas are dots create rectangle and this time let's go, let's have them overlapping. So 30 30 60 60 And there you go. We have two lovely overlapping rectangles. So what have we gone over in this nature? Essentially, we've gone over how to set up your canvas. Object on. Then what? So you with that you can define the height and width, and that does help on. Then essentially, in order to create objects or light literal shapes, and you can do create line or create rectangle on these numbers are X one. Why wants that these two coordinates give say, one position in your canvas and this is a second position of your X and Y coordinates for creating online. You can use Phil Teoh to give it a color. Andi with rectangles. So the first to define the top left corner on the second team to find the bottom right corner. So have a go, creating some shapes I find the best way to practice. This is to first of all, say out what your objective is. I'm going to create two rectangles, the overlapping or two on either side of this canvas on, Then try and make happen instead just going randomly into it. So give that a try on when you ready. We could go more into canvas in the next lecture 29. L32 drawings 2: Okay, so now let's look at drawing a few more different shapes. We've already gone over, creating in lines and creating rectangles, but now let's look at creating more circular shapes and ones with a lot more corners, so it will start with the absolute basics. So from Kinter imports, it's always good to go over this every now and then the roots, because t. K Okay, it's quite fun doing that, actually. Okay, so let's start off with the basics of creating our campus. Say would see the canvas equals capital. See canvas and then we're gonna have make sure that's it. All right. And then we're going to say after, of course, defining our with Andi height. So we just keep This is 200 by 200. Keep it simple on. Let's make sure to pack it at as well. Okay, so now we can start creating some things inside it so we could be canvas dots creates. Let's create ourselves. And overall, first of all, so overall is any kind of circular thing. So let's see. Let's do start 50 50 um, go 200 100. So let's have a look at that as you can see, we have a lovely 50 5100 100. That's the weapons if we change this to 200 So as you can see now, it's no longer a perfect circle because it's basically coming all the way along here, a way out of here. Say 50 5300 to 201 100. So if you imagine that 50 50 is here and then 200 is always long here and down here. So you're taking basic the top corner and the bottom corner. You can't actually see the coordinates that on here. That's kind of that's the box around the oval, if you will. Okay. And then we could always also give it some color equals escape for Yeah, we run this. Now we have a lovely yellow oval. Okay? No, why don't we adds this apology? Let's create ourselves triangle. So canvass dot creates polygon. So this is going to have a few more A few more coordinates, right? Because it's not just two points. Now we're going to define three points. So let's go for 30 30. Just keeping simple. Let's go for 30 60 30. So I will be going further on the horizontal line, but staying on the same the same height, Um, and then find our final points. That's have that in between these two years. 45. Um, on bond. Did it? Did it isn. But this work Let me see. I haven't actually thought about this last quarter. Let's see if it works. Canvas is not create polygon. Uh, OK, Interesting. I'll who get each other. Why in there? So you can see we have a nice little polygon here. So this would be 30 30 here. This would be 60 30 here, and this would be 45. 45 down here. So why do we make this a bit bigger? No. So let's move this, Teoh 130. Andi, let's drop this to 80. Okay, let's take a look at what happens. They're him. Date is getting closer to our second now, so that's that's either that. So we have our, um, over on our polygon. So just a few things to look out. Look at now. So we could have Phil because, um, asking for green. So that was less green. Uh, green color on. And we could do something called outline. So outline gives you the color off, the more basic the outline of the shape. So let me just show you what that means in practice. So you can see there We have a nice red outline. It's kind of hard to see, so let's increase the width of that outline. Let's make that 20. So now you can see a giant red outline so that with basically defines what? How, how, how large outline is going to be so in this lecture, what we've covered is creating ovals and circles and how you can give them color. We've also gone over creating polygons now, which created triangle, but you could create a star's hexagons. There'll be a long list of coordinates to go with them, but you can create some awesome shapes with it, so you can Also you can basically fill any of your shapes with colors, and you can add an outline took to your shapes as well on you could just you could define the color of this outline on how big the outline is going to be, So try it yourself now, make some awesome shapes, have some fun with it, feel free to post in the comments on when you ready, we can go on to the next lecture 30. L33 creating a basic paint program: Okay, so here's a really fun exercise for us to do together. So I hope you have your i d or dupes. No, but open. She can create along with me here. I'm showing you how the basics of what would learned I'm going to introduce you to one more thing called dot event. How we can use this to create a basic paint program. And from here, hopefully your imagination will kick in. And you realize that from what we're learning, what we've already gone over, you can actually would actually already create some pretty amazing programs. So let's get started with creating a basic campus festival. So from two Kinter import or fruit equals t k root dot mainly. Okay, that's the first thing we got we want to do is you want to create a campus? Obviously. So, Really, canvas equals we create, like, canvas subject the usual way canvas with a capital C. We're gonna create this in the roots. Okay, So I'm gonna make sure, actually, at the same time that I, um, packing it. Okay, I'm going to give it the dimensions as well, So it's careful with equals 200. It's just great to square for a okay. Now, this is where the fun part comes in. We are going to bind our canvas to a certain function. So we want to create a paint program and newly in pain. What happens is that someone clicks and holds down on that can draw something out. Right? So if you have any thoughts, you know, feel free to pause the video here on day. Have a look at yourself. See if you can. If you can solve yourself. If not, let's move on. So we're gonna bind it to something you might remember. Could be one dash motion. This is essentially it detects when someone clicks and holds down on their on their left on the on the mouse with the left click. So we want to attach this to a function. Let's just call it paint funk paint folk. It's quite for one. Okay, so what we want to do want to now create a function to find a function called paint funk? Okay, so in this, we're going to use something called dot events on. This is where things get kind of cool. So we're going to cover, stop, create oval and We're just going to create very tiny overalls. We're going to create them using this event thing. There's a lot of thought. Event apology is event dot so basic the what? What event does is it's looking this be or motion saying, Theo, event is when someone clicks. So it's actually gonna gonna essentially wherever the person's clicked. That will be the coordinates events dot exe on the next and say, Obviously, it's going to take into coordinates. So wherever someone clicks, it's gonna is gonna go Event X event. Why? But then when they hold down on the mouse and they move the mouse ever so slightly left or right, it's gonna also create those events as well. So for every event, what we want to do is we want to create a tiny, tiny circle. So what we're gonna do is for our starting point of the evil is gonna be just where the person's cursor is or their mouse's on. Then we're just gonna adds one onto those so that we're creating every point a nice little over there looks like someone is drawing, say, hopefully in your imagination, this is all starting to come together quite nicely. So we basically have created a compass here, which is 200 by 200 can be whatever you want. And they were binding the canvas to this event, which is when someone clicks and drags with their mouse. And so for every time that happens, we're gonna be calling this function where we create an oval on wherever. What's the persons holding down the mouse? Wherever it is, it creates a titlist local, starting where the mouse is and finishing the oval just plus one in the X Y direction. So why don't we had a nice little label as well? Uh, we're crazy above the canvas. So welcome equals label have been in the roots, and then text equals click and hold your mouse. Left button drug draw a masterpiece. Okay, so we're gonna then pack that Welcome back. And why not? Let's give a nice background color. Background color equals blue. Okay, so now we're going to run this. So let's just go over what we know already got over. Let's just take a look at it, okay? Well, at the start, that looks awful. So I'm going to change this toe having foreground color as well of yellow just so that we can see the actual text. Ah, sticking. Look here, unnamed. Color your lot. Okay, well, let's make that into a real color. So police said yes. So now this looks a bit better. So let's see if this actually works. Hopefully you've been coding creating along with me and you contest out. I'm gonna click and I'm gonna hold. Ah, we're getting some errors down here. That's have a look. There's no happy se paint form. Take zero position arguments, but warm was given. Okay, we need to put in something here. Just like writing event or something. Let's just close this and run it again. So we'll click and hold and love the holds. We have ourselves a paid program, Joe. Say, I I I don't know about you guys, but for me, I think this is absolutely awesome because now you can think about creating those menus we were showing earlier. And you can start. You have maybe a drop down to select what color is. It could change. What kind of your own words are because, you know, with the ovals we have to do here is put Phil equals Today. Let's go for orange. So we need to hear run again. This time we have a different color. What we hard toe till? So So, Yeah, it might be hard to tell, but that one is actually orange. So there are different things we could do. We could make thes bigger, so this is nothing. You could have a menu, for example. So if we run this again, though, as you can see, we are able to create some pretty cool stuff here, so I don't donate. Whenever I I create this one. I'm always proud of creating something. So that's how to create a basic paint program. And you can get a lot more complex with this. But for now, this goes over a lot of the things that I want to show you. So have a go yourself tried code this out from scratch blind without using this on when you're ready, let's move on to the next lecture 31. L33 scale: So at this point, I just want to say really well done for making this far. You've made it through a lot of different concepts. Using Kinter on. I'm sure a lot of it's very new. T say congratulations on making it this far. I wanted to give you a few lectures now that are aren't too intense and could be could be quite short, but something that's quite cool. So let's get started essentially or something. We create something called scale. It's something that people can use. Teoh. It's like a sliding scale and it's best just to show you. And then then you will see what I mean. So from Kinter import or root equals. Okay, Say so every now and then. I just like Teoh have this not created into the lectures so that we could go through this stuff. So we're importing everything, creating our route and then creating the main loop to make sure the window is always running. Okay, so now all we have to do is create our scale, just like we create anything else. So as you can imagine what we do, we do capital s scale. We're gonna put that in the root Onda. We can just leave if you like. So this will be our most basic scale. So we need to pack it in If we run this now Hoops do toe sick inter from this again. So what we have is a slider like this. So by default it's vertical and it goes from 0 to 100. So this is what I meant by a scale is like a slider. Eso essentially what we can do to change this is we can do things like from before from we have to have an underscore. I think that's because you this from, is like a keyword in python. So it just stops again confused. So we could be from 20 obsolete, usually dipped from 100 but 22 this will go live board will get 4000 And let's change the orientation which is just orient equals and we have to write in capital letters. Whore rears on tower. Okay, so if you run this now, we're gonna have a sliding scale that is now horizontal, not vertical integration 22,000. So there you can see this goes all the way up to s 02 1000 and is down to 20 and its horizontal. So this is a very basic scale, but you can see that it would be useful in a range of different applications. So in the next lecture, we're just going to go over how we can actually store this variable, so that could be used in different ways. So have a go creating a couple sliders yourself, playing between from and the two ons horizontal vertical, and then I will see you in the next lecture. 32. L35 storing scale inputs: Okay, So now we've gone over how Teoh create a skater and how to create different ranges and how to make it horizontal and vertical using different orientations. Now let's look at how we could store store one of the variables. Say, for example, how we could store any any any point within the slider. So let's start with the basics from Kinter imports or, uh, TK sorry. Root equals T K and then route dot main loop. Okay, so let's start off by creating our skater. So we just call it, scale it for now. He who was setting up a skater in the normal way in the roots. And then let's just leave it that just to show you once we a pack our skater, of course, as we always do, you can see just close. This would Okay, scaler is not defined. Interesting. Um oh, my bad. Sorry. You know why I got confused? That And so we're going to use the scale. Don't know why confuse that with skater. But here we get as you can see, we, as you can see, we have a nice It's default was vertical between one and 100 now Let's have a go at actually storing what? Letting the user store whatever they've been to scale. So for that, I think it be a good idea to create a button so called bottom one equals butter with a capital B root text equals enter. And then we won't have some kind of command in here that can store, help us to talk, store the variable. So let's create function to do that. Well, cool would define the function store scale that saved. So what we want to do here, essentially is we want to do the dot get function, which we've used before so we can store this invariable so we can say, uh, under the score equals scale dot Get Okay, so now if we just tended to print off the score each time, what's gonna happen is that output here in Jeeps, notebooks or your I D. You're just going to see whatever the number is when the person clicks the button. So let's just put the function in here store scale that's run this. And of course, we need Teoh pack the button, but of one doc back. So here we go. So if I click enter now is gonna come out zero that scroll down a little bit 38 56 etcetera . So it's kind of cool now, So we're actually able to store these variables so we can use an if statement here as well . So we could say if school is more than 50 that, say, Prince, we could spend more than 50. So now if we bring it off here for his offer to click and to him 15. No problems. But if we go over that 69 more than 50. So you could, for example, set up a guessing game where if you created variable here, guess equals 30 for example. And then you could say if score is equal to guess Prince, you win. So the person doesn't know. You know what number it should be. So they could just keep trying, then assumes, Actually, go on to 30 which is proving quite difficult, actually wants to let me do everything but 30 so fine that's changed this to 29. The gate Enter. You win. Excellent. OK, let's look at this in a slightly more practical application. Let's say, for example, that we we have ah digital thermostat on diamond. Very bad estimator with temperatures. So, you know, we're gonna This isn't Centigrade or Fahrenheit. It's Boo Boo heights. Let's call it comment. Boule Heights. Okay, that's the temperature measure we're going for That is completely made up. So don't tell him. Don't get confused here. So stick with what we've got here. Let's work with it. So the scale will call that thermostat. Make sure we stopped them. Estate. It's their way, stat. Say thermostat just like that, Okay? And let's see well from you today so we can call our button, but, um, one that's fine on, then. This could be the change temperature. So whenever the person clicks on that button, actually, they want they're saying, change the temperature in my house. Temper rupture. So just quick. Um, it changed temp onda above here. We can just put just because it's nice. Uh, put warning equals label for that roots text equals Ah, this is your thermostat. If you go above 50 Google height, uh, it may be dangerous. That's a warning. So let's just pack that warning as well back. Okay, Ducky. So now we're gonna just get rid of this stuff, so basically what we have. So instead of having this score now, what we're gonna have is that's a temp equals and then we want to dio let's see, What do you want to get out of this? So I guess we want to do the thermostats don't get. And then we could do this. This if things so, uh, if ah temp is less than I did a 10 uh, weaken print cold. LF temp is more than 50 we can give him a danger. A warning. Prince warning. High temp, uh, Or if temperature is over 90 print, throw the ring in the fire photo. Oh, because not so hot, you can even destroy the one ring. So I think this should work. Let's run it and see if any errors come up. Anyway. Uh, let's put this at the top. Let's But the this pack this above the thermostat, so just so let's bit nicer. The code doesn't look too nice, but the output will look nicer. Okay, that's just but this Well, okay, so that's tried running this now, so just click here. So this is your 10% if you go about 50 bubble heights, it may be dangerous, so let's change our temperature to 12 Boubou Heights. Okay? And there's new output, so that is because it's over 10. So let's go for four cold. Okay, it's give 25 the problem. That's good for 57. We get warnings. It's high temperature. That's a okay. You know what? It's a cold day. Let's heat up. Warning. High temp. Oh, okay. That's just trains this on temp. Uh, and temp is less than 90. That makes more sense. So then, if we go above 90 furthering the fire, Frode Oh, se. As you can see, we have just created a awesome thermostat that can actually tell for a day to throw the ring in the fire once it's ready. And so hopefully you got that reference Thio of the Rings Other ways you must be thinking this is a very weird lecture with Google Heights. And Friday Let's just go over what with what we've talked about here. So we've looked into story variables. So one good way to do that when you're looking at scales is to create a button and and you can add to the command for the button teas this dot get statement nationally important. So that's basis saying get the variable or get the input from the user. Then we saw that we could actually start to use if statements on we put that into a relatively practical application. So everything for yourself. How could you use this scale and using the DOT gets statement to create something practical and useful for other people. Give it a gay. Leave it in the comments section so I can hear what you're up to on when you're ready. Let's move on to the next lecture. 33. L38 message box: So now I just want to go over with you A quick, nice little thing you can do for if you want a new message boxes to appear when the user does something in your program. So let's start from the beginning. So from Kinter, I was desperate sake. Imports or, uh, roots equals TK. So we're gonna do is a very basic one. First what? We're gonna create ourselves a button the usual way text, Because do not click me. Okay. And they're gonna have some kind of command. So basically, when the user clicks this, we're gonna have something appear. So with this command, Well, that's first define our function. Deaf error message. Okay, so here what we're gonna use is ah, message box. So basically, it is message books dot show info. We put our text, this ISS error. This is obviously a very basic application here. We gay and then button one dot back. So if we now run this, we close our previous ones. Here we go. Do you not click me quick on this? Uh, by a steak that, uh, let's go for this again. We need to close thes era ones that there Okay, here we go. You don't click me. Okay, Let's have a look. So, funnily enough, I thought they'd fix this, But actually, for message box, you actually need to explicitly imports message box as well. I thought this has been changed, but it's seemingly not yet. So essentially, if you get in that same era from just doing the import Asterix in Portal, then try importing message box from chicken to as well, Andi, as you see. So now we have message box, Doctor of all lower case Andi. It should appear with some tech saying, this is an error. When we click on this button saying, Do not click me the every day so as you can see a piss hip, this is an air. Okay, so this is a very basic use of having message box met. Mrs. Boxes appear based on clicking a button. So have a go yourself. Create a few error messages yourself. Andi. Sorry. Era windows on. When you're ready. I'll see in the next picture 34. L39 window colour: So you're staying on the same lines of going into more of the fine details and playing around with the smaller parts of Kinton. L. I've had a few questions on how to actually give the over window the right background color , so it's very, very simple. And I thought, just a short lecture, just a shade. So if we create our window as roots, all we have to do is type, roots, dots, configure. And then all we have to do is put our background color equals. And then So, for example, I chase these colors. This is a color I made area because in a lot of programs you want to have a nice background color. It makes sense. So his one like this. So you know, this is this a bit of a nice color? But essentially, it's gonna be the whole color of your program. You can. You can use the normal colors, like for his own, principally, because you can see it's no, not quite as nice. So you can play around with finding out you're in RGB values. Say what I used to find it with something called image color picker dot Come so you go into there and you can find some nice coat HTML codes, four colors. So, yeah, essentially, that's it. So in order to give yourself a good background color for your your window, you just put in roots doctrine figure or, you know, whatever you call this master window, whatever doctrine figure BG or backgrounds, you can also type in background if you prefer equals. And then whatever your color, maybe so. I prefer this one then, Ah, Then you have this lovely, beautiful, relaxing color. So there's your answer for lazy that have been asking for the background color of the windows. Have a go play around with some colors on, then I'll see you in the next lecture. 35. L40 dynamically creating widgets: right. So I just wanted to show you a nice, simple way in which you can dynamically create widgets. So I'm going to use the example off creating 10 buttons, each of them with the numbers. 123456789 10 on. Because one way you could do it obviously is by creating 10 buttons. So it But, um, one button Teoh button three etcetera it they'll be quite boring. And it take a long time to do. And it takes up a lot of lines on one of the big things about pythons being efficient with your coat. So what we're gonna do instead is we're going to create 10 10 buttons using for lead. So we're going to say four. None in range, Ted, that we get creative busing, busing equals that would create the object. But in and then in here, we're going to create in the roots, and then the text is going to be the number. So it's for that. They're so essentially, it's going to be all the numbers from Well, from here, it's actually gonna be 0 to 9. So we could change that if you wanted. By just doing plus one that might work mine away. Let's have a look at any, um, And then we want to do is we want to pack it and say, If we run this now, the air is very happy that as you can see, we have all the numbers 1 to 10 just like this. So this is a much easier way of creating them. And so, you know, we could if we need to create 100 buttons, for example, then we conduct very easily on Do you know, if you don't want them going vertically because who does? Then, of course, you could just put in here in the pack side equals left. And then they're all arrange themselves from left to right like this, which is a bit nicer. I think so. This is a way to dynamically create widgets using four leaps so you can do this and so many different ways. So another way of doing it, for example, is if we say, uh, colors because I got a list of colors. Let's just have three for now, just so I can show you what I mean. And this will lead on into the next lecture as well. Nicely. So we could say for color in colors. Let's make that problem. And then we did the exact same thing. Text equals covers. This is no great change the colors off buttons. But it's just gonna change. We could put a list of anything. I just decided to put the names of colors because that will help us in the next picture so far on this. There you go. Oh, interesting. Of course. I burn colors instead. Cut. Let's try that again. And that is try me being actually smart. There we go. I wouldn't say smart, but I'm getting the red green orange. So if there are a number of ways even use four leaps to dynamically create your widgets, for example, your buttons s o have a got this yourself Trying Create a number of different buttons using these lists. Four leaps and in range on when you're ready will next. Graver How to dynamically decorate your widgets 36. L41 dynamically styling widgets: so I'm quite happy with how the last lecture lead into this one now, because essentially what we're doing, the previous lecture was were lick. It weighs where we could dynamically create our buttons using four leaps. So here I created list off colors. I'm going out a fume or just for fun. Uh, well, the weather cutters are there. C brown, uh, yellow. Keep doing that. Yellow. OK, so now we've got some nice colors. So right now, what are four leap is doing? And this is what we create in the last time your list of colors we said for color in colors on Duh. I'm gonna change this to, uh, color. Did it? Did it? Did it? Let's try this color list to make it less confusing. So for color in kind of list, what we're doing is we're creating a button one after the other that where the text would be the name of the color, and then we were just back into the side. So if we run this, you can see that with dynamically created a number of different buttons, which is really, really cool. I think it is anyway. So now what? What How do you think we could use this? This existing for leap to dynamic? The, um no any creator, which is? No. But I say to stall them well, there's one very easy way we could just put background. Color equals cover once more. So as you can see now we know only get the name of the button, but we also get the color of the button as well. So this is another cool way in which you can style your buttons. So, for example, if you wanted to have added a a different list, let's say who knows? There's a country list Onda we could display equals. Ah, but Lee UK, Spain, some even God, we've got six different countries. So let's go for, uh so I can actually think of it of countries the moment Let's go for just you European countries, uh, blue. Okay, let's careful Port to go. It's good for Germany. And finally, let's go for Finland. Reason why I'm laughing is because there are many countries in the world's and just when you think of one you don't managed, so I just want to show you now that no, only you could use to lists Teoh do the same time dynamically creates your your buttons on dynamically style them at the same time. So that's run this. As you can see. No, I've done the same thing again. So let's try this again. Let's see. So for color in color list, there is a better way we can do this. We can say for I in range 012345 range six. Then we could just put country list I BG color. Right? Okay, let's have a look at what it says. Unknown unknown color name. Why? OK, so essentially I just realized the problem is that I didn't cover Lester. Say it. No escape for it now. As you can see, each of the buttons has been dynamically created and has been dynamically styled. So in the sexual have gone over how you can create lists and style and lists of whatever you want to create the button names or titles on, then a list of the colors on just using a basic four leap. You can not only create a buttons but also style them at the same time, which is very, very cool. So this has been a view city. Give it a try yourself, play around with it. And when you're ready, I will see you in the next lecture. 37. L46 how to keep improving: so massive. Congratulations to you for completing or the basic concepts of Kinter and some of the intermediate things. I'm sure by now you've learned a load of new things, and you're feeling a lot more confident about creating your own grease using python and using Kinter. I just want to touch on a few ideas on how you can keep improving your skills using Kinter if you've taken even by other courses, this kind of lecture will seem familiar, Teoh, because I like to keep the concepts the same. So I just want to talk about essentially the winning strategies. So the four things I recommend, especially for Kinter, are these. So first of all, go over the concept. I recommend that you try and write out in your own notes what you've learned to do and then trying code out each and every one of those 11 by one. So you're solidifying everything you've learned on. Good thing is just to go through the course and look at all the lecture titles have made sure that the lecture titles a brief and descriptive showing exactly what you've learned for each lecture. So what? You've gone over all the concepts I'd recommend to stay practical. It's very easy to just sort of say OK, I've learned these things on now. I'm sure I'll use them in the future. But actually the best way to really get usedto using Kinter on to keep it in your brain for the future is to stay practical. So every now and then, just try and create a new gov. Think of a cool idea that you have. Or maybe one of your friends says, Hey, this would be quite useful. Try and create it even if you don't create the fourth thing. It's a great idea to start getting practical. Andi get start getting used. Teoh Just creating these things day in, day out. He's going to my next part of getting creative. It's all well and good going along with problems that someone's or someone's already provide you with and step by step saying right, Okay, this is how we're going to solve this problem. But it's another thing altogether to to start thinking of your own problems on getting used to that. So if you haven't actually worked as a python programmer before, yeah, if you have weights before you will know. That's essentially, you know, when you're given real life, tosses a completely different field because you have to get really creative with solving the problem. So I recommend you get creative with coming up with new problems and trying to create the solutions using Kinter. You don't necessarily have to create the best solution out there, but it's a great exercise to start trying to do that. Finally, I'm always putting up new content into this course. I want to make this really the best course that's out there on Kinter, so I'll be based on what feedback I get from you guys on what you want to then and what you want me to provide. I'll be creating new lectures, new quizzes, pdf's attachments, all those sort of things to help to improve your learning experience for Kinter. So let me know in this in this section in a comments, just let me know what you are looking to learn more off, and I'll do my best to integrate that into the course in the future. So if you challenges to you here, first of all, check out online resource is, you know, even the best course in the world should always recommend that people look into other online resource. Is it type in some bumpkin to type in, making a tank game using Kinter. I just read through how other people are coding using Guinta because everyone has their own way of doing it. And you learn a lot from just seeing how different people code on how they got, how they set about solving different problems. So also, like, are saying, get creative, start creating your own programs. Onda. Once you've created those, get sharing with others because it is great feedback loop to see someone using your program and seeing how you could improve it. How could you improve the use experience? Other. Any bugs that you didn't realize because everyone uses programs differently so they'll be able to pick out your bucks for you. Finally, I had toe have to put in here somewhere. Do you check out my other courses So they will revolve mainly around python machine learning And yeah, and of course, goodies. So you check out my other my other courses. I'm a huge fan of machine learning and ai. So if you're interested in that as well, do you take a look and I'll be in creating in this course a few coupons for you will see to get a discounted price. So that's it for this next a Zeiss A. Just focus on getting creative and stay practical. Eso have a think about how you could integrate these things into your learning experience, and then I'll see you in the next lecture. 38. L45 thank you: now that we're coming up to the end of the course. I just wanted to say thank you so much for rolling in this course and taking part. Learning all the concepts of Kinter. I hope you found this helpful. And you already able to start creating your own awesome grease and solving some real life problems and showing off your friends, maybe even potential employers. If you found this course helpful. Please do leave a review. It really helps me out on D. Also ill be leaving you a few links to you how you can roll in while the courses at a significant discount. So if you have any questions whatsoever, please do feel free to leave a comment in any of the lectures. I'm always looking forward to hearing. About what? How you fight in the course on what product you're creating. So thank you. Once again, Andi, I hope you enjoy the portfolio projects 39. L49 intro to portfolio projects: okay, So before we get stuck into working on these portfolio projects, I just wanted to give you a quick introductions that you have a good context as to why we're doing it. How would be going forward with these projects on why will be or value of value to you? So, first of all, what Our portfolio project so they have two main points to them for further projects are larger projects, which involved using a range of different concepts from what we've learned in order to solve some core, some sort of practical problem or created a fun game or something like that. The two main value points for doing portfolio projects in the format that I provide. It is, first of all, so that you are able to develop your skills in combining the different concepts. So it's solidifying your understanding of the concepts waas. Allowing you to integrate them into solving a problem which is a really important skill toe have in programming on the second point is so that you can actually put this on your get hub, or you can show this to potential employers to show them that you're capable of no only understanding the basic concepts or intermediate concepts you can put them into real life projects. So how do they work? Essentially, there'll be one lecture in which I introduce you to the problem. Oh, introduce it to you in a step by step format. So, for example, if it's a game, I'll tell you the rules of the game, how it should be laid out or how it could be laid out. Let's say put that in bullet points. At that point, I'll leave you to have a goat it yourself so you can think about right. How what concepts are acquired here? From what I've learned so far in the course on how can integrate into this program, it's very, very rare that old I'll introduce anything to you that hasn't been already gone over in Kinter. In this course, I may use things like the library random from Python because it's one of the one the basic things that could be used in Python on. I'll give you a quick introduction to it, but also it's very easy to find these things online, so I would be going through anything, advanced the only things or bring in a basic python concept. So once I've introduced the bottom T in the lectures after that, while do is, I'll go through how toe solve this problem with you step by step coating alongside with you , they're probably probably be a few optionals, like a solving the problems like a medium. Then the option was like the hard things said You can try and really push the boundaries, and I'll go over that with you in the future lecture as well. So it's important that you give it a try yourself. That's basically what I'm saying, and then we'll go through the solution together. They're always multiple solutions to given problem. So how you decide to solve the problem may be different to mine on. That's fantastic, so you can see it from different perspectives and different methodologies. So without any further do, let's get started with your first portfolio project. 40. L51 creating the game: Okay, so hopefully you've had a good try yourself that's creating this game. Eso whether you managed to actually complete the game or not well done for giving a gay, you know, because getting started with buoys in python isn't always easy. So you know, it's just important that you're giving it a try. And now we can go through it together and I can show you how I would go about creating this game. So obviously there are numerous different ways you can come at this problem. I'll just show you my way. And if this works for you, Excellent. So we're going to start by importing everything. So from can import everything and then roots equals TK Nervous of the bottom root dot main Okay, so let's go go by. Go at this step by step. So first of all, we want to randomly generate coordinates at one coordinate within a frame. Hint import random. OK, it's the first thing I'm going to do is get from that hint and Circe I'm going to import friend. Um, that random. Okay, cool. So you know, I'm going to create a frame, so I I'm going to just put my frame equals capital f frame from the root. Um, this give background equals, Ah, a yellow Because we are searching for this on an island filled with sand hit. And then we want to specify our height and width switch to pipes. And with at 200 I think that's a reasonable, reasonable side for size. For someone Teoh, get three. So it's really important for us to specify the height and the width because we want to randomly generate coordinates on. We want the coordinates to be within whatever the dimensions are, which had 200 by 200. So the next thing going to do is we're going to generate to random coordinates. 1st 1 is ex exporting it. So against you, random thoughts Rand int on. And if you didn't know about random before, hopefully your ableto take a quick look online on and you'd see that random dot rand int That's basically way you say create a random interject and we want the unchurched interject to be between zero on day 200. That's that. And then we do the exact same thing for our Y coordinates. So you could just call that why cord so now, Essentially, what we've done is we have randomly we've got our frame and we are rendered me generating coordinates that would fit within the frame dimensions. So that's the first part done now. So the next thing is, the user must click. And guess where this coordinate is. Okay, so now we're going more into binding functions into the frame. So we're going to What we're going to do from here is my frame I don't find. And then we're going Teoh use quotations and these more or less than signs on. But but in one, So this is basically saying as we've gone over before, were binding the events of someone clicking their left button into my frame. So? So basically, we're gonna have some function happen called when someone left cliques within the frame. So what we want to do now is we want to create a function to put in here. So let's put the function up here for it to that. Very nice in the code. Okay, so that's cooled. Fine. Um, What she put this as, Let's see someone clicking so we can just call it. Guess that's a okay. And then because of binding. We have to put something like event in the print disease. It doesn't matter what you write in there, like better event, just readable. Okay, so that's that's good from here. Eso each time the user clicks. So first of all, let's do that. So essentially, we want to print out. The first thing is to say where they printed out. So you collect. That's X. Why? Okay, so hopefully you know what these are? Well, we've been over this in a previous lecture there placeholders where you could do the dot format. So, essentially, what I would do is put dot formats and then in here we want to put the coordinates where they would take the place of these cutie brackets. So if this we want to put event dot Exe. So that's essentially saying, when this event occurs, where where where is occurring on the x axis or horizontally on? Then we have event dot boy. Okay, So, uh, let's give it, Let's run it now and see how it goes. So, first of all, we need's to a couple of things. We'd put function here, and then let's pack all of this in, so we've got a frame to back my frame dot pack hoops. And then also, whilst we have, I think we won't have some text or something. They these must click with you. Send that clip. Kim's helpfully. Okay, Well, anyway, I would like to have a title, so I think it would just be nice to welcome them. So I'm gonna put a label in here, So welcome. Label because label in roots. Um, U s. So now we want to put some text saying click on the map to search for tree trays. Your we have it two ways because we're pirates. Treasure. Okay, so now we want to pack with this in, we're gonna pack the frame, We're gonna pick the label. So I'm just doing auto complete by tapping tab there. And I think that's all we need to pack for now. So I'm gonna run this that see if it works Accent. So this is at the bottom. We kind of want this to be at the top, so I'm just gonna pack this both frame. So it's more like a title that they click on the map to search for Trey Asia. So hopefully what happens I'm going to click on the output in our job tonight. Beck is going to then tell us where we've clipped excellent 58 44. So I guess if I kept the cursor kind of this level next is gonna be high and the wire's gonna stay about 44. Excellent. Now, if I go low, X should stay the same. And why should be much higher? Brilliant. So the top left here is gonna be low X and no way bottom, right, as you can see, is much higher, Nikki. So we're off to a very good start. So we have achieved the first parts of randomly generated coordinates within a frame. Using random on the user must click and get where this corner is. So essentially, now we want Teoh. Each time the quick they click the game tells you said they click the game, tells them how far away they guess is. Okay, So the next thing we want to do is actually include in this are variables Y coordinates on X. Coordinate on. I'm gonna put these at the top just because I prefer it up here. Keep my eye on those cheeky coordinates. It So we've got you've clicked are X and that way. Now let's look at saying you are how should we write this? So, uh, you, uh, them away from X and from why? I think that should do well. So essentially what we want to say here is we want to say basically, the difference between the X coordinate with clicked on the X coordinate that the treasures actually act, or the the actual number we have for X court and the same thing for the Why. So what we want to do essentially the best way I can think off my head is we want to create the absolute value. It's an absolute value, basically means the matter what the value is, it should be positive. So if you have 24 it was ST 24. But if we get negative 24 it will be become 24. So we get the absolute value off against do the the event. So we're going to d three events. Did it'd events stopped X minus. Let's keep that short minus X coordinates. And then we want to put in the other one the same thing. But for why so we're gonna be the absolute value off the event. Why of the event while you could belong to two lines, so it's a bit easier to meteo Look up. So did it event dot y minus y coordinate. Hey, so that should know work and tell us how far away we are. So at this point, let's just go over what we've done. So we've imported Kinter, imported random, created our window on We've got the main lead down here to keep the window running, says the basics. Then we created an X and Y coordinates. So our frame, we said, would be the height both basic dimensions of 200 by 200. So he wanted to create a random X coordinates between zero and 200. And we wanted to also have a random y coordinate between zero and 200 so definitely fitted within our frame. So this is generated as soon as the program has started. And then basically we have a welcome labor was saying basically saying welcome. This is how you play. Um, this is the important parts would bind it. The events button once a bit basic. If someone left cliques within the frame a points. Then we get this puncture is going to be caught in the function. Were basically telling the user where they've clicked on their X and Y axis using the event extra vendor. Why? And then we've told them how far away they guesses from the actual treasure on the X coordinates on on the Y coordinates. So if we run this now, hopefully you should see it's gonna tell us where we've clicked on how far away we are from where it actually it's So we're x 20 y 25 100 twinge to away from X and 156 from way. So that would indicate that I need to move both right on down, because if I may have left and right, there's no I can't move, you know, 122 left. And I can't even if it's 56 up. So it kind of makes me assume that I'm gonna want to go this way on. As you can see, I'm now much closer, but I'm still quite far from wise. That's drop it down. It's about here. So we get a bit closer. No. So it's already quite fun. You know you're using a problem solving skills. But even if I were to click somewhere near by, let's say so. Now I'm within five. It's still not saying anything about me potentially winning. So let's go back to the drawing board and see what we're missing from our game to make this fun. So run me drainage, Jerry, to the coordinates in the frame. Users clicking to guess the coordinates and we're telling them how far away is accents. But we're missing out on this final rule here. When user is within five. Then they win. OK, now it's time to get our python on. So that's include in this function we're gonna put let's see if, um the event dot Exe if the essentially wanted to the exact same thing here. So if basically the distance between are the guests on the actual coordinates in the X is let's see less than five. And the distance between the UAE guests on where the actual treasure is is also less than five, then essentially have one. So we want to do something like Prince, you of found the trays. Your you are excellent. So we have found the treasure and someone shouting at us in pirate that we found it So that's always good. So that's good. When we run this now we're going to click around. I like to start start the top left And so it says we are quite far away. Say, let's go over here 34 away from X Say, let's move even more this way. Okay, So the place I'm within the why guests Oh, it's going to drop it down. She about here? Okay to wait Case if I go up a little bit Yea, I found the treasure Yar. Okay, brilliant. But however, I'd like something at least to change on this on this window once I found the treasure. So all I want to do for now let's say, is to change this click on the map to search for treasure. As soon as I found the treasure, I want that to change to saying you have one. So what do you think we're going to do here? Well, we're going to use configure, so we're gonna configure are welcome label. So as soon as with one, I'm going to say welcome label hoops still in shouting mode, So really welcome label dots con fig. We got change the text to you have one. So it's running again. Start the top left were already very place Exciting. Okay, so I'm gonna drop. Why? A little bit. Okay, so we've this way a little bit eight case. I move this way, though. That night This way. Todo Okay, so you know, he didn't say you have found the treasure yard, but the Texas also changed at the top here to say you have one accident. So I think this this lectures, being getting on in time ways. So let's leave it there for now. And I'm gonna add another tutorial just after this That will go through how we can get these optional things going. So I hope you have found this useful. It's a really fun basic game to start with, and we'll start building a lot of land here. But why I recommend you do now is have a think on how you could make a game that's kind of similar using the same sort of skills on DSI. If you can create an even better game on, let me know in the comments. Once you've created something cool on bless. No cover what the theme is. So have a good at yourself and then I'll see you in the next lecture. 41. L52 creating the game plusplus: so welcome back to creating our first game. In the previous lecture, we set up our basic treasure map guessing game, which was a lot of fun in this one. We're going to look at the optional kind of add ons to the game. So essentially what we're gonna go through is when when they win the game telling them how the user how many guesses it took them, adding insight on icon to the window and also having this button appear after 10 guesses that allows the user to guess guess once that guesses within a range of 10 like a pirate cannon or or a parent, I've decided to think of it as a parent that goes out and searches for you. So essentially, what we're gonna do is a walk three on both of these for the first for adding a Tyson icon . We'll do that together for doing the counter and the button. I decided to create it ahead of time so that I can talk it through you efficiently instead of just coding this live where you might take a bit more time on. We got Mike and mixed up, so essentially we're going to just start by looking at creating a title in a Nikon. Say we have to do to do this is for the title with the route dot title and then betting what we want to call it I'm gonna call it Yaar Orn Are basically Did you get the treasure on? Yes, Sunday in case you haven't studied pirate like I have for many years Yeah, means yes and no means no. So that's an important thing tonight anyway. Roots, dots. Okay, then you wanna do icon bit map Just like we did in a previous lecture? This is going to say use a Nikon a icon file on, put it onto our window. So for this, we just need to put in the file name and for mine I could it yaar dots and it's a dot i c e o imagery wants to. So if I run this now, essentially you can see at the top there Nice title, Yahr Or now you might be able to see my beautiful again. I tried to make it a skull and crossbones. Please listen Work. You know the skull and crossbones. As you can see, I am a fantastic artist So you know, if you need it. Need a design done, Um, in a lot of demands, as you can see for creating incredible icons. But, you know, I can always I can always check in, you know, course on how to design incredibly good icons. Just let me know if you interested on that. Yes, that was Jake eso Let's go over this now. When they win the game, tell Mommy guesses it took them. So this part's really easy on. Essentially, what will you do for that? Is within the guests you basically put you could ignore some of this other code I'm basically putting of created. A very book would counter outside of the function it zero because you haven't You haven't guessed any counters if you haven't guessed anything until you click once. So issues you as soon as you click. Once this is gonna happen. So you're gonna call in yesterday global counter because it's a variable outside of the function on, we're just adding one to this counter. So what we do then is once we get to the points here where we're saying if if you're within five, then essentially a printout you found the treasure. And at the end, we just re basically just I'm adding on to this. You have one. And then after that, a number of guesses is and I just put in the counter. So s so that's the counter. Let's give that quick right and see how it goes. So 28 they four k were already quite close. So 41 80 uh, so close in the X. Mrs Good. Down, maybe the end, but Okay, well, was that I know this is low fun for you guys watching play. So says you found the treasure Yaar. Okay. And at the top here says you have one guesses nine excellence that works just fine. So for the next one, A said I decided to call her parents where essentially after 10 guesses which basically, when I counter here is 10 or more than we want a. We basically want a button to appear that allows the user to guess within a range of 10 instead of five. So, like, parent, part kind of or like, a parrot. So I've created this. Let's start from it. So, basically, in this function for guests, I've put on, uh, if the counter is more than or equal to 10 and I've created another one called button Counter. Okay, So essentially, what the but encounter does is it makes sure there can only be used once. So you know you say is at one. So you basically have one that's a power up. We could call it so if the counters mawr or equal to 10. And if the button country still equal to one that we're creating this button in our roots and the text saying use parrot, if you click on the button, we call this function called Parrot On were also packing the button. So it's like a dysfunction parrot. Essentially, I'm just gonna print parrot such I'm going to remove one so that the but encounter is now at zero so that you can you can only use this button once essentially and then we're doing the exact same thing as above, literally just copied and pasted it. But I've changed it to 10 so that it just makes it so that if it's within 10 now, instead of within five, it will work just fine. And so that is everything. So we have looked at creating a title so root dot title need to put in the text for your icon bit map. You even I see or don't I see a file which I use create use something called online Icon maker with the U. R l is R. W Dash designer with an r designer dot com slash online Underscore icon underscore maker dot PHP So on Look at that. You just got a You got a full up view off the icon. So you count yourself very lucky s o then what we did to be created to counter so that we can count the number of clicks eso each time that the user clicks we had one onto this counter on but the very ends What we've done is as well as configuring the text. The top said, If you want, you have one. We're also putting in the number the counter number, which is the number of clicks or a number of guesses that the user has made some for our final point of doing this parrot slash canon thing where after 10 guesses, they could get better. Guess we great. Something called but encounter. So once the counter goes above or more than 10. Basically, once the user has guessed 10 or more times essentially on the and they haven't used the butting yet. So but counter is still were equal to one. We're creating a button that says, Use parrots on when the user left clicks where we are going to do the function parrot, which removes one from the but encounter so it can't be used again on then the user clicks as a ways. But this time, if it's within 10 then it works just fine. So let's take a look at our final game. So we'll click once, twice, three times. Four times, five times six times seven 89 That's good this way. But will 10 0 look, that says use parrot. So okay, you use that parrot parrot search kit and then click over here. Scroll down a bit. Slipping further away sets me a little bit more. A little bit there. Okay, Well, I don't there still, because I know that you guys are dying to create your own game, so I do not want to You take up your time just playing my own game. So essentially what we've done here Like I said, we created our title created icon bit map. The way that we're able to count the number of guesses was by creating a counter Andi calling it is a global variable within our function. When these air clicks, it just goes up by one. So every time the user clicks gets past one and we print that at the end as the variable counter and then we created a but encounter. So we have this first war normal counter. Once it's mawr than the records. 10 we and we make sure that we still have one here. Then we basically we have a new button appear on this. This button allows the user to search within 10 spaces instead of just five. So I hope you have fun creating Have had fun creating this game on. Do you found doing these optional parts? Very interesting. So I would be really interested to know at this point how you're finding the course, you know, and what you think of it and how you like these practical eso because your feedback really helps me to shape and really improve the quality of this course. So do you Let me know what you think. So thank you for taking part in creating this first game and I will see you in the next lecture.