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 small status widget

Author: Tobias Bräutigam

Available since: 2022

Description

The small status widget combines an icon/value with a text. It serves the same purpose as the status widget, but requires less space. Since this widget does not conform to the standard dimensions, it is recommended to use it only in the header/footer and not to mix it with other widgets. This is not a technical problem, but it creates visual breaks in the layout that do not leave a harmonious impression.

In this widget, an icon or value can be displayed at the top and text at the bottom. The icon can be either fixed or status-dependent, as can the lower text either contain a fixed value or the status.

<cv-small-status format="%d on">
    <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>

It is required to specify a <cv-address slot="address"> through which the value to be displayed is transmitted. In this case, the value is displayed below the text, which is defined via the format attribute. The icon is fixed and does not change (slot="icon"). Unless otherwise specified, the icon is colored for values > 0.

It is also possible to adjust the icon via a mapping to display an icon for open or closed windows, for example, depending on the value. If a different coloring is desired than the preset one, an individual styling can be defined.

...
<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 open" 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>

You can also display the value itself instead of the icon, for example, to display a temperature.

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

To prevent the predefined styling from coloring the values, it is deactivated in this case by styling="".

This widget can be connected to a popup to display additional details when clicked. For example, a popup with weather information could be displayed.

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

Allowed attributes in the Small-Status-Element

Element	Attribute
	Name	Content	Description
cv-small-status	styling	string	Change the color of the displayed value depending on its value. See also styling
	mapping	string	Map the bus value to a different value, text or symbol for displaying. See also mapping
	format	string	Formatting of the lower value (printf syntax).
	value-format	string	Formatting of the upper value (printf syntax).
	visible-on	mobile or desktop	Controls this element’s visibility by screen size.
	class	string	Add this value to the CSS class so that it can be formatted by a user provided style sheet.
	style	string	Custom CSS style rules for this widget.

Allowed child elements and their attributes

Element	Attribute
Structure	Name	Content	Description
cv-small-status cv-icon	size	small, large, x-large, xx-large or xxx-large	Defines the size of the icon.
	color	string	Icon color.
	visible-on	mobile or desktop	Controls this element’s visibility by screen size.
	class	string	Add this value to the CSS class so that it can be formatted by a user provided style sheet.
	style	string	Custom CSS style rules for this widget.
cv-small-status cv-icon #text		string

Element	Attribute
Structure	Name	Content	Description
cv-small-status label	tr	true or false	Defines that the text content of this element should be translated.
	value-size	small, medium, normal or large	Defines the font size.
	visible-on	mobile or desktop	Controls this element’s visibility by screen size.
	class	string	Add this value to the CSS class so that it can be formatted by a user provided style sheet.
	style	string	Custom CSS style rules for this widget.
cv-small-status label #text		string

Element	Attribute
Structure	Name	Content	Description
cv-small-status cv-address	slot	address or tileAddress
	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.

Element	Attribute
Structure	Name	Content	Description
cv-small-status cv-popup	modal	true or false	Disables the background while the popup is open.
	fullscreen	true or false	Open the popup in fullscreen mode.
	title	string	Headline of this popup.
	auto-close-timeout	integer	Time in seconds when the popup is automatically closed.
	visible-on	mobile or desktop	Controls this element’s visibility by screen size.
	class	string	Add this value to the CSS class so that it can be formatted by a user provided style sheet.
	style	string	Custom CSS style rules for this widget.
cv-small-status cv-popup custom #text		string
cv-small-status cv-popup cv-address	transform	string	Transformation of the bus system value to be shown.
	mode	disable, read, write or readwrite	“disable” deactivates the communication, “read” will only fetch data from the backend, “write” will only write to it and an address with “readwrite” will be both, read from and written to.
	variant	string
	format-pos	decimal	Position for format string when multiple addresses are used.
	selector	string	Only MQTT: JSON selector
	qos	decimal	Only MQTT: QoS
	retain	true or false	Only MQTT: retain flag
	ignore-error	true or false	Only MQTT: ignore decode errors.
cv-small-status cv-popup cv-address #text		string	The GA (like: 12/0/7) for KNX-backends, the item name for openHAB-backend or the MQTT topic

Element	Attribute
Structure	Name	Content	Description
cv-small-status cv-icon	size	small, large, x-large, xx-large or xxx-large	Defines the size of the icon.
	color	string	Icon color.
	visible-on	mobile or desktop	Controls this element’s visibility by screen size.
	class	string	Add this value to the CSS class so that it can be formatted by a user provided style sheet.
	style	string	Custom CSS style rules for this widget.
cv-small-status cv-icon #text		string

Element	Attribute
Structure	Name	Content	Description
cv-small-status cv-group	icon	string	Icon for the group.
	name	string	Name of the group.
	open	true or false	Makes the groups content visible, otherwise only the content of “summary” is visible.
	wrap	true or false	Prevents line wraps when the content is wider that the screen size. The content will be horizontally scrollable instead.
	hide-on-scroll	true or false	Fades out this content, if the page content has been scrolled.
	visible-on	mobile or desktop	Controls this element’s visibility by screen size.
	class	string	Add this value to the CSS class so that it can be formatted by a user provided style sheet.
	style	string	Custom CSS style rules for this widget.
cv-small-status cv-group custom #text		string
cv-small-status cv-group cv-address	transform	string	Transformation of the bus system value to be shown.
	mode	disable, read, write or readwrite	“disable” deactivates the communication, “read” will only fetch data from the backend, “write” will only write to it and an address with “readwrite” will be both, read from and written to.
	variant	string
	format-pos	decimal	Position for format string when multiple addresses are used.
	selector	string	Only MQTT: JSON selector
	qos	decimal	Only MQTT: QoS
	retain	true or false	Only MQTT: retain flag
	ignore-error	true or false	Only MQTT: ignore decode errors.
cv-small-status cv-group cv-address #text		string	The GA (like: 12/0/7) for KNX-backends, the item name for openHAB-backend or the MQTT topic

Element	Attribute
Structure	Name	Content	Description
cv-small-status 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-small-status cv-address #text		string	The GA (like: 12/0/7) for KNX-backends, the item name for openHAB-backend or the MQTT topic

Element	Attribute
Structure	Name	Content	Description
cv-small-status iframe	src	anyURI
	data-src	anyURI
	visible-on	mobile or desktop	Controls this element’s visibility by screen size.
	class	string	Add this value to the CSS class so that it can be formatted by a user provided style sheet.
	style	string	Custom CSS style rules for this widget.

Element	Attribute
Structure	Name	Content	Description
cv-small-status cv-icon	size	small, large, x-large, xx-large or xxx-large	Defines the size of the icon.
	color	string	Icon color.
	visible-on	mobile or desktop	Controls this element’s visibility by screen size.
	class	string	Add this value to the CSS class so that it can be formatted by a user provided style sheet.
	style	string	Custom CSS style rules for this widget.
cv-small-status cv-icon #text		string