Vorsicht

Dies ist die Dokumentation des aktuellen Entwicklungszweigs der CometVisu. Es besteht daher die Möglichkeit, dass einige der hier beschriebenen Features mit dem aktuellsten Release der CometVisu nicht genutzt werden können.

Value

Autor: Tobias Bräutigam

Verfügbar seit: 2022

Beschreibung

Die Value-Komponente stellt einen Wert dar. Sie ist eine rein passive Komponente und sendet selbst keine Werte zum Backend. Für die Darstellung der Werte stehen unterschiedliche Arten zur Verfügung, von einfachem Text über Icons bis hin zu Fortschrittsbalken.

Text

Die einfachste Variante ist es den Wert einfach als Text anzuzeigen.

<cv-value format="%d%%">
    <cv-address transform="DPT:5.001" mode="read">1/4/2</cv-address>
    <label class="value secondary"/>
</cv-value>

Über das format-Attribut kann der Wert formatiert werden. Die Textfarbe kann über einen zusätzlichen Eintrag in das class-Attribut des <label>-Elements beeinflusst werden. Es stehen hier eine Primäre und eine Sekundäre Textfarbe zur Verfügung. Um welche Farben es sich dabei konkret handelt ist abhängig vom jeweiligen Design. In dem Beispiel oben wurde die sekundäre Textfarbe verwendet class="secondary".

Hinweis

Der value-Eintrag im class-Attribut des <label>-Elements ist zwingend erforderlich, da hierüber der Value-Komponente mitgeteilt wird wo der Wert hineingeschrieben werden soll. Fehlt dieser Eintrag wird kein Wert angezeigt.

Um die Primärfarbe zu nutzen muss das <label> folgendermaßen aussehen.

<label class="value primary"/>

Zusätzlich kann man die Text-Größe einstellen, ebenfalls über einen zusätzlichen Eintrag in das class-Attribut. Es stehen folgende Möglichkeiten zur Verfügung: medium und large. Wobei medium kleiner als die Standardgröße ist und large größer.

<label class="value large"/>

Icon

Wird ein Icon als class="value" benutzt, kann das Icon über ein Mapping und dessen Farbe über Styling Wert-abhängig beeinflusst werden.

Hinweis

Hier darf das cv-value-Element kein format benutzen, da sonst das Mapping und das Styling nicht mehr funktionieren würden.

...
<cv-meta>
    <cv-mapping name="light">
        <entry value="0">ri-lightbulb-line</entry>
        <entry value="1">ri-lightbulb-fill</entry>
    </cv-mapping>
    <cv-styling name="button">
        <entry value="0">inactive</entry>
        <entry range-min="1">active</entry>
    </cv-styling>
</cv-meta>
...
<cv-value mapping="light" styling="button">
    <cv-address transform="DPT:1.001" mode="read">1/4/2</cv-address>
    <cv-icon class="value"/>
</cv-value>

Fortschrittsbalken

Um einen Fortschritt anzuzeigen gibt es zwei Darstellungsmöglichkeiten: einen horizontalen Fortschrittsbalken oder eine runden oder halb-runden Fortschrittsbalken.

horizontaler Fortschrittsbalken

<cv-value>
    <cv-address transform="DPT:5.001" mode="read">1/4/2</cv-address>
    <meter class="value" min="0" max="100"/>
</cv-value>

runder Fortschrittsbalken

<cv-value format="%d%%">
    <cv-address transform="DPT:5.001" mode="read">1/4/2</cv-address>
    <cv-round-progress class="value"/>
</cv-value>

halb-runder Fortschrittsbalken

<cv-value format="%d%%">
    <cv-address transform="DPT:5.001" mode="read">1/4/2</cv-address>
    <cv-round-progress class="value" type="semiCircle"/>
</cv-value>

halb-runder Fortschrittsbalken mit anderer Farbe

<cv-value format="%d%%">
    <cv-address transform="DPT:5.001" mode="read">1/4/2</cv-address>
    <cv-round-progress class="value" type="semiCircle" foreground-color="#FF0000"/>
</cv-value>

Erlaubte Attribute

Element	Attribut
	Name	Inhalt	Beschreibung
cv-value	styling	Text	Ändert die Farbe des angezeigten Wertes abhängig vom Wert selbst. Siehe auch Styling
	mapping	Text	Ordnet den Werten vom Bus andere Werte, Texte oder Symbole zur Anzeige zu. Siehe auch Mapping
	format	Text	Formatierung des Wertes (printf-Syntax).
	visible-on	mobile oder desktop	Steuert die Sichtbarkeit dieses Elements anhand der Bildschirmgröße.
	class	Text	Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.
	style	Text	Individuelle CSS style Regeln für dieses Widget.
	row	1, 2, 3, first, middle oder last	Zeilennummer oder Position (first, middle, last)
	column	1, 2, 3, first, middle oder last	Spaltennummer oder Position (first, middle, last)
	rowspan	integer	Anzahl der Zeilen die dieses Element belegt
	colspan	integer	Anzahl der Spalten die dieses Element belegt

