Tutorial: Create a web visualization for KNX

Owned by Nahel Falhout (Unlicensed)
Last updated: Sept 25, 2018 by Reinhard Mayr (Unlicensed)
4 min read

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

Although this tutorial deals with KNX data points only, the procedure can be applied to any kind of data points available in the Core Server.

Create a visualization page for floor 1

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

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.

Then, choose the image of the Floor . Double-click the image and select the Floor image. Afterwards, change to the tab "Position/Layer" and enter "0" for "Top" and "Left" and select "Background" as layer (the "Background" layer is the last layer within the list). Now the image is moved to the top left corner and fixed to the background.


The visualization software is using the concept of layers. A layer is a group of elements. Layers are independent of the visualization page - they are defined for the whole visualization project. Each layer has four properties that can be changed via the view "Layesr", in View, Layers

  • "Enabled in editor": if deactivated, all elements of that layer cannot be moved and changed anymore.
  • "Visible in editor": this option can be used to hide all elements of a layer in editor mode.
  • "Enabled in visualization": if deactivated, the elements are shown but the user is not able to click on them.
  •  "Visible in visualization": this option hides all elements of a layer in visualization mode.

As seen at the end of the layer list, the flags "Enabled in editor" and "Enabled in visualization" are deactivated for the background layer. Therefore, the background image cannot be moved anymore.


Create a page for the second floor and add a link between the two pages

Create a new page by selecting the entry "New ..." within the menu "Page". Give the page a name and select "Ok". Repeat the steps from the last section to place a background image on the new page.

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 the stairs of plan floor.And select the ID of the Floor.

Start the visualization by pressing the "Start" button within the tool bar and test whether the navigation between the two pages are working.

Create a navigation bar using a master page

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 master pages is provided. A master page acts like a template for visualization pages - all elements that are placed on the master page are also shown on other pages which are configured to use this master page.

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

Then place a "Back" button on the master 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. Double-click the button, change to the "Object" tab and select "Go to page" as function. As "Linked page" select "Navigate back". Change to the "Position/Layer" tab, change the width and height to "70" and close the dialog.


Afterwards, change to page "Floor2" and open the page configuration dialog. Within this dialog, select "Use master page" and close the dialog again. Do the same for the other page. As a result, the back button of the master page will also be shown on the other pages.