When you create a new component or you would like to modify an existing one, you can simply edit it. To do so, please select the component you would like to edit and click on the edit button.
The Graphical designer opens, and you can design your component.
As you can see, the GUI Designer is exactly same as when you design your view. You can use all the functions you are used to. There is a new window: it is the Component Variables Window.
Component Variables #
This window contains all variables that control the visual appearance and behavior of the component. All variables you create here will be presented to the user as properties.
In the component variables window, you define all variables by specifying a name, short description, and type for each variable. These variables can contain tag values read from the PLC, color, and fill values for different elements, calculation results, etc.
Each component can have as many local variables as you need. You have to save your progress after the addition of each new variable by clicking on Save in the tab toolbar. The Color button opens the color palette when an appropriate type of variable is selected.
Each local variable has following properties:
| Property | Description |
| Variable | Name of the variable as internal value: it is used as a reference in animations and properties of your component. |
| Name | Name of the variable as seen by the user: this will be shown in the component properties. |
| Desc | Description of the variable: description is visible as a tooltip when the user hovers over the name of the variable. |
| Value | Variable default value: for tag type variable, please leave empty. |
| Property | Description |
| Type | Supported types of variables are:
1. Tag 2. String 3. Int 4. Double (Float) 5. Color 6. Boolean 7. Object 8. Combo Box |
You can refer to the local variable anywhere in the animations, effects, or properties across the edited component.
Example #
To explain how to use Component Variables, we will present you with a simple example. We will animate a handle of a gauge.
- Select a handle of the gauge
- Fill in the variables for rotate animation as follows:
- Create the corresponding variables in the Component variables window
- Save
The complete process is shown in the following picture. You can see how we used the component variables directly in the Animation fields.
Now return to the view and test the new component. To do so, open your view, click on the Components Icon in the toolbar, and select your component. After pressing the Insert button, your component should be added to the view.
In the Properties window you can see the parameters of the component (e.g. the variables you have defined in the component variables window) – the name of the component variable “Tag”, Min and Max.
- TIP: To check if the tag address in the animation has been changed, right-click on the component and click on Enter group. Select the handle again, open its properties in the Properties window, and look at the Rotate animation.
You can see that the tag address used for this animation has changed to the requested value.