Basic-Widgets

basic.checkbox basic.color basic.flip basic.glue basic.icon basic.input basic.listview basic.offset basic.print basic.roundslider basic.select basic.shutter basic.skylight basic.slider basic.stateswitch basic.symbol basic.tank basic.trigger basic.window


basic.tank

Displays a (partly) filled tank

Parameters
{{ basic.tank(id, item_pos, min, max, step, mode, color, threshold) }}
id
unique id for this widget (optional)
item_pos
an item for the actual position of filled tank
min
the value for empty (optional, default 0)
max
the value for full (optional, default 255)
step
step between two values (optional, default 5, for future use)
mode
the mode: 'none', 'cylinder', 'water', 'pellets' (optional, default 'none')
color
single color or array of colors; e. g. '#f00' for red. If thresholds are used provide one color more than thresholds (optional)
threshold
array of upper thresholds; the color according to highest reached threshold is applied (optional)
Examples
{{ basic.tank('tank1', 'bath.value') }}
{{ basic.tank('tank2', 'bath.value', 0, 255, 5, 'cylinder') }}
{{ basic.tank('tank3', 'bath.value', 0, 255, 5, 'cylinder', '#f90' ) }}
{{ basic.tank('tank4', 'bath.value', 0, 255, 5, 'water') }}
{{ basic.tank('tank5', 'bath.value', 0, 255, 5, 'water', '#0c0') }}
{{ basic.tank('tank6', 'bath.value', 0, 255, 5, 'pellets') }}
{{ basic.tank('tank7', 'bath.value', 0, 255, 5, 'cylinder', ['#c00','#cc0','#0c0','#cc0','#c00'], [80,100,155,200]) }}

Use the slider to control the filling level of the tanks
From left to right: 'none', 'cylinder', 'cylinder' orange, 'water', 'water' green, 'pellets', 'cylinder'
The last one will have different colors depending on the value <80: red, 80-99: yellow, 100-154: green, 155-199: yellow, >=200: red
 
 
 
 
 
 
 
If you want to set an individual width to the tank, add a line to your "visu.css" with #PAGE-ID (current pagename, hyphen, id of the tank-widget). For example for tank 6:
#widget_basic_tank-tank6 {
width: 60px;
}

Author: Martin Gleiß and others