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.

Image

Description

The image component is used to display an image. Optionally, this image can be automatically reloaded at regular intervals.

<cv-image src="resource/icons/comet_128_ff8000.png"/>

The size of the image always corresponds to the tile in which the image is used, i.e. the image fills the tile completely without being distorted.

The image is updated by clicking on it. In addition, the image can be reloaded at regular intervals using the optional refresh attribute. In addition, the image can be updated by incoming data from the backend.

<cv-image src="http://webcam/snapshot.jpeg">
    <cv-address transform="DPT:1.001" mode="read" target="refresh">1/4/0</cv-address>
</cv-image>

In this case, the image is reloaded every time the CometVisu receives the value “1” for the address 1/4/0. This way, for example, the image of a camera at the entrance door can be updated when the doorbell rings.

If authentication is required to load the image, it can be defined using the auth-type, username and password attributes. So far only “Basic” authentication is supported. If there are problems loading the image, the image can be loaded via a proxy in the backend by setting the proxy attribute to true. However, the URL must be added to the “proxy.whitelist” section of the hidden configuration. For this, a new entry must be created in the section, the key can be chosen arbitrarily and as a value either the complete URL or a regular expression is entered which is valid for this URL.

Example with exact URL:

"proxy.whitelist": {
    "server": "http://webcam/snapshot.jpeg"
}

Example with regular expression (starts and ends with “/”), which allows all URLs containing “webcam”:

"proxy.whitelist": {
    "server": "/^.+webcam\/.*$/"
}

Allowed attributes

Element	Attribute
	Name	Content	Description
cv-image	src	string
	refresh	decimal	Time interval in seconds this widget is being refreshed.
	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.