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
#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)?
Best Regards,
Reply


Messages In This Thread
Change icon color - by khalil - 10.04.2022, 10:57
RE: Change icon color - by admin - 11.04.2022, 06:06
RE: Change icon color - by khalil - 11.04.2022, 08:34
RE: Change icon color - by admin - 11.04.2022, 08:53
RE: Change icon color - by khalil - 16.05.2022, 13:19
RE: Change icon color - by khalil - 10.05.2022, 13:00
RE: Change icon color - by admin - 11.05.2022, 10:31
RE: Change icon color - by khalil - 11.05.2022, 12:07
RE: Change icon color - by admin - 12.05.2022, 14:04
RE: Change icon color - by khalil - 16.05.2022, 08:26
RE: Change icon color - by admin - 16.05.2022, 08:54
RE: Change icon color - by admin - 17.05.2022, 09:18
RE: Change icon color - by khalil - 17.05.2022, 10:41

Forum Jump: