Quad Design Widgets
quad.mixed quad.symbol quad.print quad.rtr quad.dimmer quad.color quad.shutter quad.blind quad.playercontrol quad.stateswitch quad.select quad.inputquad.print
Print values in specific format, including expressions
Parameters
{{ quad.print(id, item, format, formula, threshold, color, classname, place2, linetext, columntext, item_plot, icon_plot, place3, place4, column_order) }}
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 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 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; 'icon0' through 'icon5' or e. g. '#f00' for red (optional)
the first one is the base color for values below first threshold, so pass one color more than thresholds.
the first one is the base color for values below first threshold, so pass one color more than thresholds.
classname
css class name, useful for script hacks (see documentation and example)
place2
placeholder attributes for future features, etc.
linetext
description text for the whole line
columntext
description text for each column
item_plot
array with all plot.period attributes to show a plot in popup. Alternatively just the item to be plotted.
icon_plot
icon triggering the plot popup
place3
placeholder attributes for future features, etc.
place4
placeholder attributes for future features, etc.
column_order
array with numbers from 1 to 5: Reorder elements to your liking (esp. relevant for smartphones as 5 columns might be too much)
* to reverse the complete order, use [5, 4, 3, 2, 1], to reverse the last two, use [1, 2, 3, 5, 4], etc.
* to reverse the complete order, use [5, 4, 3, 2, 1], to reverse the last two, use [1, 2, 3, 5, 4], etc.
Example
- Use to change values below
-
CHANGE STATUS ITEMS HEREthisthattheother
{{ quad.print('formatvalue', 'that', '%', '', [10,150], ['#0f0','#ff0','#f00'], '', 'placeholder', 'one % value with thresholds', 'that') }}
-
one % value with thresholdsthat ---
{{ quad.print('formatvalue2', ['this','that'], ['%','°'], ['','VAR*2'], [0,[15,300]], [['#0f0','#ff0'],['#0f0','#ff0','#f00']], '', 'place', 'two values, with 2* formula', ['this','that'], ['this.plot', 'that.plot']) }}
{{ quad.print('formatvalue3', ['this','that', ' ', 'theother'], ['%','°'], ['VAR*2','','',''], [[1,5],'', '',''], [['#0f0','#ff0','#f00'],['#0f0','#ff0'],'',''], '', 'placeholder', '3 values, 1 empty column', ['this','that', '', 'theother']) }}
-
3 values, 1 empty columnthis ---that ---theother ---
{{ quad.print('', ['', 'that','that'], ['text', 'script', 'text'], ['orange if that < 10', '$("#otherElement").css("color", (VAR1 < 10) ? "#FF6600" : "#00FF00")', '"Color: \'" + $("#otherElement").css("color") + "\'"'], ['', '', ''], ['', '', ''], ['otherElement', 'column_empty', ''], 'placeholder', 'left text color changed based on that') }}
-
left text color changed based on thatorange if that < 10------
Author: Niko Will, Onkel Andy
