Text ui-text

Demo Ausprobieren

Zeigt ein nicht bearbeitbares Textfeld in der Benutzeroberfläche an. Jede empfangene msg.payload aktualisiert den neben der (optional) Beschriftung angezeigten Wert.

Eigenschaften

Prop	Dynamic	Description
Gruppe		Definiert, in welcher Gruppe des UI-Dashboards dieses Widget gerendert wird.
Größe		Steuert die Breite des Buttons in Bezug auf die übergeordnete Gruppe. Der Maximalwert ist die Breite der Gruppe.
Beschriftung		Der Text, der innerhalb des Buttons angezeigt wird. HTML-Inhalt ist erlaubt.
Layout		Wählen Sie, wie Sie Ihre Beschriftung (falls definiert) und den Wert anordnen möchten.
Stil		Kontrollkästchen, um festzulegen, ob benutzerdefinierte Stile für den Text enthalten sein sollen. Wenn dies aktiviert ist, werden die unten stehenden Optionen angezeigt.
Schriftart		Wenn "Stil" aktiviert ist, wird dies die Schriftart des Textes definieren.
Textgröße		Wenn "Stil" aktiviert ist, wird dies die Größe des Textes definieren.
Textfarbe		Wenn "Stil" aktiviert ist, wird dies die Farbe des Textes definieren.

Hinzufügen von Präfixen & Suffixen

Im Dashboard 1.0 gab es eine Option namens valueFormat, die es Ihnen ermöglichte, einem ui-text-Widget innerhalb der Knotenkonfiguration ein Präfix oder Suffix hinzuzufügen. Obwohl wertvoll, hatte dies viele Sicherheitslücken, daher haben wir uns mit Dashboard 2.0 entschieden, es zu entfernen.

Stattdessen verfolgen wir einen anderen Ansatz und verwenden den eingebauten "template"-Knoten von Node-RED:

Was folgendes rendert:

Beispiel eines gerenderten Suffixes auf einem UI-Text-Element

Wir tun dies, weil dieser Ansatz weit über das ui-text-Widget hinaus verwendet werden kann und HTML-Inhalte in jedes Widget durch dynamische Eigenschaften injizieren kann.

HTML rendern

Das ui-text-Widget unterstützt HTML-Inhalte (über msg.payload). Dies ermöglicht es Ihnen, formatierten Text, Links, Bilder und mehr zu rendern.

Statisches HTML

Zum Beispiel, das Injizieren von:

<a href="https://flowfuse.com" target="_blank">FlowFuse</a>

als msg.payload würde folgendes rendern:

msg.-Inhalt rendern

Wenn Sie den Inhalt einer msg. rendern und diesen dennoch mit HTML umwickeln möchten, können Sie den Standard-template-Knoten von Node-RED verwenden, um die HTML-Struktur zu definieren:

Mit dem Inhalt des template-Knotens auf:

Beispiel eines "template"-Knotens zur Strukturierung von HTML-Inhalten in einem Textknoten

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
Layout	msg.ui_update.layout	String<'row-left', 'row-center', 'row-right', 'row-spread', 'col-center'>
Schriftart	msg.ui_update.font	String
Schriftgröße	msg.ui_update.fontSize	String
Farbe	msg.ui_update.color	String
Klasse	msg.class	String

Beispiel

Beispiele für Varianten von ui-text, die in einem Dashboard gerendert werden.