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

Buttons

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

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'
{% filter trim|escape|nl2br %}{% verbatim %} {{ 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') }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('single1', 'bath.light.switch', '', '', 'grid') }} {{ basic.stateswitch('single2', 'bath.light.switch', '', '', '','Up') }} {{ basic.stateswitch('single3', 'bath.light.switch', '', '', 'grid', 'Up') }} {{ basic.stateswitch('single4', 'bath.light.switch', '', '', 'control_arrow_down.svg', 'Down') }} {{ basic.stateswitch('single5', 'bath.light.switch', 'midi', '', 'grid') }} {{ basic.stateswitch('single6', 'bath.light.switch', 'midi', '', '', 'Up') }} {{ basic.stateswitch('single7', 'bath.light.switch', 'midi', '', 'grid', 'Up') }} {{ basic.stateswitch('single8', 'bath.light.switch', 'midi', 0, 'control_arrow_down.svg', 'Down') }}
A switch with two pics 'mini' and 'midi'
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.stateswitch('dual0', '...', '', '', ['control_arrow_up.svg','control_arrow_down.svg']) }} {{ basic.stateswitch('dual1', '...', 'midi', '', ['control_arrow_up.svg', 'control_arrow_down.svg']) }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('dual0', 'bath.light.switch', '', '', ['control_arrow_up.svg','control_arrow_down.svg']) }} {{ basic.stateswitch('dual1', 'bath.light.switch', 'midi', '', ['control_arrow_up.svg', 'control_arrow_down.svg']) }}
Examples
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.stateswitch('b1', 'bath.light.switch', ...) }} {% endverbatim %}{% endfilter %}
'mirco'
'mini'
'midi'
only txt
{{ basic.stateswitch('b11', 'bath.light.switch', 'micro', '', '', 'On') }}
{{ basic.stateswitch('b12', 'bath.light.switch', 'mini', '', '', 'On') }}
{{ basic.stateswitch('b13', 'bath.light.switch', 'midi', '', '', 'On') }}
only pic (inline)
{{ basic.stateswitch('b21', 'bath.light.switch', 'micro', '', 'grid') }}
{{ basic.stateswitch('b22', 'bath.light.switch', 'mini', '', 'grid') }}
{{ basic.stateswitch('b23', 'bath.light.switch', 'midi', '', 'grid') }}
only pic (icon)
{{ basic.stateswitch('b31', 'bath.light.switch', 'micro', '', 'control_on_off.svg') }}
{{ basic.stateswitch('b32', 'bath.light.switch', 'mini', '', 'control_on_off.svg') }}
{{ basic.stateswitch('b33', 'bath.light.switch', 'midi', '', 'control_on_off.svg') }}
txt and pic (inline)
{{ basic.stateswitch('b42', 'bath.light.switch', 'mini', '', 'grid', 'On') }}
{{ basic.stateswitch('b43', 'bath.light.switch', 'midi', '', 'grid', 'On') }}
txt and pic (icon)
{{ basic.stateswitch('b52', 'bath.light.switch', 'mini', '', 'control_on_off.svg', 'On') }}
{{ basic.stateswitch('b53', 'bath.light.switch', 'midi', '', 'control_on_off.svg', 'On') }}
With other inline pictures:
arrow-l, arrow-r, arrow-u, arrow-d, delete, plus, minus, check, gear, refresh, forward, back, grid, star, alert, info, home, search
{{ basic.stateswitch('button2', 'bath.light.switch', '', '', 'arrow-l') }} {{ basic.stateswitch('button3', 'bath.light.switch', '', '', 'arrow-r') }} {{ basic.stateswitch('button4', 'bath.light.switch', '', '', 'arrow-u') }} {{ basic.stateswitch('button5', 'bath.light.switch', '', '', 'arrow-d') }} {{ basic.stateswitch('button6', 'bath.light.switch', '', '', 'delete') }} {{ basic.stateswitch('button7', 'bath.light.switch', '', '', 'plus') }} {{ basic.stateswitch('button8', 'bath.light.switch', '', '', 'minus') }} {{ basic.stateswitch('button9', 'bath.light.switch', '', '', 'check') }} {{ basic.stateswitch('button10', 'bath.light.switch', '', '', 'gear') }} {{ basic.stateswitch('button11', 'bath.light.switch', '', '', 'refresh') }} {{ basic.stateswitch('button12', 'bath.light.switch', '', '', 'forward') }} {{ basic.stateswitch('button13', 'bath.light.switch', '', '', 'back') }} {{ basic.stateswitch('button14', 'bath.light.switch', '', '', 'grid') }} {{ basic.stateswitch('button15', 'bath.light.switch', '', '', 'star') }} {{ basic.stateswitch('button16', 'bath.light.switch', '', '', 'alert') }} {{ basic.stateswitch('button17', 'bath.light.switch', '', '', 'info') }} {{ basic.stateswitch('button18', 'bath.light.switch', '', '', 'home') }} {{ basic.stateswitch('button19', 'bath.light.switch', '', '', 'search') }}
Grouping
{% filter trim|escape|nl2br %}{% verbatim %}
{{ 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']) }}
{{ 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']) }}
{% endverbatim %}{% endfilter %}
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']) }}
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']) }}
{% endblock %}