Erlaubte Kind-Elemente und deren Attribute

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-value cv-address	transform	Text	Legt den Datentyp im Backend fest, z.B. DPT:1.001 für den KNX Datenpunkttyp 1.001.
	mode	disable, read, write oder readwrite	Legt fest, ob auf dieser Adresse nur gelesen read, geschrieben write, beides readwrite oder nichts davon disable werden soll
	value	Text	Fixer Wert welcher an diese Adresse gesendet wird.
	on	click, down oder up	Event bei dem ein Wert and diese Adresse geschickt wird (nur in Verbindung mit value und mode=``read`` oder readwrite).
	target	Text	Ziel innerhalb der Eltern-Widgets für das die Werte dieser Adresse benutzt werden sollen. Die möglichen Werte hängen vom Eltern-Widget ab.
	format-pos	Zahl	Position für Format-String wenn mehrere Adressen gleichzeitig genutzt werden.
	qos	Zahl	Nur MQTT: QoS
	retain	true oder false	Nur MQTT: retain Flag
	selector	Text	Nur MQTT: JSON Selektor
	backend	Text	Optionaler Name des Backends zu dem diese Adresse gehört.
	mapping	Text	Ordnet den Werten vom Bus andere Werte, Texte oder Symbole zur Anzeige zu. Siehe auch Mapping
	format	Text	Formatierung des Wertes (printf-Syntax).
	delay	positiveInteger	Optionales delay in Millisekunden, um welches das Schreiben an diese Adresse verzögert wird.
	send-mode	on-change oder always	Normalerweise bekommen Elemente, die diese Adresse benutzen nur eine Update-Benachrichtigung, wenn sich der Wert tatsächlich geändert hat (on-change). Mit always wird diese Überprüfung umgangen und die Update-Benachrichtigung jedes Mal geschickt, wenn ein neuer Wert vom Backend empfangen wurde.
cv-value cv-address #text		Text	Die Gruppenadresse (z.B: 12/0/7) bei KNX-Backends, der Item-Name beim openHAB-Backend oder das Topic bei MQTT.

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-value cv-address-group	operator	+, -, * oder /	Mathematischer Operator für Berechnung.
	round	true oder false	Ergebnis runden.
	factor	float	Ergebnis mit diesem Wert multiplizieren.
cv-value cv-address-group cv-address	transform	Text	Umwandlung des Bus-System Wertes um angezeigt werden zu können.
	mode	disable, read, write oder readwrite	„disable“ deaktiviert die Kommunikation, bei „read“ wird nur vom Backend gelesen, bei „write“ wird nur geschrieben und „readwrite“ wird die Adresse zum Lesen und zum Schreiben verwendet.
	variant	Text
	format-pos	Zahl	Position für Format-String wenn mehrere Adressen gleichzeitig genutzt werden.
	selector	Text	Nur MQTT: JSON Selektor
	qos	Zahl	Nur MQTT: QoS
	retain	true oder false	Nur MQTT: retain Flag
	ignore-error	true oder false	Nur MQTT: ignoriere Dekodierfehler.
cv-value cv-address-group cv-address #text		Text	Die Gruppenadresse (z.B: 12/0/7) bei KNX-Backends, der Item-Name beim openHAB-Backend oder das Topic bei MQTT.

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-value p	visible-on	mobile oder desktop	Steuert die Sichtbarkeit dieses Elements anhand der Bildschirmgröße.
	class	Text	Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.
	style	Text	Individuelle CSS style Regeln für dieses Widget.
cv-value p label icon	name	Text	Name unter dem das Icon registriert ist.
	type	Text
	flavour	Text	Auswahl der Darstellungsvariante. Siehe auch Flavour.
	color	Text	Farbe des Icon in CSS Notation (z.B. #1188FF).
	styling	Text	Ändert die Farbe des angezeigten Wertes abhängig vom Wert selbst. Siehe auch Styling
	class	Text	Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.
cv-value p label #text		Text	Text um bei dem Widget eine Beschreibung darzustellen.
cv-value p #text		Text

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-value label	tr	true oder false	Legt fest, dass der Text-Inhalt dieses Elements übersetzt werden soll.
	value-size	small, medium, normal oder large	Legt die Schriftgröße fest.
	visible-on	mobile oder desktop	Steuert die Sichtbarkeit dieses Elements anhand der Bildschirmgröße.
	class	Text	Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.
	style	Text	Individuelle CSS style Regeln für dieses Widget.
cv-value label #text		Text

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-value meter	min	integer
	max	integer
	value	integer
	visible-on	mobile oder desktop	Steuert die Sichtbarkeit dieses Elements anhand der Bildschirmgröße.
	class	Text	Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.
	style	Text	Individuelle CSS style Regeln für dieses Widget.

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-value cv-icon	size	small, large, x-large, xx-large oder xxx-large	Legt die Größe des Icons fest.
	color	Text	Farbe des Icons.
	visible-on	mobile oder desktop	Steuert die Sichtbarkeit dieses Elements anhand der Bildschirmgröße.
	class	Text	Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.
	style	Text	Individuelle CSS style Regeln für dieses Widget.
cv-value cv-icon #text		Text

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-value cv-round-progress	radius	integer	Radius des Kreises.
	stroke	integer	Randbreite des Kreises.
	type	circle oder semiCircle	Darstellungsart (Kreis: circle (default) oder Halbkreis: semiCircle).
	min	Zahl	Minimaler Wert.
	max	Zahl	Maximaler Wert.
	foreground-color	Text	Farbe des Wertbalkens.
	background-color	Text	Farbe des Hintergrundbalkens.
	visible-on	mobile oder desktop	Steuert die Sichtbarkeit dieses Elements anhand der Bildschirmgröße.
	class	Text	Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.
	style	Text	Individuelle CSS style Regeln für dieses Widget.