Icons
smart VISU
uses two kinds of 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.
{{ icon.arrow('id', 'item_switch', 'item_value', 'min', 'max', 'color') }}
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.
{{ icon.arrow('icon1', '', 'bath.light.value') }}
{{ icon.battery('icon2', '', 'bath.light.value') }}
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.
{{ icon.shutter('icon3', '', 'bath.light.value', '', '', '') }}
{{ icon.shutter('icon4', '', 'bath.light.value', '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'.
{{ icon.blade2('icon5', '', 'bath.light.value', '', '', '#f9a028') }}
{{ icon.battery('icon6', '', 'bath.light.value', '', '', '#4176a9') }}
{{ icon.meter('icon7', '', 'bath.light.value', '', '', 'icon4') }}
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:
{{ lib.svgimg('', 'light_light', 'icon0') }}
<img class="icon" src="{{ icon0 }}light_light.svg" />
<img class="icon" src="{{ icon0 }}light_light.png" />
highlighted:
{{ lib.svgimg('', 'light_light', 'icon1') }}
{{ lib.svgimg('', 'light_light', '', 'fill:red; stroke:red;') }}
<img class="icon icon1" src="{{ icon0 }}light_light.svg" />
<img class="icon" src="{{ icon1 }}light_light.png" />
Examples
Icons located in "icons/ws/"
Important: These images are available as .svg-image only. By default smartVisu does not come with .png-images.
control_arrow_down_left.svg
control_arrow_down_right.svg
control_arrow_downward.svg
control_arrow_left_right.svg
control_arrow_leftward.svg
control_arrow_rightward.svg
control_arrow_turn_left_right.svg
control_arrow_turn_left.svg
control_arrow_turn_right.svg
control_arrow_up_down.svg
control_arrow_up_left.svg
control_arrow_up_right.svg
control_building_2_s_all.svg
control_building_2_s_dg.svg
control_building_2_s_eg.svg
control_building_2_s_int_all.svg
control_building_2_s_int_dg.svg
control_building_2_s_int_eg.svg
control_building_2_s_int_kg.svg
control_building_2_s_kg.svg
control_building_control.svg
control_building_edg_all.svg
control_building_edg_dg.svg
control_building_edg_eg.svg
control_building_edg_int_all.svg
control_building_edg_int_dg.svg
control_building_edg_int_eg.svg
control_building_edg_int_kg.svg
control_building_edg_kg.svg
control_building_empty.svg
control_building_filled.svg
control_building_flat_filled.svg
control_building_flat_okg_all.svg
control_building_flat_okg_eg.svg
control_building_flat_okg_og.svg
control_building_flat_s_filled.svg
control_building_flat_s_mkg_all.svg
control_building_flat_s_mkg_eg.svg
control_building_flat_s_mkg_kg.svg
control_building_flat_s_mkg_og.svg
control_building_flat_s_mkg.svg
control_building_flat_s_okg_all.svg
control_building_flat_s_okg_eg.svg
control_building_flat_s_okg_og.svg
control_building_flat_s.svg
control_building_flat.svg
control_building_int_all.svg
control_building_int_dg.svg
control_building_int_eg.svg
control_building_int_kg.svg
control_building_int_og.svg
control_building_modern_s_2og_all.svg
control_building_modern_s_2og_dg.svg
control_building_modern_s_2og_eg.svg
control_building_modern_s_2og_int_all.svg
control_building_modern_s_2og_int_dg.svg
control_building_modern_s_2og_int_eg.svg
control_building_modern_s_2og_int_kg.svg
control_building_modern_s_2og_int_og1.svg
control_building_modern_s_2og_int_og2.svg
control_building_modern_s_2og_kg.svg
control_building_modern_s_2og_og1.svg
control_building_modern_s_2og_og2.svg
control_building_modern_s_all.svg
control_building_modern_s_dg.svg
control_building_modern_s_eg.svg
control_building_modern_s_int_all.svg
control_building_modern_s_int_dg.svg
control_building_modern_s_int_eg.svg
control_building_modern_s_int_kg.svg
control_building_modern_s_int_og.svg
control_building_modern_s_kg.svg
control_building_modern_s_og.svg
control_building_modern_s_okg_all.svg
control_building_modern_s_okg_dg.svg
control_building_modern_s_okg_eg.svg
control_building_modern_s_okg_int_all.svg
control_building_modern_s_okg_int_dg.svg
control_building_modern_s_okg_int_eg.svg
control_building_modern_s_okg_int_og.svg
control_building_modern_s_okg_og.svg
control_building_modern02_okg_all.svg
control_building_modern02_okg_dg.svg
control_building_modern02_okg_eg.svg
control_building_modern02_okg_int_all.svg
control_building_modern02_okg_int_dg.svg
control_building_modern02_okg_int_eg.svg
control_building_modern02_okg_int_og.svg
control_building_modern02_okg_og.svg
control_building_outside.svg
control_building_s_all.svg
control_building_s_dg.svg
control_building_s_eg.svg
control_building_s_int_all.svg
control_building_s_int_dg.svg
control_building_s_int_eg.svg
control_building_s_int_kg.svg
control_building_s_int_og.svg
control_building_s_kg.svg
control_building_s_og.svg
control_building_s_okg_all.svg
control_building_s_okg_dg.svg
control_building_s_okg_eg.svg
control_building_s_okg_int_all.svg
control_building_s_okg_int_dg.svg
control_building_s_okg_int_eg.svg
control_building_s_okg_int_og.svg
control_building_s_okg_og.svg
control_centr_arrow_down_left.svg
control_centr_arrow_down_right.svg
control_centr_arrow_down.svg
control_centr_arrow_left.svg
control_centr_arrow_right.svg
control_centr_arrow_up_left.svg
control_centr_arrow_up_right.svg
control_centr_arrow_up.svg
control_circuit_breaker_off.svg
control_circuit_breaker_on.svg
control_fault_current_circuit_breaker_off.svg
control_fault_current_circuit_breaker_on.svg
control_outside_on_off.svg
control_relay_3_close.svg