/** * ----------------------------------------------------------------------------- * @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

1. 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.
{% filter trim|escape|nl2br %}{% verbatim %} {{ icon.arrow('id', 'item_switch', 'item_value', 'min', 'max', 'color') }} {% endverbatim %}{% endfilter %}
Their properties change with two items:
- item_value controls the dynamic behavior of the icons
- item_switch should be left empty since clicking on the icon will toggle the related item

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 %}


Scaling Dynamic Icons

In dynamic icons, one property is depending on the item given in the parameter list. To scale the poperty of the icon to the value range of the item, the parameters min and max are used. Default values are 0 - 255.
{% filter trim|escape|nl2br %}{% verbatim %} {{ icon.shutter('icon3', '', 'bath.light.value', '', '', '') }} {{ icon.shutter('icon4', '', 'bath.light.value', '0', '510', '') }} {% endverbatim %}{% endfilter %}

{{ icon.shutter('icon3', '', 'bath.light.value', '', '', '') }}
scaled 0-255
{{ icon.shutter('icon4', '', 'bath.light.value', '0', '510', '') }}
scaled 0-510




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('icon5', '', 'bath.light.value', '', '', '#f9a028') }} {{ icon.battery('icon6', '', 'bath.light.value', '', '', '#4176a9') }} {{ icon.meter('icon7', '', 'bath.light.value', '', '', '#25ea4e') }} {% endverbatim %}{% endfilter %}

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




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

2. 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 %}