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.

[Krists]

Hello.What I have to change for text blinking ,if I want:
object value 0 = blink
object value 1 = no blink

The code below works opposite!!

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);
      });
    }
  });
});

[RomansP]

Hello.What I have to change for text blinking ,if I want:
object value 0 = blink
object value 1 = no blink

The code below works opposite!!

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);
      });
    }
  });
});

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);
      });
    }
  });
});

[Krists]

Great!
It works!

Thank you

[victor.back]

Code:

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

        if (obj.value) {
          color = '#f44236';
          opacityValue = 1; // Synlig
        }
        else  {
          color = 'transparent'; // Istället för att ändra färgen till grön, gör vi den genomskinlig
          opacityValue = 0; // Osynlig
        }

        $(el).css({'color': color, 'opacity': opacityValue}).toggleClass('blink', obj.value);
      });
    }
  });
});

Hi.

I use this script for visu an icon to blink when 1 and not be visable when 0. works well except from that my android 12 10" touch screen that runs the visu on Fully Kiosk Browser is crashing when the scripts reslut is 1, that is not happening when script result is 0.
Is this somthing with the script? Or maybe something that Fully Kiosk Browser cannot handle