18. Kivy App - Bezier Weight

This application shows how one widget can update another widget.

---

We have to change the value in the progress bars. In the kv file, each progress bar has to be given a unique id, which will be updated by this function in the Python root class. Here The function newWeights is called by the slider, in the kv file.

---

For the app class, we give the title we want in the window. The default is the class name.

# ex18.py

from kivy.uix.boxlayout import BoxLayout
from kivy.app import App

class Ex18(BoxLayout):
    def newWeights(self, *args):
        t = args[1]
        self.ids['w0'].value = (1-t)**3
        self.ids['w1'].value = 3*t*(1-t)**2
        self.ids['w2'].value = 3*t**2*(1-t)
        self.ids['w3'].value = t**3
        
class Ex18App(App):
    def build(self):
        self.title="Weights of 4-point Bezier curve"
        return Ex18()

if __name__=='__main__':
    Ex18App().run()

---

In the kv file, two dynamic classes are defined. They are MyLabel and MyProgressBar. The common properties are defined here such as position and size. It is better only to change here, rather than in all instances.

---

The BoxLayout will be vertical. Here the BoxLayout is cleared. The rest of the kv files defines the 6 elements in the application, the 4 progress bars, t-label, and slider.

---

The first two progress bars are shown here. Note, each has a label describing them. The two progress bars have ids of w0 and w1.

---

The last 2 progress bars have ids of w2 and w3.

---

Next, the t-label is shown. The parameter t varies from 0 to 1, and indicates position on the Bezier curve. The position t=0 refers to the origin and t = 1 refers to the destination. A label like any widget has its own canvas instructions. Thus we add the background color before any other graphic instructions are called. That is the reason we chose canvas.before rather than canvas. For the text, the format is used to print a floating-point number with only 3 decimal places.

---

The slider is responsible for calling the newWeights function, inside the root class. Also, on_value, is called whenever the slider value changes. It is possible to have, on_property for different properties. These will be called by Kivy whenever the property changes. Later, we will see how to define our own properties.

# ex18.kv

<MyLabel@Label>:
    color: 0, 0, .1, 1
    pos_hint: {'x':.1}
    size_hint_x: .1

<MyProgressBar@ProgressBar>:
    min: 0
    max: 1
    pos_hint: {'x':.25}
    size_hint_x: .6
    
<Ex18>:
    orientation: 'vertical'
    canvas:
        Color:
            rgb: .9,.9,.9
        Rectangle:
            pos: self.pos
            size: self.size
    RelativeLayout:
        MyLabel:
            text: 'P1 weight'
        MyProgressBar:
            id: w0
    RelativeLayout:
        MyLabel:
            text: 'P2 weight'
        MyProgressBar:
            id: w1
    RelativeLayout:
        MyLabel:
            text: 'P3 weight'
        MyProgressBar:
            id: w2
    RelativeLayout:
        MyLabel:
            text: 'P4 weight'
        MyProgressBar:
            id: w3
    Label:
        canvas.before:
            Color:
                rgb: 0, 0, 1, 1
            Rectangle:
                pos: self.pos
                size: self.size
        text: 't: {:.3f}'.format(my_slider.value)
        size_hint_y: .5
    Slider:
        canvas.before:
            Color:
                rgb: .5, .6, 1
            Rectangle:
                pos: self.pos
                size: self.size
        id: my_slider
        padding: 100
        min: 0
        max: 1
        on_value: root.newWeights(*args)

---

Demo of App on Youtube