Buttons
Here are some examples to show what buttons are possible in smartVISU
A simple button: only pic, only text, pic and text, big icon (and text as hover) in 'mini' and 'midi'
A dual-button: with two pics 'mini' and 'midi'
Some Buttons grouped together. You may mix buttons and duals.
Examples
To keep it clearly, the gads are replaced with '...'.A simple button: only pic, only text, pic and text, big icon (and text as hover) in 'mini' and 'midi'
{{ basic.button('single1', '...', '', 'grid') }}
{{ basic.button('single2', '...', 'Up') }}
{{ basic.button('single3', '...', 'Up', 'grid') }}
{{ basic.button('single4', '...', 'Down', 'control_arrow_down.svg') }}
{{ basic.button('single5', '...', '', 'grid', '', 'midi') }}
{{ basic.button('single6', '...', 'Up', '', '', 'midi') }}
{{ basic.button('single7', '...', 'Up', 'grid', '', 'midi') }}
{{ basic.button('single8', '...', 'Down', 'control_arrow_down.svg', 0, 'midi') }}
{{ basic.dual('dual0', '...', 'control_arrow_up.svg','control_arrow_down.svg' }}
{{ basic.dual('dual1', '...', 'control_arrow_up.svg', 'control_arrow_down.svg', '', '', 'midi') }}
<span data-role="controlgroup" data-type="horizontal">
{{ basic.button('b11', '...', 'Up', 'plus') }}
{{ basic.button('b12', '...', 'Down', 'minus', 0) }}
{{ basic.dual('b13', '...', 'control_arrow_up.svg', 'control_arrow_down.svg') }}
</span>
<span data-role="controlgroup" data-type="horizontal">
{{ basic.button('b31', 'bath.light.switch', 'Up', 'plus', '', 'midi') }}
{{ basic.button('b32', 'bath.light.switch', 'Down', 'minus', 0, 'midi') }}
{{ basic.dual('b33', 'bath.light.switch', 'control_arrow_up.svg', 'control_arrow_down.svg', '', '', 'midi') }}
</span>
