Steuerelement: Custom Gauge

Die Custom Gauge (benutzerdefinierte Anzeige) ist ein flexibles und visuell ansprechendes Steuerelement zur Darstellung numerischer Werte – etwa Sensordaten oder Systemmetriken – in Form einer analogen Skalenanzeige. Sie erlaubt es, eigene SVG-Grafiken hochzuladen und die Skalierung der Anzeige über Winkel und Ticks individuell zu konfigurieren.

Übersicht: Wie funktioniert eine Custom Gauge?

Jede Gauge besteht aus drei Schlüsselelementen, die ihr Verhalten und Aussehen bestimmen:

Wertebereich (Min / Max) – der Zahlenbereich, der auf der Skala angezeigt wird.
Drehwinkel (Startwinkel / Endwinkel) – der Winkelbereich, in dem sich der Zeiger bewegt.
Zeiger-Startposition (Initial Arrow Position) – die Position, auf die der Zeiger beim Laden der SVG zeigt, bevor Live-Daten ankommen.

In der Standardkonfiguration können verschiedene SVGs verwendet werden (vorhandene oder eigene), aber die Werte müssen individuell eingestellt werden – es gibt kein universelles Preset. Grund: Jede SVG hat ihren eigenen Maßstab, Layout und Rotationsursprung.

Geben Sie numerische Werte stets als reine Zahlen ohne Symbole oder Einheiten ein.
Korrekt: [code_block_0]
Nicht korrekt: [code_block_1]
Gilt für: Startwinkel, Endwinkel, Initial Arrow Position, Min, Max usw.

Schritt-für-Schritt-Konfiguration

1. Min / Max *

Bestimmt den numerischen Wertebereich, der auf der Gauge angezeigt wird (z. B. 0–400 oder 0–3000).

Dieser Bereich ist nicht winkelbasiert – es geht um die Zahlen entlang des Bogens.
Sie erkennen den Bereich visuell anhand der kleinsten und größten Zahlen, die auf der Skala markiert sind.

Beispiel 1:

Wenn die Gauge Werte von [code_block_2] bis [code_block_3] zeigt:

[code_block_4] = [code_block_2]
[code_block_6] = [code_block_3]
[img_0]

Beispiel 2:

Wenn eine andere Gauge Werte von [code_block_2] bis [code_block_9] zeigt:

[code_block_4] = [code_block_2]
[code_block_6] = [code_block_9]
[img_1]

Wichtig: Diese Werte müssen immer zu den Zahlen passen, die visuell auf der SVG-Grafik angezeigt werden.

2. Startwinkel / Endwinkel

Definiert den Drehbereich des Zeigers, relativ zum Rotationsursprung der Nadel.

Startwinkel = Position, bei der der Zeiger beginnt.
Endwinkel = Position, bei der der Zeiger endet.
Der Zeiger bewegt sich innerhalb dieses Winkels.

Beispiel (siehe Bild unten):

[code_block_14]: [code_block_15]
[code_block_16]: [code_block_17]
Ergibt eine Anzeige mit 240° Bereich, zentriert bei [code_block_18].

[img_2]

Ein weiteres Beispiel (siehe Bild), bei dem der Zeiger auf einem anderen Startwert steht ([code_block_19]):

[code_block_14]: [code_block_1]
[code_block_16]: [code_block_23]
[img_3]

3. Initial Arrow Position Value *

Bestimmt, wohin der Zeiger beim Laden der SVG zeigt – bevor Live-Daten übertragen werden.

Der Wert muss zu dem Zahlenwert auf der Skala passen, auf den der Zeiger in Ruhe zeigt.
Der Wert liegt im selben Bereich wie Min/Max.

Beispiel (siehe oben):
Wenn der Wertebereich [code_block_24] ist und der Zeiger bei [code_block_25] steht:

[code_block_26] = [code_block_25]

Dies sorgt dafür, dass die Anzeige beim Start korrekt ausgerichtet ist.

Warum jede Gauge individuell ist

Jede SVG kann einen anderen Wertebereich (z. B. 0–400 oder 0–3000), eine andere Winkelausdehnung (z. B. 180° oder 240°) und einen anderen Ursprungspunkt haben.

Deshalb müssen die Parameter für jede Gauge separat in den Eigenschaften konfiguriert werden.

Remote-Konfiguration (CODESYS)

In manchen Projekten möchten Sie die Gauge-Eigenschaften dynamisch über CODESYS steuern.

Verwenden Sie dies, wenn:

Sie Winkel oder Wertebereiche aus der PLC-Logik ändern möchten.
Sie zentrale Kontrolle über mehrere Anzeigen benötigen.

Aktivieren Sie dazu die Option Remote Control in den Gauge-Eigenschaften. Danach können Variablen wie min, max, Winkel usw. gebunden werden.

Beispiel: Konfiguration

[code_block_28]

Eigene SVGs hochladen (für Fortgeschrittene)

Sobald Sie mit den Standard-Gauges vertraut sind, können Sie eigene SVGs hochladen.

Die folgende Tabelle zeigt die notwendigen SVG-IDs, die Sie in Ihrem SVG-Editor korrekt setzen müssen, damit die Anzeige funktioniert.

SVG ID Referenztabelle

[img_4]

#	Element	SVG ID
1	Zeiger / Pfeil / Nadel	[code_block_29]
2	Rotationsursprung	[code_block_30]
3	Zahlenwert-Anzeige	[code_block_31]
4	Einheit	[code_block_32]
5	Hauptmarkierung (Ticks)	[code_block_33]
6	Root-Container	[code_block_34]

Setup

Die Custom Gauge ist sehr flexibel – benötigt aber eine korrekte Einrichtung.

Der Rotationsursprung der Nadel ist dabei entscheidend. Die Start- und Endwinkel beziehen sich immer auf diesen Ursprungspunkt.

Hinweis: Beachten Sie den Ursprungspunkt der Nadel, um eine korrekte Ausrichtung und Bewegung zu gewährleisten.

Inhaltsangabe: