1. Help
  2. Application examples
  3. Tutorial: UI
  4. Tutorial: design a dynamic image in relation to the status of an alarm

Tutorial: design a dynamic image in relation to the status of an alarm

Introduction

This tutorial shows how to configure in a Advanced SVG Image Advanced SVG image a logic whereby an alarm event on a section of the machine causes the color of a section of the image to change.

Prerequisites

  • An alarm configured in the project

  • An image in SVG 1.2 Tiny format imported in the project and associated with an Advanced SVG image object.

    Note

    the graphical parts of interest in the image must be characterized by a unique identifier (XML id attribute).

Set the Key-Value converter to color part of the image and the status

  1. Click the Advanced SVG image object.

  2. In the SVG element properties collection, in the property relating to the part of the image to be connected to the alarm, click image1 next to Value, then click Advanced: the dynamic link editor opens.

  3. Click image2 > Key-Value converter.

  4. Set the Enabled variable of the desired alarm as the source (Source DynamicLink), then click image3 next to the converter name: the converter editor opens.

  5. To set the key/value pair related to the alarm disabled status, in the Keys column click UInt32 > Show all, the select the Boolean data type, then click Select: the False key appears in the table, which corresponds to the alarm disabled status.

  6. In the Values column, click String > Show all, then select the**Color** data type, then click Select: the hexadecimal value #00000000 and image4 appear in the table.

  7. Set the desired color for the alarm disabled status.

  8. To set the key/value pair related to the alarm enabled status, click image5 > Key-value convertor.

  9. In the key field, click image6, then select True.

  10. In the value field, set the desired color for the alarm enabled status.

See also

References

Advanced SVG Image