zenon manual

Styles
v.8.20
© 2020 Ing. Punzenberger COPA-DATA GmbH

All rights reserved.

Distribution and/or reproduction of this document or parts thereof in any form are permitted solely
with the written permission of the company COPA-DATA. Technical data is only used for product
description and are not guaranteed properties in the legal sense. Subject to change, technical or
otherwise.
Contents

1 Welcome to COPA-DATA help ............................................................................................................... 4

2 Styles ............................................................................................................................................................. 4

3 Style types .................................................................................................................................................... 5

3.1 Rounded corners...............................................................................................................................................6
3.2 Element border ..................................................................................................................................................7
3.3 Fill ............................................................................................................................................................................7
3.4 Glow .......................................................................................................................................................................8
3.5 Padding.................................................................................................................................................................9
3.6 Line .........................................................................................................................................................................9
3.6.1 Trend element ........................................................................................................................................................ 10
3.7 Borders and shadows ................................................................................................................................... 10
3.8 Scale .................................................................................................................................................................... 11
3.9 Text ...................................................................................................................................................................... 11
3.10 Universal slider ................................................................................................................................................ 12
3.11 Value display.................................................................................................................................................... 13
3.12 Time representation...................................................................................................................................... 13

4 Create new style group and new style................................................................................................ 14

4.1 Toolbar and context menu detail view .................................................................................................. 15

5 Extracting style and incorrect validation.............................................................................................16

6 Administer styles .......................................................................................................................................18

6.1 XML export and XML import ..................................................................................................................... 20

7 Linking styles and style groups .............................................................................................................21

7.1 Styles and style groups from the global project ................................................................................ 23
7.2 Context menu Elements .............................................................................................................................. 23
7.3 Replacing or deleting links ......................................................................................................................... 25
7.4 Limitations ........................................................................................................................................................ 25

8 Style selection dialog .............................................................................................................................. 26

Welcome to COPA-DATA help

1 Welcome to COPA-DATA help

ZENON VIDEO TUTORIALS

