Linknx Wiki

Status: Inactive

Brought to you by: cdefranoux, energy01, jef2000, zikibe

This project can now be found here.

KnxWeb_Objects

Authors:

KnxWeb_Objects
General "Graphic" Customizations
"Text" Object
"Thermostat" Object
"Dimmer" Object
"SCALE" Object

Beispiel (Example)

Adding new objects

KnxWeb_Objects

I've started this page to publish tips'n'tricks and useful infos about currently supported objects under KnxWeb.

Since KnxWeb offering great deal of freedom for customization of objects and the way they are shown on "floorplans" it's useful to gather various informations on how to use those objects to make your visualizations more attractive.... Of course this is more intented for users that will use KnxWeb with other servers that linknx - as generic visualization tool. All proposed additions have to be properly supported in your serving application... All changes are proposed in such manner, that default behavour stays the same...

General "Graphic" Customizations

I'm not even Javascript newbie, but I guess a lot of customizations can be done for all widgets in style.css file.

"Text" Object

make background transparent : you can add "-moz-opacity:0.5;filter:alpha(opacity=50);" to the style and you'll get transparent background (first one is for Firefox, second for IE, it even works on Nokia N800)
Datum: (Date)

Anzeige des Tagesdatums in der Form "Datum: 12/9/2008"

> In den Kontrollelement - Eigenschaften sind daher folgende Werte einzutragen://
> To show the Date in the Form :"Datum: 12/9/2008" please use the following settings
> Name: "Datum"
> Stil: ??? (no ideas...)
> Format: "Datum: $3/$2/$1"
> Werte hinzufügen: anhaken
> Objekt: zB "cur_date"
> Anordnung: "(\d+)-(\d+)-(\d+"
* Zeit(Time)
> To show the Time in the form :"Zeit: 20:22" please use the following settings
_> _Anzeige des Tagesdatums in der Form "Zeit: 20:22"

 In den Kontrollelement - Eigenschaften sind daher folgende Werte einzutragen:// 
 Name: "Zeit" 
 Stil:&nbsp;??? (no ideas...) 
 Format: "Zeit: **$1:$2**" 
 Werte hinzufügen: anhaken 
 Objekt: "cur_time" 
 Anordnung: "(\d+)-(\d+)-(\d+"

"Thermostat" Object

How to customize modes in this object? I've got an idea of adding different types to that object - for instance :

simple-heat-mode : only 2 states: Heat, Off.
blinds-mode : Open (full position up), NearlyOpen (blinds down, "sun" angle), HalfOpen (blinds down, horizontal angle), Shaded (blinds down, shading angle), Closed.
ventilation-mode : Off, Slow, Fast (for house ventilation).
hvac-mode : ExtremeCold, Winter, Spring/Autumn, Summer, ExtremeSummer.
shutter-mode : Open (0%), NearlyOpen (25%), HalfOpen (50%), Shaded (75%), Closed (100%). - for simpler control of 0-100% devices by using only 5 states or even less

With "blinds" I mean vertical blinds with horizontal bars that cannot be described as 0-100% device. I think we could make new icons (Heat,Off, etc...) for +,-. Anyone knows how KnxWeb icons were made ?

I'll also try to :

