Editing Visualization Styles in the Visualization Style Editor

A style is an XML file with the file extension \*.visustyle.xml. It contains a specific set of style properties. CODESYS checks the style properties in the consistency check.

You can create a new style or customize an existing style. The visualization style editor is available for this.

If you customize a style, then a new style is created as a hierarchy of styles. A hierarchy consists of at least two styles based on each other. The nesting depth is unrestricted. A hierarchy is identified simply with its top derived style. You can derive multiple different styles from one base style by extending the styles by differing style properties. This save memory and therefore should be your preferred method.

A base style does not have to be consistent for itself. Instead, you must identify it as an incomplete style. Only the top derived style must be consistent.

Example of a style hierarchy

Style Petrostyle

In a partial style, you can combine any style properties to form efficient hierarchies without having to worry about consistency. For example, you can collect all image references into one partial style. Then you derive the style and define more style properties for colors. This style is also incomplete. You derive the style again and define more style properties for its fonts. The top style is now completely.

• (1): CompanyImg is a partial style defining image references.
• (2): CompanyColor is a partial, derived style based on CompanyImg and also defines colors.
• (3): PetrolStyle is a complete, derived style based on CompanyColor and also defines a special color.
• (4): The hierarchy of styles comprises PetrolStyle, CompanyColor, and CompanyImg.

In the visualization style editor, you can open a style, define its style properties, and localize its name. If the style is consistent, then you can install it in the visualization style repository. The editor is not integrated in CODESYS. However, you can start the editor in CODESYS.

Names for style properties

A style property is an entry for a specific color, a specific font, or a specific image reference.

If this name contains a dash, then the Visualization Style Editor can sort the style properties by the prefixed terms before the dash and display them in a hierarchy. Otherwise the names can be sorted in alphabetical order or sequential order or in sequential order (as saved in the XML file). CODESYS displays the style properties in the order of names actually saved in the XML file for the style.

Example: Element-Alarm-Fill-Color

See also

• Editor ‘Visualization Style Editor’

Starting the editor in CODESYS

1. Double-click the Visualization manager object.

   ⇒

   The editor opens.

2. Click the symbol (Settings tab, Style settings group).

3. Click Open style editor from the drop-down list.

   ⇒

   The Visualization style editor opens.

Starting the editor independent of CODESYS

1. Choose Visualization Styles Editor from the CODESYS install folder in the Start menu. If you have a standard installation, then this link is located in CODESYS (the program folder for CODESYS).

   ⇒

   The visualization style editor opens.

Deriving visualization styles

Note

This is the recommended way to create a style that combines existing style properties with new ones.

1. Double-click the Visualization manager object in the device tree.

   ⇒

   The editor opens.

2. Click the symbol (Settings tab, Style settings group).

   ⇒

   A list of commands opens.

3. Choose Create and edit derived style.

   ⇒

   The visualization style editor starts and the Create a new visualization style dialog box opens.

4. Type a name.

5. Select a directory.

6. Select a base style. The default style is set in CODESYS. You can also select a style from the repository.

   ⇒

   The new style appears in the visualization style editor. The style properties from the base style are displayed yellow.

7. Add a new style property or modify an existing value.

8. Provide a version for the style and click File ‣ Save and Install.

   ⇒

   The style is installed in the repository. The memory requirement is low because only the style property added in step 7 is saved.

Copying visualization styles

1. Double-click the Visualization manager object in the device tree.

   ⇒

   The editor opens.

2. Click the symbol (Settings tab, Style settings group).

   ⇒

   A list of commands opens.

3. Choose Copy and edit style.

   ⇒

   The visualization style editor starts and the Open existing style as a copy dialog box opens.

4. Select which style should be copied (Style).

5. Type a directory in “Destination” and click OK.

   ⇒

   The new style appears in the visualization style editor. All style properties are identical to those in the copied style.

6. Type a name.

7. Add a new style property or modify the value of an existing style property.

8. Provide a version for the style and click File ‣ Save and Install.

   ⇒

   The style is installed in the repository and the style properties are identical to the added style property, except for the style property added in step 8. The memory requirement is high because the common style properties are defined in both styles.

Creating new visualization styles

1. Double-click the Visualization manager object in the device tree.

   ⇒

   The editor opens.

2. Click the symbol (Settings tab, Style settings group).

   ⇒

   A list of commands opens.

3. Click Open style editor.

   ⇒

   The visualization style editor opens.

4. Click File ‣ New style.

   ⇒

   The Create a new visualization style dialog box opens.

5. Type a name. Specify a base style.

6. Specify a directory and click OK to close the dialog box.

   ⇒

   The new style appears in the visualization style editor.

7. Add a new style property.

8. Provide a version for the style and click File ‣ Save and Install.

   ⇒

   The style is installed in the Visualization Styles Repository with the version number.

Adding a style property

Using the visualization style editor, you can edit a style to save and install as a new version.

1. Select a style property and click Styles ‣ New style (afterwards) in the Style properties tab.

   ⇒

   A new style property is added.

2. In the General tab, type a new version number in the Version setting.

3. Choose File ‣ Save and Install.

   ⇒

   The changes are saved and the style is installed in the repository as the new version.

Localizing style properties

You can assign a language-dependent name to a style property. CODESYS displays a style property by its localized name, depending on the language settings in category International Settings (menu Tools ‣ Options).

1. Translate the name of the style property into the localized language in the Localization tab.

2. Provide a version for the file in the General tab.

3. Choose Save and Install.

   ⇒

   The edited style is installed in the repository currently selected in CODESYS.

4. Update the style.

5. Set the language settings in CODESYS to the localized language.

6. Open a visualization and select an element. The style settings in its properties are displayed in the localized language.