smartVISU
12:13 v3.0.1

Popups

There are two popup widgets you can use for easier implementation of specific widgets. Motion sensor/light locks Popup
{{ basic.symbol('', ['item_lock', 'item_bwmlock', 'item_force'], '', 'secur_locked', 1, 'min', '', '#locks_popup', 'popup') }}
{{ basic.symbol('', ['item_lock', 'item_bwmlock', 'item_force'], '', 'secur_open', 0, 'and', '', '#locks_popup', 'popup') }}
{{ popup.locks('locks_popup', ['item_lock', ['green', 'red']], ['item_bwmlock', ['green', 'red']], ['item_force', 'red']) }}
Any simple widget in popup
<a href="#ext_popup" data-rel="popup">
Extended Popup
</a>
{{ popup.extpopup('ext_popup', ['header', 'Suspendzeit'], ['plot', [['env.system.load','env.core.memory'],'avg', '1d', '', '', '', '',['system load', 'memory'],['#a00','#070'], '',['Time', 'CPU', 'Memory'],'', [1,2], [0,1],['#f00','#0a0']]], [['linetext', 'slider'], 'Slider', ['licht.modus.automatik.settings.suspendduration', '0', '100', '10', 'horizontal', 'handle']], [['symbol', 'slider'], ['item_lock', '', 'secur_locked', '1'], ['licht.modus.automatik.settings.suspendduration', '0', '100', '10', 'horizontal', 'handle']]) }}
Extended Popup
Close
  • Suspendzeit
  • Slider
Here are some examples to show how popups are used.
Examples
A horizontal popup with some switches
<a href="#popup1" data-rel="popup">
<img class="icon icon1" src="{{ icon0 }}light_light.svg" />
</a>

<div id="popup1" data-role="popup">
<div>
{{ basic.stateswitch('', 'bath.light.switch', 'icon') }}
{{ basic.stateswitch('', 'bath.light.switch', 'icon') }}
{{ basic.stateswitch('', 'bath.light.switch', 'icon') }}
</div>
</div>
A vertical popup with some switches
<a href="#popup2" data-rel="popup">
<img class="icon icon1" src="{{ icon0 }}light_light.svg" />
</a>

<div id="popup2" data-role="popup">
{{ basic.stateswitch('', 'bath.light.switch', 'icon') }}
{{ basic.stateswitch('', 'bath.light.switch', 'icon') }}
{{ basic.stateswitch('', 'bath.light.switch', 'icon') }}
</div>
Individual size popup with a close button
<a href="#popup3" data-rel="popup">
<img class="icon icon1" src="{{ icon0 }}light_light.svg" />
</a>

<div id="popup3" data-role="popup" style="width:280px; height:200px;">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
Content
</div>

Widgets

Design

Misc