/**
* -----------------------------------------------------------------------------
* @package smartVISU
* @author WIDMER Stefan
* @copyright 2017 - 2024
* @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) }}
Long press opening popup
{% filter trim|escape|nl2br %}{% verbatim %}
{{ basic.stateswitch('', 'bath.light.scene', '', 0, 'status_available', '', '', '', '#pop1') }}
{% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.scene', '', 0, 'status_available', '', '', '', '#pop01') }}
Styling
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(), icon.light('','','bath.light.value')]) }}
{{ basic.stateswitch('', 'bath.light.switch', 'icon', '', [icon.light(), icon.light('','','bath.light.value')]) }}
{% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', '', '', [icon.light(), icon.light('','','bath.light.value')]) }}
{{ basic.stateswitch('', 'bath.light.switch', 'icon', '', [icon.light(), 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']) }}
New as of v3.4: Activity Indicators
smartVISU can be configured to wait for the backends item update after a command sent instead of updating items internally. While some backends wait for the response of the respective actor before responding, others just echo
the received command as item update. For the latter, smartVISU v3.4 introduces combined status and control items which send the command to the control item and receive the response on the status item. The user needs to
link these to the respective control and status objects in the backend. To visualize an ongoing activity, the "indicator" parameter can be set to highlight the active switch with different options. The indicator will be started
with the click on the switch and stopped by a received update or after a defined timeout.
Examples
{% filter trim|escape|nl2br %}{% verbatim %}
{{ basic.stateswitch('', 'item.st:item.ctl', '','', ['fts_shutter_10','fts_shutter_100'],'','','blink:10') }}
{{ basic.stateswitch('', 'item.st:item.ctl', '','', ['fts_garage_door_10','fts_garage_door_100'],'','','red') }}
{{ basic.stateswitch('', 'item.st:item.ctl', '','', ['fts_shutter_10','fts_shutter_100', icon.shutter('','','item.st')],'','','simulate:10') }}
{{ basic.stateswitch('', 'item.st:item.ctl', '','', ['light_light','light_light', icon.light('','','item.st')],'','','simulate:10') }}
{% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.value:bath.light.value2', '','', ['fts_shutter_10','fts_shutter_100'],'','','blink:10') }}
{{ basic.stateswitch('', 'bath.light.value:bath.light.value2', '','', ['fts_garage_door_10','fts_garage_door_100'],'','','red') }}
{{ basic.stateswitch('', 'bath.light.value:bath.light.value2', '','', ['fts_shutter_10','fts_shutter_100', icon.shutter('','','bath.light.value')],'','','simulate:10') }}
{{ basic.stateswitch('', 'bath.light.value:bath.light.value2', '','', ['light_light','light_light', icon.light('','','bath.light.value')],'','','simulate:10') }}
All indicators run with a timout. Press the update button to simulate a response from the backend.
{{ basic.stateswitch('', 'bath.light.value', 'mini',[0,1], '', 'update', ['icon0', 'icon1']) }}
{% endblock %}