smartVISU
17:02 v3.3.1

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