On Touch Actions are used to modify the visual appearance of your component when a user touches it. Usage is very simple: when a user touches the component, the component can change its color or text to denote the action for the end user. When the user releases their touch, the component will return to its default look.
You can modify visibility, fill, and stroke color of any object in your component. Select the object you would like to modify based on user touch and, in Properties, fill in the On Touch section:
Example:
We will create a simple button that will change the background color on touch.
- Create a new component with a rectangle inside
- Enter in the text “Press me.”
- Click on the rectangle and in Properties set the color to red in On Touch -> Fill
- When you set the fill color, a new dialog is presented:
- Save the component and insert it into a view
- Now, you can test your component.
- When a button is not pressed, it looks like this:
- When a user is pressing the button, it looks like this:
Creating Complete Component:
In the following example, we will create a simple slide bar showing the variable progress and its Min and Max values. Create a new component and draw a rectangle, as seen in the picture below. Copy the selected rectangle and apply Paste on same location to it. Set the Fill property to “none” then put the element in the background with the function Lower to the background. We have now created a frame of the scale.
Now create 3 text fields; your component will look like this:
Now fill in the Component Variables as shown in the picture below:
As you can see, we have created 3 local variables. For the tag value, you have used a variable tag; for specifying the minimum and maximum values, you have used the min and max variables.
You can make indicator out of the rectangle by resizing it according to the value read from the PLC; set the Scale animation as shown in the following picture:
We also want to show the actual value in the middle of the slide bar. Click on the text field in the middle of the rectangle, select the Anim tab in the Properties window and click on the Tag (Address) field in the Show Value section. Then, fill in the Tag field with “tag,” which corresponds to our local variable name.
As you can see, we have used one of our local variables. You can use the same variable (especially the tag type) for multiple animations/effects to achieve a better effect. We will also show the Min and Max limits of our tag. Click on the right text field, then select the Rep. tab from the Properties window and set “max” for Text in the Replacements.
Now do the same for the other text field but place the min variable there. The final component should look like this:
Save the component and test its functionality.
Testing Component
Create a new view and open it, then navigate to the Library. Select your component and press the Insert button.
Now click on the component and look at the Properties window:
In the Component section, you can see all the local variables that you have defined.
Set the Tag (address) and the Minimum and Maximum values:
Now, save the view and send to a supported device; the screen should look as follows:
