KNX web

0

Was ist KNXweb

KNXweb ist eine auf AJAX basierende Visualisierung (Frontend) zu linKNX, der Zugriff auf den KNX erfolgt über linKNX. Mit KNXweb können Zustände des KNX-Bus angezeigt, grafische Elemente (zB. WebCam) angezeigt, WEB Inhalte (zB. HTML-Seiten) dargestellt sowie Schalthandlungen, und sonstige Einstellungen am KNX vorgenommen werden.

Live demo

A live demo can be found here: http://ouaye.net/linknx/knxwebsim-0.2/ (aktuellere Demo sollte hier zu finden sein: http://ouaye.net/linknx/knxwebsim-0.5/. 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.

Einschränkungen

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
In diesem WIKI wird die Version 0.6 in Verbindung mit linKNX 0.0.1.25 behandelt.

Syntax
Texte in Anführungszeichen „“ weisen auf Eingaben hin, die Eingabe erfolgt jedoch ohne die Anführunsgzeichen. Texte in KURSIV sind Zitate anderer Quellen

Installation
KNXweb benötigt einen Webserver mit PHP support. Der „design“ Ordner muss entsprechende Rechte besitzen. Hinweis des Entwicklers: All occurences of „jquery-1.2.3.js“ in .html files can be replaced by „jquery-1.2.3.pack.js“ and the „jquery-1.2.3.js“ file can be removed from js ffolder to optimize disk usage for embedded devices. This is not done by default because it makes client-side debugging much more difficult
Das Programm gibt es hier. Die entpackten Dateien werden in das betreffende Verzeichnis am Webserver kopiert und die Konfigurationsdatei entsprechend angepasst.

Bus-Zugriff
Der Bus-Zugriff erfolgt über eibd welcher verschiedene Möglichkeiten des Bus-Zugriffs ermöglicht.

Konfiguration
Die Konfiguration von KNXweb erfolgt über eine grafische Oberfläche mittels Web-Browser und besteht jeweils aus einem Hintergrundbild mit entsprechend angeordneten Kontrollelementen. Die Anpassung an die gewünscht Sprache erfolgt durch Umbenennen der jeweiligen Sprachdatei, zB French ( js/lang-fr.js ) oder Deutsch ( js/lang-de.js ) auf js/lang.js .
Kontrollelemente

Kontrollelemente sind grafische Elemente mit denen Zustände angezeigt bzw. Werte verändert werden können und werden in Gruppen eingeteilt

  • Gestaltungselemente

Design

Zonen

  • Kontrollelemente

Schalter

Werteingabe

Multi-Schalter

Dimmer

Anpassung
Dieses Element stellt in Abhängigkeit des Wertes einen Bildausschnitt aus dem Icon dar.

Thermostat

Raumthermostat – Steuerelement

Text

Element zum Anzeigen von Texten und/oder Werten

  • Sonderelemente

HTML Seite

Kamera

Allgemeines

Einfügen von selbstdefinierten Grafiken in den Datenobjekten

KNXweb sucht selbstdefinierte Bilder im jeweiligen „design“ Ordner in dem das zu verwendende Bild kopiert wird (z.B. linknx/design/default/), dann ´kann der entsprechende Name im im Kontrollelement „Bild“ eingetragen werden (zB „gotoBottom.png“). Weiters ist es möglich Unterordner zu benutzen (z.B. linknx/design/default/bilder), dann muss allerdings der entsprechende Pfad angegeben werden (zB bilder/gotoBottom.png“) („\“ ist allerdings nicht erlaubt, daher „/“ benutzen)

zuhörige Datentypen der Konrollelemente

Datentypen der Konrollelemente Name
(deutsch) Name
(englisch) DatenTyp
in LinKNX Anmerkungen Schalter switch 1.001Schalter ein/aus Dimmer Dimmer 1.001
3.007
1.001 Schalter ein/aus
Dimmobjekt
Schaltobjekt
Dimmwert

Gestaltungselemente
Zu dieser Gruppe zählen Verweise (Sprünge), Definitionen von Hintergründen, Seitendefinitionen

Kontrollelemente
Zu dieser Gruppe zählen alle Objekte, die vom KNX gelesen oder auf den KNX geschrieben werden

Text anzeigen

Werte anzeigen
Style field can contain everything that is allowed in the style attribute of a <td> html tag. All the possible values are described in the CSS documentation.
Format field contains the text to display. If the „Insert value“ checkbox is checked, you can put a „$1“ (without quotes) where the object value has to be inserted. If pattern field is empty, the object value is inserted as it is. If you need more advanced formatting, you can use the pattern field to specify a pattern to match. Each of the parenthesis groups in the pattern will correspond to $1, $2, $3, … in the format field.
For example, the date in format YYYY-MM-DD can be transformed in DD/MM/YYYY using pattern „(\d+)-(\d+)-(\d+)“ and format „Date: $3/$2/$1“. For the complete list of possibilities offered by patterns, see: http://www.w3schools.com/jsref/jsref_obj_regexp.asp

Sonderelemente
Zu dieser Gruppe zählen alle Objekte zu denen mir sonst nichts Vernünftiges einfällt: HTML-Objekte, Bildanzeigen und sonstige Dinge