Often, a Customizer works as a user-friendly interface to one or more expert properties. For example, the Easy Chart Customizer modifies the contents of the pens, tagPens, calcPens, axes, and subplot dataset properties. This means you can also use property bindings and scripting to modify the values of these expert properties at runtime, giving you the ability to dynamically perform complex manipulations of components.
Configuring the Style Customizer
Some components have styles already set up, while others do not. The default styles help users get started, but these properties can be further modified if desired. The following example configures a Cylindrical Tank component that already has a style defined. There are four driving properties on the component where styles can be configured: Capacity, Data Quality, Value, and Visible.
- Drag in a Cylindrical Tankfrom the component palette to the window.
- Right-click on the Cylindrical Tank and select the Style Customizer.
Click on Capacity > Liquid Color.
Click the Add Property icon.
Repeat this step for the Show Value and Tank Color Properties.
Click the Addicon under Styles.
Click the Expandicon to see the color palette for the Liquid Color.
- Choose a color from the palette.
- Repeat this step for the Show Value and Tank Color Properties.
- Click OK to save your updates.
Configuring Custom Properties
Below is an example of how to use a custom property to configure the appearance of a Level Indicator component by changing the fill color based on the alarm state of the tank's temperature.
- Add a Level Indicator and open Custom Properties.
- Click the Add icon.
- Name the new property Severity and set it to an Integer type. Click OK.
- Right-click on the component and choose Style Customizer.
- Choose your Severity property as the driving property, and the Border and Filled Color properties as the styled properties.
- Under Styles, click the Add icon three times
- Create three styles for the three alarm states you want to show.
- For the first style, enter a value of -1 (not an alarm) and don't change anything else.
- For the second, enter a value of 2 (medium alarm). Set the filled color to orange.
- For the third style, enter a Value of 4 (high alarm).
- Click the Expand icon.
- Select the Animate checkbox.
- Click the Add icon.
- Set the StepDuration to 500 for both frames.
- For the first frame set the FilledColor to red.
- For the second frame, set the FilledColor to yellow.
- Click OK. Notice that the styled properties you chose are now bold and have the Styles
- In the Property Editor, click on the Binding icon for the Severity custom property.
- Bind it to the tank temperature tag's Alarms.HighestActivePriority property.
Now, when the alarm state for the tank's temperature changes, the color of the indicator will change based on the settings in the Style Customizer. In this imageFor instance, the indicator flashes will flash red and yellow because if the high alarm was is triggered.
Below is another example to demonstrate the possibilities of customization by using Custom Properties and the Styles feature together to transform the Label component to appear more like the Multi-State Indicator. The Label component initially displays just a string, however you change the foreground color, background color, and border to make it even more functional.
- Right-click on the Label component and choose Custom Properties.
- Click the Add icon.
- Name the new property State and set it to an Integer type. Click OK.
- Bind that property to a discrete state Tag coming out of a PLC.
- Next use the State property to to drive its Styles configuration to make the component look different and display different display different text based on the state value being 0, 1, or 2 (maybe for a Hand/Off/Auto indicator).
, like a Multi-State Indicator does. The Used Properties for this configuration include Background Color, Foreground Color, and Text.
- Click OK when all style selections are complete to apply them.
You can bind a property that is already being used by a style, but a warning icon will appear on the property to indicate there is a conflict between the binding on the property and the style on the component. As a general practice, only the style or binding should write to the property, not both.