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.

Das kleine Status Widget

Autor: Tobias Bräutigam
Verfügbar seit: 2022

Beschreibung

Das kleine Status-Widget kombiniert ein Icon/Wert mit einem Text. Es erfüllt den selben Zweck die das Status-Widget, benötigt dafür aber weniger Fläche. Da dieses Widget nicht den Standardmaßen entspricht wird empfohlen, es nur im Header / Footer einzusetzen und nicht mit anderen Widgets zu vermischen. Dies ist zwar technisch kein Problem jedoch bekommt man dadurch optische Brüche im Layout die keinen harmonischen Eindruck hinterlassen.

In diesem Widget kann oben ein Icon oder Wert angezeigt werden und unten ein Text. Das Icon kann entweder fest, oder Status-Abhängig sein, ebenso kann der untere Text entweder einen festen Wert oder aber den Status beinhalten.

../../../_images/cv-small-status-open.png

<cv-small-status format="%d an">
    <cv-icon slot="icon">ri-lightbulb-line</cv-icon>
    <cv-address slot="address" transform="DPT:5.001" mode="read">1/4/0</cv-address>
</cv-small-status>

Es muss ein <cv-address slot="address"> angegeben werden über den der anzuzeigende Wert übermittelt wird. Der Wert wird in diesem Fall innerhalb des Texts unten angezeigt, welcher über das format-Attribut definiert wird. Das Icon ist fest definiert und ändert sich nicht (slot="icon"). Sofern nicht anders angegeben wird das Icon bei Werten > 0 eingefärbt.

Es ist auch möglich das Icon über ein Mapping anzupassen um, je nach Wert, ein Icon für offene oder geschlossene Fenster anzuzeigen. Möchte eine andere Einfärbung erreicht als die voreingestellte so kann man ein eigenes Styling definieren.

../../../_images/cv-small-status-mapping.png

...
<cv-meta>
    <cv-mapping name="WindowOpen">
        <entry value="0">knxuf-fts_window_1w</entry>
        <entry range-min="1">knxuf-fts_window_1w_open</entry>
    </cv-mapping>
    <cv-styling name="WindowOpen">
        <entry range-min="1">red</entry>
    </cv-styling>
</cv-meta>
...
<cv-small-status format="%d offen" mapping="WindowOpen" styling="WindowOpen">
    <cv-icon slot="icon">knxuf-fts_window_1w_open</cv-icon>
    <cv-address slot="address" transform="DPT:5.010" mode="read">1/4/2</cv-address>
</cv-small-status>

Man kann auch den Wert selbst darstellen anstelle des Icons, um z.B. eine Temperatur anzuzeigen.

../../../_images/cv-small-status-label.png

<cv-small-status value-format="%d°" styling="">
    <label slot="value" style="font-size: 32px"/>
    <label slot="label" class="secondary">Außen</label>
    <cv-address slot="address" transform="DPT:5.010" mode="read">1/4/2</cv-address>
</cv-small-status>

Damit das vordefinierte Styling die Werte nicht einfärbt, wird es in diesem Fall durch styling="" deaktiviert.

Man kann dieses Widget mit einen Popup verbinden, um bei einem Klick weitere Details anzeigen zu können. So könnte z.B. ein Popup mit Wetterinformationen angezeigt werden.

<cv-small-status value-format="%d°" styling="">
    <label slot="value" style="font-size: 32px"/>
    <label slot="label" class="secondary">Außen</label>
    <cv-address slot="address" transform="DPT:5.010" mode="read">1/4/2</cv-address>
    <cv-popup slot="popup" modal="true">
        <cv-plugin>
            <openweathermap q="Irgendwo" owID="12345677" appid="123456789" lang="de"/>
        </cv-plugin>
    </cv-popup>
</cv-small-status>

Erlaubte Attribute im Small-Status-Element

Element	Attribut
	Name	Inhalt	Beschreibung
cv-small-status	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 unteren Wertes (printf-Syntax).
	value-format	Text	Formatierung des oberen 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.

Erlaubte Kind-Elemente und deren Attribute

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-small-status 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-small-status cv-icon #text		Text

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-small-status 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-small-status label #text		Text

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-small-status cv-address	slot	address oder tileAddress
	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.

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-small-status cv-popup	modal	true oder false	Deaktiviert den Hintergrund solange das Popup geöffnet ist.
	fullscreen	true oder false	Das geöffnete Popup belegt den gesamten Bildschirm.
	title	Text	Überschrift dieses Popups.
	auto-close-timeout	integer	Zeit in Sekunden in der das Popup automatisch geschlossen wird.
	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-small-status cv-popup custom #text		Text
cv-small-status cv-popup 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-small-status cv-popup 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-small-status 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-small-status cv-icon #text		Text

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-small-status cv-group	icon	Text	Icon für die Gruppe.
	name	Text	Name der Gruppe.
	open	true oder false	Macht den Inhalt der Gruppe sichtbar. Ansonsten ist nur der Inhalt von „summary“ sichtbar.
	wrap	true oder false	Verhindert Zeilenumbrüche, wenn der Inhalt zu breit für die Bildschirmgröße ist. Stattdessen wird der Inhalt scrollbar.
	hide-on-scroll	true oder false	Blendet dieses Element aus, wenn der Seiteninhalt gescrollt wurde.
	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-small-status cv-group custom #text		Text
cv-small-status cv-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-small-status cv-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-small-status 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-small-status 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-small-status iframe	src	anyURI
	data-src	anyURI
	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-small-status 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-small-status cv-icon #text		Text