Basic / Advanced / Expert

Application note
Advanced techniques in visualization

CSS, SVG and screen resolution support in Wiser for

KNX

AN006_v1.3: Advanced techniques in visualization

Safety Information
Important Information
Read these instructions carefully before trying to install, configure, or operate this software. The following
special messages may appear throughout this bulletin or on the equipment to warn of potential hazards
or to call attention to information that clarifies or simplifies a procedure.

The addition of either symbol to a “Danger” or “Warning” safety label indicates that an electrical hazard
exists which will result in personal injury if the instructions are not followed.

This is the safety alert symbol. It is used to alert you to potential personal injury hazards. Obey all safety
messages that follow this symbol to avoid possible injury or death.

DANGER

DANGER indicates an imminently hazardous situation which, if not avoided,

will result in death or serious injury.

WARNING

WARNING indicates a potentially hazardous situation which, if not avoided,

can result in death or serious injury.

CAUTION

CAUTION indicates a potentially hazardous situation which, if not avoided, can

result in minor or moderate injury.

NOTICE

NOTICE is used to address practices not related to physical injury. The safety
alert symbol shall not be used with this signal word.

AN006_v1.3: Advanced techniques in visualization

Page 2 / 21
Please Note
Electrical equipment should be installed, operated, serviced, and maintained only by qualified personnel.
No responsibility is assumed by Schneider Electric for any consequences arising out of the use of this
material.

A qualified person is one who has skills and knowledge related to the construction, installation, and
operation of electrical equipment and has received safety training to recognize and avoid the hazards
involved.

Safety Precautions

WARNING

HAZARD OF INCORRECT INFORMATION

 Do not incorrectly configure the software, as this can lead to incorrect

reports and/or data results.

 Do not base your maintenance or service actions solely on messages

and information displayed by the software.

 Do not rely solely on software messages and reports to determine if

the system is functioning correctly or meeting all applicable standards
and requirements.

 Consider the implications of unanticipated transmission delays or

failures of communications links.

Failure to follow these instructions can result in death, serious injury, or

equipment damage.

AN006_v1.3: Advanced techniques in visualization

Page 3 / 21
 The information provided in this documentation contains general descriptions and/or technical
characteristics of the performance of the products contained herein. This documentation is not intended
as a substitute for and is not to be used for determining suitability or reliability of these products for
specific user applications. It is the duty of any such user or integrator to perform the appropriate and
complete risk analysis, evaluation and testing of the products with respect to the relevant specific
application or use thereof. Neither Schneider Electric nor any of its affiliates or subsidiaries shall be
responsible or liable for misuse of the information that is contained herein. If you have any suggestions
for improvements or amendments or have found errors in this publication, please notify us.
No part of this document may be reproduced in any form or by any means, electronic or mechanical,
including photocopying, without express written permission of Schneider Electric.
All pertinent state, regional, and local safety regulations must be observed when installing and using
this product. For reasons of safety and to help ensure compliance with documented system data, only
the manufacturer should perform repairs to components.
When devices are used for applications with technical safety requirements, the relevant instructions
must be followed.
Failure to use Schneider Electric software or approved software with our hardware products may result
in injury, harm, or improper operating results.
Failure to observe this information can result in injury or equipment damage.

© 2014 Schneider Electric. All rights reserved

AN006_v1.3: Advanced techniques in visualization

Page 4 / 21
Table of Contents
1 Introduction ............................................................................................................................... 6

2 CSS – Cascading Style Sheets .................................................................................................... 7

2.1 Basic CSS syntax description .............................................................................................................. 7

2.2 How to modify CSS ............................................................................................................................. 8

2.2.1 Select elements to be modified via CSS ....................................................................................... 9

2.2.2 Edit CSS via modification of selector .......................................................................................... 10

2.2.3 User created additional classes .................................................................................................. 11

2.2.4 Possible modification of objects via CSS .................................................................................... 13

3 SVG icons ................................................................................................................................ 14

3.1 Comparison of vector and raster graphics ......................................................................................... 14

3.2 Import SVG icons into Wiser for KNX ................................................................................................ 14

4 Resolutions .............................................................................................................................. 16

