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.

Button

Author: Tobias Bräutigam
Available since: 2022

Description

The button supports different operating modes, which are described below.

Switch

The switch button allows sending and displaying a state. The simplest example is an on/off switch. The button displays the current state and toggles between the two possible states when clicked.

...
<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-button mapping="light" styling="button">
    <cv-address transform="DPT:1.001" mode="readwrite">1/4/2</cv-address>
    <cv-icon class="value">ri-question-mark</cv-icon>
</cv-button>

In order to improve the representation of the current state, a “mapping” is used in the example, which causes a different icon to be used depending on the state. In addition, a “styling” is used to set the color of the icon and the border of the button differently depending on the state.

Trigger

A trigger button sends a fixed value to the backend when clicked. Here, the sent value is not dependent on the current state, as with the switch, but a fixed value is always sent. This mode is activated by specifying the fixed value to be sent in the <cv-address> element:

<cv-address transform="DPT:1.001" mode="readwrite" value="1">1/4/2</cv-address>

Push-button

A push-button sends a value when the button is pressed and another value when the button is released. In trigger and switch mode, only one value is sent when the button is released (simple click). This mode is also activated via the <cv-address> element. More precisely, two addresses are required here:

<cv-address transform="DPT:1.001" mode="readwrite" value="1" on="down">1/4/2</cv-address>
<cv-address transform="DPT:1.001" mode="readwrite" value="0" on="up">1/4/2</cv-address>

The value 1 is sent to 1/4/2 when the button is pressed (on="down") and the value 0 is sent when the button is released (on="up").

Additional properties

Round button

As an additional option, the button can be displayed as a circle. To do this, simply add a class="round-button" to the <cv-button> element.

<cv-button class="round-button" mapping="light" styling="button">

Progress bar

The border of the button can also be used to display a percentage value. For example, the progress of a currently playing song, a volume, or the brightness value of a dimmer can be displayed.

Hint

To make sure that border of the button and the progress bar overlap each other, the round button should always be used here.

...
<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-button class="round-button" mapping="light" styling="button">
    <cv-address transform="DPT:1.001" mode="readwrite">1/4/2</cv-address>
    <cv-address transform="DPT:5.001" mode="read" target="progress">1/4/1</cv-address>
    <cv-icon class="value">ri-question-mark</cv-icon>
</cv-button>

Additional label

Optionally, the button can receive an additional label via a name attribute.

<cv-button class="round-button" mapping="light" styling="button" name="Light">

Allowed attributes

Element	Attribute
	Name	Content	Description
cv-button	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
	progress-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).
	size	small, normal or large	Defines the button size.
	name	string	Additional label for the button.
	whole-tile	true or false	Augments the clickable area to the whole tile.
	doc-link	string	Link into the CometVisu documentation (used in the demo config)
	on-value	string	Value of the “on” state. Defaults to “1”.
	off-value	string	Value of the “off” state. Defaults to “0”.
	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-button 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-button 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-button 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-button cv-icon #text		string

Element	Attribute
Structure	Name	Content	Description
cv-button p	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-button p label icon	name	string	Name of the icon registration.
	type	string
	flavour	string	Selection of a display variant. See also Flavour.
	color	string	Color of the icon in CSS notation (e.g. #1188FF).
	styling	string	Change the color of the displayed value depending on its value. See also Styling
	class	string	Add this value to the CSS class so that it can be formatted by a user provided style sheet.
cv-button p label #text		string	Text to display a label for the widget.
cv-button p #text		string

Element	Attribute
Structure	Name	Content	Description
cv-button 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-button label #text		string