|
Change icon color
|
10.04.2022, 10:57
Hello
I have RGBW light and I want to change the icon color based on the RGBW feedback color. Icon could be like this: best regards,
Best Regards,
11.04.2022, 06:06
Set Additional classes to rgbw and add this to Custom JS:
Code: 123456789101112131415161718192021222324 $(function(){
$('.rgbw').each(function(index, el) {
var $el = $(el);
var addr = $el.data('status-object');
$el.find('img').css('visibility', 'hidden');
grp.listen(addr, function(object) {
var value = object.value;
var r = ((value >> 24) & 0xFF) / 255;
var g = ((value >> 16) & 0xFF) / 255;
var b = ((value >> 8) & 0xFF) / 255;
var w = (value & 0xFF) / 255;
var a = 0.6 * (1 - (1 - w) * (1 - w));
var rgb = [
Math.round(((1 - a) * r + a) * 255),
Math.round(((1 - a) * g + a) * 255),
Math.round(((1 - a) * b + a) * 255)
];
$el.css('background', 'rgb(' + rgb.join(',') + ')');
});
});
});Icon will be hidden, the square size will be the same as the icon size. RGBW value is converted to RGB.
Thanks Admin
But how to deal with different RGB, RGBW data type: objects 3byte RGB, 4byte RGBW, 6byte DALI RGBW. Also Could we change the background of a circle and other shapes?
Best Regards,
11.04.2022, 08:53
This will work both 4 and 6 byte RGBW as well as RGB (use rgb class for it):
Code: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 $(function(){
$('.rgbw').each(function(index, el) {
var $el = $(el);
var addr = $el.data('status-object');
$el.find('img').css('visibility', 'hidden');
grp.listen(addr, function(object) {
var value = object.value;
var r, g, b, w;
if (typeof value == 'object') {
r = (value.red || 0) / 255;
g = (value.green || 0) / 255;
b = (value.blue || 0) / 255;
w = (value.white || 0) / 255;
}
else {
r = ((value >> 24) & 0xFF) / 255;
g = ((value >> 16) & 0xFF) / 255;
b = ((value >> 8) & 0xFF) / 255;
w = (value & 0xFF) / 255;
}
var a = 0.6 * (1 - (1 - w) * (1 - w));
var rgb = [
Math.round(((1 - a) * r + a) * 255),
Math.round(((1 - a) * g + a) * 255),
Math.round(((1 - a) * b + a) * 255)
];
$el.css('background', 'rgb(' + rgb.join(',') + ')');
});
});
$('.rgb').each(function(index, el) {
var $el = $(el);
var addr = $el.data('status-object');
$el.find('img').css('visibility', 'hidden');
grp.listen(addr, function(object) {
$el.css('background', Scada.getRgbHex(object.value));
});
});
});Shape can be changed via CSS (this will produce a circle): Code: 123 .rgbw {
border-radius: 50%;
}A more complex shape can be done via clip-path: https://developer.mozilla.org/en-US/docs.../clip-path
10.05.2022, 13:00
Hello Admin
Is it possible to link the background color with Also the on/off Feedback? While the DALI RGBW status color stay on its last value even when the unit is off. BR,
Best Regards,
11.05.2022, 10:31
This can be implemented via a separate virtual object and event script.
11.05.2022, 12:07
(11.05.2022, 10:31)admin Wrote: This can be implemented via a separate virtual object and event script. Thanks Admin If you could share an example I will be thankful. BR,
Best Regards,
12.05.2022, 14:04
You will need two event scripts. When lamp status (1/1/1) is off then the color status (32/1/1) is black, otherwise color control (1/1/2) value is used.
1. DALI RGBW color object: Code: 123456789 on = grp.getvalue('1/1/1')
if on then
value = event.getvalue()
else
value = { red = 0, green = 0, blue = 0, white = 0 }
end
grp.checkupdate('32/1/1', value)2. Lamp on/off object: Code: 123456789 on = event.getvalue()
if on then
value = grp.getvalue('1/1/2')
else
value = { red = 0, green = 0, blue = 0, white = 0 }
end
grp.checkupdate('32/1/1', value)
16.05.2022, 08:26
Thanks admin for the hint
I will do it in one script using TAG. But I noticed that grp.checkupdate/write doesn't work on DT8 color objects, I used that in a resident script and its keep updating each cycle. BR,
Best Regards,
16.05.2022, 08:54
Yes, there is a bug in checkwrite for complex data types that use table values. Only date and time types are checked correctly.
16.05.2022, 13:19
(11.04.2022, 08:53)admin Wrote: This will work both 4 and 6 byte RGBW as well as RGB (use rgb class for it): Hello Admin I try to add box-shadow to make the color glow, but how to make it right (depend on the color feedback)?
Best Regards,
17.05.2022, 09:18
Use this, blur/spread radius (10px 10px) can be changed if needed:
Code: 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 $(function(){
$('.rgbw').each(function(index, el) {
var $el = $(el);
var addr = $el.data('status-object');
$el.find('img').css('visibility', 'hidden');
grp.listen(addr, function(object) {
var value = object.value;
var r, g, b, w;
if (typeof value == 'object') {
r = (value.red || 0) / 255;
g = (value.green || 0) / 255;
b = (value.blue || 0) / 255;
w = (value.white || 0) / 255;
}
else {
r = ((value >> 24) & 0xFF) / 255;
g = ((value >> 16) & 0xFF) / 255;
b = ((value >> 8) & 0xFF) / 255;
w = (value & 0xFF) / 255;
}
var a = 0.6 * (1 - (1 - w) * (1 - w));
var rgb = [
Math.round(((1 - a) * r + a) * 255),
Math.round(((1 - a) * g + a) * 255),
Math.round(((1 - a) * b + a) * 255)
];
var bg = 'rgb(' + rgb.join(',') + ')';
$el
.css('background', bg)
.css('box-shadow', '0 0 10px 10px ' + bg);
});
});
$('.rgb').each(function(index, el) {
var $el = $(el);
var addr = $el.data('status-object');
$el.find('img').css('visibility', 'hidden');
grp.listen(addr, function(object) {
var bg = Scada.getRgbHex(object.value);
$el
.css('background', bg)
.css('box-shadow', '0 0 10px 10px ' + bg);
});
});
}); |
|
« Next Oldest | Next Newest »
|
