Make the text blink when the value is 1

[Fahd]

Hi, 

I am using the Java code below to change the color of the object when it's 1 (1 = Alarm, 0 = No Alarm) 
However, Is it possible to make the text blink when it's equal to 1?
If yes, how could I do that?
Thankfully in advance 

Code:

$(function() {
  $('.color-by-value').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var color;

        if (obj.value) {
          color = 'red';
        }
        else  {
          color = 'Green';
        }

        $(el).css('color', color);
      });
    }
  });
});

e to change the color of the

[admin]

Add to custom CSS:

Code:

@keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
  animation-name: blinker;
  animation-duration: 0.6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

Modify custom JS like this:

Code:

$(function() {
  $('.color-by-value').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var color;

        if (obj.value) {
          color = 'red';
        }
        else  {
          color = 'Green';
        }

        $(el).css('color', color).toggleClass('blink', obj.value);
      });
    }
  });
});

[Fahd]

Add to custom CSS:

Code:

@keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
  animation-name: blinker;
  animation-duration: 0.6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

Modify custom JS like this:

Code:

$(function() {
  $('.color-by-value').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var color;

        if (obj.value) {
          color = 'red';
        }
        else  {
          color = 'Green';
        }

        $(el).css('color', color).toggleClass('blink', obj.value);
      });
    }
  });
});

Thanks a lot 

[AlexLV]

Hi,

for me blink not working for latest Mozilla (v.103.0) Chrome and MS Edge are OK. Is it possible to start work blink function for Mozilla? I use it because with Mozilla is possible to see video stream from cams. Or .blink is obsolete function for Mozilla and no variants?

BR,

Alex

[admin]

Works for me in Firefox 103. It uses CSS animation for blinking. This is a standard feature supported by all modern browsers.

[Fahd]

Works for me in Firefox 103. It uses CSS animation for blinking. This is a standard feature supported by all modern browsers.

Hi Guys, 

In the last two weeks, the function worked fine, but I just find out that it doesn't work anymore as long as the object is read-only,  
If I disable the read-only function it will start working again. 
nb: I didn't change anything form the CSS and JS code

[admin]

Read-only class overrides the animation. Modify Custom JS like this:

Code:

$(function() {
  $('.color-by-value').each(function(_, el) {
    var $el = $(el), addr = $el.data('object');
    
    if ($el.hasClass('item-read-only')) {
      $el.removeClass('item-read-only').css('pointer-events', 'none');
    }

    if (addr) {
      grp.listen(addr, function(obj) {
        var color = obj.value ? 'red' : 'green';
        $el.css('color', color).toggleClass('blink', obj.value);
      });
    }
  });
});

[AlexLV]

admin thanks !!
My problem also solved when I modified Custom JS So it was linked with read-only settings.

Alex

[Re-G]

Hi.

Im trying to use this code:

Code:

$(function() {
  $('.java_test').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var color_1;

        if (obj.value) {
          color_1 = 'red';
        }
        else  {
          color_1 = 'Green';
        }

        $(el).css('color_1',obj.value).toggleClass('class_for_1', obj.value);
      });
    }
  });
});

to toggle a css class. For value 1 i would like to set css class f.e. class_for_1 with parameter filter: drop-shadow (x1, y1, b1, c1), if value is 0 class should be changed to class_for_0 with parameter filter: drop-shadow (x2, y2, b2, c2). It's working only for value=1. Please help.

Thanks

[admin]

Use this:

Code:

$(el).css('color_1',obj.value).toggleClass('class_for_1', obj.value).toggleClass('class_for_0', !obj.value);

[Re-G]

Use this:

Code:

$(el).css('color_1',obj.value).toggleClass('class_for_1', obj.value).toggleClass('class_for_0', !obj.value);

Thanks.