In the template editor, an expression calculates the value of a property, for example from an input field or from the position of another element. An expression is a calculation rule: instead of a fixed value, the property says what Bluepic calculates the value from. When one of these values changes, Bluepic calculates again. In the expression editor, you click the expression together or type it as code.
This is how it works:
- Open the expression editor for a property in the properties panel.
- Change the expression by clicking in the visual view.
- Or write it as code if you prefer typing.
If you no longer need the calculation, you turn the expression into a fixed value.
Open the expression editor
- Click the italic fx in the toolbar at the top. This is the Connect expressions tool.
- Click the element whose property you want to calculate, on the canvas or in the layers panel. The properties panel shows its properties.
- Click the property in the properties panel. The expression editor opens as a popup. The tool switches itself off afterwards.
Change the expression by clicking
The expression editor opens in the visual view. It shows the expression as blocks that you swap one at a time.
- Click the block you want to change at the top of the expression editor. The tabs Functions, Elements, Variables and Static appear below.
- Click the tab that holds the new value:
- Functions: functions, sorted into Math, Helpers, Logic, Color and Animation.
- Elements: values of your elements, for example their position and size.
- Variables: the variables of your input fields and other values such as
TIME. - Static: a fixed value, that is Number, String, Boolean or Object.
- Depending on the tab, continue like this:
- In Functions, Elements and Variables:
- Click the entry in the list.
- In Static:
- Choose the kind of value at the top.
- Enter the value.
- In Functions, Elements and Variables:
- Click Update at the bottom right. The block is now replaced, and the property shows the new result right away.
Update can't be clicked?
Update only reacts once you have selected an entry in the list that is a value itself. A group like Math is not enough. Click a function or a value inside it.
- For a new function, click each placeholder, for example
42, and replace it as in steps 2 to 4. - Click × at the top left. The expression editor closes. Your changes are already applied.
Write the expression as code
- Click the angle brackets at the top right of the expression editor. The code view opens. The eye next to them takes you back to the visual view.
- Type the expression. Bluepic applies every change without errors right away. How to write values, names and functions is explained in Expression syntax.
A red message appears at the top right?
The expression contains a typo, for example a missing bracket. As long as the message is there, Bluepic does not apply your change. Fix that spot and the message disappears.
- Click prettify at the top right if needed. The code is now spread neatly over several lines.
- Click × at the top left. The expression editor closes.
- Check on the canvas that the element looks the way you want.
To take back a change, close the expression editor and undo the step (Cmd + Z, on Windows Ctrl + Z).
Turn the expression into a fixed value
If you no longer need the calculation, replace the expression with its current result.
- Hover over the property with the expression in the properties panel. A menu opens. Value: shows the current result.
Resolve expression is missing from the menu?
The property is connected to an input field. Then the menu shows Edit Field and Delete Field instead of Resolve expression. Delete Field also turns the property into a fixed value, but it deletes the input field as well. If several input fields use the same variable, Bluepic asks first. Delete an input field has more on this.
- Click Resolve expression. The property now has a fixed value and no longer reacts to changes, for example to input fields or other elements.