Pages

Benutzerdefiniertes Balkendiagramm (Custom Bargraph)

Das Custom Bargraph-Steuerelement ist ein leistungsfähiges, anpassbares Widget zur Visualisierung von Echtzeitdaten als vertikales oder horizontales Balkendiagramm.
Es eignet sich ideal zur Überwachung analoger Werte wie Temperatur, Druck oder Füllstand.

Übersicht

Dieses Steuerelement zeigt nicht nur einen kontinuierlich aktualisierten Balken, sondern ermöglicht auch die Darstellung von Zahlenwerten, Einheiten, Beschriftungen und Alarmschwellen – für eine schnelle und intuitive Interpretation von Systemzuständen.

Hauptfunktionen

Dynamische Datenanzeige

  • Verknüpfung mit einer Echtzeit-Variable (z. B. aus CODESYS oder MQTT)
  • Die Höhe bzw. Länge des Balkens entspricht dem Live-Wert

Zahlenwert & Einheit

  • Optional Anzeige des aktuellen Werts als Zahl
  • Ergänzung durch Einheitensuffix möglich (z. B. °C, %, bar)

Benutzerdefinierte Beschriftungen

  • Bis zu zwei Beschriftungen (z. B. „Eingangsdruck“, „Max. Sicher“)
  • Dienen zur Beschreibung oder Kategorisierung des Werts

Zwischenmarkierungen

  • Anzeige von bis zu 5 Referenzwerten (z. B. „Optimal“, „Kritisch“, „Warnung“)

Alarmschwellen

  • Definition von bis zu 6 Grenzwerten
  • Visuelle Markierung bei Erreichen eines kritischen Bereichs, zur schnellen Reaktion

Anpassbares Design

  • Farbanpassung, Richtung (horizontal/vertikal), Stil und Layout vollständig konfigurierbar

Anwendungsfälle

Prozessüberwachung

  • Beispiel: Füllstand eines Tanks oder Pumpendruck mit visuellen Warnbereichen

Umweltdaten

  • Beispiel: Temperatur oder Luftfeuchtigkeit mit markierten Grenzbereichen

Fertigungsstraßen

  • Beispiel: Überwachung von Geschwindigkeit, Belastung oder Stückzahl mit Schwellenwertanzeige

SVG-ID Referenztabelle

[img_1]

Verwende folgende SVG-IDs, um dynamische Werte korrekt mit den Elementen im Balkendiagramm zu verknüpfen:

# Element SVG ID
1 Beschriftung Zeile 1 [code_block_0]
2 Beschriftung Zeile 2 [code_block_1]
3 Referenzwert 5 [code_block_2]
4 Referenzwert 4 [code_block_3]
5 Referenzwert 3 [code_block_4]
6 Referenzwert 2 [code_block_5]
7 Referenzwert 1 [code_block_6]
8 Zeiger (aktueller Wert) [code_block_7]
9 Hauptwert [code_block_8]
10 Einheit [code_block_9]
11 Balkenpfad [code_block_10]
12 Balkenfüllung [code_block_11]
13 Obere Grenze 1 [code_block_12]
14 Obere Grenze 2 [code_block_13]
15 Obere Grenze 3 [code_block_14]
16 Untere Grenze 1 [code_block_15]
17 Untere Grenze 2 [code_block_16]
18 Untere Grenze 3 [code_block_17]
19 Root-Klasse [code_block_18]

DATA JSON Schnittstelle

[code_block_19]