This tutorial shows how a simple web visualization for Voyager 5.0 can be created. To use this tutorial, please do the following steps in advance:

• Install the NETx BMS Server. The setup can be found here at our website.
• Install the NETx Voyager. The setup can be found here at our website.
• Prepare a KNX project and export the ETS project using our NETx BMS app. The data points of this project shall be used within this tutorial. A tutorial that describes how a KNX project can be imported is provided here.
• Create a new BMS server workspace and import the export from the ETS.
  
  

...

Creating a new

...

visualization project within NETx Voyager

Start the NETx Voyager in editor mode and create a new workspace by select "New" within the "Workspace" menu.

Image Removed 

Give the workspace a name (e.g. "Tutorial"). Afterwards, a new workspace is created and the NETx BMS Server is restarted.

Import the KNX configuration data from the ETS

One advantage of KNX is that each KNX project is engineered using the engineering tool software called ETS -- independent which devices and which vendors are used within the KNX project. Therefore, the ETS holds the whole configuration data and is thus an important knowledge base for the NETx BMS Server. To ease the data exchange between the ETS and the NETx BMS Server, an ETS app called NETx BMS App is available. Using this app, the whole KNX configuration can be exported from the ETS and imported within the NETx BMS Server.

Import the export file (.nxe) of your KNX installation into the NETx BMS Server using the entry "Import NETx ETS app file ..." within the menu "KNX" of the NETx BMS Studio.

Image Removed 

Select "Replace current definitions" and step through the wizard. After having finished the import, stop the NETx BMS Server and start it again. Verify whether the KNX connection is working and whether you can control your KNX data points within the Item Tree of the NETx BMS Server.

Image Removed

Creating a visualization project using the BMS Client Editor

The NETx BMS Server includes a web server that can be used to create web based visualizations. To create a new visualization project, right-click at the "Project Tree", select "New visualization project ..." and give the project a name.

Image Removed 

Afterwards, the BMS Client Editor (BCE) starts. The BCE is a tool for designing and creating web based visualizations. As next, a user name and a password have to be chosen. Then, the new project is opened and an empty visualization page is shown.

 Image Removed

Creating a visualization page for floor 1

First, rename the visualization page to "Floor1" by selecting "Configuration ..." 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.

 Image Removed

Then, download the image "Floor1.png" from here. Double-click the image and select the downloaded image. Afterwards, change to the Enter a workspace name and select "Voyager" as project type. Since NETx Voyager 5.0 is using a fix resolution for a visualization project and it has to be fixed during the creation of a new project. For this tutorial, select 800 x 600.

Image Added

As next, create a new user and a password. Each visualization project needs at least one user. The checkbox "Visualization default user" can be activated if you want to use a visualization project within the need for a login.

Image Added

As next, the connection to the NETx BMS Server has to be configured. Within the text field "Computer", enter the IP address of your NETx BMS Server. If the NETx BMS Server is running on the same PC, you can leave the text field empty or you can use "127.0.0.1" as IP address. Ensure that the checkbox "VNET" is select. VNET is the communication protocol between the NETx BMS Server and the NETx Voyager. its default port is TCP 4530.

Image Added
 

Then, the new project is opened and an empty visualization page is shown.

 Image Added

Creating a visualization page for floor 1

First, rename the visualization page to "Floor1" by selecting "Configuration ..." 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.

 Image Added

Then, download the image "Floor1.png" from here. Double-click the image and select the downloaded 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.

...

For a detailed description see Annex A.1 of the manual of the BMS Client Editor NETx Voyager (available via the menu "Help").

...

Testing the visualization in a web browser or on your smart phone

Each time the visualization project is saved, it is also transferred to the web server of the NETx BMS Server. To show the visualization within a web browser or on an Android or iOS device, a so called BMS Client has to be defined.

Minimize the BMS Client Editor and change back to NETx BMS Studio. Within the "Project Tree" add a new BMS Client definition.

Image Removed

Within the configuration dialog, choose a name and select your visualization project within the drop-down box.

Image Removed

To show the visualization, simply double-click on the new BMS Client definition within the project tree. The visualization can also be accessed remotely. The URL is

For iOS and Android, a dedicated app called NETx Touch is available. This app can be downloaded from iTunes or Google Play Store for free. After starting the app, the connection setting (IP address of the NETx BMS Server, BMS Client name, user name, password, ...) have to be entered.

...

Related articles

...