RGB(W) Visualisation

[Habib]

Hi,

today I've a request for visualisation my RGBW Stripe ligts which I've installed at the edge of my ceiling construction.
At moment I used an object (Button?) RGB (Type 232.600) to get the colorpicker control and used a "empty.png" to disable the button itself, to get the actual color status of the stripe. 
My visualisation is actually made with 'static' transparent SVGs. Now I had the request, if it's possible to make via JS or/and CSS a long bar (boxes) in custom dimensions to make the stripelights colored in the correct values?

A little Screenshot to illustrate my request:
   

I use a spaceLYnk with firmware 1.2.1

Thx forwards and a happy new year :-)

BR
Habib

[Erwin van der Zwart]

Yes that is possible, 

Take 3 byte RGB object and set it to read only and give it a unique custom class.

Then you can use .youruniquecustomclass{} to style it like you want.

BR,

Erwin

[Habib]

Hi Erwin :-)

What did you mean with a read only Object? Made a KNX Object and set it readonly?
Or an internal variable and set it to read only?

BR
Habib

[Erwin van der Zwart]

Hi Habib,

A KNX object in your visu / on your plan and set if to read only to prevent user input by clicking on the rgb colored item.

Normaly you have a small rounded bar as feedback value and by using a custom class you can tweak the size and other properties of this bar with custom css.

Try with custom classes rgb_vertical and  rgb_horizontal and add this to custom css:

Code:

.rgb_vertical {
   border-radius: 0px;
   height: 250px;
   min-width: 10px;
   max-width: 10px;
   margin: 0px auto 0;
   opacity: 1; /* optional set to 0.8 to make partial transparent*/
}

.rgb_horizontal {
   border-radius: 0px;
   height: 10px;
   min-width: 150px;
   max-width: 150px;
   margin: 0px auto 0;
   opacity: 1; /* optional set to 0.8 to make partial transparent*/
}

BR,

Erwin

[Habib]

Hi Erwin,

thank you for your assistance. I tried it now (it's sounds very easy) but I've no success.

First I've created a new KNX Object which filled as a copy the values from the main object.
These one gets the read-only-flag in visualisation (it's only a visualisation object) gets an transparent icon and a new CSS class...

I called the class "rgb2" and add following code into custom CSS:

Code:

.rgb2 {
 
   border-radius: 0px;
   height: 30px;
   min-width: 150px;
   max-width: 150px;
   margin: 0px auto 0;
   opacity: 1; /* optional set to 0.8 to make partial transparent*/
 
}

But I can't see some changes. Looked into the HTML Code it's seems, that the wanted color bar is a sub object (item-color) of the whole RGB Control Object.

   

In next step I tried to overwrite the class .item-color (I now that overwrites the style of my whole SL in every page), but I see now the wanted style.

Code:

.item-color {
 
   border-radius: 0px;
   height: 30px;
   min-width: 150px;
   max-width: 150px;
   margin: 0px auto 0;
   opacity: 1; /* optional set to 0.8 to make partial transparent*/
 
}

   


What can I do in this case to mark only the "color bar" with the custom CSS?

Thx forwards for your help again :-)))

BR
Habib

[Erwin van der Zwart]

Hi Habib,

Can you try to use the object only as value, now you use image and value with a transparent png.

I tested with value only and the css is also build for that, if you want with transparent image then i have to check css as there might be a extra class level needed in the css i created.

BR,

Erwin

[Habib]

Hi Habib,

Can you try to use the object only as value, now you use image and value with a transparent png.

I tested with value only and the css is also build for that, if you want with transparent image then i have to check css as there might be a extra class level needed in the css i created.

BR,

Erwin

The solution can be so simple :-) Yes it's make sense and works also ;-)

The last thing I don't understand is, in which way I can get transperacy to the objects. It seems, that the opacity value has no effect?
If I modificate them manually to an rgba and give them a value it works.
Have you a last idea for me? 

Used code:

Code:

.rgb_vertical1 {
   border-radius: 0px;
     border: none;
     box-shadow: none;
   height: 352px;
   min-width: 10px;
   max-width: 10px;
   margin: 0px auto 0;
     background-color: transparent;
   opacity: 0.6; /* optional set to 0.8 to make partial transparent*/
}

   

[Erwin van der Zwart]

Hi Habib,

Strange as it works for me (chrome)

What browser do you use? Maybe you need another css rule in your browser..

BR,

Erwin

[Habib]

Hi Erwin,

that is really strange. I tried it now with Safari 10.0.2, Firefox 50.1.0 and Chrome 55.0.2883.95 all with OS X 10.12.2 and Fireofx 50.1.0 with Windows 7 x64.

I must have an issue made by me, I think :-(

Maybe I find out next year whats happens to that.... thank you Erwin :-))