The ImageTrigger widget

Author: Christian Mayer
Available since: 0.8.0 (2012)

Description

Adds an image like the {@link cv.ui.structure.pure.Image} widget, but additionally the image can be changed by incoming data and can send data to the backend by clicking on it. There are two modes to react on incoming data:

  • type="show": Hides the image when incoming data === 0

  • type="select": Changes the image by appending the incoming data to the initial configured image source, or hide it when incoming data === 0

Example:

<imagetrigger src="resource/icons/comet" suffix="svg" sendValue="clicked" type="select">
   <address transform="DPT:16.001" mode="readwrite">0/0/0</address>
</imagetrigger>

initially shows nothing. When the CometVisu receives the string _icon in address 0/0/0, the image icons/comet_opt_icon.svg is shown. When the CometVisu receives ‘0’ on address 0/0/0, this image is hidden.

Settings

For a general understanding of how the configuration files are structured and what elements and attributes are it is recommended to read this section first: Pages and structure of CometVisu.

The behaviour and appearance of the ImageTrigger widget can be influenced by using certain attributes and elements. The following tables show the allowed attributes and elements and their possible values. The screenshots show, how both can be edited in the editor.

Attributes underlined by ….. are mandatory, all the others are optional and be omitted.

Allowed attributes in the ImageTrigger-element

Element

Attribute

Name

Content

Description

imagetrigger

src

URI

Complete path (URI) to the picture

suffix

string

type

string

width

dimension (number+unit)

Sets the width of the image. Format must be CSS (e.g. px, em, %).

height

dimension (number+unit)

Sets the height of the image. Format must be CSS (e.g. px, em, %).

refresh

decimal

Sets the update rate for the picture in seconds

mapping

string

Map the bus value to a different value, text or symbol for displaying. See also Mapping

sendValue

string

Defines the value which is sent when pressing the picture/icon

flavour

string

Selection of a display variant. See also Flavour.

bind_click_to_widget

true or false

use the whole widget area to react on click events

../../../_images/en_config_widgets_imagetrigger_index_editor_attributes.png

Attributes in the editor (simple view) [1]

Allowed child-elements and their attributes

Element

Attribute

Structure

Name

Content

Description

imagetrigger
  • layout

colspan

decimal

Amount of columns this widget should be wide.

colspan-m

decimal

Overrules the amount of columns on a medium screen.

colspan-s

decimal

Overrules the amount of columns on a small screen.

rowspan

decimal

Amount of rows this widget should be high.

x

string

Horizontal position of the widget for 2D pages.

x-s

string

Horizontal position of the widget for 2D pages on a small screen.

x-m

string

Horizontal position of the widget for 2D pages on a medium screen.

y

string

Vertical position of the widget for 2D pages.

y-s

string

Vertical position of the widget for 2D pages on a small screen.

y-m

string

Vertical position of the widget for 2D pages on a medium screen.

z

string

Reserved for future use.

width

string

Width for the widget for 2D pages.

width-s

string

Width for the widget for 2D pages on a small screen.

width-m

string

Width for the widget for 2D pages on a medium screen.

scale

true or false

Enable/Disable scaling layout values relative to backdrop on 2d pages (default: true).

scale-s

true or false

Enable/Disable scaling layout values relative to backdrop on 2d pages on a small screen (default: true).

scale-m

true or false

Enable/Disable scaling layout values relative to backdrop on 2d pages on a medium screen (default: true).

Element

Attribute

Structure

Name

Content

Description

imagetrigger
  • 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.

imagetrigger
  • label

    • #text

string

Text to display a label for the widget.

Element

Attribute

Structure

Name

Content

Description

imagetrigger
  • 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.

imagetrigger
  • address

    • #text

string

The GA (like: 12/0/7) for KNX-backends, the item name for openHAB-backend or the MQTT topic

../../../_images/en_config_widgets_imagetrigger_index_editor_elements.png

Elements in the editor

Examples

It is possible to manually edit the visu_config.xml and add an entry for the ImageTrigger widget.

Caution

Make sure that you only use UTF-8 encoded characters by settings the encoding in your XML-editor to UTF-8 mode!

<imagetrigger src="resource/icons/CometVisu_" suffix="png" sendValue="clicked" type="select" width="45px" height="32px">
   <layout colspan="1"/>
   <address transform="DPT:16.001" mode="readwrite">0/0/0</address>
 </imagetrigger>
<imagetrigger src="resource/icons/CometVisu_orange" suffix="png" sendValue="clicked" type="show" width="45px" height="32px">
   <layout colspan="0"/>
   <address transform="DPT:1.001" mode="readwrite">0/0/0</address>
 </imagetrigger>

Footnotes