4.1 Full HD display .................................................................................................................................. 16

4.2 iPad ................................................................................................................................................... 17

4.3 PC/Tablet view parameter ................................................................................................................. 17

5 Conclusion ............................................................................................................................... 20

6 Appendix ................................................................................................................................. 20

6.1 Glossary ............................................................................................................................................ 20

AN006_v1.3: Advanced techniques in visualization

Page 5 / 21
1 Introduction
This application note describes:

 CSS (Cascading Style Sheets) which allows you to modify Wiser for KNX visualization to give the
integrator easy control of customization of GUI (Graphical user interface)
 SVG (Scalable Vector Graphics) minimizing memory requirements and ensure forward compatibility as
well as independency of icon quality in different resolutions.

The application note also contains information about available graphic resolutions to ensure Wiser for KNX

compatibility with a wide range of visualization devices.

Customer value proposition

The customer value propositions correspond to real use cases to modify Wiser for KNX visualization via CSS,
import SVG icons and select suitable resolution for visualization. In this context here are some possible use
cases which can be implemented with this application note:

 How to modify CSS

 How to select element located on Visualization
 How to edit CSS selector via changes of declaration
 How to import SVG icons into Wiser for KNX
 How to select suitable resolution for visualization

Competencies

There are several necessary competencies to follow procedures mentioned in this application note. It is
mandatory to have knowledge of basic Wiser for KNX configuration described in the User guide and
knowledge of web and graphic technologies CSS, SVG. Further information about CSS is available on W3C
website (http://www.w3.org)

System prerequisites

Software Version Download

Wiser for KNX 2.1.0 and newer http://www.schneider-electric.com

Table 1: software versions of used software

AN006_v1.3: Advanced techniques in visualization

Page 6 / 21
2 CSS – Cascading Style Sheets
CSS is a language which makes up the presentation of web pages, including colors, layouts and fonts. CSS is

independent of HTML (HyperText Markup Language). This separation of HTML from CSS makes it easier to
maintain Wiser for KNX visualization and share style sheets across pages.

The Wiser for KNX has an integrated CSS editor which is designed to work-out the final design of visualization.

2.1 Basic CSS syntax description

CSS rule consists of two parts: selector and declarations

selector{property:value; property:value;}
e.g. h1{color:green; font-size:18px;}

Selector is an HTML element, in this case header level 1 (in this example h1)

Declaration (in this example color:green; font-size:18px;) modifies origin look of HTML element via
changes of values in brackets. Every graphic element which is located on visualization web page is described
by CSS in terms of placement and look.

AN006_v1.3: Advanced techniques in visualization

Page 7 / 21
2.2 How to modify CSS
CSS editor is integrated in the Wiser for KNX :

1) Open web browser and log on to Wiser for KNX controller

2) Edit custom CSS Configurator ›› Vis. Graphic ›› Edit custom CSS

On the Wiser for KNX Configurator page:

 Left click Vis. graphic 1

 Left click Edit custom CSS 2

 Edit CSS 3

Picture 1: Edit custom CSS

The Wiser for KNX supports only one style sheet linked to the visualization. This style sheet modifies behavior

of whole visualization.

Beside using of the custom CSS, the visualization can be upon of that affected by inline CSS, which is

generated via Visualization during creation of visualization.

The inline CSS can cause problem because it has higher priority than custom CSS. This priority can be forced
by !important property.

For example: If the integrator creates a custom CSS for his complete project and after that needs to modify
newly implemented icons, he needs to add command !important to each of them so that the new icon shares

the custom CSS format of the project. See picture 9.

AN006_v1.3: Advanced techniques in visualization

Page 8 / 21
Modification of visualization can be performed according to the following steps:

1. Select elements to be modified via CSS

2. Edit CSS via modification of selector

2.2.1 Select elements to be modified via CSS

This step can be performed with specific web design tools like Firebug or Web Developer which can installed

like browser extensions. These web design tools are available for the Mozilla Firefox and Google Chrome
browsers.

In this use case we focus on the question “How to change font and color of heading?”.

Steps for selecting element on webpage in the Firebug

 Open visualization and activate firebug plugin 4

 Left click Inspect button 5

 Select element 6

Picture 2: Visualization analysis in Firebug

AN006_v1.3: Advanced techniques in visualization

Page 9 / 21
Note: Control icons of Firebug can be available from other menu. It depends on user settings of specific web
browser.

Steps for selecting element on webpage in the Web Developer

 Open visualization and activate Web developer plugin 7

 Activate Display Div Order 8

Picture 3: Visualization analysis in Web developer

HTML element for heading which is described by inline CSS according tools for visualization analysis.

<div class="item item-label" style="top: 19px; left: 25px; z-index: 30; font-size: 30px;
color: rgb(98, 100, 105); font-weight: bold; font-family: Arial;">Light</div>

Picture 4: Default settings of heading font

2.2.2 Edit CSS via modification of selector

Configurator ›› Vis. graphics ›› Edit custom CSS

 Left click Vis. graphic 9

 Left click Edit custom CSS 10

AN006_v1.3: Advanced techniques in visualization

Page 10 / 21
 Picture 5: Edit custom CSS

Add following line into custom CSS:

div.item.item-label{font-family: Calibri !important; color:#009530 !important;}

Picture 6: Modified headings via custom CSS

Origin grey colored font Arial changed to font Calibri and green color. This rule is applied over whole
visualization and saves the time of bespoke modification.

In case of modification of some part of the SVG icon (color, fill etc.) it is highly recommended to modify it in
professional graphic software before upload to Wiser for KNX.

Note: The welcome page does not have external CSS file and cannot be modified via custom CSS.

2.2.3 User created additional classes

User can add additional classes to any element in the visualization. This feature is implemented from Wiser for

KNX firmware version 1.3.0 and allows you to differentiate elements so you can write a unique CSS rule for
specified elements only.

Adding new classes are done by filling Additional classes input in Plan editor when element is selected.

AN006_v1.3: Advanced techniques in visualization

Page 11 / 21
 Picture 7: Filling Additional classes input

Picture 8: Modified class in html code

Header modified by Additional classes is now accessible via 2 new classes .heading_red and .font_bold. How
to edit CSS via modification of selector is described in chapter 2.2.2. Following code change color of heading
to red and font to bold.

Picture 9: Custom css for additional classes

Picture 10: Modified heading via custom CSS

AN006_v1.3: Advanced techniques in visualization

Page 12 / 21
2.2.4 Possible modification of objects via CSS

There are some standard elements used on visualization webpage which can be modified via custom CSS.

font Sets all the font properties in one declaration

font-family Specifies the font family for text
font-size Specifies the font size of text
labels
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font

opacity Specifies the transparency of a icon

border Specifies the border of icon
icons
height Sets the height of an element
width Sets the width of an element

Table 2: Possible element modification via properties

Note: Table 2 does not contain all properties, because they are not applicable to Wiser for KNX visualization.
Complete properties are available on W3C website (http://www.w3.org).

AN006_v1.3: Advanced techniques in visualization

Page 13 / 21
3 SVG icons
SVG (Scalable Vector Graphics) is a kind of two dimension graphic format, which is based on vectors instead

of pixels and has huge potential for high resolution plans because the file size is independent of the scale of
the icon and thus significantly improves quality of GUI.

SVG format is supported from firmware v1.0

3.1 Comparison of vector and raster graphics

PNG format of the icons included in the Wiser for KNX by default is not suitable for high resolutions of plans
due to reduced quality when the icon is scaled up. On the other hand, SVG format has no limitation when used

in higher floor plan resolution.

Picture 11: Comparison of vector and raster graphics

3.2 Import SVG icons into Wiser for KNX

Import of SVG icons can be performed here:

Configurator ›› Vis. graphics ›› Icons

 Left click Vis. graphics 11

 Left click Icons 12

AN006_v1.3: Advanced techniques in visualization

Page 14 / 21
 Picture 12: Add icons

 Left click Add icons 13

Picture 13: Add icons button

1) Import icons

Import SVG icons can be done by using Add icons button and choosing SVG icons located on hard drive.

Picture 14: Import icon

Note: If there is no need to use the PNG icons, they can be deleted. Select icons which you want delete and

activate Delete selected.

AN006_v1.3: Advanced techniques in visualization

Page 15 / 21
4 Resolutions
Wiser for KNX provides visualization for wide range of display devices. Appropriate resolution complying with

native resolution and aspect ratio of used display devices is the key to reach best results in visualization.

Each class of resolution was tested in ”center plans, enabled auto-sizing ” mode.

You can see the behavior different resolutions in next chapters which are focused on the testing of different
resolutions.

Resolution Description Usage

640x480 VGA Just for needs of this AN

1024x768 XGA resolution PC workstations, Touch screens

1920x1080 FullHD display PC workstations

2048x1536 Apple iPad retina Tablets

Table 3: Resolution used in Wiser for KNX

4.1 Full HD display

Full HD display with 1920x1080 resolution was used as a display device.

Resolution File Impression

640x480 Plan is too small for this display, use higher resolution

1024x768 Plan is covering approximately 75% of display height, use higher resolution

1920x1080 This resolution is made for this display, looks perfect

iPad resolution was correctly adapted, but due to different ratio there are white borders
2048x1536
from sides

Table 4: Display 1920x1080

AN006_v1.3: Advanced techniques in visualization

Page 16 / 21
4.2 iPad
iPad 4th generation has default resolution 2048x1536 on display called Retina .

Resolution File Impression

Plan is too small for this display, it is zoomed out, use higher resolution to improve the
640x480
look

1024x768 This resolution is good enough for iPad 4gen

FullHD resolution was correctly adapted to resolution of iPad, but due to different ratio
1920x1080
there are white borders from above and bellow

2048x1536 2048x1536 is made for this display, looks perfect

Table 5 iPad

4.3 PC/Tablet view parameter

PC/Tablet settings have an impact on display of plans in visualization. The influence of these parameters is

described in following subchapters.

Parameter can be set here:

Configurator ›› Configuration

Picture 15: PC/Tablet view settings

1) Align plans to top left, no size limit

