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__separatorSelect Element
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
Select Elementdl-permalink__symbolPermalink

The “Visualization Toolbox” view provides the following elements for selection:

  • All visualization elements which the set visualization profile defines.

  • Image elements for all images of the project from the integrated libraries or symbol libraries.

  • Frame elements for all visualizations of the project or from the libraries.

See the “Project Settings” for the currently set visualization profile and the currently used symbol libraries.

The elements are combined into specific categories, each of which has its own button in the “Visualization Toolbox” view. You can create new categories and assign its elements.

The elements of the categories are displayed in the “Visualization Toolbox” view as preview images. It is also possible to search for an element name.

Simply drag the preview image of the element to the desired position in the editor window. Then the configurable properties of the element are displayed automatically in the “Properties” view of the visualization editor.

Create or remove new element category

Requirement: The visualization editor is open.

  1. In the “Visualization Toolbox” view, click the _visu_icon_manage_tags button.

    the “Configure Categories and Items” dialog opens.

  2. In the dialog, click the _visu_icon_plus symbol to open the “Add Category” dialog. Note: Click the _visu_icon_minus symbol or press the [Del] key to delete the definition of a category.

  3. In the “Name” field, specify a name (example: ‎tagA‎) and click “OK” to close the dialog.

    In the “Configure Categories and Items” dialog, the new custom category ‎tagA‎ is inserted below in the tree view. It is provided with the _visu_icon_user_defined_tag symbol.

  4. Click the “Enable” option for the new category, and click “OK” to close the dialog.

    CODESYS adds a “tagA” button in the “Visualization Toolbox” view. When you click the button, all elements that are assigned to this category are displayed.

Assigning a visualization element of an element category

Requirement: The visualization editor is open. You have already created a custom category ‎tagA‎. A button labeled ‎tagA‎ is visible in the “Visualization Toolbox” view.

  1. In the “Visualization Toolbox” view, right-click an element to open its context menu.

    A context menu opens. It contains the “Add Item to Category 'tagA'” and “Add to Categories” commands.

  2. Click “Add to Category 'tagA'” and click “OK” to close the dialog.

  3. Click the “tagA” button.

    All elements are displayed which are assigned to this category, below it also the currently assigned element.