17.05.2022, 09:18
Use this, blur/spread radius (10px 10px) can be changed if needed:
Code:
$(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);
});
});
});