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.windowbasic.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
The last one will have different colors depending on the value <80: red, 80-99: yellow, 100-154: green, 155-199: yellow, >=200: red
#widget_basic_tank-tank6 {
width: 60px;
}
Author: Martin Gleiß and others