Logic Machine Forum
Change icon color - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Change icon color (/showthread.php?tid=3985)

Change icon color - khalil - 10.04.2022

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,

RE: Change icon color - admin - 11.04.2022

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.

RE: Change icon color - khalil - 11.04.2022

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?

RE: Change icon color - admin - 11.04.2022

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/Web/CSS/clip-path

RE: Change icon color - khalil - 10.05.2022

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,

RE: Change icon color - admin - 11.05.2022

This can be implemented via a separate virtual object and event script.

RE: Change icon color - khalil - 11.05.2022

(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,

RE: Change icon color - admin - 12.05.2022

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)


RE: Change icon color - khalil - 16.05.2022

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,

RE: Change icon color - admin - 16.05.2022

Yes, there is a bug in checkwrite for complex data types that use table values. Only date and time types are checked correctly.

RE: Change icon color - khalil - 16.05.2022

(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/Web/CSS/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)?

RE: Change icon color - admin - 17.05.2022

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);
    });
  });
});


RE: Change icon color - khalil - 17.05.2022

Great 
Thank you very much