/** * ----------------------------------------------------------------------------- * @package smartVISU * @author Martin Gleiß * @copyright 2012 - 2015 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ {% extends "index.html" %} {% block content %}

Buttons

Here are some examples to show what buttons are possible in {{ lib.smartVISU }}

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'
{% filter trim|escape|nl2br %}{% raw %} {{ 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') }} {% endraw %}{% endfilter %}
{{ basic.button('single1', 'bath.light.switch', '', 'grid') }} {{ basic.button('single2', 'bath.light.switch', 'Up') }} {{ basic.button('single3', 'bath.light.switch', 'Up', 'grid') }} {{ basic.button('single4', 'bath.light.switch', 'Down', 'control_arrow_down.svg') }} {{ basic.button('single5', 'bath.light.switch', '', 'grid', '', 'midi') }} {{ basic.button('single6', 'bath.light.switch', 'Up', '', '', 'midi') }} {{ basic.button('single7', 'bath.light.switch', 'Up', 'grid', '', 'midi') }} {{ basic.button('single8', 'bath.light.switch', 'Down', 'control_arrow_down.svg', 0, 'midi') }}
A dual-button: with two pics 'mini' and 'midi'
{% filter trim|escape|nl2br %}{% raw %} {{ basic.dual('dual0', '...', 'control_arrow_up.svg','control_arrow_down.svg' }} {{ basic.dual('dual1', '...', 'control_arrow_up.svg', 'control_arrow_down.svg', '', '', 'midi') }} {% endraw %}{% endfilter %}
{{ basic.dual('dual0', 'bath.light.switch', 'control_arrow_up.svg', 'control_arrow_down.svg') }} {{ basic.dual('dual1', 'bath.light.switch', 'control_arrow_up.svg', 'control_arrow_down.svg', '', '', 'midi') }}
Some Buttons grouped together. You may mix buttons and duals.
{% filter trim|escape|nl2br %}{% raw %} {{ basic.button('b11', '...', 'Up', 'plus') }} {{ basic.button('b12', '...', 'Down', 'minus', 0) }} {{ basic.dual('b13', '...', 'control_arrow_up.svg', 'control_arrow_down.svg') }} {{ 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') }} {% endraw %}{% endfilter %}
{{ basic.button('b11', 'bath.light.switch', 'Up', 'plus', '', 'micro') }} {{ basic.button('b12', 'bath.light.switch', 'Down', 'minus', 0, 'micro') }} {{ basic.dual('b13', 'bath.light.switch', 'control_arrow_up.svg', 'control_arrow_down.svg', '', '', 'micro') }} {{ basic.button('b21', 'bath.light.switch', 'Up', 'plus') }} {{ basic.button('b22', 'bath.light.switch', 'Down', 'minus', 0) }} {{ basic.dual('b23', 'bath.light.switch', 'control_arrow_up.svg', 'control_arrow_down.svg') }} {{ 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') }}
{% endblock %}