Make elements reactive

How to bring your template to life:

Perhaps the biggest advantage of Bluepic Studio is that it gives graphic designers the ability to build reactivity into a graphic template. You can dive incredibly deep into this topic and become an expert if you want, or just learn the basics to bring your templates to life.

The key to reactivity lies in Bluepic Studios' ability to calculate properties based on expressions, rather than relying solely on static values.

This means that you can simply type an expression into the value field of any property, and if any argument, parameter, or variable used in the expression changes, the result will change as well.

If you have ever worked with Microsoft Excel, you will be familiar with the concept of expressions. It is very similar to using a mathematical formula in Excel to calculate the value of a cell based on the values of other cells, only with properties instead of cells.

Let's look at an example:

Imagine you want to place an arrow at the end of a text element, but the text content is linked to an input module and can be changed by the user. The position of the arrow cannot be static, but must be reactive to the position and width of the text:

Several things happen here at the same time:

  1. the text grows from right to left because its origin is set to center-right.

  2. the font size is automatically reduced when the text reaches the limit defined by the maximum width of the text, because the "automatic line breaks" property is deactivated.

  3. the arrow (in this case an image element containing an SVG file) is continuously positioned at a fixed distance from the left end of the text elements.

  4. the arrow is automatically reduced in size when the text is reduced in size.

All this happens automatically in response to the user's input into the text content input field.

Here is how it works:

As you can see, the X, Width and Height properties of the arrow are not static, but expressions.

In the case of the Height property, the expression only points directly to the corresponding sub-property of the text element (more on sub-properties later):

The X and Width properties however use mathematical formulas:

"SUB(A,B)" is a math-function that performs a subtraction -> SUB(A,B) = A - B

"MULT(A,B)" is a math-function that performs a multiplication -> MULT(A,B) = A * B

text2.left is a subproperty of the text element. It returns the X coordinate of the left end of the text element's content. Note that this does not refer to the left side of the bounding box, which is defined by the maximum width and height of the text element, but to the box surrounding the actual content, which is variable if the content is variable, making it a subproperty that cannot be predefined.

text2.height is a subproperty of the text element. It returns the height of the content of the text element. Note that this does not refer to the height of the bounding box, which is defined by the maximum width and height of the text element, but to the box surrounding the actual content, which is variable if the content is variable, making it a subproperty that cannot be predefined.

Step by step example:

Last updated