dl-breadcrumbs__homedl-breadcrumb-item__separatorConfiguration and programmingdl-breadcrumb-item__separatorProgramming with CODESYSdl-breadcrumb-item__separator...dl-breadcrumb-item__separatorCODESYS Visualizationdl-breadcrumb-item__separatorDesigning a visualization with elementsdl-breadcrumb-item__separatorAssigning a color
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
Assigning a colordl-permalink__symbolPermalink

You configure the color of a visualization element either statically by means of the “Color” property, or dynamically by assigning an application variable by means of the “Color variables” property. Depending on the element, color assignments are also available in other properties. For example, for the font color, this is provided in the “Text” property of a labeled element.

For the static assignment of a color value, you can always use the color dialog in the properties editor, which provides color palettes to choose from.

You can specify the color as a style color. Style colors are color names for color definitions from the actively applied style. When configuring an corresponding property, you are provided with a list of available style colors. We recommend that you use style colors because then you can change colors centrally by means of a style selection or a style customization. You can also open the “Color” dialog to select a value from color palettes.

In addition, you can define the fill color of an element as a “Gradient”. Then the color changes linearly, radially, or axially from the initial color to the final color. You configure the “Gradient setting” in the “Gradient Editor” dialog.

Designing a visualization element with a style color or a fixed color value

NOTICE

NOTICE
NOTICE
NOTICE

NOTICE

NOTICE

A color assignment with style color allows for easy global color changes.

Requirement: The visualization editor is open.

  1. Insert some ‎Rectangle‎ elements.

  2. Select an element.

    The “Properties” view is active.

  3. Click in the “Colors  Normal state  Fill color” property.

    A list box and the _cds_icon_button_threedots button appear.

  4. Assign a style color to the rectangle. For example, select “Elementfillcolor” from the list box.

  5. Define the degree of transparency in the “Colors  Normal state  Fill color  Transparency” property. Use the slider to select the value “136”.

  6. Select another rectangle. Click in the “Colors  Normal state  Fill color” property.

    A list box and the _cds_icon_button_threedots button appear.

  7. Assign a fixed color value to the rectangle. Click _cds_icon_button_threedots to do this.

    The “Color” dialog opens.

  8. Select a standard color or “Define Custom Colors” to fine-tune your selection. Then click “OK”.

    The color is set as a fixed value. The color is displayed as a small rectangle. The RGB values are also indicated next to it.

  9. Click in the “Colors  Normal state  Fill color  Transparency” property.

  10. Use the slider to select the value “136”.

    The color is semitransparent.

Designing a visualization element with a color gradient

Requirement: The visualization editor is open.

  1. Drag a “Rectangle” element to the visualization.

  2. Select the “Colors  Use gradient color” property.

  3. Click in the “Colors  Gradient setting” property.

    The “Gradient Editor” dialog opens.

  4. Define the color gradient for the element:

    • “Gradient type”: “Radial”

    • “Standard radial”: “Center”

    The fill color of the element changes radially from white to black.

    _visu_img_viscolor_gradient

Configuring a visualization element for color animation

The “Color variables” property, which certain elements may have, is used for the color animation of the element. If you assign a variable there, then you can program color changes in the application code or configure a user input that results in a color change.

You can see an example in the "Animating Visualization Elements" chapter.