AN006_v1.3: Advanced techniques in visualization

Page 17 / 21
 Picture 16: Align plans to top left, no size limit

Description:

If visualization is larger than resolution of display, plan is cut from bottom and right side. If visualization is
smaller than resolution of display, plan is aligned to top left.

2) Center plans, limit size

Picture 17: Center plans, limited size

Description:

AN006_v1.3: Advanced techniques in visualization

Page 18 / 21
If visualization is larger than resolution of display, plan is cut from all sides. If visualization is smaller, than

resolution of display, plan is centered.

1) Center plans, auto sizing

Picture 18: Center plans, auto sizing

Description:

If visualization is larger than resolution of display, plan is auto sized. If visualization is smaller than resolution of
display, plan is centered.

2) Center horizontally, auto-size width

Picture 19: Center horizontally, auto-size width

AN006_v1.3: Advanced techniques in visualization

Page 19 / 21
Description:

If visualization is larger than resolution of display, plan is cut from bottom. If visualization is smaller than
resolution of display, plan is centered.

5 Conclusion
Using Custom CSS is helpful for mass changes in visualization or to create styles based on customer
conventions.

SVG graphics are very useful for visualization in high resolution. Using SVG graphics does not have a negative

effect on Wiser for KNX performance.

Regarding PC/Tablet view parameter it is advised to use the same resolution as on display of the device or
higher. If resolution of display device will be higher and PC/tablet view parameter will be set as Center plans,
auto size, plan will be optimalized for comfort view.

6 Appendix
6.1 Glossary
The following table describes the acronyms and defines the specific terms used in this document.

Abbreviation Description
CSS Cascading Style Sheets
HTML HyperText Markup Language
SVG Scalable Vector Graphics
JPG Lossy image format
GIF Lossless bitmap image format
PNG Lossless bitmap image format
VGA Video Graphics Array
XGA Extended Graphics Array
W3C The World Wide Web Consortium

Table 6: specific terms

AN006_v1.3: Advanced techniques in visualization

Page 20 / 21
Schneider Electric Industries SAS

Head Office
35, rue Joseph Monier
92506 Rueil-Malmaison Cedex
FRANCE

www.schneider-electric.com

AN006_v1.3: Advanced techniques in visualization

Page 21 / 21