This tutorial shows how a simple web visualization can be created. To use this tutorial, please do the following steps in advance:
- Install the NETx BMS Platform, which includes BMS Core Server and Visualization Editor.
- 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.
Although it is using KNX data points, this tutorial can of course be used with other technologies like BACnet or Modbus.
After having installed the NETx BMS Core Server, a new project called workspace has to be created. A workspace contains the whole configuration of a BMS server project. To do so, start the NETx BMS Studio and select the entry "New ..." within the "Workspace" menu.
Give the workspace a name (e.g. "Tutorial"). Afterwards, a new workspace is created and the NETx BMS Core 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 Core 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 Core Server.
Select "Replace current definitions" and step through the wizard. After having finished the import, stop the NETx BMS Core 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 Core Server.
Creating a visualization project using the Visualization Editor
The Visualization Editor is a independent software to create and edit Visualizations. To create a new visualization project, start the Visualization Editor .Afterwards, the Visualization Editor starts. Then Connection Properties window will show up.
| Parameter | Description |
|---|---|
| Hostname or IP Address | The Hostname or the IP Address of the Server<If the Visualization Editor and BMS Core Server on the same machine Leave it Empty > |
| Port | TCP Port for secure connection. |
| Password | TLS Connection password. |
| PIN | TLS Connection PIN. |
Port,Password and PIN are defined in the BMS Core Server, Server , Server configuration
Then User login with Username and Password. Default Username and Password are (admin, changeme). Then, the new project is opened and an empty visualization page is shown.
Creating 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.