Skip to content

Stop debugging like a caveman. Start using the showborder module!

GitHub Repository

AI Transcript provided by KivyWhisper

Hello and welcome back to Kivy School. Today we're going to be looking over the Kivy showborder module, why it's useful and why you should use it. And then I'll tell you what showborder does. So here we're going to go look at the LCARS app that I was making. And before I was using the shaded boxes. So let's go here to scatter. You can see what is this? This is the time, right? So that's the case. Let's go to the time button. As you can see, I was using a canvas instruction that was a rectangle of the same size, the same size and pos as the widget, right?

And so if I comment this out and then restart, you can see that the rectangle will no longer be visible, right? But I used a drawn canvas instruction to see where the widgets are. But you shouldn't do that actually. Okay. And then you will do LCARS -m showborder, right? So as you can see, the borders of all the widgets are shown, right? So this, I changed it. This is going to be a scatter widget. And then these are just the different buttons right here.

I changed this from the original prototype. It didn't have this zoom in and out feature and you couldn't move it. So just very quickly, in order to zoom this in and out, I just placed the image in a scatter widget and then I changed the scale, right? So you can probably see, where is it? This scroll zoom up or zoom down, you change the scale and then to move it around like this, you just use a scatter widget as you can see right here.

So anyways, now you can see all the buttons actually, and I don't even have to color it in. So if you go back up here and turn off the canvas instruction, let me find the time button. I'll turn it off. Then reset. And you'll see right here, you can still see the widget and you can still see where everything is. So it's very, very good.

But I'll tell you, there's one problem with this where you might still want to use shaded rectangles on your widget. And that is, let's go here into image painter -m showborder. And as you can see here, right?

So what happens if you have a white background, you obviously won't see it right. And so for there, you do have a reason to use like a colored rectangle in the background of your widget. As you can see here, this is the image painter. This was an old example. And as you can see, unless I move it in front of the colored lines, I don't see the text box. But if you go up here, suddenly you see the text box, right? So that's one thing that you should kind of think about, but it's a very rare edge case.

I think that for most use cases, show border is just really useful. All you do is -m show border and it will show you everything much easier than manually placing all these colored rectangles behind every widget and before every widget. So that's something I just want to show you. So let's go from this, from this, and from this. Now, one very quick thing is when you're using showborder, usually are debugging your app, right? So you want to also use inspector.

So I will show you how to use -m inspector, multiple modules at the same time. So from command line, you can do Python, your py file, main file, -m show border for the show border module, then -m inspector for the inspector module. You can just go like this and then run. As you can see, I still see the borders of all the widgets, but also the CRTL+E, I can also inspect everything and I can see where I'm clicking. I can get the parent and to get the parent, right?

So something very useful, although it does show the borders of the inspector module. I think it's fine. I don't think you have to worry about it. And let's go back to LCARS -m inspector like this. And as you can see, I can CRTL+E, I can inspect. So this guy is going to be my custom layout object. Let's check it out. Okay. Custom button, custom time button. Right. And then if you do parent, right, it's just the window. And then let's see if we can inspect some of these buttons. Okay.

So as you can see here, I got the custom button object, right? I got the custom button object and then you can get the parent and you get the layout. So let's see what else multiple modules way easier. Okay. Got this. I've shown the buttons and then I've shown this. All right. Well, that's it. It was just a quick one, but something that is honestly a game changer and saves a lot of time. I will tell you it'll save hours, it'll save days of your life debugging.

Thank you for watching. This has been Kivy School. Have a great day!

Article Error Reporting

Message @BadMetrics on the Kivy Discord.