Frequently used behavior rules

Color the background of a shape in red if there is an alarm

The following example shows how to change the fill color of an element to red when the data point is in alarm.

<rect id="Background" x="0" y="0" width="200" height="100" class="contrast-fill" fill-opacity="0.3" />
<g id="Foreground">
  <!-- Elements in the foreground -->
  <text x="100" y="56" text-anchor="middle" class="contrast-fill">Status</text>
</g>

Trigger
Trigger	Data point property
Property	<IN_ALARM>

Condition
Property	<IN_ALARM>
Function	=
Value	true

Action
Action Type	Set shape attribute
Element	Background
Attribute	fill
Value	.

Action
Action Type	Set shape attribute
Element	Background
Attribute	fill-opacity
Value	1

Action
Action Type	Set shape attribute
Element	Foreground
Attribute	fill
Value	.

In our example, the default background is semi-transparent and the text in the middle of the shape automatically adapts to light and dark mode (see Context-aware colors for more information about the contrast-fill class). This has to be taken into account in the behavior rules. In our example, we thus have to set the fill opacity of the background element to 1 and the fill color of the foreground element to white when the alarm is active to ensure that the text is always legible on the red background, regardless of the current mode.

---

Color the outline of a shape in yellow when out of service

The following example shows how to change the outline (stroke) color of an element to yellow when the data point is out of service.

<rect id="Background" x="0" y="0" width="100" height="200" class="contrast-fill" fill-opacity="0.3" stroke="none" stroke-width="6" />
<g id="Foreground">
  <!-- Elements in the foreground -->
</g>

For a detailed explanation of the contrast-fill class see Context-aware colors.

Trigger
Trigger	Data point property
Property	<OUT_OF_SERVICE>

Condition
Property	<OUT_OF_SERVICE>
Function	=
Value	true

Action
Action Type	Set shape attribute
Element	Background
Attribute	stroke
Value	.

---

Display text of live value and unit

<text id="LiveValue" x="100" y="10" text-anchor="end" class="contrast-fill" />
<text id="Unit" x="110" y="10" text-anchor="start" class="contrast-fill" fill-opacity="0.3" />

For a detailed explanation of the contrast-fill class see Context-aware colors.

Behavior rule 1

Trigger
Trigger	Data point property
Property	<LiveValue>

Condition
Property	<LiveValue>
Function	Always

Action
Action Type	Set dynamic text
Element	LiveValue

Behavior rule 2

Trigger
Trigger	Data point property
Property	<Unit>

Condition
Property	<Unit>
Function	Always

Action
Action Type	Set dynamic text
Element	Unit

---

Rotate line from 0 to 90°

To rotate a horizontal line from 0 to 90° based on a data point whose value ranges from to 0 to 100 (for example the opening of a flap in percent), apply the following rules:

<line id="Flap" x1="0" y1="0" x2="100" x2="0" class="contrast-stoke"/>

For a detailed explanation of the contrast-stroke class see Context-aware colors.

Trigger
Trigger	Data point property
Property	<LiveValue>

Condition
Property	<LiveValue>
Function	Always

Action
Action Type	Rotate
Element	Flap
Value	[0,100],[0,90]

---

Create toggle button

To create a toggle button that toggles a data point between two values, follow these steps:

1. Create two transparent rectangles stacked on top of each other that will serve as the clickable area for the button. For example:

     <!-- ... -->
     <rect id="TurnOn" x="0" y="0" width="100" height="20" opacity="0.001" />
     <rect id="TurnOff" x="0" y="0" width="100" height="20" opacity="0.001" />
   </svg>
   

   Give both elements a unique id attribute and set the opacity attribute on both elements to a low value (e.g. 0.001) to make them invisible but still clickable. Make sure to place the elements at the bottom of the SVG, just above the closing </svg> tag, so that other elements in the shape don’t interfere with the click.

   In this example, we created two elements with IDs TurnOn and TurnOff that will toggle the data point between values 1 (On) and 0 (Off), respectively.

2. Create a behavior rule that shows both rectangles conditionally, based on the current value of the data point.

   Trigger
   Trigger	Data point property
   Property	<LiveValue>

   Condition 1
   Property	<LiveValue>
   Function	=
   Value	0

   Action
   Action Type	Show object conditionally
   Element	TurnOn

   Condition 2
   Property	<LiveValue>
   Function	=
   Value	1

   Action
   Action Type	Show object conditionally
   Element	TurnOff

3. Create another behavior rule that handles the click events.

   Trigger
   Trigger	On click

   Action 1
   Action Type	Set data point property
   Trigger Element	TurnOn
   Property	<LiveValue>
   Value	1

   Action 2
   Action Type	Set data point property
   Trigger Element	TurnOff
   Property	<LiveValue>
   Value	0

When the current value is 0, the element with ID TurnOn will be visible and clickable, and when clicked, 1 will be written to the data point. On the other hand, when the current value is 1, the element with ID TurnOff will be visible and clickable, and when clicked, 0 will be written to the data point.

With this approach, you can also design shapes with more than two states.