Caution

This is the documentation for the current development branch of the CometVisu. It is possible that some of the described features are not yet available in the current release.

Also there might be lots of errors in this documentation as some parts of the content have been translated by an online translation service.

The dynamic widget

Available since: 2025

Author: Tobias Bräutigam

The Dynamic widget allows to display other parts of the visualization dynamically. It can be used, for example, to display the display elements of a room on an overview page when you are currently in this room. For this you need a <cv-address> element, which contains information about the room you are currently in and a <cv-group> for this room.

<cv-page id="start" name="Dashboard" icon="ri-dashboard-line">
    <cv-dynamic>
        <cv-ref selector="#floorplan > cv-group[name=Living]" when="Livingroom" modify-selector="cv-group" modify-attribute="open:true"/>
        <cv-ref selector="#floorplan > cv-group[name=Dining]" when="Diningroom" modify-selector="cv-group" modify-attribute="open:true"/>
        <cv-address transform="OH:String" mode="read">Presence</cv-address>
    </cv-dynamic>
</cv-page>
<cv-page id="floorplan" name="Rooms" icon="knxuf-control_building_empty">
    <cv-group name="Living" icon="knxuf-scene_livingroom">
        ...
    </cv-group>
    <cv-group name="Dining" icon="knxuf-scene_dinner">
       ...
    </cv-group>
</cv-page>

With the help of a <cv-ref> element you specify what should be displayed when. The selector attribute specifies which element(s) should be displayed. This is a CSS selector that selects one or more elements. These are copied and inserted into the visualization when the value of the when attribute of the <cv-ref> element matches the value of the <cv-address> element.

In this example, the group Living is displayed when the value of Presence is Livingroom. The group Dining is displayed when the value of Presence is Diningroom.

There is also the possibility to change the attributes of the copied elements. If you want to display a <cv-group> dynamically that is actually closed, then you can display the copy of this group as automatically opened by changing the open attribute of the cv-group to true.

If you do not want to copy the entire group but only its content, you can adjust the selector of the <cv-ref> element as follows.

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

Show content only for certain clients

The CometVisu offers the possibility to pass a client ID via URL (e.g. http://cometvisu/?clientID=Tablet_Livingroom). This is available in the “system” backend at the address client:id. This way you can display parts of the visualization only for certain clients.

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

Allowed child elements and their attributes

Element	Attribute
Structure	Name	Content	Description
cv-dynamic cv-ref	selector	string	CSS-Selector that references the element that should be shown here.
	when	string	Show this element, when the related address has this state.
	modify-selector	string	CSS-selector to select an element inside the copied element.
	modify-attribute	string	Changes the value of an attribute if the element selected via modify-selector. Combination of “attributeName:value”.

Element	Attribute
Structure	Name	Content	Description
cv-dynamic cv-address	transform	string	Defines the datatype in the backend, e.g. DPT:1.001 for KNX datapoint type 1.001.
	mode	disable, read, write or readwrite	Defines if this address is only used to read, write, both readwrite or none of them disable.
	value	string	Fixed value sent to this address.
	on	click, down or up	Event on which a value should be sent to this address (only useful in mode write or readwrite), also needs value.
	target	string	Target in the parent widget the value if this address should be use for. The possible values depend on the parent widget.
	format-pos	decimal	Position for format string when multiple addresses are used.
	qos	decimal	Only MQTT: QoS
	retain	true or false	Only MQTT: retain flag
	selector	string	Only MQTT: JSON selector
	backend	string	Optional name of the backend this address belongs to.
	mapping	string	Map the bus value to a different value, text or symbol for displaying. See also mapping
	format	string	Formatting of the value (printf syntax).
	delay	positiveInteger	Optional delay in milliseconds that a write-request to this address is delayed.
	send-mode	on-change or always	Usually the elements that are using this address receive an update-event only when that value hast changed (on-change). This check can be disabled always to send the update-event every time when a new value has been received from the backend.
cv-dynamic cv-address #text		string	The GA (like: 12/0/7) for KNX-backends, the item name for openHAB-backend or the MQTT topic