Buttons
Here are some examples to show buttons available in smartVISU
A simple button: only pic, only text, pic and text, big icon (and text as hover) in 'mini' and 'midi'
A switch with two pics 'mini' and 'midi'
With other inline pictures:
Grouping
Examples
To improve readability, the items are replaced with '...'.A simple button: only pic, only text, pic and text, big icon (and text as hover) in 'mini' and 'midi'
{{ basic.stateswitch('single1', '...', '', '', 'grid') }}
{{ basic.stateswitch('single2', '...', '', '', '','Up') }}
{{ basic.stateswitch('single3', '...', '', '', 'grid', 'Up') }}
{{ basic.stateswitch('single4', '...', '', '', 'control_arrow_down.svg', 'Down') }}
{{ basic.stateswitch('single5', '...', 'midi', '', 'grid') }}
{{ basic.stateswitch('single6', '...', 'midi', '', '', 'Up') }}
{{ basic.stateswitch('single7', '...', 'midi', '', 'grid', 'Up') }}
{{ basic.stateswitch('single8', '...', 'midi', 0, 'control_arrow_down.svg', 'Down') }}
Down{{ basic.stateswitch('dual0', '...', '', '', ['control_arrow_up.svg','control_arrow_down.svg']) }}
{{ basic.stateswitch('dual1', '...', 'midi', '', ['control_arrow_up.svg', 'control_arrow_down.svg']) }}
Examples
{{ basic.stateswitch('b1', 'bath.light.switch', ...) }}
'mirco'
'mini'
'midi'
only txt
only pic (inline)
only pic (icon)
txt and pic (inline)
txt and pic (icon)
arrow-l, arrow-r, arrow-u, arrow-d, delete, plus, minus, check, gear, refresh, forward, back, grid, star, alert, info, home, search
<div data-role="controlgroup" data-type="horizontal">
{{ basic.stateswitch('', 'bath.light.switch', '', 0, 'plus', 'Up') }}
{{ basic.stateswitch('', 'bath.light.switch', '', 1, 'minus', 'Down') }}
{{ basic.stateswitch('', 'bath.light.switch', '', '', ['control_arrow_up.svg', 'control_arrow_down.svg']) }}
</div>
<div data-role="controlgroup" data-type="vertical">
{{ basic.stateswitch('', 'bath.light.switch', '', 0, 'plus', 'Up') }}
{{ basic.stateswitch('', 'bath.light.switch', '', 1, 'minus', 'Down') }}
{{ basic.stateswitch('', 'bath.light.switch', '', '', ['control_arrow_up.svg', 'control_arrow_down.svg']) }}
</div>
