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
#9
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
Reply
#10
Use this:
Code:
$(el).css('color_1',obj.value).toggleClass('class_for_1', obj.value).toggleClass('class_for_0', !obj.value);
Reply
#11
(13.02.2023, 07:03)admin Wrote: Use this:
Code:
$(el).css('color_1',obj.value).toggleClass('class_for_1', obj.value).toggleClass('class_for_0', !obj.value);

Thanks.
Reply
#12
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);
      });
    }
  });
});
Reply
#13
(07.08.2023, 12:13)Krists Wrote: 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);
      });
    }
  });
});
Reply
#14
Great!
It works!

Thank you
Reply
#15
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
Reply


Forum Jump: