Scaling

The scaling animation allows you to scale elements in your shape, depending on the value of a data point.

The origin for scaling is the upper left corner of the element concerned. To scale several elements at the same time, enclose them in an <g> element. If necessary, use an offset transformation to move the origin (see Translation).

Under Value you can configure the scaling parameters according to the following format:

\[[D_1,D_2],[V_1,V_2]\]

\(D_1\) and \(D_2\) represent the definition range, i.e. the lowest and highest possible value which the data point can assume, while \(V_1\) and \(V_2\) define the value range, i.e. the minimum and maximum scale factor. A scale factor of 1 corresponds to the unity transformation.

Both horizontal scaling (Scale X) and vertical scaling (Scale Y) are available as possible actions. Use two separate actions to combine both scaling directions.

Example

In the following example, the red rectangle with the white arrow is scaled from the right edge to such an extent that when the measurement value of 100 is reached, it completely covers the outer, gray rectangle horizontally.

Scale X was selected as the Action Type and [0,100],[0,2] was used as the Value.

This means that with a measurement value of 0, the scale factor is also 0, i.e. the element is compressed to 0 pixels. With a measurement value of 100, the scale factor is 2, i.e. the element is stretched to double its size. Accordingly, the element is scaled with a factor of 0.4 at a measurement value of 20.

<rect x="0" y="0" fill="whitesmoke" stroke="darkgray" width="100" height="100" />
<g id="Target" transform="translate(25,50)">
    <g transform="translate(-25,-25)">
        <rect fill="red" stroke="crimson" width="50" height="50" />
        <polygon points="10,10 40,25 10,40" fill="white" />
    </g>
</g>

scale-example-1

Measurement value: 33 → Scale factor: 0.66

scale-example-2

Measurement value: 100 → Scale factor: 2

Simulator

Once you have activated the simulator with Start Simulator, you can test the scaling animation by entering any value within the definition range in the Test Value column.