To create complex and feature-rich components, you need to enter complex formulas instead of simple variables. You can use functions anywhere you like: inside animations, instead of constants, or as a text replacement in the text fields.
Formulas are evaluated with JavaScript, so you can enter any formula that is a valid JavaScript expression. You can also include any of the Component Variables that you have defined.
To show the functionality, we will extend our example by implementing the scale along the slide bar we have just created.
- Open the slide bar created in the previous chapter and adjust as follows:
- Delete the Min and Max fields and stretch the blue rectangle, including the frame. After that, insert additional lines with the Drawing-Line tool to divide the rectangle into thirds. With Transforms -> Order -> Lower to background send both lines and the frame into the background
- Now insert additional text fields.
For each text field we need to specify the Text in the Replacement in the Rep. tab:
- Left text field: (min).toFixed(1)
- Second text field (from left): ((min+max)/3+min).toFixed(1)
- Second text field (from right): (2*(min+max)/3+min).toFixed(1)
- Right text field: (max).toFixed(1)
The left text field will show the value of the variable min.toFixed(x), which is a function that rounds the result to x decimal places. In our case, the value will be formatted to show one decimal place.
The second text field from the left should show 1/3 of the scale; therefore, we have used the formula min+(min+max)/3 to get 1/3 of the scale. We will use the toFixed(1) function to round the result.
The other two text fields are similar to those two; we can add units and a label to our component to finish:
To use the Label and Units text fields, we need to create two new variables. Both will be of the type ‘string’. The first variable will be named label, and the second will be named unit. For the text field label, add Text Replacement equal to the variable label. For Units text field, add Text Replacement equal to variable units. Finally, click on the Save button to see the changes.
