This tutorial shows how to create a simple web visualization for a KNX project. Requirements for this tutorial:

• NETx BMS Platform is installed including server-side components and Visualization Editor: Installation

• Use the ETS NETx BMS App Secure to create an export file of the ETS project: Tutorial: Import a KNX project from the ETS

• Create a new Core Server workspace or open an existing one: Workspace menu

• Import your ETS project: Tutorial: Import a KNX project from the ETS

• Switch to the Visualization Editor and create a new workspace.

First, rename the visualization page to "Floor Plan" by selecting "Properties..." within the menu "Page".

Open

Open

As next, a background image shall be placed on the visualization page. To do so, select "Image" from the object catalog at the left hand side and drop the element on the empty page.

Open

Then, choose the image of the Floor. Double-click the image and select the floor image. You can use this example file here

Open

Afterwards, change to the tab "Position/Layer" and enter "0" for "Top" and "Left", “1920” for “Width”, “900” for “Height”, and select "Background" as layer.

Open

Now the image is moved to the top left corner and fixed to the background. The height of 900 will leave some space for our navigation bar later on.

Open

Create a new page by selecting the entry "New ..." within the menu "Page". Give the page a name (e.g. “Room”) and select "Ok".

Open

Open

Repeat the steps from the last section to place a background image on the new page. You can use this example file here.

Open

To create a link between the pages, move back to the first page and drag & drop a "Link Area" from the object catalog on the visualization page. Resize the link area and move it over a room.

Open

Double-click the link area and select “Go to page” as function and your room page as “Linked page”.

Open

Within the appearance tab, you can also deselect the border. This will deactivate the black border of the link area and thus it will be invisible.

Open

Since the link area is invisible now, it may be difficult to find it again. Within the view “Object Tree”, you can find all pages and theirs controls. By double-clicking a control in the tree, it will be highlighted and the configuration dialog opens.

Open

Start the visualization by pressing the "Start" button within the tool bar.

Open

Test whether the navigation between the two pages is working by clicking at the link area.

Open

Within most visualization projects, there will be elements that shall be shown on multiple pages. A typical example is a navigation bar that includes some buttons that shall be displayed on all pages. To avoid that these elements have to be copied to each page, the concept of template pages is provided – also called master pages. A master page acts like a template for visualization pages - all elements that are placed on the template page are also shown on other pages which are configured to use this template page.

Create a new page called "Template page". Within the configuration dialog, select the option "Is master page".

Open

Then place a "Back" button on the template page. In addition to create your own buttons, some predefined buttons are already provided within the library. Select "Library" from the object catalog, choose a color theme, and place a "Button-Back-Rect" button on the bottom left corner.

Open

Double-click the button, change to the "Object" tab and select "Go to page" as function. As "Linked page" select "Navigate back".

Open

Change to the "Position/Layer" tab, change the width and height to "100" and close the dialog.

Open

Afterwards, change to page "Room" and open the page configuration dialog. Within this dialog, select "Use master page" and close the dialog again.

Open

Do the same for the other page. As a result, the back button of the template page will also be shown on the other pages.

Open

As next, a simple on/off light shall be implemented on the room page. From the library add a "Button-Light-Rect" button. Double-click the button and change to the "Object" tab. Normally, there are two KNX group addresses for controlling a light in KNX. One KNX group address is needed for controlling the light (control address) – one that provides the status of the light (status address).Within the "Server Item" list, add the corresponding addresses. For the controlling address, set the SEND flag and deactivate the RECEIVE false. For the status address, set the RECEIVE flag and deactivate the SEND flag. Verify the correct selection of the "Send" and "Receive" flags.

Open

Now we would like to add a control shall with dimming functionality. Add a "Button-Light-plus-Rect" and a "Button-Light-minus-Rect" button to the existing on/off button.

Open

In KNX, dimming is realized using a 4 bit object. The first bit reflects the direction of the dimming command and the remaining 3 bits the step size. The following values can be used for dimming control:

• 1001 → 9: this value is used to start dimming up to 100%

• 0001 → 1: this value is used to start dimming down to 0%

• 0000 → 0: this value is used to stop the dimming process

Double-click the "Plus" button and change to the "Object" tab and select "XCommand Button". An “XCommand button” has advanced functions like short and long click as well as the possibility to use logic commands. Within the first row, select short click and select the XCommand “ITEM.TOGGLEWITHSTATUS”. As parameter “Item” select the control group address. Activate the parameter “Status” and select the status group address.

Open

The logic “ITEM.TOGGLEWITHSTATUS” inverts the value of the status and sends it to the item. This means if the light was “off”, it will send a “on” – if it was “on” it will send an “off”.

As next, select “Long Down” in the second row and select the XCommand “ITEM.WRITE”. As value set 9 (i.e. start dimming to 100%) and as output select the 4 bit relative dimming address.

Open

In the third row, select “Long Up” and select the XCommand “ITEM.WRITE”. As value set 0 (i.e. stop dimming) and as output select the 4 bit relative dimming address.

