Skip to main content

Editor: Visualization Style Editor

Symbol: _visu_icon_style_editor.png

Function: The editor is used for creating, deriving, editing, and localizing visualization styles. In addition, it makes it possible to check and install a style or a hierarchy of styles.

. Call:
  • In CODESYS:

    In the Visualization Manager object, on the Settings tab, in the Style Settings group, click _visu_icon_activate_style_editor_cmds.png for a list box). Click Open Style Editor there.

  • Windows Start Menu > installation folder of CODESYS > 'CODESYS' folder > Visualization Styles Editor

Menu: File

_visu_icon_new_style.png New Style

The Create New Visualization Style dialog opens.

_cds_icon_open_file.png Open

The Open dialog dialog opens.

The dialog prompts you to select a style file (format .visustyle.xml) to be opened and edited.

_visu_icon_copy_style.png Open as copy

The Open existing style as dialog dialog opens.

The dialog prompts you to select a style that is copied, saved to the target location, and opened for editing.

Close

Closes the style open in the editor.

_visu_icon_save.png Save

Saves the changes of the open style.

Save as

The Save Visualization Style as dialog opens.

The dialog prompts you to select a file to save the current settings.

_visu_icon_save_install.png Save and Install

Saves the open visualization style and installs it to the Visualization Style Repository.

Recently opened files

Lists the files for selection that were last opened.

Abort

Closes the Visualization Style Editor.

Menu: Styles

The commands affect the contents of the Style Properties tab.

_visu_icon_create_new_child_entry.png New entry (as child)

Creates another style entry as a child of the selected style property

_visu_icon_create_new_entry.png New entry (afterwards)

Creates a new style entry in the list after the selected style property

_visu_icon_move_down.png: Move Down

Moves the selected style entry down

Requirement: Sort order is flat.

_visu_icon_move_up.png: Move Up

Moves the selected style entry up

Requirement: Sort order is flat.

_visu_icon_toggle_sort_order.png Sort order

. Toggles between three sort orders:
  • Flat structure and alphabetical order

  • Flat structure and order according to the position of the entry in the XML style file

    This position also determines the position of the property in CODESYS. The property appears, for example, in the Properties view below the Values column in the list box for style properties.

  • Hierarchical structure of entries

    Requirement: The names of the style properties contain at least one dash.

_visu_icon_validate.png Check

The settings of the style properties are checked for consistency errors. This check is also performed when saving the style.

Menu: Localization

The commands affect the contents of the Localization tab.

_visu_icon_add_language.png Add Language

The dialog Add new language opens. The dialog prompts you to specify data for creating a new language column.

_visu_icon_remove_language_red.png Remove selected language

Removes the columns of the selected cell

Rename selected language

The Rename Language dialog opens. The dialog is used for renaming the column that defines the selected cell and removes all previous translations.

Table 149. Dialog Add new language

Name

Name of the new language as a language code according to ISO 639-1

Examples: de, en, es, it, fr, ja

Copy from existing

All existing language columns are available for selection. The selected language is copied with all entered translations.

<do not copy text>: The new language receives a blank translation column.



Tab: General

The tab contains the general metadata of the open style file and allows it to be edited.

Table 150. Identification

Company

Example: Xy-z GmbH

Tip

In the installed styles, CODESYS can filter by the company names specified here.

Name

Example: Style_A

Version

User-defined version number

Example: 1.1.1.1



Table 151. General Settings

Base style

Name and version of the style that the open style is based on.

Hint: The derived style properties from the base style are highlighted in yellow on the Style Properties tab.

Partial style (usable only as base for other visualization styles)

_cds_icon_checked.png: The style is identified as incomplete. Therefore, it can be used for other styles as a base style only.

Example: Style only with color definitions that derive this to many other styles.

Note: CODESYS does not check for consistency errors of an incomplete style for itself.

_cds_icon_option_deactivated.png: The style is identified as complete.

From

The Select base style dialog opens. The dialog prompts you to select a style file that is saved to the file system (and not does not have to be installed). The file is used as a base style.



Table 152. Informational

Visualization Profile

The profile is intended for informational purposes. For example, you find elements that are not preconfigured with special style entries, and information from the profile. In addition, CODESYS checks in the profile whether a required style is missing.



Tab: Style properties

The tab lists the names of the style properties with the associated values and makes it possible to edit it, even by means of the commands in the Styles menu.

The style properties can be defined for colors, fonts, images, and any values.

The style properties defined in a base style are derived and highlighted in yellow.

Name

Name of the style property.

If the 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. A name can contain more than one dash.

Value

Value that is assigned to the style property.

Type

Data type of the style property; selected from a list box.

Note

This is possible and necessary only for specific style properties with a data type that is not implicitly defined.

Attribute

hide: The associated style property is not listed in the list boxes in CODESYS.

Used by

Visualization element that can be configured with this style property. Cannot be edited.

Comment

Example: Special setting for bar display

Del

Removes the selected row.

Tab: Localization

The tab makes it possible to translate the names of the style properties into other languages.

Name

Lists the name of the style properties as they are defined on the Style Properties tab

<language>

Identification of the language name (as language code according to ISO 639-1) in which the style property name should be translated