smartVISU
17:47 v3.5.0

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

Show a symbol based on item values (including and/or logic).

Parameters
{{ quad.symbol(id, item, txt, pic, val, formula, color, href, rel, linetext, columntext, item_plot, icon_plot, place3, place4, column_order) }}
id
unique id for this widget
item
zero, one or more item(s). More items in array form: [item1, item2] (optional)
hint: let this empty to display a static icon
txt
the text, printed when item has value val (optional)
pic
the icon shown when item has value val (optional, default 'control_on_off' if text is empty)
dynamic icons can be used, e.g. icon.light('', '', value_item, min_display, max_display); please note: these must not be wrapped by apostrophs (')
val
either one value (icon disappears when value not true) or array with two or more values, e.g. [0,1] (icon stays) (default 1).
formula
'or', 'and' or any JavaScript expression with following variables, result will be compared to comparative value above (default 'or')
- VAR1, VAR2, ... represent the corresponding item's value, VAR is an array of all item values.
The array size of the formula parameter defines the number of columns dispayed by the widget.
color
the color 'icon0' through 'icon5' or e. g. '#f00' for red (default 'icon0' of the design)
href
URL to use as link (optional)
rel
used in combination with href as data-rel attribute {e.g. to open a popup} (optional)
linetext
description text for the whole line
columntext
description text for the column. Can be array.
item_plot
array with all plot.period attributes to show a plot in popup. Alternatively just the item to be plotted.
Array size must match the number of columns, e.g. "[['plotitem1', 'avg', '2d','now'], 'plotitem2', '']" for a table of 3 columns.
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 100
    that 0 1 100 200
    theother
Symbol this and that/empty/theother with plot popups
{{ quad.symbol('symbols0', [['this','that'], ' ', 'theother'], '', [icon.light('','','that'), '', ''], [[1,10,100,200],'', [1,2]], ['and','',''], ['','', ['icon0', 'icon1']], 'placeholder', 'placeholder', 'thisandthat = 1 | 100; the other = 1 | 2', ['thisandthat','','theother'], ['item_plot1','','item_plot3'], '', 'placeholder', 'placeholder', [1,2,3]) }}
  • thisandthat = 1 | 100; the other = 1 | 2
    thisandthat
    theother
Symbol this and that, switched order
{{ quad.symbol('symbols2', ['this','that'], ['on', 'on'], [icon.light('','','this'),icon.light('','','that')], [[0,1,100,200],[0,1,100,200]], ['',''], [['icon0','icon1','icon1','icon1'],['icon0','icon1','icon1','icon1']], 'placeholder', 'placeholder', '2 Symbols (order switched)', ['this','that'], '', '', 'placeholder', 'placeholder', [2,1]) }}
  • 2 Symbols (order switched)
    this
    that
Symbol this AND that
{{ quad.symbol('combosymbol0', ['this','that'], '', ['secur_open.svg','secur_locked.svg','secur_locked.svg','secur_locked.svg'], [0,1], 'and', ['icon0','icon1'], 'placeholder', 'placeholder', 'this & that = 0 / 1') }}
  • this & that = 0 / 1
Symbol this OR that
{{ quad.symbol('combosymbol1', ['this','that'], '', 'secur_locked.svg', 1, 'or', 'icon1', 'placeholder', 'placeholder', 'this or that = 1') }}
  • this or that = 1
Symbol that: icons stay fixed
{{ quad.symbol('symbol1', 'that', ['off', 'on', 'more on', 'most on'], [icon.light(),icon.light('','','that'),icon.light('','','that'),icon.light('','','that')], [0,1,100,200], '', ['icon0','icon1','icon1','icon1'], 'placeholder', 'placeholder', 'fixed Symbol (that)', '', 'item_plot') }}
  • fixed Symbol (that)
Symbol with standard values
{{ quad.symbol('symbol_standard', 'that', '', '', '', '', '', 'placeholder', 'placeholder', 'Standard values') }}
  • Standard values
Two symbols with thresholds
{{ quad.symbol('maprange', ['that','this'], [['low','medium','high'], ['', '', '']], [['', '', ''], ['control_1','control_2','control_3']], [[1,100], [100,200]], ['>', '>'], '', '', '', 'with plots', ['that:', 'this:'], ['that.plot','this.plot'], '', '', '', [1,2]) }}
Author: Niko Will, Onkel Andy

Widgets

Design

Misc