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 based on another object
#1
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
Reply
#2
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;
}
Reply
#3
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.

Attached Files Thumbnail(s)
   
Reply
#4
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;
}
Reply
#5
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
Reply
#6
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.
Reply
#7
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,
Reply
#8
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;
}
Reply
#9
Thank you admin 
great but I need to use OR Logic how?
Reply
#10
The same way with two different classes but define CSS like this:
Code:
.off-a,
.off-b {
  background-color: red;
}
Reply
#11
(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%;
}
Reply
#12
Like this:
Code:
.pumpoff-a .icon,
.pumpoff-b .icon {
  background-image: url('/scada/resources/icons/P_any_off_Red.png');
  background-size: 100%;
}
Reply
#13
(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
Reply


Forum Jump: