Basic-Widgets
basic.checkbox basic.color basic.flip basic.glue basic.icon basic.input basic.listview basic.offset basic.print basic.roundslider basic.select basic.shutter basic.skylight basic.slider basic.stateswitch basic.symbol basic.tank basic.trigger basic.windowbasic.icon
show an icon, optionally colored statically or dynamically by item
Parameters
{{ basic.icon(pic, color, item, type) }}
pic
icon to show
- smartVISU icons and icons in ./dropins/icons/ws: path and extension may be omitted (e.g. "light_light")
- others: full file name with path and extension
- to avoid SVG embedding, use full filename with path and extension and add "/ne" at the end, e.g. "dropins/icons/ws/myicon.svg/ne"
- smartVISU icons and icons in ./dropins/icons/ws: path and extension may be omitted (e.g. "light_light")
- others: full file name with path and extension
- to avoid SVG embedding, use full filename with path and extension and add "/ne" at the end, e.g. "dropins/icons/ws/myicon.svg/ne"
color
the color in any CSS form (e.g. '#f00' for red) or classes 'icon0' through 'icon5' (default 'icon0' of the design)
To use dynamic coloring by item give one of the following color models: 'rgb', 'hsl', 'hsv' or 'hex'. Alpha vaiues in the items will be automatically added, so e.g. specified 'rgb' converts to rgba.
To use dynamic coloring by item give one of the following color models: 'rgb', 'hsl', 'hsv' or 'hex'. Alpha vaiues in the items will be automatically added, so e.g. specified 'rgb' converts to rgba.
item
either one item which sends all three/four color parts as array or an array of three /four items each sending one of the color parts.
type
icon type / size. valid types: 'micro','mini','midi','icon' (optional, default = 'icon')
More Information
Examples
Simple static icon{{ basic.icon('light_light') }}
{{ basic.icon('light_light', '#0b0') }}
{{ basic.icon(icon.light('','','bath.light.value'), 'icon1') }}
{{ basic.icon('light_light', 'rgb', ['bath.color.r', 'bath.color.g', 'bath.color.b']) }}
{{ basic.icon(icon.light('','','bath.light.value'), 'rgb', ['bath.color.r', 'bath.color.g', 'bath.color.b']) }}
{{ basic.icon('light_light', 'rgb', ['bath.color.r', 'bath.color.g', 'bath.color.b'], 'micro') }}
{{ basic.icon('light_light', 'rgb', ['bath.color.r', 'bath.color.g', 'bath.color.b'], 'mini') }}
{{ basic.icon('light_light', 'rgb', ['bath.color.r', 'bath.color.g', 'bath.color.b'], 'midi') }}
{{ basic.icon('light_light', 'rgb', ['bath.color.r', 'bath.color.g', 'bath.color.b'], 'icon') }}
Author: Stefan Widmer