Popups
There are two popup widgets you can use for easier implementation of specific widgets.
Motion sensor/light locks Popup
Any simple widget in popup. If you want to have multiple widget in one line, you need to use arrays within arrays, see example below.
A horizontal popup with some switches
A vertical popup with some switches
Individual size popup with a close button
{{ 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']) }}
<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
Here are some examples to show how popups are used.
Close
-
Suspendzeit
-
-
Slider
-
Examples
Complex extended Popup<a href="#ext_popup" data-rel="popup">
Extended Popup with four lines
</a>
{{ popup.extpopup('ext_popup',
['edit_favorites.svg', // Icon
[ // Starts a new line
['linetext', 'select', 'switch'], // This line has a Text, a select and a switch
'Textexample', // The text
['item.automatik.settings.sollwert', 'mini', [0,4,6]], // The select
['item.automatik.lock', 'icon', [0,1], ['secur_open.svg','secur_locked.svg']] // The switch
], // Ends the line
[ // Starts the line
['switch', 'slider'], // The second line has a switch and a slider
['item.automatik.lock', 'icon', [0,1], ['secur_open.svg','secur_locked.svg']], // Specific declaration of the switch widget
['item.automatik.settings.suspendduration', '0', '60', '5', '', 'handle'] // Specific declaration of the slider widget
], // End of second line
[ // Start of second line
['slider'], // Implements a slider in the third line
['item.automatik.settings.sollwert', '0', '1', '0'] // Specific declaration of the slider widget
], // End of third line
[ // Start of fourth line
['linetext', 'flip'], // Defines, that the fourth line includes an inline text and a flip widget
'Flip:', // Specific declaration of inline text
['licht.og.kueche.automatik.lock', 'On', 'Off', '1', '0'] // Specific declaration of the flip widget
] // Ends the last line
] // Ends the popup array
) }}
<a href="#popup1" data-rel="popup">
<img class="icon icon1" src="{{ icon0 }}light_light.svg" alt="Popup_1" />
</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 href="#popup2" data-rel="popup">
<img class="icon icon1" src="{{ icon0 }}light_light.svg" alt="Popup_2"/>
</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>
<a href="#popup3" data-rel="popup">
<img class="icon icon1" src="{{ icon0 }}light_light.svg" alt="Popup_3" />
</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>
Close
Content
