This tutorial shows how a 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. 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.

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.

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.

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 "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.

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.

Creating 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. Use the image "Floor2.png" that can be downloaded here.

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 floor 1.

Afterwards, double-click the link area, move to the "Object" tab and select "Go to page" as function. Within the drop-down list, select the page floor 2. Then, change to the "Appearance" tab and deactivate the check box "Border" - this will hide the black border of the link area. Change to the page of floor 2, add another link area, move it over the stairs of floor 2 and link it to floor 1.

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

Creating 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 "Floor1" 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.

Implementing lighting control

As next, a simple on/off light shall be implemented on floor 1. From the library add a "Button-Light-Rect" button. Double-click the button and change to the "Object" tab. Depending on the configuration of the actuator, one or two KNX group addresses are needed. One KNX group address is needed of controlling the light. If there is a separate status object, one KNX group address that provides the current state of the light. Within the "Server Item" list, add the corresponding addresses. If there is no separate status object, add the KNX group address and set the "Send" and "Receive" flag. If there is a separate status object, add KNX group address of controlling as "Send" and the status group address as "Receive". The following figure shows a possible configuration with separate status object. Verify the correct selection of the "Send" and "Receive" flags.

Now this simple on/off control shall be extended with a dimming functionality. Add a "Button-Light-plus-Rect" and a "Button-Light-minus-Rect" button to the existing on/off button. 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. Select "Toggle" as "Operating mode". "Toggle" means that the "On" value is sent when the button is pressed and the "Off" value is sent when the button is released. Then select the 4 bit group address of your light. As "On" value enter "9" and as "Off" value "0". Repeat these steps for the "Minus" button. Use "1" as "On" value and "0" as "Off" value.

As next, the current brightness value shall be visualized using a simple label. Insert a "Label" control, 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 dimming value of your light.

Now the label shows the raw value of the data point. If the value is a 1 Byte KNX object defines as KNX DPT 5.010 (Value 1 UCount) or as EIS6, the value range is from 0 ... 255. To recalculate the value to 0% ... 100%, you can specific the scale factor "0,3922". If it is defined as KNX DPT 5.001 (Scaling), no scale factor is necessary since the BMS server is automatically recalculating the value to percentage as defined by the KNX standard. The following figure shown a group address within the BMS server which is calculated as DPT 5.001.

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 "%": this format string rounds a decimal to the nearest integer and adds a percent sign.
• 0.0 "°C": this format string always shows one digit after the comma and adds the unit degrees Celsius.

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

Implementing blind control

As next, a simple blind control shall be added to floor 1. Insert three new buttons from the library. "Button-Blinds-Up-Rect", "Button-Blinds-Down-Rect" and "Button-Stop-Rect" and place them at the top left corner of the visualization. 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.

Double-click the "Down" button and change to the "Object" tab. As operating mode select "Toggle Down", select the KNX group address for Up/Down and enter "1" (1 means moving the blind down) within the text field for the value. Do the same for the "Up" button but use the value "0" (0 means moving the blind down). For the "Stop" button, select the KNX group address for "Slat adjustment/Stop" and enter "0" as value (0 means stopping the blind). The following figure shows the configuration of the "Down" button.

Heating/cooling room control

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 floor 1. Double-click the first one, select "Indicator" as function and select the corresponding KNX group address that provides the current room temperature. Do the same for the second label and link it to the KNX group address that provides the setpoint. The following figure shows the configuration of one of the label.

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 configurtion dialog of the label and use the following text format:

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

The following figure shows the configuration.

As next, insert two buttons for changing the setpoint. Use a "Button-Heating-Minus-Rect" and a "Button-Heating-Plus-Rect" from the library and place them next to the labels. Open the configuration dialog of the + Button and change to the "Object" tab. As operating mode select "+ Value", enter 0.2 in the text field "Step", activate the checkbox and enter "25" within the text field "Max. value". Within the Server Items list, select the KNX group address that provides the setpoint and activate the "Send" and "Receive" flag. Whenever the button is clicked, 0.2 is added to current setpoint and sent to KNX. This is done up to 25. Do the same of the - Button but use "- Value" as operating mode and "18" as minimum value. The following figure shows the configuration of the + Button.

Using popup windows

As you can see there are a lot of control elements within the visualization page "Floor 1". To make such a visualization page more easier to use, so called popup windows can be used. A popup windows is a group of elements that is shown only temporary.

To define a pop up windows for the blind control, select all three buttons of the blind control. Right-click on one of the three selected buttons and select "Group" within the "Grouping" menu. Within the dialog, enter a name for the group (e.g. "BlindGroup1") and select the checkbox "Popup window". Press "Ok" to close the dialog again.

Now the three buttons are defined as popup window. This means that the group is only shown in the visualization when they are activated by the user. Activating a popup windows can be done with a button or a link area. Within this tutorial, a link area shall be used. Insert a link area and place it over the window within the floor plan. Double-click the link area, move to the "Object" tab, select "Change popup visibility" as function, select the group name in the drop down box and "Switch On" as mode. Then, change to the "Appearance" tab, deactivate the check box "Border" and close the dialog.

In order to test this functionality, start the visualization. After having started the visualization, the pop window is not shown. If you click on the link area, the popup window is shown and the controls can be used. When you click anywhere beside the elements the popup window is hidden again.

Related articles

• Page:
  Visualization not working after IP router changed
• Page:
  Voyager1: Creating a visualization for KNX
• Page:
  Falcon driver not found
• Page:
  How to easily design picture buttons