Skip to main content

Editing Visualization Styles in the Editor

A style is an XML file with the file extension *.visustyle.xml. It contains a specific set of style properties which are automatically checked for consistency.

You can create a new style or customize an existing style. The Visualization Style Editor is provided for this purpose.

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

For more information, see: Entries in the Visualization Style

Example of a style hierarchy

Example 58. 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.png

  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 Development System.

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 Development System

  1. Double-click the Visualization Manager object.

    The editor opens.

  2. On the Settings tab, in the Style Settings group, click the _visu_icon_activate_style_editor_cmds.png symbol.

  3. Click Open Style Editor from the list box.

    The Visualization Style Editor opens.

Starting the editor independently of CODESYS

  • Choose Visualization Style Editor from the CODESYS install folder in the Start menu. If you have a standard installation, then this link is located in the installation folder: CODESYS.

    The Visualization Style Editor opens.

Deriving visualization styles

Tip

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

Procedure. 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. On the Settings tab, in the Style Settings group, click the _visu_icon_activate_style_editor_cmds.png symbol.

    A list of commands opens.

  3. Click Create and Edit Derived Style.

    The Visualization Style Editor opens and the Create New Visualization Style dialog opens.

  4. Specify 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. On the Settings tab, in the Style Settings group, click the _visu_icon_activate_style_editor_cmds.png symbol.

    A list of commands opens.

  3. Click Copy and Edit Style.

    The Visualization Style Editor opens with the Open Existing Style as Copy dialog.

  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. Specify 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. On the Settings tab, in the Style Settings group, click the _visu_icon_activate_style_editor_cmds.png symbol.

    A list of commands opens.

  3. Click Open Style Editor.

    The Visualization Style Editor opens.

  4. Click File → New Style.

    The Create New Visualization Style dialog opens.

  5. Specify a name. Specify a base style.

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

    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. On the Style Properties tab, select a style property and click Styles → New Style (Afterwards).

    A new style property is added.

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

  3. Click 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 Tools → Options in the International Settings category.

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 on the General tab.

  3. Click 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.

: