Messgerät ui-gauge Added In: v1.1.0

Demo Ausprobieren

Fügt Ihrem Dashboard ein Messgerät-Diagramm hinzu. Dies kann mit benutzerdefinierten Typen (halb, 3/4), Stilen (abgerundet, Nadel) und Segmentierung konfiguriert werden, mit Beispielen, die unten detailliert beschrieben sind.

Screenshot, der jeden Messgerät-Typ nebeneinander zeigt

Eingabe

Werte für die Messgeräte können durch Senden eines numerischen Werts in msg.payload festgelegt werden. Das Messgerät wird dann aktualisiert, um diesen Wert widerzuspiegeln.

Eigenschaften

Prop	Dynamic	Description
Gruppe		Definiert, in welcher Gruppe des UI-Dashboards dieses Widget gerendert wird.
Größe		Steuert die Breite des Dropdowns in Bezug auf die übergeordnete Gruppe. Der Maximalwert ist die Breite der Gruppe.
Typ	✓	Definiert die Form des Messgeräts, "Kachel", "Batterie", "Wassertank", "Halb-Messgerät" oder "3/4-Messgerät"
Stil	✓	Definiert den Stil des gerenderten Bogens, "Nadel" oder "Abgerundet". (nur anwendbar für 3/4 und Halb-Messgeräte)
Bereich (min)	✓	Der kleinste Wert, der auf dem Messgerät angezeigt werden kann
Bereich (max)	✓	Der größte Wert, der auf dem Messgerät angezeigt werden kann
Segmente	✓	Definiert die Barrieren, durch die der Bogen farblich kodiert wird. Diese Segmente können auch auf dem Messgerät angezeigt werden.
Beschriftung	✓	Text, der über dem Messgerät angezeigt wird und beschreibt, was das Messgerät anzeigt.
Präfix	✓	Text, der _vor_ dem Wert in der Mitte des Messgeräts hinzugefügt wird. (nur anwendbar für 3/4 und Halb-Messgeräte)
Suffix	✓	Text, der _nach_ dem Wert in der Mitte des Messgeräts angezeigt wird. (nur anwendbar für 3/4 und Halb-Messgeräte)
Einheiten	✓	Kleiner Text, der unter dem Wert in der Mitte des Messgeräts angezeigt wird. (nur anwendbar für 3/4 und Halb-Messgeräte)
Symbol	✓	Symbol, das unter dem Wert in der Mitte des Messgeräts angezeigt wird. Verwendet Material Designs Icon, das Präfix mdi- muss nicht enthalten sein. (nur anwendbar für 3/4 und Halb-Messgeräte)
Größen (Messgerät)		(px) Wie dick der Bogen und die Hintergrundkulisse des Messgeräts gerendert werden.
Größen (Lücke)		(px) Wie groß der Abstand/die Polsterung zwischen dem Messgerät und den "Segmenten" ist.
Größen (Segmente)		(px) Wie dick die Segmente gerendert werden.

Dynamische Eigenschaften

Dynamic properties are those that can be overriden at runtime by sending a particular msg to the node.

Where appropriate, the underlying values set within Node-RED will be overriden by the values set in the received messages.

Prop	Payload	Structures	Example Values
Beschriftung	msg.ui_update.label	String
Symbol	msg.ui_update.icon	String
Typ	msg.ui_update.gtype	String	gauge-tile|gauge-battery|gauge-tank|gauge-half|gauge-34
Stil	msg.ui_update.gstyle	String
Min	msg.ui_update.min	Number
Max	msg.ui_update.max	Number
Segmente	msg.ui_update.segments	Array<{color: String, from: Number}>
Präfix	msg.ui_update.prefix	String
Suffix	msg.ui_update.suffix	String
Einheiten	msg.ui_update.units	String

Steuerungen

msg.	Example	Description
aktiviert	true | false	Ermöglicht die Steuerung darüber, ob die Zahleneingabe aktiviert ist oder nicht

Beispiele

Halb-Messgerät - Abgerundet

Typ	Stil	Größe (Messgerät)	Größe (Lücke)	Größe (Segmente)
Halb-Messgerät	Abgerundet	16	2	8

Beispiel eines Halb-Messgeräts, das einen abgerundeten Bogen zeigt.

Halb-Messgerät - Nadel

Typ	Stil	Suffix	Größe (Messgerät)	Größe (Lücke)	Größe (Segmente)
Halb-Messgerät	Nadel	%	0	0	32

Beispiel eines Halb-Messgeräts, das eine Nadel mit nur Segmenten zeigt.

3/4-Messgerät - Abgerundet

Typ	Stil	Größe (Messgerät)	Größe (Lücke)	Größe (Segmente)
3/4-Messgerät	Abgerundet	16	0	0

Beispiel eines 3/4-Messgeräts, das einen abgerundeten Bogen ohne Segmente zeigt.

3/4-Messgerät - Nadel

Typ	Stil	Größe (Messgerät)	Größe (Lücke)	Größe (Segmente)
3/4-Messgerät	Nadel	32	2	6

Beispiel eines 3/4-Messgeräts, das eine Nadel mit Segmenten und einem Bogen zeigt.

Kachel

Typ	Beschriftung
Kachel	Meine Kachel

Beispiele einiger Kachel-Messgeräte

Batterie Added In: v1.15.0

Typ
Batterie

Beispiele einiger horizontaler Batterie-Messgeräte

Wassertank Added In: v1.15.0

Typ
Wassertank

Beispiele einiger Wassertank-Messgeräte

Beim Wechsel zu einem "Wassertank"-Typ werden die Segmente mit den folgenden Werten überschrieben:

[{
    color: '#A8F5FF',
    from: 0
}, {
    color: '#55DBEC',
    from: 15
}, {
    color: '#53B4FD',
    from: 35
}, {
    color: '#2397D1',
    from: 50
}]

CSS überschreiben

Das Messgerät kann weiter gestylt werden, indem benutzerdefiniertes CSS zum ui_template-Knoten hinzugefügt wird. Einige nützliche Klassen, die zum Stylen verfügbar sind, umfassen:

• .nrdb-ui-gauge-value span - Der Wert in der Mitte des Messgeräts
• .nrdb-ui-gauge-value label - Die Einheitenbeschriftung
• .nrdb-ui-gauge-value i - Das Symbol
• .nrdb-ui-gauge-icon-only i - Verfügbar, wenn ein Messgerät ein Symbol, aber keine "Einheiten"-Beschriftung hat
• .nrdb-ui-gauge #limits - Das umschließende <g>-Element, das die min/max <text>-Elemente umschließt