/** * ----------------------------------------------------------------------------- * @package smartVISU * @author Martin Gleiß * @copyright 2012 - 2015 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ {% extends "widget_status.html" %} {% block example %}
Examples
You may use this widget to apply your own CSS styles to widgets and html elements depending of an items value. If you wish to style a widget give it a unique id and use the same id as parameter in the customstyle widget. Both - the target widget and the customstyle widget - will concatenate the id with the page id. For html elements you need to do this by yourself: use the format {pagename}-{idname} to make the ids match.
Add your custom styles to visu.css in the configured pages folder.
{% filter trim|escape|nl2br %}{% verbatim %} {{ status.customstyle('w1', 'bath.light.value', '20', 'mystyle') }}
...
{% endverbatim %}{% endfilter %}
Toggle the button to start/stop styling:
{{ basic.stateswitch ('', 'bath.light.value', '',[0,20]) }}
{{ status.customstyle('w10', 'bath.light.value', '20', 'mystyle') }}
Every simple html element can be styled - here we draw a red dashed border sample icon ...
Multiple Elements can be styled at once by specifying an array of ids. The values of the trigger item can be defined as an array and allow comparative orperators.
{% filter trim|escape|nl2br %}{% verbatim %} {{ status.customstyle(['w2', 'w3'], 'bath.light.value2', ['<=20','100','>230'], 'blink') }}

Block

Content

Block

{{ icon.battery('w3', '', 'bath.light.value2') }}
{% endverbatim %}{% endfilter %}
Use the slider to change values. Elements blink if value meets one of the conitions ['<=20','100','>230'] :
{{ basic.slider ('', 'bath.light.value2') }}
{{ status.customstyle(['w20', 'w30'], 'bath.light.value2', ['<=20','100','>230'], 'blink') }}

Block

Content

Block

{{ icon.battery('w30', '', 'bath.light.value2') }}
{% endblock %}