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
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']) }}
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') }}
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') }}
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) }}
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) }}
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']) }}
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']) }}
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']) }}
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', '']) }}

Author: Stefan Widmer
Based on work of Martin GLEISS and Pierre-Yves KERVIEL

Widgets

Design

Misc