/** * ----------------------------------------------------------------------------- * @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:
{% 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 can be specified as hexadecimal value or - new in v3.3 with 6 icon classes 'icon0' through 'icon5'.
{% 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', '', '', 'icon4') }} {% 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', '', '', 'icon4') }}
icon.meter




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

2. Static Icons

A static icon may be based on PNG or SVG image. PNG images are not styleable. They must be made available colorized and sorted in subfolders of ./icons by their colors (e.g. ./icons/or). SVG images get embedded into the html DOM by smartVISU and are then styleable using 6 classes of the configured design or with individual colors. While "icon0" and "icon1" are the classes for normal and highlighted SVG icons "{{ icon0 }}" and "{{ icon1 }}" serve as path variables for the icon files in normal and highlighted colors. All icons coming with smartVISU are SVG icons since SVGs are clearly preferred. However, legacy PNG icons are still supported.

As of v3.3 the loading of icons has changed to improve performance and stylability. It is recommended to use the widget "lib.svgimg" on svg icons in ./icons/ws or ./dropins/icons/ws with classes and styling options. This method is faster in loading and profits from the cache mechanism. For backward compatibility the img-tags will still receive long-term support.
normal:
{% filter trim|escape|nl2br %}{% verbatim %} {{ lib.svgimg('', 'light_light', 'icon0') }} {% endverbatim %}{% endfilter %}
highlighted:
{% filter trim|escape|nl2br %}{% verbatim %} {{ lib.svgimg('', 'light_light', 'icon1') }} {{ lib.svgimg('', 'light_light', '', 'fill:red; stroke:red;') }} {% 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 %}
{{ lib.svgimg('', file.name, 'icon0') }}
{{ file.name }}
{% endfor %} {% endblock %}