/** * ----------------------------------------------------------------------------- * @package smartVISU * @author Martin Gleiß * @copyright 2012 - 2015 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ {% extends "index.html" %} {% block content %}

Icons

{{ lib.smartvisu }} uses two kinds of icons:
{% import "icon.html" as icon %} {% set widgetlist = docu('widgets/icon.html') %}
{{ widgetlist|length }}
icons

Dynamic Icons

Dynamic icons are based on svg-images. They are directly rendered in the browser and are the fastest way to show dynamic changes. Use the slider to see how the dynamic icon changes.
{% filter trim|escape|nl2br %}{% verbatim %} {{ icon.arrow('icon1', '', 'bath.light.value') }} {{ icon.battery('icon2', '', 'bath.light.value') }} {% endverbatim %}{% endfilter %}

{{ basic.slider('slider1', 'bath.light.value', 0, 255, 1) }}
{% for widget in widgetlist %}
{{ attribute(icon, widget.name, [widget.name, '', 'bath.light.value', '', '', ''] ) }}
{{ widget.command }}
{% endfor %}


Coloring Dynamic Icons

Dynamic icons can be displayed in different colors. The color has to be specified as hexadecimal value. 'icon0' and 'icon1' can NOT be used!
{% filter trim|escape|nl2br %}{% verbatim %} {{ icon.blade2('icon3', '', 'bath.light.value', '', '', '#f9a028') }} {{ icon.battery('icon4', '', 'bath.light.value', '', '', '#4176a9') }} {{ icon.meter('icon5', '', 'bath.light.value', '', '', '#25ea4e') }} {% endverbatim %}{% endfilter %}

{{ icon.blade2('icon3', '', 'bath.light.value', '', '', '#f9a028') }}
icon.blade2
{{ icon.battery('icon4', '', 'bath.light.value', '', '', '#4176a9') }}
icon.battery
{{ icon.meter('icon5', '', 'bath.light.value', '', '', '#25ea4e') }}
icon.meter




{% set iconlist = dir(icon0, '(.*\.svg)') %}
{{ iconlist|length }}
icons

Static Icons

A static icon may be based on .png-image or .svg-image. Use "icon0" to show the "normal" version. If you like to show the "highlighted" version .png and .svg differ. The .png based images need a completed directory (located in icons) with all icons rendered in the highlighted color. Highlighted .svg-images only need a style-sheet, defined in the design (located in design). Using .svg-images should be preferred.
normal:
{% filter trim|escape|nl2br %}{% verbatim %} {% endverbatim %}{% endfilter %}
highlighted:
{% filter trim|escape|nl2br %}{% verbatim %} {% endverbatim %}{% endfilter %}
Examples
Icons located in "{{ icon0 }}"
Important: These images are available as .svg-image only. By default smartVisu does not come with .png-images.
{% set cat = 'au' %} {% for file in iconlist %} {% if cat != file.name|slice(0, 2) %}


{% set cat = file.name|slice(0, 2) %} {% endif %}
{{ file.name }}
{% endfor %} {% endblock %}