/** * ----------------------------------------------------------------------------- * @package smartVISU * @author Martin Gleiß * @copyright 2012 - 2015 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ {% extends "widget_basic.html" %} {% block example %}
Examples
{% filter trim|escape|nl2br %}{% verbatim %} {{ 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]) }} {% endverbatim %}{% endfilter %}

Use the slider to control the filling level of the tanks
{{ basic.slider('slider1', 'bath.value', 0, 255, 5) }}
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
{{ 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]) }}
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:
{% filter trim|escape|nl2br %}{% raw %} #widget_basic_tank-tank6 { width: 60px; } {% endraw %}{% endfilter %}
{% endblock %}