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 Dynamic-Widget

Verfügbar seit: 2025

Autor: Tobias Bräutigam

Das Dynamic-Widget ermöglicht es, andere Teile der Visualisierung dynamisch anzuzeigen. Es kann z.B. dazu genutzt werden, die Anzeige-Elemente eines Raums auf einer Übersichtseite anzuzeigen, wenn man gerade in diesem Raum ist. Dazu benötigt man ein <cv-address> Element, welches Informationen über den Raum enthält in dem man sich gerade aufhält und eine <cv-group> für diesen Raum.

<cv-page id="start" name="Übersicht" icon="ri-dashboard-line">
    <cv-dynamic>
        <cv-ref selector="#floorplan > cv-group[name=Wohnzimmer]" when="Wohnzimmer" modify-selector="cv-group" modify-attribute="open:true"/>
        <cv-ref selector="#floorplan > cv-group[name=Esszimmer]" when="Esszimmer" modify-selector="cv-group" modify-attribute="open:true"/>
        <cv-address transform="OH:String" mode="read">Praesenz</cv-address>
    </cv-dynamic>
</cv-page>
<cv-page id="floorplan" name="Räume" icon="knxuf-control_building_empty">
    <cv-group name="Wohnzimmer" icon="knxuf-scene_livingroom">
        ...
    </cv-group>
    <cv-group name="Esszimmer" icon="knxuf-scene_dinner">
       ...
    </cv-group>
</cv-page>

Mit Hilfe eines <cv-ref> Elements gibt man an was wann angezeigt werden soll. Das selector Attribut gibt an, welche(s) Element(e) angezeigt werden sollen. Hierbei handelt es sich um einen CSS-Selektor der ein oder mehrere Elemente auswählt. Diese werden kopiert und in die Visualisierung eingefügt, wenn der Wert des when Attributs des <cv-ref> Elements mit dem Wert des <cv-address> Elements übereinstimmt.

In diesem Beispiel wird die Gruppe Wohnzimmer angezeigt, wenn der Wert von Praesenz den Wert Wohnzimmer hat. Die Gruppe Esszimmer wird angezeigt, wenn der Wert von Praesenz den Wert Esszimmer hat.

Es besteht zusätzlich die Möglichkeit die Attribute der kopierten Elemente zu ändern. Wenn man z.B. eine <cv-group> dynamisch anzeigen möchte die eigentlich geschlossen ist, dann kann man die Kopie dieser Gruppe als automatisch geöffnet anzeigen lassen, indem man das open Attribut der cv-group auf true ändert.

Möchte man nicht die gesamte Gruppe kopieren sondern nur den Inhalt dieser, dann kann man den selector des <cv-ref> Elements folgendermaßen anpassen.

...
<cv-dynamic>
    <cv-ref selector="#floorplan > cv-group[name=Wohnzimmer] > *:not(summary)" when="Wohnzimmer" modify-selector="cv-group" modify-attribute="open:true"/>
    <cv-ref selector="#floorplan > cv-group[name=Esszimmer] > *:not(summary)" when="Esszimmer" modify-selector="cv-group" modify-attribute="open:true"/>
    ...
</cv-dynamic>
...

Inhalt nur für bestimmte Clients anzeigen

Die CometVisu bietet die Möglichkeit eine Client-ID per URL zu übergeben (z.B. http://cometvisu/?clientID=Tablet_Wohnzimmer). Diese steht im „system“ Backend unter der Adresse client:id zur Verfügung. Damit kann man dann Teile der Visualisierung nur für bestimmte Clients anzeigen lassen.

...
<cv-dynamic>
    <cv-ref selector="#floorplan > cv-group[name=Wohnzimmer]" when="Tablet_Wohnzimmer" modify-selector="cv-group" modify-attribute="open:true"/>
    <cv-ref selector="#floorplan > cv-group[name=Esszimmer]" when="Tablet_Esszimmer" modify-selector="cv-group" modify-attribute="open:true"/>
    <cv-address transform="OH:String" mode="read" backend="system">client:id</cv-address>
</cv-dynamic>
...

Erlaubte Kind-Elemente und deren Attribute

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-dynamic cv-ref	selector	Text	CSS-Selector der das Element referenziert, welches hier angezeigt werden soll.
	when	Text	Zeige dieses Element an, wenn die zugehörige Adresse diesen Wert hat.
	modify-selector	Text	CSS-Selector mit dem, innerhalb des zu kopierenden Elements, ein Kind-Element ausgewählt wird.
	modify-attribute	Text	Verändert den Wert eines Attributes in dem vom modify-selector ausgewählten Elements. Setze sich zusammen aus „attributName:Wert“.

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-dynamic 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-dynamic 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.