+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: RGB(W) Visualisation (/showthread.php?tid=528)
RGB(W) Visualisation - Habib - 30.12.2016
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
RE: RGB(W) Visualisation - Erwin van der Zwart - 30.12.2016
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
RE: RGB(W) Visualisation - Habib - 30.12.2016
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
RE: RGB(W) Visualisation - Erwin van der Zwart - 30.12.2016
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
RE: RGB(W) Visualisation - Habib - 31.12.2016
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
RE: RGB(W) Visualisation - Erwin van der Zwart - 31.12.2016
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
RE: RGB(W) Visualisation - Habib - 31.12.2016
(31.12.2016, 09:03)Erwin van der Zwart Wrote: 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*/
}RE: RGB(W) Visualisation - Erwin van der Zwart - 31.12.2016
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
RE: RGB(W) Visualisation - Habib - 31.12.2016
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 :-))