Touch Screen Events and Clicks in Kivy for Python!

welcome back to the channel excited to bring you guys another KIVI tutorial in today's video we're going to look at how to handle touchdown events on your KIVI screens [Music] all right so let's get started by very quickly setting up the base kind of KIVI app and so we're going to do class main widget widget just to get started and I'm initially I'm just going to use a rectangle in this project so I'm going to create that rectangle here in my class and say none and then with KIVI you might have to run pip install KIVI if you haven't had it before if you have an intuitive IDE like I use pycharm from jetbrains then a lot of the times it'll know that you're trying to address something from KIVI it'll give you the option to import specifically what you need so you have to be careful with your import statements but this main widget that we want is from kivi.uix dot widget import widget just like that um and then in this main widget app to set it up we're going to do this def underscore underscore init underscore underscore and then self and star star quarks or keyword arguments and then in here we're going to Super main widget and then self and then dot underscore underscore in it underscore underscore quarks okay and so basically this just lets us with any custom stuff we're about to add to this main widget it lets us use the pre-built widget functionality KIVI comes with okay now we're going to come back to the main widget when we're adding this functionality but for basic app setup we also have to make a class for my app that is going to be a KIVI app okay so import this name and it should be KIVI dot app so from kivi.app import app just like that and then in here all we have to do for now is put pass and then the last thing we want to do is just say if this is our main score uh our main screen so if underscore underscore name underscore underscore is equal to underscore underscore main underscore underscore then we just want to my app Dot run okay and so this my app with parentheses um is whatever the name of this app that you created that is the KIVI app class is and then dot run parentheses the only other really important basic setup thing you have to know is whatever you named your app so my app or Pete app or Mastermind app whatever you call it you need a DOT KV file that does not have app after it so in my case it's just my.kv and I apologize that the text is small at the top but this file is named my my DOT KV okay so you need whatever app uh you named it dot KV and then all we have to put in there is main widget with a colon and then main widget inside angle brackets there's a lot of other stuff you can do in a DOT KV file in fact it can actually act like the CSS to an HTML page but for now we're just going to do this and we're going to do the style and design stuff in the main app okay so you just need this in your my.kv now let's take a look at the reason you're here which is Touch apps or click apps so I'm assuming you probably got this far if you're specifically looking for how to handle touch events you probably have at least some basic app built in KIVI but just to show you what we've done already these very basic lines of code let us boot up a window that has the name of whatever app we just called it and it's resizable okay which is really the bread and butter of KIVI is it's natively resizable and cross-platform compatible so Android iOS Mac PC Linux you name it KIVI works with it all right so now let's put some interesting functionality in here first let's go ahead and say that when we initialize this function uh let's just call a function self dot init shapes just like this and then let's make that a function So Def init shapes and I'm not going to spend too long here I've done a tutorial on how to draw shapes in KIVI recently so I'm just going to kind of Breeze through this and assume that you know how to draw shapes or you know how to get that information we're going to use a self.canvas so with self.canvas which is kind of just saying we want the screen to be our surface for drawing things on and I'm just going to make this self.rect equal to a rectangle and I'm going to give it an initial background color of BG color equals and I'm gonna I guess I'll make it white just when it starts okay so it's going to be one one one these are RGB values that range from zero to one so if you're used to seeing them um if you're used to seeing them as 0 to 255 values take whatever those values would be divide it by 255 and then make this a fraction you know so if you had 220 then it would be more like 0.9 and then make sure you import from kivi.graphics import a rectangle or that's just if you're trying to follow along directly when we get to the touch events that's the important part but if you're following along just to learn how the ontouch function Works make sure you import that and then what we want to do is make sure that that button stays a specific size when the screen resizes so we'll Define this on size function and I'll just say that I want my rectangle uh position to be in the lower left corner so 0 0 and that I want the size of it self dot rect dot size I want it to be essentially half of the screen or I guess a quarter of the screen I want it to be half the width and half the height so self dot width over two will be my X Dimension and then self dot height over 2 will be my y Dimension okay so I'm going to boot this up also something I just learned is good practice we don't need it in this example but for the on size function it's a good idea to pass in Star args that's how I learned it I'm just a variable number of arguments okay so now you can see we have a white rectangle in the lower left corner that resizes with our window which is great that is all the basic setup we're going to do now now we are getting straight into what we want to do on touch down on our window so KIVI has these nice sort of pre-built functions which is on touchdown on touch up on motion on opacity on touch move these are the KIVI pre-built for a widget things it knows your screen might be dealing with and so we're going to take a look at on touchdown and it by default passes in self as well as touch which is the variable that tells us all the information about what was touched where was touched and so Define on touchdown self comma touch and it knows it's looking at its widget for when it was touched all right so what we're going to do for on touchdown is we're going to treat it essentially like that rectangle we just made is a button so we're going to address that if touch that argument that's getting passed in a pre-built variable that tells us the position of the touch and we'll say if touch dot pause 0 which is the x coordinate that just got touched if it's less than self.width over 2 and touch pause touch pause one is less than self dot height over two well think about what we made that rectangle we made that rectangle in the bottom left corner so self.width over to yourself dot height over two this is telling us that we just clicked on that rectangle now since I don't know what your specific application needs all I'm trying to do is show you how you can address the on touch uh sort of functionality and you should know this is if you want it to happen when you click on it if you want to happen when you release you just use on touch up instead of on touchdown but what I'm going to say is okay if I've clicked on that rectangle let's clear out the canvas so that's getting rid of the previously existing rectangle and then we're basically just going to be copying the stuff we already have but what I'll do is I'll say I want to generate a new color so I'm going to generate a new color which will be a KIVI color so Capital C color here make sure to import it from Graphics so from kivi.graphics we now have rectangle and we have color but what I want this to be is I'm going to randomly generate a new color and it'll be Rand random dot Rand in from 0 to 255 but then I have to divide by two five five so make sure also that you have the random module imported but I'm gonna do this three times and that's going to give me an r a g and a b value from 0 to 1 that could be any color okay so that's going to be the color that I use and then the only other thing we have to do is we have to say that self.rect should be equal to rectangle where the BG color is equal to that new color we just defined and then even though we didn't have a resizing event we cleared out the canvas so what we want to do is call the self.on size function which will just give the rectangle its Dimension so because we're getting rid of the rectangle here we want to give it its position and size here okay so I know you're probably not looking for specifically this exact example but when I run this okay we get a resizable rectangle in the lower left corner if I click anywhere on the screen that isn't my rectangle it doesn't do anything but if I click in the lower left corner there you go the color res the color changes randomly and it's still resizable okay so it still has that benefit of resizability that we built in and now we just have this like random uh color generation but I can click anywhere else and it doesn't do anything all right so KIVI does have widgets built that are buttons and that's probably the easiest way to handle touchdowns because buttons are meant to be pressed but there are a lot of games and applications where things that you can click and interact with don't look like buttons so I think this is a really useful tutorial I'm certainly using it a lot in a bigger project I'm working on that we'll be doing soon on the channel so I hope you guys found it useful as always a massive thank you to my patreon supporters Dale and Phillip if you'd like to join them consider checking out the link in the description below thank you so much to everyone who leaves likes and comments and keeps coming back and watching my videos subscribes to the channel be sure to leave a comment below if you have any questions about what you saw here would like to suggest something in the future or just want to chat about KIVI or any other projects in general as always thank you so much for watching until next time bye