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

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

#	Element	SVG ID
1	Beschriftung Zeile 1	`label_1_tspan`
2	Beschriftung Zeile 2	`label_2_tspan`
3	Referenzwert 5	`tick_major_5_value`
4	Referenzwert 4	`tick_major_4_value`
5	Referenzwert 3	`tick_major_3_value`
6	Referenzwert 2	`tick_major_2_value`
7	Referenzwert 1	`tick_major_1_value`
8	Zeiger (aktueller Wert)	`thumb`
9	Hauptwert	`value_tspan`
10	Einheit	`label_unit_tspan`
11	Balkenpfad	`barPath`
12	Balkenfüllung	`barFill`
13	Obere Grenze 1	`limit_hi_3`
14	Obere Grenze 2	`limit_hi_2`
15	Obere Grenze 3	`limit_hi_1`
16	Untere Grenze 1	`limit_lo_1`
17	Untere Grenze 2	`limit_lo_2`
18	Untere Grenze 3	`limit_lo_3`
19	Root-Klasse	`custom_control_root`

DATA JSON Schnittstelle

{
    "value": "20",
    "label1": "Custom Bar label 1",
    "label2": "Custom Bar label 2",
    "unit": "",
    "ticks": [
        "0",
        "10",
        "20",
        "50",
        "100"
    ],
    "parameters": {
        "pMin": -20,
        "pMax": 200,
        "pLimitHi1": {
            "enabled": true,
            "value": 150
        },
        "pLimitHi2": {
            "enabled": true,
            "value": 170
        },
        "pLimitHi3": {
            "enabled": true,
            "value": 190
        },
        "pLimitLo1": {
            "enabled": true,
            "value": 20
        },
        "pLimitLo2": {
            "enabled": true,
            "value": -10
        },
        "pLimitLo3": {
            "enabled": true,
            "value": -15
        }
    },
    "theme": {
        "barBorder": "",
        "barPath": "",
        "barLFill": "",
        "barRFill": "",
        "thumb": ""
    },
    "general": {
        "rootClass": ""
    }
}

Inhaltsangabe: