This forum uses cookies

khalil · 15.06.2022, 08:22

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

***admin*** · 15.06.2022, 10:31

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;

}

khalil · (This post was last modified: 15.06.2022, 11:24 by khalil.)

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.

***admin*** · 15.06.2022, 11:25

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;

}

khalil · 20.06.2022, 13:56

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

***admin*** · 21.06.2022, 14:27

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.

khalil · 22.06.2022, 11:59

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,

***admin*** · 22.06.2022, 12:08

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; 

}

khalil · 22.06.2022, 14:17

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

***admin*** · 22.06.2022, 14:19

The same way with two different classes but define CSS like this:

Code:
.off-a,

.off-b {

  background-color: red; 

}

khalil · 22.06.2022, 14:24

(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%;
}

***admin*** · 22.06.2022, 14:25

Like this:

Code:
.pumpoff-a .icon,

.pumpoff-b .icon {

  background-image: url('/scada/resources/icons/P_any_off_Red.png');

  background-size: 100%;

}

khalil · 22.06.2022, 14:31

(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

Login
Username:
Password:	Lost Password?
	Remember me