basic.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"
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.
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')
Examples
Simple static icon
{{ basic.icon('light_light') }}
Colored icon
{{ basic.icon('light_light', '#0b0') }}
{{ basic.icon(icon.light('','','bath.light.value'), 'icon1') }}
Dynamically colored icon
{{ 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']) }}
Use this color selector to change icon color.
Icon sizes may be altered:
{{ 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