Change icon color

[admin]

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