Logic Machine Forum
change icon based on another object - 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 based on another object (/showthread.php?tid=4091)

change icon based on another object - khalil - 15.06.2022

Hello,
I have this case:
Fan will be controlled by object (fan control)
Fan status based on Contactor (binary input)
IF the overload is tripped the contactor still operate leads to unreal feedback.
I want to change the fan icon to stop instead of run if the overload tripped 

previously solved by tags and resident or event based scrip, but I am looking for more efficient way especially when having lot of these.
Could this case be solved by JS

RE: change icon based on another object - admin - 15.06.2022

Custom JS - adds off class to <body> element when 1/1/1 is off.
Code:
$(function(){
  if (window.grp) {
    grp.listen('1/1/1', function(object) {
      $('body').toggleClass('off', object.value == false);
    });
  }
});

Custom CSS - applies to additional class global-off. When <body> element has off class it hides the icon image and sets the background image to a custom icon (change URL as needed).
Code:
body.off .global-off .icon {
  background-image: url('/scada/resources/icons/control-stop.svg');
}
body.off .global-off .icon img {
  visibility: hidden;
}


RE: change icon based on another object - khalil - 15.06.2022

Thank you very much admin.

but instead of grp.listen('1/1/1', function(object), I want it to be variable while each fan has its overload signal.
is it possible to make it some thing like global depend on the additional classes of the overload objects and the action will affect the fan icon
something like:
 global-off_1,2,3,4,...
body_1,2,3,4,...
Also if it possible to add additional calss to make the icon read only when overload is off.

another thing I notice is that the icon doesn't fit to the current size, please see the image.

RE: change icon based on another object - admin - 15.06.2022

You can duplicate the script and CSS with different classes as needed.

See if this works for the background image not sizing correctly:
Code:
body.off .global-off .icon {
  background-image: url('/scada/resources/icons/control-stop.svg');
  background-size: 100%;
}

For read-only use this:
Code:
body.off .global-off {
  pointer-events: none;
}


RE: change icon based on another object - khalil - 20.06.2022

Hello admin 

Is it possible to optimize it with for loop and additional classes with
because I have about 50 of these objects, it will not be easy to duplicate 50 JS and CSS.

If there is a solution please advise 

Best Regards

RE: change icon based on another object - admin - 21.06.2022

JavaScript:
Code:
$(function(){
  if (window.grp) {
    function listen(i) {
      grp.listen('1/1/' + i, function(object) {
        $('.off-' + i).toggleClass('off', object.value == false);
      });
    }
    
    for (var i = 1; i <= 50; i++) {
      listen(i);
    }
  }
});

CSS:
Code:
.off {
  pointer-events: none;
}
.off .icon {
  background-image: url('/scada/resources/icons/control-stop.svg');
  background-size: 100%;
}
.off .icon img {
  visibility: hidden;
}

Use additional class off-1, off-2, etc up to off-50. Objects start with 1/1/1 up to 1/1/50.

RE: change icon based on another object - khalil - 22.06.2022

Thanks admin
this is the code I used 
I used two for loop because first digit of the grp-addr changed
while the addresses are not in series there are some addresses in the for loop not used, is there any issue in this case?

Code:
$(function(){
  if (window.grp) {
    function listen(j,i) {
      grp.listen(j + '/7/' + i, function(object) {
        $('.acoff-' + j+'-'+i).toggleClass('acoff', object.value == false);
      });
    }
   
    for (var j = 11; j <= 12; j++) {
    for (var i = 7; i <= 55; i++) {
      listen(j,i);
    }
    }
  }
});

Another case:
some devices has to alarm objects, I added two additional classes like (off-40 off-41) but it didn't work as logic or, moreover when refresh the page its updated correct!
Is there a solution for this case
BR,

RE: change icon based on another object - admin - 22.06.2022

grp.listen will skip unknown group addresses. This does not produce any errors so it won't affect other groups.

AND logic can de defined via CSS but you need to assign a different class in each grp.listen callback.
For example this rule only applies to elements that have both off-a and off-b classes.
Code:
.off-a.off-b {
  background-color: red;
}


RE: change icon based on another object - khalil - 22.06.2022

Thank you admin 
great but I need to use OR Logic how?

RE: change icon based on another object - admin - 22.06.2022

The same way with two different classes but define CSS like this:
Code:
.off-a,
.off-b {
  background-color: red;
}


RE: change icon based on another object - khalil - 22.06.2022

(22.06.2022, 14:19)admin Wrote: The same way with two different classes but define CSS like this:
Code:
.off-a,
.off-b {
  background-color: red;
}
how to implement or in this example?
Quote:.pumpoff-a.pumpoff-b .icon {
   background-image: url('/scada/resources/icons/P_any_off_Red.png');
  background-size: 100%;
}


RE: change icon based on another object - admin - 22.06.2022

Like this:
Code:
.pumpoff-a .icon,
.pumpoff-b .icon {
  background-image: url('/scada/resources/icons/P_any_off_Red.png');
  background-size: 100%;
}


RE: change icon based on another object - khalil - 22.06.2022

(22.06.2022, 14:25)admin Wrote: Like this:
Code:
.pumpoff-a .icon,
.pumpoff-b .icon {
  background-image: url('/scada/resources/icons/P_any_off_Red.png');
  background-size: 100%;
}

many thanks 
work perfect