Example: Visualization Elements
Product: CODESYS Visualization
This example shows how to use visualization elements and handle events.
Description
This example shows how to integrate images into the visualization. To include a new, external image, you need to add one entry to the image pool and insert the image there. The recently included image is then assigned a unique ID.
The example also shows what you need to do to make an element rotate after a mouse event.
![]() |
Wherever an image is displayed, its ID is referenced from the image pool. For example, a visualization element which displays an image uses the ID to reference that image in its Static ID element property.
Some mouse events are directly supported by the visualization:
OnMouseClick
,OnMouseDown
,OnMouseLeave
,OnMouseEnter
,OnMouseUp
undOnMouseMove
Other events (double-click, drag) are implemented in the
MouseEvents
program. For example, the color of the element changes when an event occurs.Elements can rotate in two different ways. A distinction is made between interior and normal rotation. In both cases, the element rotates around the midpoint (center of rotation). However, in the case of interior rotation, the element also rotates around itself (self-rotation), which is not the case with the normal rotation.
Additional information
Main
: Calls the following programsMouseEvents
: Implements the double-click and drag for an objectA timer is used for the double click to wait for the second mouse click. To implement dragging, a new position for the object is calculated when the mouse is pressed and moves.
Node
: Unfolds and closes the node after a double click.This is also done with a timer for the double click.
Rotation
: Calculates the position for each angle of a circleVisualization
: It is important that the time interval for the visualization task is short in order to get quick feedback from the user interface.
System requirements and restrictions
Programming system | CODESYS Development System (version 3.5.14.0 or higher) |
Runtime system | CODESYS Control Win (version 3.5.14.0 or higher) |
Add-on components | - |
Note
DOWNLOAD Project