smartVISU
13:05 v3.3.1

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.slider basic.stateswitch basic.symbol basic.tank basic.trigger basic.window

basic.symbol

An icon or text, with no writing to backend, only displayed when the value of item is equal to defined value. Symbols may be used in menus. If more than one item is given, they will be combined with formula.

Parameters
{{ basic.symbol(id, items, text, icon, value, formula, color, href, rel, type, btntxt) }}
id
unique id for this widget (optional)
items
zero, one or more item(s). More items in array form: [item1, item2] (optional)
text
the text, printed when item has value val (optional)
icon
the icon shown when item has value val (optional, default 'control_on_off' if text is empty)
dynamic icons can be used, e.g. icon.light('', '', value_item); please note: these must not be wrapped by apostrophs (')
value
comparative value(s) (default 1)
formula
'or', 'and' or any JavaScript expression with following variables, result will be compared to comparative value above. Additionally you can use 'min' and 'max' to test if any of the defined items has a value >= or <= comparative value (default 'or')
VAR1, VAR2, ... represent the corresponding item's value, VAR is an array of all item values
If the formula starts with a greater than symbol '>' the value will be treated as threshold. The symbol (text, icon and color) according to greatest reached threshold will be shown. The first symbol is the base for values below first threshold, so pass one symbol more than values.
If '>' is not used, symbols will only be shown if the item value matches exactly one of the given value parameters
color
the color 'icon1' or e. g. '#f00' for red (default 'icon0' of the design)
this only applies to text, if no icon is set (for backward compatibility)
href
URL to use as link (optional)
rel
used in combination with href as data-rel attribute {e.g. to open a popup} (optional)
type
icon type with or without button. valid types: 'micro','mini','midi','icon', 'btn-micro', 'btn-mini', 'btn-midi' (optional, default = 'icon')
btntxt
text to show inside button if button type selcted (optional)
More Information
Icons
Examples
Use this flip to control the basic.symbols
Symbol is only shown when 'bath.light.switch' is on {{ basic.symbol('', 'bath.light.switch') }}
With different picture and text, colorized, text-only, dynamic icon or used as link to open a popup {{ basic.symbol('', 'bath.light.switch', 'Light on', 'light_light.svg') }}
{{ basic.symbol('', 'bath.light.switch', '', '', '', '', '#0b0') }}
{{ basic.symbol('', 'bath.light.switch', 'On') }}
{{ basic.symbol('', 'bath.light.switch', '', icon.light('','','bath.light.value') ) }}
{{ basic.symbol('', 'bath.light.switch', 'Open popup', '', '', '', '', '#symbol_popup', 'popup') }}
       
Close I'm a popup
With multiple states and min/max mode (use the buttons to select state)
First:     
0 0 1 1 2 2 3 3 4 4

Second:
0 0 1 1 2 2 3 3 4 4
Standard Icon if both values are 0
Sound icon if at least one is <=1 and one > 0
no icon when one of the values is 2
lock icon if one of the value is >= 3
{{ basic.symbol('', ['first.multistate', 'second.multistate'], '', 'secur_locked', 3, 'min') }}
{{ basic.symbol('', ['first.multistate', 'second.multistate'], '', ['', 'audio_sound'], [0,1], 'max') }}
No icon if both values are below 2, standard icon if one >=2
{{ basic.symbol('', ['first.multistate', 'second.multistate'], '', '', 2, 'min') }}
With multiple states (use the buttons to select state)
1 1 2 2 3 3
{{ basic.symbol('', 'bath.multistate', '', 'message_led', [1,2,3], '', ['red','#EAFF00','green']) }}
{{ basic.symbol('', 'bath.multistate', ['low','medium','high'], '', [1,2,3], '', ['red','icon1','green']) }}
{{ basic.symbol('', 'bath.multistate', ['low','medium','high'], ['control_1','control_2','control_3'], [1,2,3]) }}
Combinations with 'or', 'and' or custom formula (this one implements XOR, so the text is shown if one and only one flip is set on). Use both flips (one for 'bath.light.switch' and the other for 'bath.rtr.state') to control the symbols
bath.light.switch:   bath.rtr.state:
{{ basic.symbol('', ['bath.light.switch', 'bath.rtr.state'], 'OR') }}
{{ basic.symbol('', ['bath.light.switch', 'bath.rtr.state'], 'AND', '', 1, 'and') }}
{{ basic.symbol('', ['bath.light.switch', 'bath.rtr.state'], 'Custom XOR', '', '', '( VAR1 && !VAR2 ) || ( !VAR1 && VAR2 )') }}
 
If you combine multiple items with or and on/off (1/0) states you have to put 1 as first value and 0 as sescond.
Explanation: By using or the first match of any item with a value will be evaluated. So if you set 0 in front, this condition will be met if any of the items has value 0. But most likely you want to show off state only if all values are 0. {{ basic.symbol('', ['bath.light.switch', 'bath.rtr.state'], '', '', [1,0], 'or', ['green','red']) }}
 
Using threshold (use the slider to change value)
{{ basic.symbol('', 'bath.light.value', '', 'message_led', [85,170], '>', ['red','#EAFF00','green']) }}
{{ basic.symbol('', 'bath.light.value', ['low','medium','high'], '', [85,170], '>', ['red','icon1','green']) }}
{{ basic.symbol('', 'bath.light.value', ['low','medium','high'], ['control_1','control_2','control_3'], [85,170], '>') }}
New in v3.0: size of symbols may be altered. As from v3.1 buttons are also provided and an additional text can be displayed on the button(flip the switch to "on" )
{{ basic.symbol('', 'bath.light.switch', 'Light on', 'light_light.svg', '', '', '', '', '', 'micro') }} // or 'mini', 'icon', 'midi'
{{ basic.symbol('', 'bath.light.switch', 'Light on', 'light_light.svg', '', '', '', '', '', 'btn-micro') }} // or 'btn-mini', 'btn-midi'
{{ basic.symbol('', 'bath.light.switch', 'Light on', 'light_light.svg', '', '', '', '', '', 'btn-mini', 'bath') }} // or 'btn-micro', 'btn-midi'

Author: Martin Gleiß and Stefan Widmer

Widgets

Design

Misc