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__separatorGeneral
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
General

A visualization style is a collection of colors, fonts, images, and any values that are defined as style properties. When designing a visualization element, you can use these style properties only. The you have a uniform, style-dependent appearance.

An element that applies style colors and style fonts behaves according to the selected style design in each selected style. In this way, a style property, such as ‎Element basic color‎, can be blue In one style and gray in another style. In contrast, if the color of an element has a fixed value, this color is fixed even when the style is switched.

All applicable styles are consistent because they define a fixed set of style properties. Therefore, you can switch smoothly between styles in order to customize your visualization. You can preview a style to get an impression of how it behaves.

CODESYS provides different styles, for example the styles ‎Flat style‎ and ‎White Style‎.

These provided styles are installed in the visualization style repository.

The selected style that applies to all visualizations in the application is set in the “Visualization Manager” object (“Settings” tab, “Style Settings” group, “Selected style”). In addition, the “Properties” view provides its style properties when designing an element. For each element, you can assign these styles instead of fixed values.

The style is applied to all visualizations that are below an application. The settings of the “Options - Visualization Styles” dialog are also considered for a library visualization or a visualization in the POUs view.

Designing visualization elements with style properties

The set style includes style properties. These are provided in the “Properties” view of an element in the drop-down list of the “Value” column. It is checked which style properties are appropriate for which property. For example, only style properties with color definitions are available for a color assignment.

A style can have directly defined visualization element properties. If this style is used in the project, then these properties are not configurable anymore.

Requirement: A project is open with a visualization.

  1. Double-click the visualization.

  2. Select an element.

  3. Choose “View  Element Properties”.

  4. Click in the input field of a color in the window “Properties” (category “Colors”).

    The list box opens with style properties. The style colors are based on the currently selected style.

  5. Select a style property.

    The visualization shows the element according to the style.

Example

A visualization uses the style ‎CompanyStyle8‎, which defines the colors ‎CompanyRed‎, ‎CompanyBlue‎, and ‎CompanyGreen‎. An element is selected in the visualization. You can configure the element in the “Properties” view. By clicking into the value field of the “Color” property, you receive a drop-down list with the entries ‎CompanyRed‎, ‎CompanyBlue‎, and ‎CompanyGreen‎.

Switching visualization styles

When setting a style in the visualization manager, all complete styles in the repository are available for selection. It does not matter and it is not evident if a style have been derived from another style.

You can preview a style to get an impression of how it behaves.

How a visualization implements a style at runtime also depends on the display variant. For example, if a font that is defined in the style is not available, the display variant shows the visualization with a preset font.

Requirement: A project is open with a visualization.

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

    The editor opens.

  2. Click in the input field of “Selected style” (“Settings” tab, “Style Settings” group).

    All styles that are installed in the repository are listed.

  3. Mouse over a style.

    A preview of how the style is displayed appears in a new window.

  4. Select a style.

    The style is applied. The preview in “Style Settings” shows the new setting.

  5. Double-click a visualization.

    The visualization appears in the new style.

Updating versions

Requirement: A project is open with a visualization.

  1. Click “Project  Project Environment”, “Visualization Styles” tab.

    CODESYS lists all new versions of the currently used styles.

  2. Click “Set All to Newest”.

    The style is updated. Visualizations and their elements apply the new style.