/** * ----------------------------------------------------------------------------- * @package smartVISU * @author Martin Gleiß * @copyright 2012 - 2015 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ {% extends "index.html" %} {% block content %}

Popups

There are two popup widgets you can use for easier implementation of specific widgets. Motion sensor/light locks Popup
{% filter trim|escape|nl2br %}{% verbatim %} {{ 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']) }} {% endverbatim %}{% endfilter %}
{{ 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. If you want to have multiple widget in one line, you need to use arrays within arrays, see example below.
{% filter trim|escape|nl2br %}{% verbatim %} Extended Popup {{ 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']]) }} {% endverbatim %}{% endfilter %}
Extended Popup {{ 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']]) }}
Here are some examples to show how popups are used.
Examples
Complex extended Popup
{% filter trim|escape|nl2br %}{% verbatim %} Extended Popup with four lines {{ 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 ) }} {% endverbatim %}{% endfilter %}
Extended Popup with four lines {{ popup.extpopup('ext_popup', ['edit_favorites.svg', [['linetext', 'select', 'switch'],'Textexample',['item.automatik.settings.sollwert', 'mini', [0,4,6]],['item.automatik.lock', 'icon', [0,1], ['secur_open.svg','secur_locked.svg']]], [['switch', 'slider'],['item.automatik.lock', 'icon', [0,1], ['secur_open.svg','secur_locked.svg']],['item.automatik.settings.suspendduration', '0', '60', '5', '', 'handle']], [['slider'],['item.automatik.settings.sollwert', '0', '1', '0']], [['linetext', 'flip'],'Flip:',['licht.og.kueche.automatik.lock', 'On', 'Off', '1', '0']] ] ) }}
A horizontal popup with some switches
{% filter trim|escape|nl2br %}{% verbatim %} Popup_1
{{ basic.stateswitch('', 'bath.light.switch', 'icon') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon') }}
{% endverbatim %}{% endfilter %}
Popup_1
A vertical popup with some switches
{% filter trim|escape|nl2br %}{% verbatim %} Popup_2
{{ basic.stateswitch('', 'bath.light.switch', 'icon') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon') }} {{ basic.stateswitch('', 'bath.light.switch', 'icon') }}
{% endverbatim %}{% endfilter %}
Popup_2
Individual size popup with a close button
{% filter trim|escape|nl2br %}{% verbatim %} Popup_3
Close Content
{% endverbatim %}{% endfilter %}
Popup_3
{% endblock %}