change background color depending on state of object (red bacground if heating, blue if off)...
add "Blank" choice to child objects (if user chooses "Blank", that means it won't be displayed at all - for instance if you don't want or have value for temp, then jou just don't show it).

"Dimmer" Object

I think it would ve usefull to extend this object to various devices that can be described with 0-100% states (drapes, shutters (Velux for instance), etc...):

integrating another icons or even scale display instead of light icon for those new devices

"SCALE" Object

Name (deutsch) Anpassung
Name (englisch) scale
DatenTyp in LinKNX 5.xxx
Schreiben/Anzeigen Anzeigen
Anmerkungen keine
Zweck Anzeige unterschiedlicher Symbole in Abhängigkeit eines Wertes
Show different symbols with respect of the value

Normally, you should see the blinds going progressively down (in 4 steps) when the 1byte value changes from 0 to 255 (=100%)
For the custom mode, it's a little bit tricky. The image used is in fact bigger than what you see on the screen, and it's shifted horizontally and/or vertically to show different parts of the image when the value changes. For the blinds, for example, the image blinds_move.png is 32x256 pixels and composed of 8 32x32 images one below the other. If you want to make the same effect with custom image, you would set height=32 width=32 steps=8 horizontal_shift=0 and vertical_shift=32 so that the upper 32x32 part is showed when object value is 0. The 0 to 100% range would be splitted in 8 portions and for each of them, the image would be shifted up by 32px to show the appropriate blinds position.
Another way to use the custom mode could be to use for example an image of 64x32, width and height of 32, steps=32 and vertical_shift=1 so that the image is progressively shifted up pixel by pixel.
[#Beispiel]

Beispiel (Example)

Das Icon soll eine Höhe von 32 Pixel haben und 3 Zustände darstellen: es werden zuerst 3 Bilder mit den gewünschten Darstellungen erstellt, die dann übereinander zusammengefügt werden. Somit ergibt sich eine Bildseqenz von 32 x 96 Pixel Breite. (zB. "test.gif") In den Kontrollelement - Eigenschaften sind daher folgende Werte einzutragen://
The Icon should have a height of 32px and 3 different Steps: make 3 pictures as you wish to have for representing the 3 steps, one picture over the other.
So you will have a picture of a height of 3x32=96px, name it eg. "test.gif". In the widget you set the values to the following:
=Eigenschaften/Elemente=
Name:
_Name des Kontrollelementes (zB "Test")
_ Auswahl:
Datenpunkt (zB "data_point")
Icon Auswahl:
_Bildsequenz, entweder vordefiniert oder benutzerdefiniert (zB. benutzdefiniert)
preset or user-defined
_ Bild-Datei:
Dateiname der benutzerdefinierten Bilddatei (zB Test.gif")
Breite:
_Breite des Icons (zB "32")
_ Höhe: (height)
Hohe des Icons (zB "32")
Schritte: (steps)
_Anzahl der anzuzeigenden Zustände (zB "3")
_ Vertikale Verschiebung: (vertical offset)
Höhenverschiebung innerhalb des Bildes zwischen 2 Zuständen (zB "32")
* Horizontale Verschiebung:
Vertikalverschiebung innerhalb des Bildes zwischen 2 Zuständen (zB "0")
'In diesem Beispiel würde in Abhängigkeit des Wertes von "data_point" entweder der 1., 2., oder 3. Bildausschnitt angezeigt werden.'
In this example you would see the 1st, 2nd, oder 3rd part of the picture, depending on the value of "data_point"

==Multiswitch==
Name (deutsch) Multi-Schalter
Name (englisch) multiswitch
DatenTyp in LinKNX 5.xxx
Schreiben/Anzeigen Schreiben/Anzeigen
Anmerkungen keine
Zweck ABhängig vom Wert des Schaltobjektes werden verschiedenen Bilder angezeigt.
----
'der betreffenden EIB_Adresse sollte in linknx.xml NICHT 5.001 als Typ zugewiesen werden, da der 0-255 Wert in die Prozentdarstellung umgerecnnet wird. Wird beispielsweise der Wert 3 auf den Bus gesendet, so entspricht dies 3/255 *100= 1,17... Bei der Verwendung des Datentyps 5.xxx wird der "originale" Wert auf den Bus gesendet/empfangen.//
It is recommended not to use Type 5.001 in linknx because the possible Value 0...255 is converted into Percentage: if you send a "3" an the bus it will be displayed as 3/255*100 = 1,17. If you use 5.xxx the original value 3 will be seen/sent.

Adding new objects

I've just tried to add new device and procedure is quite simple :

take one of existing devices and modify it or start from scratch
add .js files to the lists of files in design.html and designedit.html
reload web page and new device should appear on menu