Kivy Tutorial #8 - Simple Drawing App (Using Canvas)

Key Takeaways

hey guys and welcome back to another Ki tutorial so in today's video I'm going to be going into creating like a very simple and basic drawing application and all we're going to do essentially is I'm just going to have a square and I'm going to have that square move and just follow my mouse around the screen and then if we press down like it'll print a square whatnot to the screen uh this is just to introduce you to kind of the graphics system in ki I don't want to go too far into this because it does get kind of complex uh but this is a brief introduction to show you guys what you are capable of doing with it and if you're interested in that um let me know and I may make another video on this in the future but I will leave the docs in the description so you guys can read through them they're pretty self-explanatory in terms of how to create uh different shapes and objects what I'm going to show you here will give you enough of a foundation to uh I don't know draw some basic shapes onto your screen or whatnot so the first thing we're going to do is we're going to import uh K.G Graphics okay and we need this just to be drawing obviously so from K.G Graphics you're going to import uh rectangle uh with capital and we're going to do the same thing here so from K do graphics and we'll import uh what was it color so the way that drawing Works in uh in ki is it kind of is based off of something called openg so if you guys have used openg before you'll be very familiar with how this works if you haven't don't worry but essentially you have a canvas um and that canvas contains drawing instructions and you can give instructions to the canvas obviously to draw different things and then you can update those positions uh it's a little bit different than how Pi Game Works in terms of you just draw something it gets split to the screen and then you have to draw over it if you want to get rid of it um this is not it doesn't work that way so essentially you don't have to draw over top of your canvas each frame you can just update an instruction and it'll move that object accordingly uh and you guys will see how that works in a second so what I'm going to do here and this is just based off of our last video as well is I've just cleared this uh KV file we don't need anything in here and all I'm going to do is actually just defining a knit in here because we're going to need toh do something in here so we're going to say Define a knit and we'll do the same thing that we've done before so we'll do quars here and then we're just going to have to call the super Constructor so supercore nit and then what was in here corgs I believe and then here we have touch and self okay so there we go we have our initialization and what we're going to do in here is we're going to draw a rectangle so the way that we draw anything um and set up the initial drawing instruction is we say with and we say self. canvas because this um this widget inheriting from widget actually has a canvas uh property that we can use say with self thought canvas and then here what we're going to do is we're going to say uh rectangle so we'll say self. re sorry equals rectangle and then we're going to give some properties for this rectangle so I believe I have to actually look here cuz I forget how you do this uh oh yes okay so all we have to do is just give it a position which is a tupo and a size which is a tuple as well so for my size we give it 50/50 and for my position we'll give it an initial position of 0 0 so actually before we go any further let's just run this and make sure everything's working okay so you can see that we have a nice little rectangle in the bottom left hand corner of our screen at 0 0 okay awesome so that's working so how do we change the color of this rectangle so you might notice the only two uh things that we can give this rectangle is a position and a size so how do we um give it a color well it's actually kind of weird how you do this but essentially you have to change the drawing color of the entire canvas before uh you can change the color of an object so that's why I imported color here so what we have to do is we have to do like this color uh and then is that how you do it I think that's how you do it actually and we're going to I'm just going to copy this one in because I don't know what this color code is but I believe this is red so what you do here is you're going to give it rgba a this is your Alpha value and then obviously you can specify the mode so in this case it's mode rgba so when we do this what we're going to be doing is changing the color of this canvas drawing um and then this rectangle should show up red so let's try that and there we go so now we can see we have a red rectangle instead so if you want to mess around with the different colors here you have to look up the codes cuz I don't know all the color codes for um rgba but that's the mode that we're going to do and this is how you change the color so let's just mess around with drawing a few other rectangles just to see what happens um and how we can change the color again and whatnot so let's change the color let's just make this one uh we'll copy this rectangle code and let's just change our position to uh 0300 or let's actually just go 200 300 see where that shows up we go size of 150 and let's run that okay so now you can see we're getting this kind of yellowish rectangle um showing up in that position and just notice if we resize here right how um we will move down if we change and we will move to the left but if we go right nothing's going to happen and that's because we're at a static position we're not dynamically placing this using like a root and whatnot okay so just something to keep in mind there all right so there we go we have those rectangles so now let's actually make it so that uh the rectangle follows our Mouse around so that's why I've left this on touch down on touch move on touch up events and actually we don't need this on touch up so we can get rid of that but what I'm going to do is I'm just going to show you how we can change the uh the property of our rectangles when we're moving so I'm actually just going to get rid of this rectangle because we only need this first one and the way we can do this is actually very easy all we have to do is just say self. w. position equals and then we'll just say touch. pause and now you'll notice that that's literally all we have to do so that when we click the mouse it's going to go to that position now we're actually just going to do the same thing in on touch move so that if we hold down the mouse and move our rectangle around it will follow our Mouse as well so let's try this and we have the red square ready I can click here and it'll fall follow my mouse wherever I go now if I hold down you can see that it's following exactly where I go and obviously we're printing out all the mouse motion events um so that's pretty straightforward how that works now obviously there's a lot more things you can do with this in terms of drawing you can draw lines so for example from ki. Graphics uh import and we'll import line there and if we want to draw a line to do that you simply do line and then I think you give it like a bunch of positions I have to look on this thing CU I forget yeah so you say points like this points equals and then all we're going to do in here is just add a bunch of XY points so we can just say like 20 30 um 400 500 60 um 500 let's try that and just see what we get I have no idea what that's going to draw for us so you can see now we have a line going from the points that we've specified uh and you guys can mess around with that and obviously if you wanted to change the color of this line same thing you'd have just have to red find color up top let's get rid of that and let's add one here and see what we get for our line color and now we're getting a green line starting here going up like that okay so I think that's all I'm going to show for just simple drawing now that's how you can kind of move stuff around in the next video I'm going to get into multiple windows so how we're going to go back into kind of GUI stuff I just wanted to introduce you this drawing it's not something I want to touch on a lot uh and we're going to get into building a multi uh what do you call it window gy so we can go from window to window we can have our KV file and it shows like what's going to be on each window so we can go do maybe a login for him and then when you log in it'll show you what was I saying before like your secret notes or something like that okay so with that being said uh that'll be it for this video If you guys enjoyed please make sure you leave a like And subscribe and I will see you again in the next one [Music]