Vision Component Customizers

The Vision module provides a number of customizers to configure components in ways that are more complex or detailed for basic properties.

The two main customizers are the Component Customizer and the Style Customizer. These two customizers are used repeatedly for many different components. For special purpose components like the Easy Chart, Table, Tab Strip, and Multi-State Button, they have their own special customizers for you to create your own custom properties.

Component Customizers

To use a customizer:

1. Right-click on the component.
2. Choose Customizers.
3. Select the desired Customizer.

You can also select the component and click the Customizer icon in the Vision Main Toolbar located on the title bar. The following image is an example of the Customizer for the Multi-State Button component.

Expert Tip

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.

Custom Properties

In addition to the component's basic property settings, you can also create your own custom properties to enhance and add functionality to a component. You can use the custom properties like any other properties, such as with data binding, scripting, and styles. Custom properties are important for passing parameters from one window to another, especially with a popup window. Properties on the window's Root Container double as a window's parameters. For example, when you click on a Button component to open a popup window, it can pass a set of values into the window. These values are then set to the custom property on the Root Container for use on that window.

To configure a custom property:

1. Right-click on the component.

2. Select Customizers > Custom Properties.

3. Click the plus icon to add a row.

4. Enter the Name (i.e., motorNum) of the custom property and data Type. Click OK.

5. In the Property Editor, scroll to the bottom of the panel to see your custom property in blue.

   

Custom properties can be any of the basic property types, but can also be a UDT Definition. When specified, the UDT option will create a property shape that matches the shape of the UDT, allowing each member in to UDT to be represented as a separate property in the resulting custom property.

Style Customizer

Component Styles

Watch the video

Many components support the Style Customizer, which allows you to define a set of visual styles that change based on a single property. Typically, you'll have a property (often a custom property) on your component that you want to use as a driving property. The Style Customizer enables you to define many visual relationships at once, and allows you to preview them before implementing. Without the customizer, this would have to be done to each property individually.

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.

1. Drag in a Cylindrical Tank from the component palette to the window.

2. Right-click on the Cylindrical Tank and select the Style Customizer.

3. Click on Capacity > Liquid Color.

4. Click the Add Property icon.

5. Repeat this step for the Show Value and Tank Color Properties.

   

6. Click the Add icon under Styles.

7. Click the Expand icon to see the color palette for the Liquid Color.

   

8. Choose a color from the palette.

9. Repeat this step for the Show Value and Tank Color Properties.

10. 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.

1. Add a Level Indicator and open Custom Properties.

2. Click the Add icon.

3. Name the new property Severity and set it to an Integer type. Click OK.

   

4. Right-click on the component and choose Style Customizer.

5. Choose your Severity property as the driving property, and the Border and Filled Color properties as the styled properties.

   

6. Under Styles, click the Add icon three times.

7. Create three styles for the three alarm states you want to show.

8. For the first style, enter a value of -1 (not an alarm) and don't change anything else.

9. For the second, enter a value of 2 (medium alarm). Set the filled color to orange.

   

10. For the third style, enter a Value of 4 (high alarm).

    1. Click the Expand icon.
    2. Select the Animate checkbox.
    3. Click the Add icon.
    4. Set the StepDuration to 500 for both frames.
    5. For the first frame set the FilledColor to red.
    6. For the second frame, set the FilledColor to yellow.

    

11. Click OK. Notice that the styled properties you chose are now bold and have the Styles icon next to them. This is to help remind you that those properties are being driven, so if you change their values directly, your changes will be overwritten.

    

12. In the Property Editor, click on the Binding icon for the Severity custom property.

13. 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. For instance, the indicator will flash red and yellow if the high alarm 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.

1. Right-click on the Label component and choose Custom Properties.

2. Click the Add icon.

3. Name the new property State and set it to an Integer type. Click OK.

   

4. Bind that property to a discrete state Tag coming out of a PLC.

5. Next use the State property to drive its Styles configuration to make the component look different and display different text based on the value being 0, 1, or 2, like a Multi-State Indicator does. The Used Properties for this configuration include Background Color, Foreground Color, and Text.

   

6. Click OK when all style selections are complete to apply them.

   

Value Conflict

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.