Kivy Pixel Art Editor Proof of Concept + Android version¶
GitHub link¶
AI Transcript provided by KivyWhisper¶
Hello and welcome back to Kivy School. Today we're going to be looking at this pixel editor proof of concept. This is not my concept. It was something I looked at on the Kivy Discord. Okay, and it's by Jean-Jose and then you can look at it later. Basically, it's something about where they're trying to fix their pixel editor, like for as a first Kivy app, and I helped work on it and now I'll show it to you guys.
So what we're going to do is, first we're going to see how this pixel editor works and it's very simple. You just click and a pixel shows. You click and a pixel shows, right? And another thing too is that you can drag it. So we can make like a smiley face like here. And that's pretty much it, right? So now let's look at the mechanics of how it works. So one thing that we got to do is look at the events, right?
So here's a pixel event and then you can see there's a touchdown event. And if you collide the point, then they start placing the pixels around, right? And you can see right here, another thing that you can look at is the pixel itself, right? So the pixel right now has an RGBA color of 0.4, 0.6, 0.6. Let's say you want to change the color, right? You can come here and then you can go 0.7, 0.1, 0.3. And then we can play it again and then look at this. It's a different color. It's more red now, right? So that's another thing. And then the other events really that's important is onTouchMove, right? Okay. And as you can see here, these are the pixel editor events, right?
This is going to be the event and this is the action. And so onTouchDown, what they do is they just place pixels at your cursor location. Then onTouchMove, you also keep placing pixels at cursor location. Then onTouchUp, you stop placing pixels. So that's just a little bit of like, just to think about how to create this pixel editor app. And then one last thing I'm going to show you is just we can look at the events themselves, right? So I said that there was going to be a touchdown. You can see onTouchDown, right?
If collide point, then you'll put in a pixel, right? And then if there's a touch move, let's check touch move. TouchMove, if collide point, you're going to have to place pixels and you'll have to place them at the correct spot because these pixels are aligned on a grid, right? So that's the difference between this example and on ImagePainter example. On this example, because the pixels are on a grid, you can't keep placing pixels everywhere. They're only on specific coordinates in your pixel grid. So that's one difference between this example and ImagePainter example.
Then the last example is going to be onTouchUp, stop placing pixels. But I think all you have to do is stop placing pixels. And then here, you know, the coordinates are empty. The pixels are empty. Why? Because you don't have to place any more pixels. And so that's it. This is a quick example of a simple pixel editor app. It's going to be like this. You can draw on it. Then even if you expand, right, it'll still work. Right. You can even actually get more canvas. Right. So pretty sick. Pretty neat.
It's a cool example, just something to show that Kivy, you know, is pretty powerful. And one last thing I'd like to show you is progress on Kivy Reloader. So I got the Pixel Editor Proof of Concept to work on my Android phone. So we can do Python main.py running from WSL.
And you can see that it also runs on my Windows machine from WSL. So you can see that part one. Then part two will be we'll do Kivy Reloader run, compile, debug and live stream. And it will just compile for a little bit, then upload to my phone. So I'll be back. OK.
And as you can see, Kivy Reloader is running on my Android phone and the Pixel Editor is also on my phone. And as you can see here, I'm going to draw using my mouse or I can draw using my fingers on my Android phone. Anyways, this has been Kivy School. Thank you for watching. Have a great day. Bye.
Article Error Reporting¶
Message @BadMetrics on the Kivy Discord.