Visualization Element 'Trend'

Symbol:

Tag: Special Controls

The element displays the curve of variable values as a trend diagram. The trend diagram is suitable for representing a long-term data curve because the data is read from a trend recording and hence from a database. Moreover, you can run the Trend element together with the Date Range Picker, Legend, and Time Range Picker operating elements so that the user can navigate conveniently in the diagram.

Element properties

Element name

Example: Velocity

Data source

Data source for the connection via the device and the application to the Trend Recording object where the trend data that you want to show was saved.

If the Trend Recording object is on the local device, then it is sufficient when you specify the respective application. If the trend recording is on a remote device, then you need to specify the data source connection to this device.

  • <local application>

    The Trend Recording object is located on the local device in the local application.

  • <device name> . <application name>

    Example: Device_A.App_A

    The Trend Recording object is located on the local device Device_A below the application App_A.

  • <data source name>

    Example: DataSource_B

    The Trend Recording object is located on a remote device that is connected via the data source DataSource_B. Below the (now visible) Application property, the remote application is displayed as configured in the data source.

    Example: App_B

    Note: If the data source is accessed symbolically by means of a symbol file (CODESYS symbolic), then the required symbol file and the corresponding project have to be saved in the same folder.

Type of element

Trend

Trend recording

: Trend recording whose data is displayed as a diagram

The trend recording is located on the device specified in the Data source property.

Display settings

: Opens the Display Settings dialog.

See also

Element property 'Position'

The position defines the location and size of the element in the visualization window. This is based on the Cartesian coordinate system. The origin is located at the upper left corner of the window. The positive horizontal x-axis runs to the right. The positive vertical y-axis runs downwards.

X

The x-coordinate of the upper left corner of the element

Specified in pixels

Example: 10

Y

The y-coordinate of the upper left corner of the element

Specified in pixels

Example: 10

Width

Specified in pixels

Example: 150

Height

Specified in pixels

Example: 30

Tip: You can change the values in X, Y, Width, and Height by dragging the corresponding symbols to another position in the editor.

Angle

Static angle of rotation (in degrees)

Example: 35

The element is displayed rotated in the editor. The point of rotation is the center of the element. A positive value rotates clockwise.

Tip: You can change the value in the editor by focusing the element to the handle. When the cursor is displayed as a rotating arrow , you can rotate the element about its center as a handle.

(1): Handle

Note: If a dynamic angle of rotation is also configured in the property Absolute movement ‣ Internal rotation , then the static and dynamic angles of rotation are added in runtime mode. The static angle of rotation acts as an offset.

See also

Show cursor

: A cursor (black triangle with vertical line) is shown in the trend diagram.

Behavior at runtime: As soon as the graph is drawn, the user can move the cursor along the time axis in order to mark a specific time. Then the variable value belonging to the cursor position is displayed in the legend above the graph.

Show tooltip

Requirement: Show cursor is activated.

: A tooltip opens at the cursor.

Behavior at runtime: The variable value belonging to the cursor position is displayed as a tooltip.

Show frame

: The trend diagram is drawn with a frame.

Number format

Format specification in printf syntax, which determines how the values are displayed in the tooltip and in the legend

Example: %d (integer variable) or %5.2f (floating-point number)

Element property 'Tick mark labels'

Note

The time stored in the trend recording are in the UTC time zone. If the time is displayed in the trend of the visualization element, then the time stamps are converted to the local time zone of the operating system of the PLC.

Change the time zone in the operating system if the times in the trend diagram are not in the zone that you need.

Time stamps

X-value of the trend diagram

  • Absolute time stamps

    The absolute time with date and time is displayed at each tick mark on the time axis.

    Example: 03/18/2016 12h30m50s

  • Relative time stamps

    The time period from the start of the recording (=0) is displayed at each tick mark.

    Example: 5m30s

Draw labels on two lines

: The time stamps are displayed on two lines (for example, the date is displayed on the first line and the time on the second line).

: The time stamp is displayed on one line. Example: 2019-11-01-12:30:50.

Omit irrelevant information in timestamps

: The time stamps are displayed in a truncated form (without insignificant information). For example, the date is displayed at the first tick mark, and only the time is displayed at the following tick marks. The Internationalization (format strings) property is not visible and is ignored.

: The time stamps are displayed with all information. This takes into consideration the Internationalization (format strings) property which contains the format specification for the date and time display.

Internationalization (format strings)

Format specification for the date and time display of the time stamp (when it is displayed in full)

Note: The property is visible only if the Omit irrelevant information in timestamps option is not selected.

Date

Format string that returns the date display according to the defined format. The operating system locale is used as the default setting.

Defined format strings for the date:

  • Year: yyyy, yy, y

  • Month: MM, M

  • Day: dd, d

  • Recommended separator: - . /

Example:

yyyy-MM-d displays 2019-10-25

