Basic-Widgets
basic.checkbox basic.color basic.flip basic.glue basic.icon basic.input basic.listview basic.offset basic.print basic.select basic.shutter basic.slider basic.roundslider basic.stateswitch basic.symbol basic.tank basic.trigger basic.window basic.shifterbasic.print
prints value or text (optionally calculated and/or formatted)
Parameters
{{ basic.print(id, item, format, formula, threshold, color, href, rel) }}
id
unique id for this widget (optional)
item
one or more item(s). Multiple items in array-form: [item1, item2]
format
either a unit of the language file, an individual format string (PHP sprintf like) or a simple string as suffix.
Use 'text' to display result as unformatted string, 'html' to render it as unescaped html, 'text2br' to convert line endings like '\r', '\n' or '\r\n' to HTML breaks or 'script' to just execute as JavaScript w/o displaying anything.
Use 'text' to display result as unformatted string, 'html' to render it as unescaped html, 'text2br' to convert line endings like '\r', '\n' or '\r\n' to HTML breaks or 'script' to just execute as JavaScript w/o displaying anything.
formula
any valid JavaScript expression with following variables and aggregate functions (optional, default: VAR)
- VAR1, VAR2, ... represent the corresponding item's value, VAR is an array of all item values
- SUM(VAR), AVG(VAR), SUB(VAR), MIN(VAR) and MAX(VAR) aggregate the values
- VAR1, VAR2, ... represent the corresponding item's value, VAR is an array of all item values
- SUM(VAR), AVG(VAR), SUB(VAR), MIN(VAR) and MAX(VAR) aggregate the values
threshold
array of upper thresholds; the color according to greatest reached threshold is applied (optional)
color
array of colors; 'icon1' or e. g. '#f00' for red (optional)
additionally you can use 'hidden' to not diplay at all or 'blank' to make it invisible but preserve the space that would be used.
the first one is the base color for values below first threshold, so pass one color more than thresholds.
additionally you can use 'hidden' to not diplay at all or 'blank' to make it invisible but preserve the space that would be used.
the first one is the base color for values below first threshold, so pass one color more than thresholds.
href
URL to use as link (optional)
rel
used in combination with href as data-rel attribute {e.g. to open a popup} (optional)
More Information
Examples
{{ 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' ) }}
a voltage: ---
some calculation: ---
an unknown unit: ---
a time: ---
a custom format (one decimal place): ---
a voltage with link to a popup: ---
some calculation: ---
an unknown unit: ---
a time: ---
a custom format (one decimal place): ---
a voltage with link to a popup: ---
Close
I'm a popup
Colors
Colors can be assigned with static values or dynamically depending on the threashold values:Use the slider to control the value
{{ 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.
<span id="shownval" style="color:red;">{{ basic.print('', 'temperature') }}</span>
{{ 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:
bath.trigger:
<span id="bathval">{{ basic.print('', 'bath.value') }}</span>
{{ basic.print('', 'bath.trigger', 'script', '$("#bathval").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.
<span id="otherElement" style="color: red">This is a really cool function</span>
{{ basic.print('', 'bath.value', 'script', '$("#otherElement").css("padding-left", VAR1*2)') }}
{{ basic.print('', 'bath.value', 'text', '"Content of element is: \'" + $("#otherElement").text() + "\'"') }}
This is a really cool function
--- ---
--- ---
Author: Stefan Widmer
inspired by Martin Gleiß and Raik Alber
inspired by Martin Gleiß and Raik Alber
