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.input


quad.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.
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
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)
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.
Example
  • Use to change values below
  • CHANGE STATUS ITEMS HERE
    this
    that
    theother
Single Print
{{ quad.print('formatvalue', 'that', '%', '', [10,150], ['#0f0','#ff0','#f00'], '', 'placeholder', 'one % value with thresholds', 'that') }}
  • one % value with thresholds
    that  ---
Multiple print
{{ 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']) }}
  • two values, with 2* formula
    this  --- measure_power_meter
    that  --- measure_power_meter
Four different prints
{{ 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 column
    this  ---
    that  ---
    theother  ---
Using Scripts to change other elements. Leave the item empty and give the column an id name
{{ 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 that
      orange if that < 10
      ---
      ---

Author: Niko Will, Onkel Andy

Widgets

Design

Misc