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