Add dynamic graphical objects

Configure dynamic graphical objects, referred to as dynamic links, that are typical to HMI applications.
An HMI application contains graphical objects that represent different physical objects that are being managed by the application. Each graphical object has a set of configurable properties that represent different settings, inputs, outputs, and other data. Some properties are derived by by setting the value of a property based on the value of another property called using a
dynamic link
.
To explore these concepts:
  • We will connect an LED to a switch to set its on/off status.
  • We will connect the same LED to a spin-box, through a
    converter
    , to set its color.
To remember
  • When two variables of the same type are linked, a
    dynamic link
     is created.
  • When two variables of a different type are linked, it is necessary to set up one or more converters: then an
    advanced dynamic link
     is created.
This is the final result:
Step #1: Add graphical objects
We will add the objects in the first navigable panel, i.e.
Page1 (type)
:
  1. Double-click
    Page1 (type)
    : the panel opens in the editor.
  2. To add the LED, in
    Project
     right-click
    Page1 (type)
    , then select
    New
    >
    Basic controls
     >
    LED
    :
    LED1
     appears in
    Page1 (type)
     and in the objects editor.
  3. To add the switch, in
    Project
     right-click
    Page1 (type)
    , then select
    New
     >
    Basic controls
     >
    Switch
    :
    Switch1
     appears in
    Page1 (type)
     and in the objects editor.
  4. To add the spin box, in
    Project
     right-click
    Page1 (type)
    , then select
    New
     >
    Basic controls
     >
    Spin box
    :
    SpinBox1
     appears in
    Page1 (type)
     and in the objects editor.
  5. In the editor, drag the three objects to the desired position. Below is an example:
Step #2: Associate the LED status with the switch status
To turn the LED on/off with a switch, we will insert a dynamic link between the activation states of the two objects:
  1. In the
    LED1
     properties, click next to the
    Active
     property: the dynamic links window opens which displays all the project elements and their properties.
  2. In the window, inside
    Switch1
     select the
    Active
     variable and press
    Select
    : the value of the
    Active
     property of
    LED1
     is the path to the switch property.
In this way, the LED status depends on the switch status. In this case, the two linked properties contain a value of the same type (Boolean). For this, a simple dynamic link is sufficient. Find out more about dynamic links: Dynamic Links.
Step #3: Associate the LED color with the spin-box value
In this phase, the link is between two properties that contain values of different types: number and color. For this, a
converter
 has to be used, which transforms the input data into another type of data. Here we will use a Key-Value converter to transform the spin-box numerical data into data of color type for the LED.
  1. Select the LED and click next to its
    Color
     property, then click
    Advanced
    : the editor of the dynamic link for the
    Color
     property opens.
  2. To add the converter, click >
    Key-Value converter
    : the block of the Key-value converter appears.
    DynamicLink Source
     indicates the input variable to the converter, which transforms it to supply its value to the
    Color
     property.
  3. To set the converter input, in our case the spin-box value, in
    DynamicLink Source
     click , then in
    Spinbox1
     select
    Value
    , then click
    Select
    .
  4. To set the conversions to perform, in
    KeyValueConverter1
     click : the conversion table appears in the object editor.
    Each row defines a key/value pair: in this case
    Key
     is the spin-box value,
    Value
     is the LED color.
  5. For the conversion, the correct data types must be set for
    Key
     and
    Value
     visible in the header; in particular
    Value
     must be of color type. To do it, in the
    Value
     column click
    String
    : a list with the most common data types appears.
  6. To display all the available data types, select
    Show All
    , then choose
    Color
     and click
    Select
    .
  7. To change the color associated with the existing
    0
     key, click
    Pick
     in the related cell, select the color and click
    Select
    .
  8. To set other key/value pairs, click and change the values. Below is an example:
Find out more about the Key-Value converter: Key-Value converter.
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.