This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Change icon color
#1
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,
Reply
#2
Set Additional classes to rgbw and add this to Custom JS:
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 = ((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.
Reply
#3
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?
Reply
#4
This will work both 4 and 6 byte RGBW as well as RGB (use rgb class for it):
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)
      ];

      $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:
.rgbw {
  border-radius: 50%;
}

A more complex shape can be done via clip-path: https://developer.mozilla.org/en-US/docs.../clip-path
Reply
#5
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,
Reply
#6
This can be implemented via a separate virtual object and event script.
Reply
#7
(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,
Reply
#8
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:
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:
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)
Reply
#9
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,
Reply
#10
Yes, there is a bug in checkwrite for complex data types that use table values. Only date and time types are checked correctly.
Reply
#11
(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):
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)
      ];

      $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:
.rgbw {
  border-radius: 50%;
}

A more complex shape can be done via clip-path: https://developer.mozilla.org/en-US/docs.../clip-path


Hello Admin 
I try to add box-shadow to make the color glow, but how to make it right (depend on the color feedback)?
Reply
#12
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);
    });
  });
});
Reply
#13
Great 
Thank you very much
Reply


Forum Jump: