34. Drawing App

Unlike the previous widget applications, here widgets are added dynamically. If widgets are to be added dynamically, at run-time, depending on user interaction, they can only be added in the Python file.

---

Besides the App class, the Widget and RelativeLayout classes are imported. The Widget class is used for the ColorTriangle widget. The root is based on RelativeLayout.

---

This is the first half of the root class. Whenever a click is detected, the on_touch_down function is called by Kivy. Here we create an instance of the widget, set its position, and add the widget so it may be displayed.

---

When touch, or mouse, is dragged, on_touch_move is called by Kivy. We use the same code to add a ColorTriangle.

---

After creating a subclass of the App class, it has to be run(). We do not have to put the run code in the if __name__ is equal to '__main__': block, if we understand that we will only run the Python file directly and not import it. It does not hurt to have the condition though, as it results in more readable code.

# ex34.py

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.relativelayout import RelativeLayout

class ColorTriangle(Widget):
    pass

class Ex34(RelativeLayout):
    def on_touch_down(self, touch):
        ct = ColorTriangle()
        ct.center = touch.pos
        self.add_widget(ct)

    def on_touch_move(self, touch):
        ct = ColorTriangle()
        ct.center = touch.pos
        self.add_widget(ct)
        
class Ex34App(App):
    def build(self):
        return Ex34()

Ex34App().run()

---

In the kv file, we import the random module as the alias rnd. Since the widget will be added to a RelativeLayout, we have to put the size_hint to None, None so it does not use all available window space, to draw the widget, but rather use the specific size, provided here.

---

Finally in the canvas instructions, we set a random color, and then send it triangle coordinates. We can not fix the triangle coordinates, as that will always draw the widget at a specific place, on the window. We have to refer to self variables as they are changed at each instance.

---

For the root, we set a background color.

# ex34.kv
#:import rnd random

<ColorTriangle>:
    size_hint: None, None
    size: 25,50
    canvas:
        Color:
            rgb: rnd.random(),rnd.random(),rnd.random()
        Triangle:
            points:
                (self.x,self.y, self.x+self.width,self.y,
                self.x+self.width/2,self.y+self.height)
            
<Ex34>:
    canvas:
        Color:
            rgb: .9,.8,1
        Rectangle:
            size: root.size
            pos: root.pos
    
        

---

This is a particular result. Since this is a painting application, the total numbers of widgets, is not known initially.

---