dl-breadcrumbs__homedl-breadcrumb-item__separatorConfiguration and programmingdl-breadcrumb-item__separatorProgramming with CODESYSdl-breadcrumb-item__separator...dl-breadcrumb-item__separatorCODESYS Visualizationdl-breadcrumb-item__separatorApplying Visualization Stylesdl-breadcrumb-item__separatorEditing visualization styles in the visualization style editor
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
Editing visualization styles in the visualization style editordl-permalink__symbolPermalink

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.

_visu_img_partial_style

  • (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‎

Starting the editor in CODESYS

  1. Double-click the “Visualization Manager” object.

    The editor opens.

  2. Click the symbol _visu_icon_activate_style_editor_cmds (“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

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

Starting the editor in CODESYS and deriving styles

Requirement: CODESYS is open with a project containing a visualization.

  1. Double-click the “Visualization Manager” object in the device tree.

    The editor opens.

  2. Click the symbol _visu_icon_activate_style_editor_cmds (“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

Requirement: CODESYS is open with a project containing a visualization.

  1. Double-click the “Visualization Manager” object in the device tree.

    The editor opens.

  2. Click the symbol _visu_icon_activate_style_editor_cmds (“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

Requirement: CODESYS is open with a project containing a visualization.

  1. Double-click the “Visualization Manager” object in the device tree.

    The editor opens.

  2. Click the symbol _visu_icon_activate_style_editor_cmds (“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.

Requirement: The visualization style editor is open with a style.

  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”).

Requirement: The visualization style editor is open with a style.

  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.