Häufig verwendete Verhaltensregeln

Hintergrund eines Shapes bei Alarm rot einfärben

Das folgende Beispiel zeigt, wie die Füllfarbe eines Elements bei Alarm auf rot geändert werden kann.

<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>

Auslöser
Auslöser	Datenpunkt-Eigenschaft
Eigenschaft	<IN_ALARM>

Bedingung
Eigenschaft	<IN_ALARM>
Funktion	=
Wert	true

Aktion
Aktionstyp	Shape-Attribut setzen
Element	Background
Attribut	fill
Wert	.

Aktion
Aktionstyp	Shape-Attribut setzen
Element	Background
Attribut	fill-opacity
Wert	1

Aktion
Aktionstyp	Shape-Attribut setzen
Element	Foreground
Attribut	fill
Wert	.

In unserem Beispiel ist der Standard-Hintergrund halb­­transparent und der Text in der Mitte des Shapes passt sich automatisch an den Hell- und Dunkel­­modus an (siehe Kontext­­abhängige Farben für weitere Informationen zur Klasse contrast-fill). Dies muss in den Verhaltens­­regeln berücksichtigt werden. In unserem Beispiel müssen wir die Füllopazität des Hintergrund­­elements deshalb auf 1 und die Füllfarbe des Vordergrund­­elements auf Weiß setzen, wenn der Alarm aktiv ist, um sicherzustellen, dass der Text auf dem roten Hintergrund immer lesbar ist, unabhängig vom aktuellen Modus.

---

Umriss eines Shapes außer Betrieb gelb einfärben

Das folgende Beispiel zeigt, wie die Umrissfarbe eines Elements bei außer Betrieb auf gelb gesetzt werden kann.

<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>

Eine ausführliche Erklärung der Klasse contrast-fill finden Sie unter Kontext­­abhängige Farben.

Auslöser
Auslöser	Datenpunkt-Eigenschaft
Eigenschaft	<OUT_OF_SERVICE>

Bedingung
Eigenschaft	<OUT_OF_SERVICE>
Funktion	=
Wert	true

Aktion
Aktionstyp	Shape-Attribut setzen
Element	Background
Attribut	stroke
Wert	.

---

Text des Live-Wertes und der Einheit anzeigen

<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" />

Eine ausführliche Erklärung der Klasse contrast-fill finden Sie unter Kontext­­abhängige Farben.

Verhaltensregel 1

Auslöser
Auslöser	Datenpunkt-Eigenschaft
Eigenschaft	<LiveValue>

Bedingung
Eigenschaft	<LiveValue>
Funktion	Immer

Aktion
Aktionstyp	Dynamischer Text setzen
Element	LiveValue

Verhaltensregel 2

Auslöser
Auslöser	Datenpunkt-Eigenschaft
Eigenschaft	<Unit>

Bedingung
Eigenschaft	<Unit>
Funktion	Immer

Aktion
Aktionstyp	Dynamischer Text setzen
Element	Unit

---

Linie von 0 bis 90° rotieren

Um eine horizontale Linie basierend auf einem Datenpunkt, dessen Wert von 0 bis 100 reicht (zum Beispiel die Öffnung einer Klappe in Prozent), zu drehen, wenden Sie die folgenden Regeln an:

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

Eine ausführliche Erklärung der Klasse contrast-stroke finden Sie unter Kontext­­abhängige Farben.

Auslöser
Auslöser	Datenpunkt-Eigenschaft
Eigenschaft	<LiveValue>

Bedingung
Eigenschaft	<LiveValue>
Funktion	Immer

Aktion
Aktionstyp	Rotation
Element	Flap
Wert	[0,100],[0,90]

---

Umschalter erstellen

Um einen Umschalter zu erstellen, der einen Datenpunkt zwischen zwei Werten hin- und herschaltet, gehen Sie wie folgt vor:

1. Erstellen Sie zwei übereinander­­liegende transparente Rechtecke, die als Klick­­bereich für die Schalt­­fläche dienen. Zum Beispiel:

     <!-- ... -->
     <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>
   

   Geben Sie beiden Elementen ein eindeutiges id-Attribut und setzen Sie das opacity-Attribut auf einen niedrigen Wert (z. B. 0.001), um sie unsichtbar, aber dennoch anklickbar zu machen. Stellen Sie sicher, dass die Elemente ganz unten im SVG-Code direkt über dem schließenden </svg>-Tag stehen, damit andere Elemente im Shape nicht mit dem Klick interferieren.

   In diesem Beispiel haben wir zwei Elemente mit den IDs TurnOn und TurnOff erstellt, die den Datenpunkt zwischen den Werten 1 (Ein) und 0 (Aus) umschalten.

2. Erstellen Sie eine Verhaltens­­regel, die beide Rechtecke anhand des aktuellen Wertes des Datenpunkts bedingt anzeigt.

   Auslöser
   Auslöser	Datenpunkt-Eigenschaft
   Eigenschaft	<LiveValue>

   Bedingung 1
   Eigenschaft	<LiveValue>
   Funktion	=
   Wert	0

   Aktion
   Aktionstyp	Objekt bedingt anzeigen
   Element	TurnOn

   Bedingung 2
   Eigenschaft	<LiveValue>
   Funktion	=
   Wert	1

   Aktion
   Aktionstyp	Objekt bedingt anzeigen
   Element	TurnOff

3. Erstellen Sie eine weitere Verhaltens­­regel, die die Klick-Ereignisse abfängt.

   Auslöser
   Auslöser	Beim Anklicken

   Aktion 1
   Aktionstyp	Datenpunkt-Eigenschaft setzen
   Auslöseelement	TurnOn
   Eigenschaft	<LiveValue>
   Wert	1

   Aktion 2
   Aktionstyp	Datenpunkt-Eigenschaft setzen
   Auslöseelement	TurnOff
   Eigenschaft	<LiveValue>
   Wert	0

Wenn der aktuelle Wert 0 ist, wird das Element mit der ID TurnOn eingeblendet und anklickbar, und beim Anklicken wird der Wert 1 auf den Datenpunkt geschrieben. Wenn hingegen der aktuelle Wert 1 ist, wird das Element mit der ID TurnOff eingeblendet und anklickbar, und beim Anklicken wird der Wert 0 auf den Datenpunkt geschrieben.

Mit diesem Ansatz können Sie auch Shapes mit mehr als zwei Zuständen implementieren.