Applying Visualization Styles

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.

Note

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

  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.

  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

  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.

See also