Tutorial EzLang Position Maths

When setting the 'x' or 'y' properties, it is possible to refer to other widgets' properties and even perform maths on them. Any mathematical expression using the following symbols is allowed: '+', '-', '*', '/', '(', ')'. In between these operators, you can use actual numbers (1, 3.14, etc.) and references to other properties. When a referenced property changes, it will trigger an update automatically.

First, we'll look at an example of simply binding the 'y' property of one widget to another, without using math. If you need to refresh your memory on how to reference properties, we discussed it here:

- <MyLabel@Label>:
    text: My text
    auto_scale: true, true
    border: true

- Layout:
    mode: float
    border: true
    - MyLabel:
        id: label_1
        pos: 5, 5
        auto_scale: true, true
    - MyLabel:
        pos: 15, parent.label_1.y
        auto_scale: true, true

Now let's use maths to make the label y position a fixed amount below the other label y:

- <MyLabel@Label>:
    text: My text
    auto_scale: true, true
    border: true

- Layout:
    mode: float
    border: true
    - MyLabel:
        id: label_1
        pos: 3, 3
        auto_scale: true
    - MyLabel:
        x: parent.label_1.x
        y: parent.label_1.y + 5
        auto_scale: true

You can use as many numbers or references to other properties as you want in these formulas. The only restriction is that the other properties should also be usize. To show this, let's look at a more complex example. We want a slider widget, and a label widget that hovers above the slider widget handle. To accomplish this, we need to bind the 'x' property of the label to be equal to ratio of the slider value. In other words, if the slider is 75% towards its maximum value, we need the label 'x' property to be 75% of the slider width. Let's look at how to do this:

- Layout:
    mode: float
    - Label:
        id: my_label
        text: parent.label_slider.value
        x: ( parent.label_slider.width - 1 ) * (parent.label_slider.value / (parent.label_slider.max - parent.label_slider.min))
        y: 0
        auto_scale: true, true
    - Slider:
        id: label_slider
        pos: 0, 1
        min: 0
        max: 100
        step: 5
        value: 50
        auto_scale: true, true

Continue

The general tutorial continues with: EzLang Manual Position.