Have you ever wonder where did a Widget
go in Kivy?
For efficiency reasons, the Kivy basic widgets are meant to be as simple as possible, and this is why they have no background colour or borders. Then, it is basically impossible to tell where they are by just observing the screen. The feature is good (efficiency first) but sometimes it makes it very difficult to tell what is happening when things didn't go as we expected.
Since there is no WYSIWYG (What You See Is What You Get) available for Kivy, and hopefully never : D (because they generate horrible code) There is already a WYSIWYG: it is called Kivy-Designer (I will tell you about it as soon as I get to use it). However, most of us just prefer to do it ourself because we believe we are able to produce better code and be in complete control of it.
In this case, what can we use something instead for debugging? You can use the inspector (see the comment by Ben). The problem persist in the sense that you don't have a constant whole picture of what is happening. So, here is my tip to know have a better understanding in the invisible widgets Kivy world.
Let's start looking at the codes to illustrate the problem. The first one is the main.py
:
from kivy.app import App from kivy.uix.floatlayout import FloatLayout class Widgets (FloatLayout): pass class WidgetsApp(App): def build(self): return Widgets() WidgetsApp().run()
There shouldn't be anything to explain there, but you can always ask me. Here is the widgets.kv
:
<Widgets>: AnchorLayout: anchor_x: 'right' anchor_y: 'bottom' GridLayout: cols: 3 size_hint: .6,.6 Label: StackLayout: orientation: 'lr-tb' Widget: size_hint: .2,.2 Button: size_hint: .3,.3 text: "how?" Widget: Widget:
And here it a resulting screenshot:
The question is how did that button get there? At this point, you probably would prefer to take a pencil and try to sketch the small mess I did in the code. It would be nice if we could draw a Line
at the border of the widgets using the Canvas
. You probably don't want to go Widget
by Widget
adding the necessary instruction. Let's then redefine the Widget
class rules. I just added the <Widget>
to the widgetst.kv
file:
<Widget>: canvas.after: Line: rectangle: self.x+1,self.y+1,self.width-1,self.height-1 dash_offset: 5 dash_length: 3 <Widgets>: AnchorLayout: anchor_x: 'right' anchor_y: 'bottom' GridLayout: cols: 3 size_hint: .6,.6 Label: StackLayout: orientation: 'lr-tb' Widget: size_hint: .2,.2 Button: size_hint: .3,.3 text: "how?" Widget: Widget:
Here is the resulting screenshot:
I hope you think it is neat. It was my little inspiration moment of the year. I just took advantage of inheritance and the Kivy rules to overwrite the base class of all widgets.
What is important is the concept. So, here it is an extra example. What happen if you want to know where is one type of widgets? For example, let's say a the StackLayout
instances:
<Widget>: canvas.after: Line: rectangle: self.x+1,self.y+1,self.width-1,self.height-1 dash_offset: 5 dash_length: 3 <StackLayout>: canvas.after: Color: rgb: 1,0,0 Line: rectangle: self.x+1,self.y+1,self.width-1,self.height-1 Color: rgb: 1,1,1ot <Widgets>: AnchorLayout: anchor_x: 'right' anchor_y: 'bottom' GridLayout: cols: 3 size_hint: .6,.6 Label: StackLayout: orientation: 'lr-tb' Widget: size_hint: .2,.2 Button: size_hint: .3,.3 text: "how?" Widget: Widget:
Please note that in this case I didn't use the dash attributes of line. I also used a different color, so it is easy to tell where the
I hope you find this as helpful as I have found for programming my interfaces. Continue Kivying!
Althought I tend to agree with your opinion on WYSIWYG designers in general, there is a Kivy Designer currently in the Alpha phase of development. In fact a Google Summer of Code student made a lot of improvements to it and committed the code just last week.
Another good way to debug your widgets is to use Kivy Inspector. The easiest way to use Inspector is to start your program like ‘python main.py -m inspector’ and then open and close the inspector with ‘Ctrl+e’.
Thanks Ben, I was not aware of the existence of any of them.
Then come join the IRC channel where many of the core Kivy devs hang out way too often! I learn something new from them every day. #kivy on Freenode.
Yes, you can use the inspector: python main.py -m inspector, then type control+e, and it will open it. You can inspect almost every widget in your app easily 🙂
Thans, it is very useful
Your blog has helped me several times now. Thank you.
Thank you very much. I have a list of blog posts that I want to write about, but unfortunately I don´t find the time lately.
2016, but still awesome solution!
2017, still rocks! Helped me a bunch.