Open

Double-click the "Minus" button. Repeat the same steps as for the plus button. For the long down operation use the value 1 (i.e. dimming down to 0%) instead of 9.

Open

As next, the current brightness value shall be visualized using a simple label. Insert a "Label" control next to the two buttons. Double-click it and change to the "Object" tab. As function select "Indicator". "Indicator" means that the label shows the current value of a data point. Select the group address that provides the current brightness value of your light.

Open

Now the label shows the raw value of the data point. If the value is a 1 Byte KNX object defined as KNX DPT 5.001 (Scaling), value range is from 0 ... 100 %. In order to format it (e.g. limit the number of digits and adding a unit), a format string can be specified. The format string can be specified in the "Appearance" tab of the label configuration.  Here some useful text formats are listed:

• “{0:0} %”: this format string rounds a decimal to the nearest integer and adds a percent sign.

• “{0:0.0} °C”: this format string always shows one digit after the comma and adds the unit degrees Celsius.

You can also activate the option “Font AutoSize”. This will scale the font size to fit to the size of the label.

Open

Start the visualization and test it. A short click will turn the light on and off. If you click and hold the button, the it will start the dimming. If you release the button it will stop. The label will show the current brightness value in percentage.

As next, a simple blind control shall be added to the room. Insert two new buttons from the library: "Button-Blinds-Up-Rect" and "Button-Blinds-Down-Rect". Make them the same size as the other buttons and align them in a way that they have the same space and that the aligned according to the top edge. To achieve this, select them and use the corresponding menu entries within the context menu.

Open

Double-click the "Down" button and change to the "Object" tab and select "XCommand Button". Within the first row, select “Short Click” and select the XCommand “ITEM.WRITE”. As parameter “Output” select the up / down group address of your blind. As value, enter 1 which means “moving down” in KNX.

Open

Within the seconds row, select “Long down” and select the XCommand “ITEM.WRITE”. As parameter “Output” select the stop group address of your blind. As value, enter 1 which means “stop” in KNX.

Open

Double-click the "Up" button. Repeat the same steps as for the plus button. For the short click operation use the value 0 instead of 1. 0 means moving the blind up in KNX.

Open

As next, the blind position shall be visualized too. Insert a "Label" control between the two buttons. Double-click it and change to the "Object" tab. As function select "Indicator". Select the group address that provides the position of the blind. As before, add the text format “{0:0 %}” to format the value.

Open

As next the functionality of a simple room controller for heating or cooling shall visualized. It shall consists of the following elements:

• Label that shows the current room temperature

• Label that shows the current setpoint

• + Button that is used to increase the setpoint

• - Button that is used to decrease the setpoint

First, insert two labels that the page of the room.

Open

Double-click the first one, select "Indicator" as function and select the corresponding KNX group address that provides the current room temperature.

Open

Do the same for the second label and link it to the KNX group address that provides the current set point.

To make the display more user-friendly, the digits after the comma should be limited. In addition, the unit of the temperature shall be displayed. To achieve this, change to the appearance tab of the configuration dialog of the label and use the following text format:

• {0:0.0} °C: this format string always shows one digit after the comma and adds the unit degrees Celsius.

In addition, activate the “Font Autosize” option. The following figure shows the configuration.

Open

As next, insert two buttons for changing the set point. Use a "Button-Heating-Minus-Rect" and a "Button-Heating-Plus-Rect" from the library and place them next to the labels.

Open

Open the configuration dialog of the + button and change to the "Object" tab. As operating mode select "Toggle Down", select the 1 bit increase / decrease offset address and enter 1 as value. Pressing the button will increase the set point by the configured step.

Open

Double-click the - button. As operating mode select "Toggle Down", select the 1 bit increase / decrease offset address and enter 0 as value. Pressing the button will decrease the set point by the configured step.

Open

To show the visualization in the web browser, do the following steps.

First, the visualization project must be transferred to the Web Manager which provides the web visualization interface. To do so, select “Save and Transfer Workspace to server” from the workspace menu.

Open

Then, login to the Web Manager interface. The URLs are:

Login with your user.

Open

Change to the Visualization Management app.

Open

Select the correct visualization project and hit the “Deploy” button. This will extract the visualization project and deploys it to the internal web server. A yellow message should appear.

Open

To verify that the deployment was successful, press the refresh button and verify that the “Last deployed” timestamp is after the “List received” timestamp.

Open

Afterwards, change to the “Devices” menu and select a device which is linked to the correct visualization project. If such a device is not existing create a new one or change the project of an existing device.

Open

Then click on the button “Open Visualization”.

Open

This will redirect you to the login of the web visualization. Enter your username and password.

Open

After log-in, click on the link area within the room plan. The room page will be shown.

Open

Whenever you change something within the visualization project, it must be redeployed to the web server.

To achieve this, save and transfer the workspace.

Open

Within the visualization management, press the “Deploy” button again.

Open

Your web clients will be disconnected. After logging in again, the changes should be visible in your web interface.