Menu
▾
▴
KnxWeb
What is KnxWeb?
KnxWeb is a graphical visualization interface for Linknx. The design is subdivided into zones, each zone allows to place controls on a background picture to drive the KNX devices. The controls actually developed include lights (on/off and dimmers), room temperature control, camera pictures (jpeg images), jump to another zone or normal text. The controls can be freely positionned using drag-and-drop and their properties can be modified.
Please note, that as of 2018 there are two versions of this project: original KnxWeb - stable usabla and in fact still used in some existing installations and KnxWeb2 - actively developped newer version.
How does it work?
KnxWeb is based on AJAX technology. It uses client-side javascript to communicate asynchronously with the server using XML and dynamically update the page content according to server's answers. The Javascript framework used is JQuery.
The XML requests are created by your browser and sent to a PHP script on the server. This script will forward the XML request to linknx, wait for the answer and send it back to the browser. Another PHP script deals with other server-related actions like saving the design or getting the list of background pictures available on server for example.
Application's footprint
Since KnxWeb uses mainly client-side Javascript, the size of the code is very small. Development snapshot v0.2 is only 150kB if the packed version of the JQuery framework is used. The CPU load on server side is also very low, because the server only needs to forward the XML requests from client side to Linknx and answers back.
User interface
The interface is divided into 3 different modules:
1) The design visualisation itself
2) The design editing tool
3) The rules display tool (in the future, it will also allow to modify rules)
The design visualisation displays the background picture and all controls for the current zone. Switching to another zone is made using "goto" controls. The KNX devices are controlled by clicking the controls' buttons.
The design editing tool offers the same possibilities as the visualisation, but adds a menu on the left with editing functionalities.
In the "Zone" submenu, you can select, create or delete zones and change the background image of the current zone.
In the "Design" submenu, you can switch to editing mode, where all controls have a black title bar allowing to delete them (click on the cross), move them (drag-and-drop the black area) or edit their properties (double-click the black area). You can also save the design to the server or display it in raw XML format.
The following submenus allow to create new controls.
The rule display tool request the list of rules from Linknx configuration and displays it. Some parts of the rules (for now, only timers) can be clicked to show/hide additional details.
Language support
KnxWeb now supports multiple languages. To change the language, replace js/lang.js by the language file you want. Translation files for French ( js/lang-fr.js ) and German ( js/lang-de.js ) are provided and more or less up-to-date. Any translation improvements would be appreciated.
Installation tips
KnxWeb needs a webserver with PHP support. the "design" folder in main folder must have appropriate permissions if you want to be able to save designs.
Live demo
A live demo can be found here:
http://ouaye.net/linknx/knxwebsim-0.4/
It's rather slow to load due to the poor performance of the web hosting, local installation would be much faster.
The simulation is very basic and mainly useful to demonstrate the design edit features of the interface. Don't expect it to react like the real application.
Known limitations
Actually, there is no way to upload background images to the server using knxweb interface. The images must be copied manually on the server in "design/default/" folder.
Multiple designs are partially supported. When a design is ready, you can copy the "design/default/" directory to another one (e.g. "design/test1/") . Once it's copied, the copy can be accessed using URL "http://server_ip/path/design.html?design=test1".
Multiple versions of the same design (sharing the same background pictures) can be saved by entering different version names during save operation. The different versions can be accessed using URL "http://server_ip/path/design.html?version=xyz".
Version 2
See there [KnxWeb2]
