How to Draw Circles, Rectangles and Lines in Kivy for Python!

welcome back to the channel in today's video I'm going to show you how to draw circles lines and rectangles in KIVI using the canvas and we're going to make them dynamically resizable where they change with the changing size of your window as well we're going to do all of this in about 15 minutes [Music] okay let's get a basic KIVI window opening a basic KIVI app setup as quick as we can let's make a main widget so our main screen and just put widget as the argument passing in and initially you're going to have red squiggles every time we call something that needs to get imported from KIVI if you're using a really nice intuitive IDE like I use pycharm from jetbrains you should be able to just hit import this name underneath it and there will be a lot of options you might need to run pip and install KIVI first if you don't have these options or you're using a less intuitive IDE and be careful when you import these names A lot of the things we're importing are also available in kinter which is Python's kind of included basic GUI package so make sure you're importing things from KIVI but when you click them you should get the automatic import statements at the Top If You Don't there's no problem you just have to type in from kivi.uix.widget import widget okay and for now we're just going to put pass here because we're just trying to get the window to open all right and so we're going to make a class that is going to be a KIVI app this is important um whatever you name this will also be important so my app is what I'll call this but if you're making it for something specific like uh you're gonna make the classic board game Battleship or something you call it Battleship app or whatever you call it you need to have an accompanying file in your project structure called whatever this whatever you named this minus the word app so if I call it my app I need a file that is my.kv and I apologize I know that's small text up there but this file is my DOT KV and the only thing we have to put in that for this basic tutorial is we're going to say basically what window we want it to load and for us that's main widget so the format of that is main widget with a colon and then you come down and in square brackets same main widget with angled brackets so we're going to talk more about the KV design language in future tutorials this is obviously I'm gonna be a series on KIVI we're getting more into Mobile app and resizable app development with KIVI but for now just put this in here so that main widget will load up when the app boots up and then the last basic thing we need to do for setup is to say if underscore underscore name underscore underscore is equal to with two uh two equal signs um and then in quotations underscore underscore main underscore underscore so that is just checking if this is our main uh if this is our main app if this is our main window and if it is then call that my app or whatever you named your app and then with the parentheses dot run and then uh parentheses like this so we have to import the app real quick so import kivi.app.app and again be careful when you import things that you're importing stuff from KIVI that's the most important thing but actually just looking at what's on the screen right now this you know 13 lines and it's not uh it's not even all super useful like I have comments and spaces all over the place but if we run that you already get this window that is resizable and it has that my at the top so whatever you named it my app Battleship app whatever that should appear at the top and the window is resizable okay so I promised in hopefully the title of this video we're drawing shapes and we're going to draw three shapes in this video and what we're going to draw is we're going to draw a rectangle a circle and a line and we're going to show how to make them resizable within your KIVI uh app so what we're going to do is we're going to come into our main widget and we're going to make these three variables and we're just going to initially set them equal to none and the reason for that will become apparent when we set up the init function okay so we're going to make a rectangle a circle and a line and set them equal to none and now we're going to make the init function of our main app so do def underscore underscore init and I know KIVI has some specific syntax that like maybe if you've made a lot of Pi game with me pi games syntax can tend to be a little more intuitive but this underscore underscore in it is a very common uh python um as a very common python function it's called Dunder and it's just a very specific way of letting your function know it's an initialization function and then this star star quarks means keyword arguments and it's just a way of making however many parameters you pass in a flexible thing so um then we want to call Super of main widget and then self and Dot underscore underscore init underscore underscore with quarks okay and so this is allowing us to inherit all of the functionality of the pre-built KIVI widget inside of ours so we're able to add on functionality and write custom functionality but at its core it will also have all the pre-built widget functionality KIVI comes with and then the only other thing I'm going to do in the init is I'm going to make a new function and I'm going to call it initialize my shapes okay self dot init shapes and what we'll do is we'll come down below the init and we'll make our function in its shapes init underscore shapes and then this just needs self passed in because it's inside of this class of our main widget and all we're going to do in the init shapes function is we're going to set up what's called a canvas in KIVI so basically the two ways and they're they're they can be used together but the two most common ways you'll see KIVI apps laid out is with the canvas which is essentially what it sounds like it's like a drawing platform where you put shapes and objects and images on it or layouts so like grid layout box layout different types of layouts where you can put canvases inside of layouts and use different widgets like that but this is going to keep it a little more basic we're going to keep it to shapes here and what we'll do is we'll say with self canvas meaning we want to use the canvas option with KIVI let's go ahead and say self.rect is going to now be equal to a rectangle and the only thing I'm going to pass in here as well is whatever I want the background color to be initially so I'm going to say BG color is equal to and then a Capital C color because that's we have to tell KIVI that it's looking at an RGB value and then a little different from some other GUI packages the rgbs in KIVI range from zero to one so if you're used to the zero to two five five you just have to take essentially whatever value you wanted and divide it by 255. so if initially you wanted white let's say and you would do two five five two five five two five five you're actually going to do one one one here so these are these are zero to one RGB values and for the rectangle let's give it red and green and then uh for this circle we'll make them all different colors and now one thing that really bothered me is you cannot find a clear answer on how to draw a circle online for KIVI and I think that's because it uses a widget known as ellipse and obviously an ellipse is a circle um or or a circle is an ellipse but not all ellipses are circles so it makes sense to only have one widget that can do both um and I'll make that one just pure red and then we'll do self.line equal to line and give that a BG color equal to uh and we'll give this one red and blue so it should be like a purplish now you see a lot of red squiggles and I forgot the word color here a lot of red squiggles because we have to import every one of these so import this name and you'll see for rectangle there's a lot of options but for rectangle ellipse and line they're all from the KIVI dot Graphics package so I'll take a look real quick if you have to manually import these you use the statement from kivi.graphics import rectangle ellipse and line okay so this row here whether your IDE does it for you automatically or you have to manually type it in you need that line and then we also need to import color which will come from kivi.graphics dot color now this one's tricky because they both come from KIVI but we don't want input providers Mouse dot color we just want graphics.color so that would be again from the kivi.graphics package now we have rectangle ellipse line and color and believe it or not you can make a lot of really Advanced apps if you just understand these shapes and how to draw them and make them resizable okay so that's going to be it for init shapes that's all we have to do to initialize these shapes but a really powerful feature of KIVI is making them resizable and to do that we have to tell them how big they should be and where they should be relative to the window so just to show you if I boot this up now they all just Auto populate to zero zero we haven't given them size or position hints so they're automatically generated at zero zero now you can give them for forced sizes here when you make them so I could make this size 100 100 I'm just making something up but if we boot it up now and you look at the rectangle it doesn't move because this is actually not going to be super useful or resizable until we do something where we update their position on size okay so we're going to minimize init shapes for now it's done and we're going to go ahead and Define an on size function and this is something built into KIVI that your widgets will have and I learned that it's good practice to pass in Star args so a variable amount of arguments as well we don't need that in this example but it's good practice so you'll see that on my tutorials and what I'm going to do here is I'm going to make the rectangle uh the circle and the line I'm going to give them position and size based on the window screen so this way I'm going to go ahead and make these six lines self.rect.pause self dot Circle dot pause and self dot line dot pause I'm going to make all of these shapes and I'm going to make them to where they change actually we don't need line size we need line width um the size is a little different for rectangles and circles because they need an X and A Y the line just needs width okay so let's say for the rectangle that I want it to be drawn at 0 0 and for fans of the channel who have done a lot of Pi game zero zero in pi game is the top left of the screen zero zero with KIVI is the bottom left with the screen so the difference is in the Y coordinates Pi game Counts from zero at the top downward KV Counts from zero at the bottom upward okay so this will be bottom left corner and then for its size I'm going to make sure these are always integers but we give it an X and A Y argument and to make it resizable so that it's always taking up the same percentage of the screen I'm going to use self.width which looks at the width of my current window and I'm just going to make it half the width of the window and then I'm going to make it the full height of the window okay so this should occupy the left half of my screen now for the circle for position on this one I'm going to move it so that it's uh to the right of the the rectangle so it's not over top of the rectangle and again I'm going to make sure these are always integers but I'm going to use self.width over 2 so that'll mean that it's X start position is at the midpoint of the screen and then int for the Y position I'm going to say self dot height times 3 divided by 4. so it should be three quarters of the way up the window and then half the way to the right and something different about circles again in KIVI and I'm only saying the differences between KIVI and Pi game because I know a lot of my viewers watch a lot of my Pi game tutorials as well when you define a circle in KIVI you're actually doing the same sort of position definition you do with a rectangle which is you say where the bottom left of it is going to go and then however big your ellipse is you're defining the rectangle that that ellipse fits inside so when I say that int self dot width over 2 is the X position of my circle in pi game that would define the center point of my circle in KIVI that defines the lower left corner okay just a quick tangent to make sure everyone understands why we're doing self.width over two when we see it on the canvas it's going to make sense and then I'm going to make my circle which is really an ellipse I'm going to make it uh one quarter the size of the screen so int self.width over four as my X Dimension and into self dot height over 4 as my y Dimension now for uh the line actually I shouldn't have done position it's self.line.points and any line just needs two points to fully Define it and you don't separate them out you just give them essentially four arguments separated by commas so I'm going to say I want to start in the lower left corner so 0 0 and I want to span the entire width of the screen and the entire height of the screen so this is creating a diagonal line from the bottom left of my screen to the top right of my screen and I'm going to make it five wide okay the reason I put this in an on-size argument rather than in my init shapes is because if I put these same lines up here then that's where they'll be when the window boots up but then it will not dynamically change with the resizing of the window you have to move that into an on-size function so that was a lot of talking I haven't even shown you these shapes yet but let's take a look now all right you can see a yellow rectangle which was our color one one zero RNG and it starts in the bottom left corner and it goes to halfway of the window and it fills the entire height we have a circle which is one quarter the height and one quarter the the width that starts at three quarters of the way up the window halfway to the right and we have a purple line that goes from the bottom left to the lower right the really powerful part about KIVI is if we were to resize this to about the size of a phone okay we still have a red circle which now is much more of an oval taking up one quarter of the width one quarter of the height this is where KIVI becomes super duper powerful and you can make pie game Windows resizable using these same principles but pygame is not cross-platform compatible like KIVI so for mobile app development where one program that you create works for Android iOS Mac PC even Linux I believe KIVI is the language you want to go with and knowing these concepts for drawing shapes is really really super important so I hope you found this tutorial useful be on the lookout for a bunch more KIVI tutorials coming on the channel I definitely want to get into mobile app development with python among a lot of other big things which we've talked about on the channel so a massive thank you to my patreon supporters uh Dale and Philip and a massive thank you to everyone who continues watching videos leaving comments leaving likes on the channel feel free to comment below what you want to see more of on the channel what you'd like to see next and if you have any questions about KIVI um as always thanks for watching good luck see you next time thanks bye