/**
* -----------------------------------------------------------------------------
* @package smartVISU
* @author Martin Gleiß
* @copyright 2012 - 2015
* @license GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/
{% extends "widget_basic.html" %}
{% block example %}
Examples
{% filter trim|escape|nl2br %}{% verbatim %}
{{ basic.print('', 'bath.value', 'V') }}
{{ basic.print('', ['bath.p1', 'bath.p2', 'bath.p3'], '%', 'VAR1 / SUM(VAR) * 100') }}
{{ basic.print('', 'bath.value', 'MWh') }}
{{ basic.print('', 'bath.time', 'time') }}
{{ basic.print('', 'bath.value', '%01,1f') }}
{{ basic.print('', 'bath.value', 'V', '', '', '', '#print_popup', 'popup' ) }}
{% endverbatim %}{% endfilter %}
a voltage: {{ basic.print('', 'bath.value', 'V') }}
some calculation: {{ basic.print('', ['bath.p1', 'bath.p2', 'bath.p3'], '%', 'VAR1 / SUM(VAR) * 100') }}
an unknown unit: {{ basic.print('', 'bath.value', 'MWh') }}
a time: {{ basic.print('', 'bath.time', 'time') }}
a custom format (one decimal place): {{ basic.print('', 'bath.value', '%01,1f') }}
a voltage with link to a popup: {{ basic.print('', 'bath.value', 'V', '', '', '', '#print_popup', 'popup' ) }}
Colors
Colors can be assigned with static values or dynamically depending on the threashold values:
Use the slider to control the value
{{ basic.slider('', 'bath.light.value') }}
{% filter trim|escape|nl2br %}{% verbatim %}
{{ basic.print('', 'bath.light.value', '', '', '', '#f00') }}
{{ basic.print('', 'bath.light.value', '', '', [100,200], ['green', '', 'icon1']) }}
{% endverbatim %}{% endfilter %}
{{ basic.print('', 'bath.light.value', '', '', '', '#f00') }}
{{ basic.print('', 'bath.light.value', '', '', [100,200], ['green', '', 'icon1']) }}
Advanced Scripting
basic.print can also be used for some "hacks".
This example shows how to update the color of a widget text based on the value of ANOTHER item. Click on the heater icon and change the temperature. The temperature print will turn red if the heater is off and green if it is on.
{{ basic.stateswitch('', 'heater', 'icon', '', ['sani_heating', 'sani_heating']) }}
{{ basic.slider('', 'temperature', 0, 30, 1, '', 'handle') }}
{% filter trim|escape|nl2br %}{% verbatim %}
{{ basic.print('', 'temperature') }}
{{ basic.print('', 'heater', 'script', '$("#shownvalue").css("color", (VAR1 == 0) ? "#FF6600" : "#00FF00")') }}
{% endverbatim %}{% endfilter %}
{{ basic.print('', 'temperature') }}
{{ basic.print('', 'heater', 'script', '$("#shownvalue").css("color", (VAR1 == 0) ? "#FF6600" : "#00FF00")') }}
Here the color of the print is changed based on a threshold of a different item.
Change the second slider to adjust the color of the printed value and see what happens if the value goes above 200 and 300.
bath.value: {{ basic.slider('', 'bath.value', 0, 100, 1, '', 'handle') }}
bath.trigger: {{ basic.slider('', 'bath.trigger', 0, 400, 10, '', 'handle') }}
{% filter trim|escape|nl2br %}{% verbatim %}
{{ basic.print('', 'bath.value') }}
{{ basic.print('', 'bath.trigger', 'script', '$("#bathval").css("color", (VAR1 < 400 && VAR1 > 300) ? "#33FF33" : (VAR1 < 200) ? "#FF6600" : "#FFFFFF")') }}
{% endverbatim %}{% endfilter %}
{{ basic.print('', 'bath.value') }}
{{ basic.print('', 'bath.trigger', 'script', '$("#bathvalue").css("color", (VAR1 < 400 && VAR1 > 300) ? "#33FF33" : (VAR1 < 200) ? "#FF6600" : "#FFFFFF")') }}
The following examples show how to manipulate or read other elements. Any JavaScript/jQuery exression can be used.
The first example manipulates the padding of an element in CSS.
The second example reads a given element. It does not use the item data at all but gets triggered by receiving an item value.
{{ basic.slider('', 'bath.value', 0, 100, 1, '', 'handle') }}
{% filter trim|escape|nl2br %}{% verbatim %}
This is a really cool function
{{ basic.print('', 'bath.value', 'script', '$("#otherElement").css("padding-left", VAR1*2)') }}
{{ basic.print('', 'bath.value', 'text', '"Content of element is: \'" + $("#otherElement").text() + "\'"') }}
{% endverbatim %}{% endfilter %}
This is a really cool function
{{ basic.print('', 'bath.value', 'script', '$("#otherEl").css("padding-left", VAR1*2)') }}
{{ basic.print('', 'bath.value', 'text', '"Content of element is: \'" + $("#otherEl").text() + "\'"') }}
An image given as Base64-coded data in a text item can be displayed by using
{% filter trim|escape|nl2br %}{% verbatim %}
{{basic.print('','<- >','script','$("#myimage").attr("src", VAR)') }}
{% endverbatim %}{% endfilter %}
{% endblock %}