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.

Value

Author: Tobias Bräutigam

Available since: 2022

Description

The Value component represents a value. It is a purely passive component and does not send any values to the backend itself. There are different ways to display the values, from simple text to icons and progress bars.

Text

The simplest way is to display the value as text.

<cv-value format="%d%%">
    <cv-address transform="DPT:5.001" mode="read">1/4/2</cv-address>
    <label class="value secondary"/>
</cv-value>

The value can be formatted via the format attribute. The text color can be influenced by an additional entry in the class attribute of the <label> element. There are a primary and a secondary text color available. The specific colors depend on the respective design. In the example above, the secondary text color was used class="secondary".

Hint

The value entry in the class attribute of the <label> element is mandatory, as it tells the value component where to write the value. If this entry is missing, no value will be displayed.

To use the primary color, the <label> must look like this.

<label class="value primary"/>

In addition, the text size can be set via an additional entry in the class attribute. The following options are available: medium and large. Where medium is smaller than the standard size and large is larger.

<label class="value large"/>

Icon

If an Icon is used as class="value", the icon can be influenced value-dependent via a mapping and its color via styling.

Hint

The cv-value element must not use a format here, as otherwise the mapping and styling would no longer work.

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

Progress bar

To display a progress, there are two display options: a horizontal progress bar or a round or semi-round progress bar.

horizontal progress bar

<cv-value>
    <cv-address transform="DPT:5.001" mode="read">1/4/2</cv-address>
    <meter class="value" min="0" max="100"/>
</cv-value>

round progress bar

<cv-value format="%d%%">
    <cv-address transform="DPT:5.001" mode="read">1/4/2</cv-address>
    <cv-round-progress class="value"/>
</cv-value>

semi-circular progress bar

<cv-value format="%d%%">
    <cv-address transform="DPT:5.001" mode="read">1/4/2</cv-address>
    <cv-round-progress class="value" type="semiCircle"/>
</cv-value>

semi-circular progress bar with different color

<cv-value format="%d%%">
    <cv-address transform="DPT:5.001" mode="read">1/4/2</cv-address>
    <cv-round-progress class="value" type="semiCircle" foreground-color="#FF0000"/>
</cv-value>

Allowed attributes

Element	Attribute
	Name	Content	Description
cv-value	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 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-value 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-value 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-value cv-address-group	operator	+, -, * or /	Math operator used for calculation.
	round	true or false	Round the result.
	factor	float	Multiply the result with this value.
cv-value cv-address-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-value cv-address-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-value 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-value 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-value p label #text		string	Text to display a label for the widget.
cv-value p #text		string

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

Element	Attribute
Structure	Name	Content	Description
cv-value meter	min	integer
	max	integer
	value	integer
	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-value 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-value cv-icon #text		string

Element	Attribute
Structure	Name	Content	Description
cv-value cv-round-progress	radius	integer	Radius of the circle.
	stroke	integer	Stroke width of the circle border.
	type	circle or semiCircle	Visualization type.
	min	decimal	Minimum value.
	max	decimal	Maximum value.
	foreground-color	string	Color of the value bar.
	background-color	string	Color of the background bar.
	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.