Basic-Widgets

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

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; 'icon0' through 'icon5' 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 is sent on longpress OR an id of a popup, with prefix '#' (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']) }}

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) }}

New in v3.2: Long press opening popup

{{ basic.stateswitch('', 'bath.light.scene', '', 0, 'status_available', '', '', '', '#pop1') }}

			<div id="pop1" data-role="popup" data-overlay-theme="a" class="ext-popup">

				<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

			<h3>This is a Popup </h3> </br>

			Opened by a longpress event

			</div>

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:

{{ 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:

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

Basic-Widgets

Parameters

More Information

Examples

Standard usage

Advanced usage

Long press

New in v3.2: Long press opening popup

Styling

Grouping

Replacement of deprecated widgets

Widgets

Basic

Calendar

Device

Multimedia

Phone

Plots

Status

Time/Clock

Weather

Custom

Design

Blocks

Buttons

Quad

Popups

Icons

Backgrounds

Misc

Fundamentals

Overview

Widget Assistant

Appliances