Kivy Custom Mouse Cursor Example¶
GitHub link¶
AI Transcript provided by KivyWhisper¶
Hello and welcome back to Kivy School. Today we're going to be looking at a Kivy custom mouse example. What this example is going to be is about creating a custom mouse cursor in Kivy. As you can see here, I already have a custom mouse. And in this example, I have two options. I can reveal my mouse like this. You can see the mouse screen and you can see the cursor following my mouse. And you can also change the image.
So if you click here, I can change the image and it rotates between three images. So one thing that I want to show right before I explain how to do this is a Kivy Reloader showcase. And now what we're going to do is we're going to just change the size of the cursor because it's a bit small. So now I'm going to go to Ctrl S. And with Kivy Reloader, you can just live reload your Kivy app. Now you can see the cursor as it is. So this is just Clippy. And you can see again, it will reveal the mouse. And then these other two pictures are just pictures of cats.
So we have Clippy, cat one, and then two cats. And if you can unreveal the mouse and reveal the mouse. So let's get started. How are you going to do this? OK. And then one thing you want to do is to just turn off the mouse cursor. And the way to do that is just window show cursor. It's going to be a boolean. And right now it's at false. And then when I press this reveal mouse, it will reveal my mouse or unreveal it. So all we have to do is very simple. It's on release. Show cursor is not window show cursor. So it's a very big brain solution from chat GPT.
This is because if you do if foo and then bar, you're going to get an issue in KV with an indentation problem because if statements are not allowed with this extra indent. So what we're going to do is just simply do a simple one liner. I'm not going to claim credit for it. I just asked chat GPT, hey, how do you make a one line solution for a window show cursor? So this is what it is.
It's going to be just a toggle between true or false. So that's pretty cool and something you can also use with your code. So that's it. Very simple. Now, the other thing is to change the image.
So first, what you need to do is how to draw the image. So if we scroll down to the bottom, you can see that on the in it of my main app, I have a schedule once cursor show. The very first thing I do is show cursor and let me just change this. So with window canvas after I draw a rectangle and the rectangle. Here's the source and the size and the position. But if you just draw a rectangle and you don't set the cursor position, it will just be stuck. So I'm just going to comment this and then reload. I can see right here it's stuck. It's not going to move. But yeah, I'm showing the cursor rectangle. But now I also need to update the cursor position.
The one thing you have to do is to schedule this interval at 60 FPS. We're going to update the cursor position. So all you can do is again, because I've set this rectangle as cursor rectangle, I can refer to my own cursor rectangle and then update the position. So here right now I'm just updating the mouse pause and then plus or minus some number. So here I've just meddled with the numbers a bit. Now, as you can see here, if we reveal the mouse, I've made it so that the mouse click is centered on the image itself. If you reveal your end user will actually not know where the mouse is. So if it's like a different picture like this, right, if I click here, should I click left or right? Right. So that's another question.
So the way I centered it was just the mouse position because the pause is an XY. So the mouse position, you just subtract by half the size of your width and you subtract by half the size of your height. And that's how you're able to center the unique mouse cursor this way. And then that's it.
Not too crazy. So all you do to draw this is simply initially draw once right here and cursor show and then just have a schedule interval where you update the rectangle position. It's good to see it at least once. So here we're just going to change the cursor image. So all the core image really needs to take is just the path to your image.
So the way I did that was a neat trick, which is just going to be to use resource add path and then resource find. So with resource add path, all you have to do is add the path of your resources folder. So for me, it's going to be this folder right here. And this folder is just going to have cat one, cat two and Clippy. So that's what it's all about. It just adds this path. And then when you do resource find, if you go right here, your resource find, you just say resource find, find the file that you want. So I wanted to find clippy or cat one or cat two. OK, it will find it for me. So that's not the important part.
What's important part is about now that you have a core image, you can create a new texture and then use that new texture and apply it to your cursor rectangle. So the first part is just create a new texture. That is the image that you want. And the second part, this one is just for a. This is just a sanity check because if the cursor rectangle is not initialized, this will bug out the app. And then the second part is really that you just set the texture as the new texture. And then that way you can update your cursor image and then cycle image. It's just a cheap way of saying, OK, if I have clippy, I'm going to get cat one. If I have cat one, I'm going to get cat two. If I have cat two, I'm going to get clippy back. OK, so this has been Kivy School. Thank you for watching.
Article Error Reporting¶
Message @BadMetrics on the Kivy Discord.