/** * ----------------------------------------------------------------------------- * @package smartVISU * @author WIDMER Stefan * @copyright 2017 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ {% extends "widget_basic.html" %} {% block example %}
Examples
Standard usage
These two examples show the usage as a simple button and a switch with two states ("dual")
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.stateswitch('', 'bath.light.switch', 'midi', '', 'control_arrow_down.svg') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon', [1,0], ['control_arrow_down.svg', 'control_arrow_up.svg']) }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', 'midi', '', 'control_arrow_down.svg') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon', [1,0], ['control_arrow_down.svg', 'control_arrow_up.svg']) }}
Advanced usage
Use cases with activity indicator and / or multiple states
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.stateswitch('', 'bath.light.switch', 'midi', [1,0], ['control_arrow_down.svg', 'control_arrow_up.svg'], '', ['green', '#f00'], 'icon1') }} {{ basic.stateswitch('', 'bath.multistate', 'icon', [5,6,7], ['control_arrow_down.svg', 'control_arrow_left.svg', 'control_arrow_up.svg'], ['Down', 'Left', 'Up'], ['icon0', 'icon1', '#f00'], 'green') }} {{ basic.stateswitch('', 'bath.light.switch', 'midi', 0, 'grid', 'Off', '', 'blink') }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', 'midi', [1,0], ['control_arrow_down.svg', 'control_arrow_up.svg'], '', ['green', '#f00'], 'icon1') }} {{ basic.stateswitch('', 'bath.multistate', 'icon', [5,6,7], ['control_arrow_down.svg', 'control_arrow_left.svg', 'control_arrow_up.svg'], ['Down', 'Left', 'Up'], ['icon0', 'icon1', '#f00'], 'green') }} {{ basic.stateswitch('', 'bath.light.switch', 'midi', 0, 'grid', 'Off', '', 'blink') }}
Long press
This option brings KNX-like scene buttons to life which change functions according to the press duration of a button.
1st example: A short press activates scene 1 (by sending 0), a longpress saves it by sending 128.
2nd example: A short press toggles between scene 1 (by sending 0) or 2 (by sending 1), a longpress saves current selected scene by adding 128.
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.stateswitch('', 'bath.light.scene', '', 0, 'status_available', '', '', '', 'bath.light.scene', 128) }} {{ basic.stateswitch('', 'bath.light.scene', '', [0,1], ['status_available','status_away_1'], '', 'icon0', '', 'bath.light.scene', '+128') }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.scene', '', 0, 'status_available', '', '', '', 'bath.light.scene', 128) }} {{ basic.stateswitch('', 'bath.light.scene', '', [0,1], ['status_available','status_away_1'], '', 'icon0', '', 'bath.light.scene', '+128') }}
A short click toggles bath.light.switch, a long press sends 6 or 7 - depending on current state - to bath.multistate and releasing after a longpress sends 5 to bath.multistate (watch the second button in the "Advanced usage" section further above)
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.stateswitch('', 'bath.light.switch', '', '', '', '', ['green', '#f00'], '', 'bath.multistate', '+6', 5) }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', '', '', '', '', ['green', '#f00'], '', 'bath.multistate', '+6', 5) }}
New in v3.2: Long press opening popup
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.stateswitch('', 'bath.light.scene', '', 0, 'status_available', '', '', '', '#pop1') }}
Close

This is a Popup


Opened by a longpress event
{% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.scene', '', 0, 'status_available', '', '', '', '#pop1') }}
Close

This is a Popup


Opened by a longpress event
Styling
New in v3.3: 6 classes 'icon0' to 'icon5' are available for coloring the icons. Pass them in the "color" parameter.

Dynamic icons can be used by calling the icon.* widgets in the icon parameters:
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.stateswitch('', 'bath.light.switch', '', '', [icon.light('','','bath.light.switch'), icon.light('','','bath.light.value')]) }} {{ basic.stateswitch('', 'bath.light.switch', 'icon', '', [icon.light('','','bath.light.switch'), icon.light('','','bath.light.value')]) }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', '', '', [icon.light('','','bath.light.switch'), icon.light('','','bath.light.value')]) }} {{ basic.stateswitch('', 'bath.light.switch', 'icon', '', [icon.light('','','bath.light.switch'), icon.light('','','bath.light.value')]) }}
Use a basic.symbol to colorize an icon independently of the buttons value. This one switches bath.light.switch but is colorized by bath.multistate
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.stateswitch('', 'bath.light.switch', 'icon', [1, 0], basic.symbol('', 'bath.multistate', '', 'message_led', [1,2,3], '', ['red','#EAFF00','green'])) }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', 'icon', [1, 0], basic.symbol('', 'bath.multistate', '', 'message_led', [1,2,3], '', ['red','#EAFF00','green'])) }} State: {{ basic.select('', 'bath.light.switch', 'mini', [0, 1], '', ['0','1'] ) }}
Color: {{ basic.select('', 'bath.multistate', 'mini', [1, 2, 3], '', ['red','yellow','green'] ) }}
Grouping
Buttons can be grouped horizontally or vertically by putting them in a control group. See that the shapes are different from those of the single buttons.
{% 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']) }}
Replacement of deprecated widgets
Click button (replacement of deprecated basic.button)
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.button('', 'bath.light.switch') }} {{ basic.stateswitch('', 'bath.light.switch', '', 1) }} {{ basic.button('', 'bath.light.switch', 'Off', 'grid', 0, 'midi', 'icon1') }} {{ basic.stateswitch('', 'bath.light.switch', 'midi', 0, 'grid', 'Off', 'icon1') }} new: icon instead of button {{ basic.stateswitch('', 'bath.light.switch', 'icon', 1) }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', '', 1) }} {{ basic.stateswitch('', 'bath.light.switch', 'midi', 0, 'grid', 'Off', 'icon1') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon', 1) }}
Switch button (replacement of deprecated basic.dual)
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.dual('', 'bath.light.switch') }} {{ basic.stateswitch('', 'bath.light.switch') }} {{ basic.dual('', 'bath.light.switch', 'control_arrow_up.svg', 'control_arrow_down.svg', 0, 1, 'midi', '#f00', 'icon1') }} {{ basic.stateswitch('', 'bath.light.switch', 'midi', [1,0], ['control_arrow_down.svg', 'control_arrow_up.svg'], '', ['icon1', '#f00']) }} new: text on dual {{ basic.stateswitch('', 'bath.light.switch', '', '', '', ['Off', 'On']) }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch') }} {{ basic.stateswitch('', 'bath.light.switch', 'midi', [1,0], ['control_arrow_down.svg', 'control_arrow_up.svg'], '', ['icon1', '#f00']) }} {{ basic.stateswitch('', 'bath.light.switch', '', '', '', ['Off', 'On']) }}
Switching icon (replacement of deprecated basic.switch)
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.switch('', 'bath.light.switch') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon') }}; {{ basic.switch('', 'bath.light.switch', 'control_arrow_up.svg', 'control_arrow_down.svg', 0, 1, '#f00', 'icon1') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon', [1,0], ['control_arrow_down.svg', 'control_arrow_up.svg'], '', ['icon1', '#f00']) }} new: jQuery icons {{ basic.stateswitch('', 'bath.light.switch', 'icon', '', ['user', 'grid'], '', ['#f00', 'icon1']) }} new: text switch {{ basic.stateswitch('', 'bath.light.switch', 'text', '', '', ['On', 'Off']) }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', 'icon') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon', [1,0], ['control_arrow_down.svg', 'control_arrow_up.svg'], '', ['icon1', '#f00'], 'green') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon', '', ['user', 'grid'], '', ['#f00', 'icon1']) }} {{ basic.stateswitch('', 'bath.light.switch', 'text', '', '', ['On', 'Off']) }}
Multistate (replacement of deprecated basic.multistate)
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.multistate('', 'bath.multistate', [5,6,7], ['control_arrow_down.svg', 'control_arrow_left.svg', 'control_arrow_up.svg']) }} {{ basic.stateswitch('', 'bath.multistate', '', [5,6,7], ['control_arrow_down.svg', 'control_arrow_left.svg', 'control_arrow_up.svg']) }} {{ basic.multistate('', 'bath.multistate', [5,6,7], ['control_arrow_down.svg', 'control_arrow_left.svg', 'control_arrow_up.svg'], 'midi', ['icon0', 'icon1', '#f00']) }} {{ basic.stateswitch('', 'bath.multistate', 'midi', [5,6,7], ['control_arrow_down.svg', 'control_arrow_left.svg', 'control_arrow_up.svg'], '', ['icon0', 'icon1', '#f00']) }} new: add text {{ basic.stateswitch('', 'bath.multistate', '', [5,6,7], ['control_arrow_down.svg', 'control_arrow_left.svg', 'control_arrow_up.svg'], ['Down', 'Left', 'Up'], ['icon0', 'icon1', '#f00']) }} new: show as icon {{ basic.stateswitch('', 'bath.multistate', 'icon', [5,6,7], ['control_arrow_down.svg', 'control_arrow_left.svg', 'control_arrow_up.svg'], '', ['icon0', 'icon1', '#f00']) }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.multistate', '', [5,6,7], ['control_arrow_down.svg', 'control_arrow_left.svg', 'control_arrow_up.svg']) }} {{ basic.stateswitch('', 'bath.multistate', 'midi', [5,6,7], ['control_arrow_down.svg', 'control_arrow_left.svg', 'control_arrow_up.svg'], '', ['icon0', 'icon1', '#f00']) }} {{ basic.stateswitch('', 'bath.multistate', '', [5,6,7], ['control_arrow_down.svg', 'control_arrow_left.svg', 'control_arrow_up.svg'], ['Down', 'Left', 'Up'], ['icon0', 'icon1', '#f00']) }} {{ basic.stateswitch('', 'bath.multistate', 'icon', [5,6,7], ['control_arrow_down.svg', 'control_arrow_left.svg', 'control_arrow_up.svg'], '', ['icon0', 'icon1', '#f00']) }}
Hiding switch (replacement of never released basic.hiddenswitch)
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.hiddenswitch('', 'bath.light.switch') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon', '', '', '', ['blank', 'icon1']) }} {{ basic.hiddenswitch('', 'bath.light.switch', 'text', 'light_light.svg', 0, 1, 'icon1') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon', [1,0], ['', 'light_light.svg'], ['', 'text'], ['blank', 'icon0']) }} new: show as button {{ basic.stateswitch('', 'bath.light.switch', '', '', '', '', ['blank', '']) }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', 'icon', '', '', '', ['blank', 'icon1']) }} {{ basic.stateswitch('', 'bath.light.switch', 'icon', [1,0], ['', 'light_light.svg'], ['', 'text'], ['blank', '']) }} {{ basic.stateswitch('', 'bath.light.switch', '', '', '', '', ['blank', '']) }}
{% endblock %}