You can find practical examples for project configuration with zenon in our YouTube channel
(https://www.copadata.com/tutorial_menu). The tutorials are grouped according to topics and give an
initial insight into working with different zenon modules. All tutorials are available in English.

GENERAL HELP
If you cannot find any information you require in this help chapter or can think of anything that you
would like added, please send an email to documentation@copadata.com.

PROJECT SUPPORT
You can receive support for any real project you may have from our customer service team, which
you can contact via email at support@copadata.com.

LICENSES AND MODULES

If you find that you need other modules or licenses, our staff will be happy to help you. Email
sales@copadata.com.

2 Styles
Styles make it possible to do the following with graphic properties of screen elements:
 Extract in frames of style groups
 Administer in style groups
 To assign them to other elements

Styles are administered in the local project and the global object. When extracting a style group from
an element, it is possible to select whether the style should be saved in the local project or the global
project.

4 | 28
Style types

STYLE GROUPS
When extracting styles, all supported design properties of an element are extracted and saved in a
style group.

PROJECT MANAGER CONTEXT MENU

The Styles node in the project manager has a context menu. This has the following content:
Symbol/Command Description

Create new Style group Allows the creation of an empty style group. The newly-added
style group is:
 Named "Style Group" by default
 Shown at the end of the list
 Selected automatically

The function can also be executed with the tool bar.

Editor profile Allows the assignment of editor profiles.

Export all as XML... Exports all entries as an XML file.

Import XML Imports entries from an XML file.

Help Opens online help.

Also, for multi-user projects:

 Update local version: Updates the local version.
 Enable changes: Enables changes.
 Accept changes: Accepts changes made.
 Discard Changes: Rejects changes made.

3 Style types
You can create the following styles and link them to Static elements as well as Dynamic elements.
Not every property is available for every element:

Property Static elements Dynamic elements

Truncations (on page X Button only

6)

5 | 28
Style types

Property Static elements Dynamic elements

Element border -- X

Fill (on page 7) X X - except Switch

Glow (on page 8) X X

Padding X Universal slider only

Line (on page 9) X - except Static text Trend element only

Borders and shadows X X

(on page 10)

Scale -- X

Text (on page 11) X X

Value display -- X

Time representation -- Clock only

Key:
 X: available

 --: not available

3.1 Rounded corners

The Rounded corners style type is available for all elements that support rounding.

The Rounded corners style type covers the following properties:

 Proportional
 All x [%]
 All y [%]
 Left/top x [%]
 Left/top y [%]
 Right/top x [%]
 Right/top y [%]
 Right/bottom x [%]
 Right/bottom y [%]
 Left/bottom x [%]
 Left/bottom y [%]

6 | 28
Style types

3.2 Element border

The element border style type is available for all elements that support element borders.

The Element border style type covers the following properties:

 Element border
 Border color
 Transparency border color [%]

3.3 Fill
The Fill style type is available for all elements that support fill.

The Fill style type covers the following properties:

 Property group Fill
 Fill pattern
 Fill color
 Transparency of the fill color [%]
 Gradient color
 Transparency gradient color [%]
 Property group Color gradient
 Color gradient
 Invert color gradient
 Offset [%]
 Angle [°]
 Property group Graphics File
 Predefined graphics
 Graphics File
 Graphic size
 GIF animation always
 Property group Bar fill
 Explicit

If a color gradient is configured in the filling style, the fill color is used for coloring with elements that
do not support color gradient.

7 | 28
Style types

LIMITATIONS
For a project with the Windows CE project property activated or the Windows basic setting for the
Graphics quality property, the following is applicable:
 Only corners, circles and segments of a circle and have a gradient color.
 The gradient color can only be defined using the properties for brightness values.
 The properties of the Color gradient group are deactivated for all elements when compiling.
 Transparencies are deactivated.

COLOR SETTINGS
The following is applicable for color properties:
 Static colors: These are always saved in the style directly.
 Color palettes: Either colors from color palettes from the local project or the global project
can be used; in doing so:
 The color palettes should be in the same project as the one in which the style is created
 If there are color palettes in both projects, the colors of the global projects are
overwritten by the colors of the local project

Hint
Use color palettes either from the local project only or from the global project
only and create the styles in the corresponding project.

3.4 Glow
The Glow style type is available for all elements.

The Glow style type covers the following properties:

 Activate
 Transparency [%]
 Spread [pixel]
 Coloring
 Color

8 | 28
Style types

3.5 Padding
The Padding style type is available for all elements that support padding.

The Padding style type covers the following properties:

 Left [pixels]
 Right [pixels]
 Top [pixels]
 Bottom [pixels]

3.6 Line
The Line style type is available for all static elements that support lines.
Exception: Static text.

The Line style type covers the following properties:

 Subgroup Representation
 Line width [Pixel]
 Line type
 Subgroup Fill
 Line color
 Transparency line color [%]
 Subgroup End of line
 Start type
 End type
 Size

COLOR SETTINGS
The following is applicable for color properties:
 Static colors: These are always saved in the style directly.
 Color palettes: Either colors from color palettes from the local project or the global project
can be used; in doing so:
 The color palettes should be in the same project as the one in which the style is created
 If there are color palettes in both projects, the colors of the global projects are
overwritten by the colors of the local project

9 | 28
Style types

Hint
Use color palettes either from the local project only or from the global project
only and create the styles in the corresponding project.

3.6.1 Trend element

Behavior of the trend element when linking line styles:
 Each curve can be linked to a line style.
 If a style group is linked, the following is applicable:
 The line styles are linked in the same order as they are arranged in the list view.
 If there are less styles than curves present, the other curves are not linked to any styles.
 Individual styles can also be linked to individual curves.
Individual styles can replace group styles.
 If a curve is deleted, the following is applicable:
 With group styles, the next curve adopts the style of the deleted curve.
Example: Curve 1 is deleted. Curve 2 becomes Curve 1 and takes on the group style of
Curve 1.
 With individual styles, the line style is retained by the curve.
Example: Curve 1 is deleted. Curve 2 has an individual style. Curve 2 becomes Curve 1,
the linked line style is retained.
 With multiple linking (on page 21) by means of Drag&Drop, the line styles are linked in the
order of selection.

3.7 Borders and shadows

The borders and shadows style type is available for all elements.

It includes the following properties:

 Border type
 Border/shadow color
 Transparency [%]
 Line width [Pixel]
 Blur
 Distance [pixels]

10 | 28
Style types

 Angle [°]
 Shadow size [%]

3.8 Scale
The Scale style type is available for all elements that support scales.

The Scale style type covers the following properties:

 Property group Scale
 Show scale
 Logarithmic
 Distance [pixels]
 Height [pixels]
 Main ticks
 Sub ticks
 Main tick color
 Sub tick color
 Property group Label
 Show label
 Distance [pixels]
 Label color

3.9 Text
The text style type is available for the static text element, as well as for most dynamic elements.

It includes the following properties:

 Property group Text
 Font
 Property group Fill
 Text color
 Property group Text format
 Alignment horizontal
 Alignment vertical
 Automatic word wrap

11 | 28
Style types

 Properties for the Dynamic Text ElementProperty group, only available for the dynamic
text element

 Hidden input
 Masking character

FONTS
For styles, fonts from the local project or the global project can be used.

The linked text style can be overwritten by settings in the local project if:
 The project has a different setting for Font lists than the global project does.
 The font list of the global project is overwritten by the local project

Hint
Use font lists either from the local project only or from the global project only
and create the styles in the corresponding project.

3.10 Universal slider

The Universal slider style type is available for the Universal slider element.

It includes the following properties:

 Property group Shaping
 Shape
 Alignment
 Style
 Pointer type
 Reverse direction
 Property group Title
 Show title
 Distance [pixels]
 Property group Knob
 Show knob
 Knob color
 Knob type

12 | 28
Style types

 Property group Drag indicator

 Show drag indicator
 Type of display
 Color minimum value
 Color maximum value
 Reset automatically
 Reset after [min]

3.11 Value display

The Value display style type is available for all elements that support value display.

The Value display style type covers the following properties:

 Property group Value display
 Show value in percent
 Absolute amount
 Unit position [%]
 Show value
 Base for display
 Show base
 Show leading zeros
 Show measuring unit
 Property group Instrument display
 Display type
 Start angle
 End angle

3.12 Time representation

The Time representation style type is available for all elements that support time representation.

The Time representation style type covers the following properties:

 Display type
 Formating
 Separator

13 | 28
Create new style group and new style

4 Create new style group and new style

To create a new style, extract it from an existing element (on page 16) or create it manually.

You can find a detailed description of the tool bar in the tool bar and context menu detail view (on
page 15).

Procedure for manual entry:

1. Create a new style group if there is not already one present. To do this, click on the Create
new style group button in the menu bar.

A new style group will be created

2. Highlight the desired style group by clicking on the mouse button.
The Create new style button is now available in the menu bar.
3. Click on Create new style.
The Select style types dialog is opened. The style types are in alphabetical order.

4. Select the desired style by highlighting it. Multiple selection is possible.

Note: The Ctrl + A keyboard shortcut selects all available styles. The Ctrl + D keyboard
shortcut deselects all available styles.

14 | 28
Create new style group and new style

5. Confirm your selection by clicking on OK.

The styles are added to the style group.

4.1 Toolbar and context menu detail view

Symbols and a context menu are available for styles. The commands in the context menu correspond
to the symbols.

Symbol/Command Description

Create a new style group Allows the creation of an empty style group. The newly-added
style group is:
 Named "Style Group" by default
 Shown at the end of the list
 Selected automatically

The function can also be executed with the tool bar.

Create new style Allows the creation of a new style.

Copy Copies the selected entries to the clipboard.

Paste Pastes the content from the clipboard. If an entry with the
same name already exists, the content is pasted as "Copy
of...".

Delete Deletes selected entries after a confirmation from list.

Export selected as XML... Exports all selected entries as an XML file.

Import XML ... Imports entries from an XML file.

Remove all filters Removes all filter settings.

Note: Only active if the current view is filtered.

Expand all Allows all or selected nodes to be expanded or collapsed.

Selection:
 Expand all
 Collapse all
 Expand selection
 Collapse selection

15 | 28
Extracting style and incorrect validation

Symbol/Command Description

Edit selected cell Opens the selected cell for editing. The binocular symbol in
the header shows which cell has been selected in a
highlighted line. Only cells that can be edited can be selected.

Replace text in selected column... Opens the dialog to search and replace texts for the selected
column.

Properties Opens the Properties window.

Help Opens online help.

5 Extracting style and incorrect validation

To create a style, extract it from an existing element. The option is not available if several elements are
highlighted at the same time.

EXTRACT STYLES
To extract a style:
1. In the Editor, highlight the element whose style you want to extract.
2. Select the Create style group from element command from the context menu.
The Extract styles from element dialog is opened.
3. Supported properties of the element are extracted and created as a new style group with the
given name in the local project or global project in the Styles node. The entry is validated
and a balloon is shown in the event of an invalid name.
For this, the following applies:
 The style group contains all supported properties as individual styles.
 Properties that are not available in the source object are created with the corresponding
default values.
 The properties that are supported depend on the Style type (on page 5) and original
element.

16 | 28
Extracting style and incorrect validation

INCORRECT VALIDATION

Information
Names:
 Must be unique for style groups and styles within a style group,
 must not be empty
 must not consist of spaces only
 Must not contain one of the following characters: / \ . : * ? < > | " ' # %
@

17 | 28
Administer styles

6 Administer styles
<You administer CD_PRODUCTNAME> styles in the local project and global project in the Styles
node.

All style groups are displayed in the detail view of the styles node. These contain the individual styles
in a tree view.
The elements can be sorted and filtered according to each column.
Note: The time shown in the last changed column does not relate to the change of the style but the
time at which the file in which the style is contained was saved.

The properties of the selected style are shown in the properties window. These can be edited there.

EDITING STYLES AND STYLE GROUPS

For each style, the corresponding properties can be edited in the properties window.
To edit a style or a style group:
1. Highlight the desired element.
Multiple selection is possible. With multiple selection, only properties that can be changed
jointly for all highlighted elements are offered. Fields that are currently configured differently
are emphasized with content in red font.
2. Configure the desired properties.

18 | 28
Administer styles

Changes are saved as soon as the field is left or after confirmation with the Enter key.
Each change has an effect on all elements that are linked to this style.

Properties for style groups and styles:

 General group:
 Name: Name of the style or the style group
 Type: Type of the style.
 Description: Individual description of the style or the style group.
 Category: Free text to categorize the style or the style group.
Hint: Issue a meaningful text here and use this property to sort or to group according
to the column in the detail view.
 ID: ID of the style or the style group
 External reference: Unique identification of zenon components.
 Corresponding property groups are offered depending on the style:You can find detailed
information on this in chapter Style types (on page 5).

Information
Names:
 Must be unique for style groups and styles within a style group,
 must not be empty
 must not consist of spaces only
 Must not contain one of the following characters: / \ . : * ? < > | " ' # %
@

COPYING AND ADDING STYLE GROUPS AND STYLES

Style groups and styles can be copied and inserted in the detail view with the keyboard shortcuts (Ctrl
+ C, Ctrl + V), by means of the tool bar or the context menu (on page 15).

In doing so:
 The cross-project copying and pasting of style groups and styles is supported
 The copying and pasting of styles from style groups to other style groups is supported
 Multiple selection is supported

19 | 28
Administer styles

EXPORT AND IMPORT STYLES AND STYLE GROUPS AS XML

Styles can be exported as XML files and imported from XML.You can find detailed information on this
in chapterXML export and XML import (on page 20).

DELETING STYLE GROUPS OR STYLES

To delete a style or style group:
1. Highlight the desired elements.
Multiple selection is possible.
2. Select the Delete command in the toolbar or context menu.
The selected elements are deleted after confirmation is requested. When style groups are
deleted, all styles contained are also deleted.

Note: If styles are deleted, the previously-set values are restored for the properties with which they
were linked. The property of the style shows No style linked.

6.1 XML export and XML import

Styles are always exported as XML or imported from XML as complete style groups. Export and
import of individual styles is not possible.

Styles can be exported by means of:

 The Export all as XML context menu entry in the project tree
 The Export selected as XML... symbol in the detail view
 The Export selected as XML... context menu in the list of the detail view

Styles can be imported using:

 The Import XML... context menu entry in the project tree
 The Import XML... symbol in the tool bar of the detail view
 The Import XML... context menu in the list of the detail view

Action in the event of ID and naming conflicts

 If there is already a style group in the project that has the same ID as the style group to be
imported, a dialog is shown with the possibility of replacing the existing style group or
canceling the import.
 If there is already a style group in the project that has the same name as the style group to
be imported, the style group is imported and given a consecutive postfix (for example Style
Group 2).

20 | 28
Linking styles and style groups

 If there is already a style in the project that has the same ID as a style to be imported and is
an element of another style group, no import is carried out and a corresponding warning is
shown.

7 Linking styles and style groups

Styles and style groups can be assigned Static elements and Dynamic elements. In doing so, the style
or style group is linked to the element. Changes to the style or the style group in the Styles module in
the global project are applied to all linked elements.

Note: Not all elements support all properties of a style. Only supported properties are ever assigned.
To assign an element a style or a style group, use:
 Drag&Drop

 The dialog in the corresponding property

 The context menu of the corresponding element via the properties window

Note: Linked styles are shown in the respective property with the following syntax:
stylegroupname.Stylename.

LINK RULES
The following is applicable for the linking of styles or style groups:
 Only styles that correspond to the target property are linked.
 When linking style groups, only styles that are supported by the properties of the element
are linked.

DRAG&DROP ONTO THE ELEMENT

To link a style group or a style by means of Drag&Drop:
1. Go to the Styles node in the project.
2. Select the desired style or style group.
3. Drag the style group or the style to the element in the main window with the mouse.
The properties of the style or the style group are applied to the element.

Hint
Select several styles from the same style group in order to carry out multiple
linking with an element.

21 | 28
Linking styles and style groups

DRAG&DROP ONTO THE PROPERTY

To link a style group or a style to an element property by means of Drag&Drop:
1. Go to the Styles node in the project.
2. Highlight the element.
3. Go to the desired properties group
4. Drag the style group or the style with the mouse to the property that links the element to a
style.
The properties of the style or style group are applied to the element.
Note: In doing so, note that only appropriate styles can be assigned. e.g.: Test style of the
Text style, rounding style of the Rounding style property.

DIALOG FOR PROPERTY

To link a style group or a style to an element using the style selection (on page 26) dialog:
1. Highlight the element.
2. Go to the Styles node in the project.
3. Go to the desired properties group
4. Configure the desired style group or the style type (on page 5), such as Line style, Fill style,
Glow effect style etc. for example..
If a style is already linked to the property, this is displayed.
If several elements with different styles have been selected, the style of the last-selected
element is shown in red font. If the style is changed, it is applied to all selected elements.
5. Clicking on the ... button opens the dialog (on page 26) to select a style or a style group.
A style that has already been linked can also be removed again in this dialog.

CONTEXT MENU
1. Highlight the element.
A style group must already be linked for the element.
2. Navigate to the desired group in the properties.
3. Right-click on the property
4. Select Derive all properties from style group:
For this element, all properties that are available in the style group are linked.

22 | 28
Linking styles and style groups

Hint
Multiple selection is supported for linking styles and and style groups using the
style selection (on page 26) dialog or the context menu (on page 23) of the
property.

7.1 Styles and style groups from the global project

If you link a style or style group from the global project, this linking is shown in the property's option
field with the prefix (g)#.

As an example, the style StyleGroup.LineStyle in the global project is shown for the element properties
in the local project with the name (g)#StyleGroup.LineStyle.

As soon as there is a manual text amendment in the properties field of the linking, this prefix is
removed and the linking is amended or is lost.

In doing so:
 if a style or a style group with the name entered is found in the local project, this is used
 if no style or style group with the name entered is found, the text <No style linked> is shown

Hint
Link styles from the global project by means of Drag&Drop (on page 21) or the
dialog for style selection (on page 26).

7.2 Context menu Elements

Elements in zenon that a style or a style group can be linked to receive the style-group-related
commands in the context menu of the properties window.
To link styles or style groups using the context menu or linking:
1. Mark the desired element.
2. Right-click on the description of the desired property or the ... button.
3. Select the desired command from the context menu.

Available commands:

23 | 28
Linking styles and style groups

Command Action Remark

Derive [style] from style The style of the style group If no style group is linked to the
group linked to the element is linked element, the original configuration
for the selected property. of the element is used.

An arrow symbol on the right

next to the input field of the
property shows that there is a
linking.

Detach [style] from style Detaches the linking of this The property is deleted from the
group property to a certain style of a style group. A different style can
style group. All other properties be linked to this property. If no
retain their linking. other style is linked, the values
configured in the original style
The arrow symbol, which shows
group are used.
the linking, is removed.
All other properties retain the
linking to the original style group.

Derive all properties from For this element, all properties All properties that are linked
style group that are available in the style overwrite pre-existing values. If
group for this are linked. these are amended in the style
group, they are also amended
An arrow symbol on the right
here.
next to the input field of the
property shows that there is a
linking.

Detach all properties from All linkings that are derived The configured values remain. If
style group from this style group are the values is the style group are
detached. amended, the change is not
accepted for these elements.
The arrow symbol that shows
the linking is removed. All linked properties of this
element are detached. The
properties can be linked to
another style group or to other
styles.

If no other style is linked, the

values configured in the original
style group are used.

24 | 28
Linking styles and style groups

7.3 Replacing or deleting links

If a style group is linked to an element, individual properties for the element can be replaced with
other values or deleted.

REPLACE VALUES
You have several possibilities for replacing a value:
 Detach the style from the style group using the context menu of the property.
Assign a new style to the property.
 Link a new individual style to the property by means of Drag&Drop.
 Select a different style for the property using the selection dialog (on page 26).

REMOVING A STYLE OR STYLE GROUP FROM THE ELEMENT

To remove the linking of a style or style group from the element:
 Delete the style or the style group from the property.
No style linked is displayed. The attendant properties contain the value that they had before
linking again.

7.4 Limitations
Styles are administered in the local project or global project and use settings of this project. In doing
so, the following should be noted:

COLOR SETTINGS
The following is applicable for color properties:
 Static colors: These are always saved in the style directly.
 Color palettes: Either colors from color palettes from the local project or the global project
can be used; in doing so:
 The color palettes should be in the same project as the one in which the style is created
 If there are color palettes in both projects, the colors of the global projects are
overwritten by the colors of the local project

25 | 28
Style selection dialog

Hint
Use color palettes either from the local project only or from the global project
only and create the styles in the corresponding project.

FONTS
For styles, fonts from the local project or the global project can be used.

The linked text style can be overwritten by settings in the local project if:
 The project has a different setting for Font lists than the global project does.
 The font list of the global project is overwritten by the local project

Hint
Use font lists either from the local project only or from the global project only
and create the styles in the corresponding project.

8 Style selection dialog

Clicking on the ... button of the property to link a style or a style group opens the dialog to select a
style or style group. Here, you can assign a style or style group and detach the linking of style and
style groups.

Information
Only style groups and styles that can be linked to the element from which the
dialog was opened are offered.

26 | 28
Style selection dialog

Parameter Description

List of projects Display of the global project and the local project.

List of styles List of styles and style groups available.

Clicking on a style selects it.

The list can be sorted and filtered.

Toolbar and context menu:

 Remove all filters:
Clicking removes the filter settings
 Expand all:
Allows all or selected nodes to be expanded or
collapsed.

No selection Removes the currently-linked style from the property.

27 | 28
Style selection dialog

CLOSE DIALOG
Options Description
OK Applies settings and closes the dialog.

Cancel Discards all changes and closes the dialog.

Help Opens online help.

LINK STYLE OR STYLE GROUP

To link a style or style group:
1. Open the dialog.
2. Click on the desired style or style group.
3. Click on OK
The style or style group with all its styles is transferred to the property and applied to all
selected elements.

LINK RULES
The following is applicable for the linking of styles or style groups:
 Only styles that correspond to the target property are linked.
 When linking style groups, only styles that are supported by the properties of the element
are linked.

DETACH LINKING
To detach the linking of a style or style group:
1. Open the dialog.
2. Click on No selection.
The style or the style group is removed from the property and the dialog is closed. The
selected elements contain the properties of the last style that was linked.

28 | 28