yyyy-MM-dd displays 2019-10-25

dd.MM.yyyy displays 25.10.2019

dd/MM/yyyy displays 25/10/2019

Time

Format string that returns the time (or time of day) display according to the defined format. The operating system locale is used as the default setting.

Defined format strings for the time:

  • 24-hour time definition: HH, H

  • 12-hour time definition: hh, h

  • AM/PM for 12-hour time definition: tt

  • Minutes: mm, m

  • Seconds: ss, s

  • Milliseconds: ms

  • Microseconds: us

  • Recommended separator: : or space character

Example:

HH:mm:ss:ms displays 15:30:59:123

h:mm:ss tt displays 3:30:59 PM

See also

Element property 'Assigned control elements'

These elements are created automatically when the control elements are added with the command Insert elements for controlling Trend.

Date Range Picker

Control element for changing the date and time of the displayed data sets. With , all elements are provided that have implemented the interface IDateRangeSelector. By default, instances of the Date Range Picker visualization element are available.

Time Range Picker

Control element for changing the time of the displayed data sets. With , all elements are provided that have implemented the interface ITimeSelector. By default, instances of the Time Range Picker visualization element are available.

Legend

Control element for displaying a legend for the graphs. With , all elements are provided that have implemented the interface ILegendDisplayer.

See also

Element property 'Center'

The properties contain fixed values for the coordinates of the point of rotation. This point of rotation is shown as the symbol. The point is used as the center for rotating and scaling.

X

X-coordinate of the point of rotation

Y

Y-coordinate of the point of rotation

Note

You can also change the values by dragging the symbols () to other positions in the editor.

Element property 'Absolute movement'

The properties contain IEC variables for controlling the position of the element dynamically. The reference point is the upper left corner of the element. In runtime mode, the entire element is moved.

Movement

X

Variable (numeric data type). Defines the X position (in pixels).

Example: PLC_PRG.iPos_X.

Increasing this value in runtime mode moves the element to the right.

Y

Variable (numeric data type). Defines the Y position (in pixels).

Example: PLC_PRG.iPos_Y.

Increasing this value in runtime mode moves the element downwards.

Rotation

Variable (numeric data type). Defines the angle of rotation (in degrees).

Example: PLC_PRG.iAngle1.

The midpoint of the element rotates at the Center point. This rotation point is shown as the symbol.

In runtime mode, the alignment of the element remains the same with respect to the coordinate system of the visualization. Increasing the value rotates the element to the right.

Interior rotation

Variable (numeric data type). Defines the angle of rotation (in degrees).

Example: PLC_PRG.iAngle2.

In runtime mode, the element rotates about the point of rotation specified in Center according to the value of the variable. In addition, the alignment of the element rotates according to the coordinate system of the visualization. Increasing the value in the code rotates clockwise.

The rotation point is shown as the symbol.

Note: If a static angle of rotation is specified in the Position ‣ Angle property, then the static angle of rotation is added to the variable angle of rotation (offset) when the visualization is executed.

Note

You can link the variables to a unit conversion.

Note

The X, Y, Rotation, and Interior rotation properties are supported by the "Client Animation" functionality.

See also

Element property 'State variables'

The variables control the element behavior dynamically.

Invisible

Variable (BOOL). Toggles the visibility of the element.

TRUE: The element is not visible at runtime.

Note

The Invisible property is supported by the "Client Animation" functionality.

See also

These properties are available only when you have selected the Preview: Support client animations and overlay of native elements option in the Visualization Manager.

Animation duration

Defines the duration (in milliseconds) in which the element runs an animation

  • Variable (integer value)

    Example: Menu.tContent with VAR tContent : INT := 500; END_VAR

  • Integer literal

    Example: 500

Animatable properties

  • Absolute movement, Movement, X, Y

  • Absolute movement, Rotation

  • Absolute movement, Interior rotation

  • Absolute movement, Exterior rotation

The animated movement is executed when at least one value of an animatable property has changed. The movement then executed is not jerky, but is smooth within the specified animation duration. The visualization element travels to the specified position while rotating dynamically. The transitions are smooth.

Move to foreground

Moves the visualization element to the foreground

Variable (BOOL)

Example: bIsInForeground with VAR bIsInForeground : BOOL := FALSE; END_VAR

TRUE: At runtime, the visualization element is displayed in the foreground.

FALSE: At runtime, the visualization element is displayed in the layer where it was inserted in the visualization editor.

See also

Element property 'Access rights'

Requirement: User management is set up for the visualization.

Access rights

Opens the Access rights dialog. There you can edit the access privileges for the element.

Status messages:

  • Not set. Full rights.: Access rights for all user groups : operable

  • Rights are set: Limited rights: Access is restricted for at least one group.

See also

See also

3.5.16.0

© Copyright 2021, CODESYS GmbH