smartVISU
01:53 v3.0.1

Basic-Widgets

basic.checkbox basic.color basic.flip basic.glue basic.icon basic.input basic.listview basic.offset basic.print basic.select basic.shutter basic.slider basic.roundslider basic.stateswitch basic.symbol basic.tank basic.trigger basic.window basic.shifter

basic.stateswitch

A versatile button/switch (supercedes basic.button, basic.dual, basic.hiddenswitch, basic.multistate and basic.switch)

Parameters
{{ basic.stateswitch(id, item, type, value, icon, text, color, indicator, item_longpress, value_longpress, value_longrelease) }}
id
unique id for this widget (optional)
item
an item
type
valid types: 'micro', 'mini', 'midi', 'icon', 'text' (optional, default: mini)
value
array of values (optional, default [0,1])
If the item has a value that is not part of the list, the state (icon, text, color) of the last value in the list will be shown.
icon
array of icons (optional, default just if text is empty: control_on_off.svg)
dynamic icons can be used, e.g. icon.light('', '', item_value); please note: these must not be wrapped by apostrophs (').
the second attribute in the dynamic icon must be empty. Otherwise there will be conflicts with item_switch
text
array of texts (optional)
color
array of colors; 'icon1' or e. g. '#f00' for red (optional, default: icon0)
additionally you can use 'hidden' to not diplay at all or 'blank' to make it invisible but preserve the space that would be used.
indicator
activity indicator which is active until response (or a timeout of 3 seconds is reached); pass either a color, 'icon1' or 'blink' (optional)
item_longpress
an item to which a value on longpress is sent (optional)
value_longpress
the value to send on longpress (optional)
If this starts with a + or - sign the value is treated as offset to current stateswitch value.
value_longrelease
the value to send on releasing after a longpress (optional)
More Information
Icons
Examples
Standard usage
These two examples show the usage as a simple button and a switch with two states ("dual")
{{ 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']) }}
control_arrow_down control_arrow_down control_arrow_down control_arrow_up
Advanced usage
Use cases with activity indicator and / or multiple states
{{ 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') }}
control_arrow_down control_arrow_up control_arrow_downDown control_arrow_leftLeft control_arrow_upUp jquery_gridOff
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.
{{ 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') }}
status_available status_available status_away_1
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)
{{ basic.stateswitch('', 'bath.light.switch', '', '', '', '', ['green', '#f00'], '', 'bath.multistate', '+6', 5) }}
control_on_off control_on_off
Styling
Dynamic icons can be used by calling the icon.* widgets in the icon parameters:
{{ 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
{{ basic.stateswitch('', 'bath.light.switch', 'icon', [1, 0], basic.symbol('', 'bath.multistate', '', 'message_led', [1,2,3], '', ['red','#EAFF00','green'])) }}
State:
0 0 1 1

Color:
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.
<div data-role="controlgroup" data-type="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']) }}
</div>

<div data-role="controlgroup" data-type="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']) }}
</div>
horizontal
vertical
Replacement of deprecated widgets
Click button (replacement of deprecated basic.button)
{{ 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) }}
control_on_off jquery_gridOff control_on_off
Switch button (replacement of deprecated basic.dual)
{{ 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']) }}
control_on_off control_on_off control_arrow_down control_arrow_up Off On
Switching icon (replacement of deprecated basic.switch)
{{ 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']) }}
control_on_off control_on_off control_arrow_down control_arrow_up jquery_user jquery_grid On Off
Multistate (replacement of deprecated basic.multistate)
{{ 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']) }}
control_arrow_down control_arrow_left control_arrow_up control_arrow_down control_arrow_left control_arrow_up control_arrow_downDown control_arrow_leftLeft control_arrow_upUp control_arrow_down control_arrow_left control_arrow_up
Hiding switch (replacement of never released basic.hiddenswitch)
{{ 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', '']) }}
control_on_off light_lighttext control_on_off
Author: Stefan Widmer
Based on work of Martin GLEISS and Pierre-Yves KERVIEL

Widgets

Design

Misc