Icons

smartVISU uses two kinds of icons:
23
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') }}


icon.arrow
icon.battery
icon.battery2
icon.blade
icon.blade2
icon.blade_z
icon.blade_arc
icon.cistern
icon.clock
N
icon.compass
icon.garagedoor
icon.graph
icon.heating
icon.light
icon.meter
icon.roofwindow
icon.shutter
icon.ventilation
icon.volume
icon.windmill
N
icon.windrose
icon.windsock
icon.zenith


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', '') }}

scaled 0-255
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'.
{{ icon.blade2('icon5', '', 'bath.light.value', '', '', '#f9a028') }}
{{ icon.battery('icon6', '', 'bath.light.value', '', '', '#4176a9') }}
{{ icon.meter('icon7', '', 'bath.light.value', '', '', 'icon4') }}

icon.blade2
icon.battery
icon.meter




900
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:
{{ 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.


DER_SPIEGEL.svg


audio_audio.svg
audio_eject.svg
audio_eq.svg
audio_fade.svg
audio_ff.svg
audio_headphone.svg
audio_loudness.svg
audio_mic_mute.svg
audio_mic.svg
audio_next.svg
audio_pause.svg
audio_play.svg
audio_playlist.svg
audio_previous.svg
audio_rec.svg
audio_repeat_song.svg
audio_repeat.svg
audio_rew.svg
audio_shuffle_album.svg
audio_shuffle.svg
audio_sound.svg
audio_stop.svg
audio_sync.svg
audio_volume_high.svg
audio_volume_low.svg
audio_volume_mid.svg
audio_volume_mute.svg


control_1.svg
control_2.svg
control_3.svg
control_4.svg
control_all_on_off.svg
control_arrow_down_left.svg
control_arrow_down_right.svg
control_arrow_down.svg
control_arrow_downward.svg
control_arrow_left_right.svg
control_arrow_left.svg
control_arrow_leftward.svg
control_arrow_right.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_arrow_up.svg
control_arrow_upward.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_all.svg
control_building_control.svg
control_building_dg.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_eg.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_kg.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_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_cancel.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_clear.svg
control_dots_hor_e.svg
control_dots_hor_f.svg
control_dots_hor_s.svg
control_dots_vert_e.svg
control_dots_vert_f.svg
control_dots_vert_s.svg
control_fault_current_circuit_breaker_off.svg
control_fault_current_circuit_breaker_on.svg
control_hamburger_e.svg
control_hamburger_f.svg
control_hamburger_s.svg
control_home.svg
control_minus.svg
control_ok.svg
control_on_off.svg
control_outside_on_off.svg
control_plus.svg
control_reboot.svg
control_relay_3_close.svg
control_reload.svg
control_reset.svg
control_return.svg
control_standby.svg
control_switch_1.svg
control_switch_3.svg
control_switch_m_4.svg
control_switch_m_8.svg
control_x.svg
control_zoom_in.svg
control_zoom_out.svg


edit_collapse.svg
edit_copy.svg
edit_cut.svg
edit_delete.svg
edit_expand.svg
edit_favorites.svg
edit_input_numeric.svg
edit_numeric_0.svg
edit_numeric_1.svg
edit_numeric_2.svg
edit_numeric_3.svg
edit_numeric_4.svg
edit_numeric_5.svg