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 Server. The setup can be found here at our website.
- Download the following attachment. It contains all necessary files that are needed for this tutorial.
After having installed the NETx BMS 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 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.
For this tutorial, the ETS app export of a KNX project is already available. This KNX project is for a demo case that we are using in our trainings. Import the export file "Demo Case Small.nxe" into the NETx BMS Server using the entry "Import NETx ETS app file ..." within the menu "KNX" of the NETx BMS Studio.
Select "Replace current definitions" and step through the wizard. After having finished the import, stop the NETx BMS Server and start it again in simulation mode.
\begin{figure}[H]
\centering
\includegraphics[width=14cm]{Screenshots/Item_Tree.png}
\caption{Item Tree}
\end{figure}
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.
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.
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, double-click the image and select the image file "`Floor1.png"' from the package file for this exercise. Afterwards, change to the tab "`Position/Layer"' and enter "`0"' for "`Top"' and "`Left"' and select "`Background"' as layer\footnote{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.
\begin{figure}[H]
\centering
\includegraphics[width=14cm]{Screenshots/Floor1.png}
\caption{Page "`Floor1"'}
\end{figure}
Hint: this 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 menu "`Layer"', "`Configuration ..."':
\begin{itemize}
\item "`Enabled in editor"': if deactivated, all elements of that layer cannot be moved and changed anymore.
\item "`Visible in editor"': this option can be used to hide all elements of a layer in editor mode.
\item "`Enabled in visualization"': if deactivated, the elements are shown but the user is not able to click on them.
\item "`Visible in visualization"': this option hides all elements of a layer in visualization mode.
\end{itemize}
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.
\section{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"' from the package file.
\begin{figure}[H]
\centering
\includegraphics[width=12cm]{Screenshots/Floor2.png}
\caption{Page "`Floor2"'}
\end{figure}
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.
\begin{figure}[H]
\centering
\includegraphics[width=12cm]{Screenshots/Link_Area_Floor1.png}
\caption{Linking floor 1 to floor 2}
\end{figure}
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.
\begin{figure}[H]
\centering
\includegraphics[width=14cm]{Screenshots/Link_Area_Floor2.png}
\caption{Linking floor 2 to floor 1}
\end{figure}
Start the visualization by pressing the "`Start"' button within the tool bar and test whether the navigation between the two pages are working.
\section{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"'.
\begin{figure}[H]
\centering
\includegraphics[width=7cm]{Screenshots/Create_Master_Page.png}
\caption{Create a master page}
\end{figure}
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.
\begin{figure}[H]
\centering
\includegraphics[width=12cm]{Screenshots/Back_Button.png}
\caption{Back button}
\end{figure}
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.
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{Screenshots/Use_Master_Page.png}
\caption{Using a master page}
\end{figure}
\section{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. For implementing an on/off control, two KNX group addresses are needed -- one for controlling the light and one that reflects the current state of the light. Within the "`Server Item"' list, add the control group address of light A (1/1/0) as "`Send"' and the status group address of light A (1/1/90) as "`Receive"'. The following figure shows the correct configuration. Verify the correct selection of the "`Send"' and "`Receive"' flags.
\begin{figure}[H]
\centering
\includegraphics[width=14cm]{Screenshots/On_Off.png}
\caption{On/off light}
\end{figure}
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:
\begin{itemize}
\item $1001 \rightarrow 9$: this value is used to start dimming up to 100\%
\item $0001 \rightarrow 1$: this value is used to start dimming down to 0\%
\item $0000 \rightarrow 0$: this value is used to stop the dimming process
\end{itemize}
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 light A (1/1/10). 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.
\begin{figure}[H]
\centering
\includegraphics[width=11cm]{Screenshots/Dimming.png}
\caption{Dimming light}
\end{figure}
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 light A (1/1/110).
\begin{figure}[H]
\centering
\includegraphics[width=11cm]{Screenshots/Dimming_State.png}
\caption{Dimming state}
\end{figure}
Now the label shows the raw value of the data point. 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:
\begin{itemize}
\item $0~~"\%"$: this format string rounds a decimal to the nearest integer and adds a percent sign.
\item $0.0~~"°C"$: this format string always shows one digit after the comma and adds the unit degrees Celsius.
\end{itemize}
For a detailed description see Annex A.1 of the manual of the BMS Client Editor (available via the menu "`Help"').
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{Screenshots/Text_Format.png}
\caption{Text format of a label}
\end{figure}
%\section{Implementing a blind control}
%\section{Implementing a heating control}
\section{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.
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{Screenshots/New_BMS_Client.png}
\caption{Add a new BMS Client}
\end{figure}
Within the configuration dialog, choose a name and select your visualization project within the drop-down box.
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{Screenshots/New_BMS_Client2.png}
\caption{Select visualization project}
\end{figure}
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 http://<your IP>/<client name>.
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.
Please keep in mind that only one device can connect to a BMS Client definition at the same time. Therefore, you have to create a BMS Client definition for each device separatly (web browser, iOS or Android device).
Related articles