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.

Make the text blink when the value is 1
#1
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
Reply
#2
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);
      });
    }
  });
});
Reply
#3
(29.06.2022, 08:04)admin Wrote: 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  Big Grin
Reply
#4
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
Reply
#5
Works for me in Firefox 103. It uses CSS animation for blinking. This is a standard feature supported by all modern browsers.
Reply
#6
(01.08.2022, 13:05)admin Wrote: 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
Reply
#7
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);
      });
    }
  });
});
Reply
#8
admin thanks !!
My problem also solved when I modified Custom JS Smile So it was linked with read-only settings.

Alex
Reply


Forum Jump: