Blink Text by Javascript command

Hi All!
Is there a way to blink text, changing status with javascript?

Let me know...

Cristiano

Hi,

Let's say you're using a button widget and you want to make the label text blink. You'll have to use some CSS to create a keyframe animation for the blink. You can control the blink rate in seconds. Furthermore, you can create a VAR to set the blink rate from another widget. Try the following.

label {
  color: red;
  animation: animate VAR{textBlink, 1}s linear infinite;
}

@keyframes animate {
   0%{
     opacity: 0;
   }
   50%{
     opacity: 0.7;
   }
   100%{
     opacity: 0;
   }
}

In another widget, you can use the onValue script property to change the textBlink VAR.

// setVar(widgetId, varName, value)
setVar("widgetThatHasTextBlinkIdHere", "textBlink", value)

There is another way, if you just want to watch the value of another widget you can use some JS in the CSS property of the text blink widget. You can try the following example just replace the widgetId with the id of what you're wanting to watch. If the widgetId value is equal to 1 than the blink animation duration will be 3 seconds, if not, then 0

label {
  color: red;
  animation: animate #{@{widgetId} === 1 ? 3 : 0}s linear infinite;
}

@keyframes animate {
   0%{
     opacity: 0;
   }
   50%{
     opacity: 0.7;
   }
   100%{
     opacity: 0;
   }
}

Cheers,
DMDComposer

3 Likes

Thank you so much!
Criostiano

1 Like