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": ""
    }
}

Erweitert: Benutzerdefinierte Bargraph-Icons

Balkendiagramme können verschiedene Icons anzeigen, um unterschiedliche Zustände oder Trends darzustellen. Beispielsweise können Pfeil-Icons verwendet werden, um anzuzeigen, ob ein Wert steigt oder fällt.

Bargraph Icon CoDeSys Setup

In diesem Beispiel ist die Eigenschaft Icon auf 0 gesetzt, wodurch kein Icon angezeigt wird. Um ein Icon darzustellen, kann der Wert der Icon-Eigenschaft auf 1 oder 2 geändert werden. Diese Werte ermöglichen das Umschalten zwischen zwei vordefinierten Icon-Zuständen und bieten so eine dynamische visuelle Rückmeldung im Balkendiagramm. Die Icons selbst werden im entsprechenden SVG-Element definiert.

Inhaltsangabe: