smartVISU
08:11 v3.5.0

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.skylight 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 is reached); pass either a color, icon class, 'blink' or 'simulate'. Timeout is 3s by default and can be set globally using the configuration key "indicator_duration". Add a colon and integer number to specify an individual timeout, e.g. 'blink:15' (optional)
You can also set an indicator icon, text and color by passing these as additional parameters in the icon, text and color arrays. Just provide one icon more than you have values to switch. A dynamic icon can be used also along with the 'simulate' option.
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
Items 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') }}
Down Left Up Off
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) }}
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>
Close

This is a Popup


Opened by a longpress event
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:
{{ 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
{{ 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
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
{{ 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') }}
All indicators run with a timout. Press the update button to simulate a response from the backend.
update update
Author: Stefan Widmer
Based on work of Martin GLEISS and Pierre-Yves KERVIEL

Widgets

Design

Misc