# Visibility of label component to blink

**URL:** <https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [August 6, 2020, 10:45pm UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483 "2020-08-06T22:45:29Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![trishadx](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@trishadx](https://forum.inductiveautomation.com/u/trishadx)\
**Post date:** [August 6, 2020, 10:45pm UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/1 "2020-08-06T22:45:29Z")

</div>

Hi guys,

just working on my project here, playing around with the components to get a feel for designing. JW is there a way to make the label component blink in visibility?

Im able to alter the visbility off/ on depending on the tag binding, but if the tag was to be true i.e. an alarm, how would I make the image/ label component blink?

thank you for your time

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [August 6, 2020, 10:51pm UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/2 "2020-08-06T22:51:19Z")

</div>

Vision, or Perspective?

---

<div class="post-metadata">

**Author:** ![trishadx](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@trishadx](https://forum.inductiveautomation.com/u/trishadx)\
**Post date:** [August 6, 2020, 10:51pm UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/3 "2020-08-06T22:51:38Z")

</div>

apologies, in vision

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [August 6, 2020, 11:04pm UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/4 "2020-08-06T23:04:49Z")

</div>

I would recommend not using blink animations via the style customiser (I presume this is what you’re using elsewhere?).  
These are not synchronised between components and look unprofessional if you have multiple components all blinking out of sync with each other.  
I use a client tag that is pulsed with a client timer script. I then also use this for component visible bindings to flash them as well

---

<div class="post-metadata">

**Author:** ![trishadx](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@trishadx](https://forum.inductiveautomation.com/u/trishadx)\
**Post date:** [August 6, 2020, 11:10pm UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/5 "2020-08-06T23:10:15Z")

</div>

Oh I see, that is a great way around it. thank you!

---

<div class="post-metadata">

**Author:** ![bpreston](https://avatars.discourse-cdn.com/v4/letter/b/4af34b/32.png) [@bpreston](https://forum.inductiveautomation.com/u/bpreston)\
**Post date:** [August 7, 2020, 1:43pm UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/6 "2020-08-07T13:43:55Z")

</div>

If its an even on/off time, I have also used an expression client tags to do the same function.

```auto
getSecond(now())%2

```

---

<div class="post-metadata">

**Author:** ![trishadx](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@trishadx](https://forum.inductiveautomation.com/u/trishadx)\
**Post date:** [August 7, 2020, 1:46pm UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/7 "2020-08-07T13:46:07Z")

</div>

hi @bpreston, where would i incorporate this …can it be on the script editor or would it only fall into the client timer script?  
Thank you for the participation!

---

<div class="post-metadata">

**Author:** ![bpreston](https://avatars.discourse-cdn.com/v4/letter/b/4af34b/32.png) [@bpreston](https://forum.inductiveautomation.com/u/bpreston)\
**Post date:** [August 7, 2020, 1:49pm UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/8 "2020-08-07T13:49:13Z")

</div>

@nminchin mentioned cycling a client tag using a client timer script. For the way I mentioned you don’t need the client timer script at all. When you set up your client tag, you go to the Expression/SQL section of the tag and set it to expression and insert the expression I showed. That expression does a 1 second pulse. You can change it based on how fast or slow you want the pulse to be.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [August 7, 2020, 8:08pm UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/9 "2020-08-07T20:08:12Z")

</div>

I should mention, the reason I put into a client timer script is because I have various pulses defined, 125, 250,500,1000,2000ms  
I really only use the 500ms and it was easier to calculate these via script than expression. If you don't need pulses faster than a second, you can certainly do as @bpreston says.

Fyi this is what I use:

> [@Generate 0.5s and 0.25s pulse tag](http://forum.inductiveautomation.com/t/generate-0-5s-and-0-25s-pulse-tag/20391/4):
>
> Thanks for the replies. I ended up using client tags and a client script: # Set this to the script execution time period in ms timeInterval = 125 # Time to count up to in ms. This affects the times pulses that may be generated counterPeriod = 2000 tag = "[Client]System/Pulses/125ms Counter" counter = system.tag.read(tag).value # Increment the 125ms counter tag if the time is within the counterPeriod time, otherwise reset to 0 if counter \> (counterPeriod/timeInterval - 1): system.tag.write(t…

---

<div class="post-metadata">

**Author:** ![manjuyadav95.m](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@manjuyadav95.m](https://forum.inductiveautomation.com/u/manjuyadav95.m)\
**Post date:** [November 3, 2021, 5:31am UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/10 "2021-11-03T05:31:51Z")

</div>

@paul-griffith @nminchin @cmallonee  
I want to make the label component blink in perspective plz help.

```auto
if({this.props.text}="Sufficient Volume", 'rgb(95,180,120)', 'rgb(217,0,0)')
	

```

else condition color (‘rgb(217,0,0)’)to be changed from red to yellow n vice versa basically it should blink, how it is possible? how can I give 2 colors on else condition

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 3, 2021, 6:08am UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/11 "2021-11-03T06:08:43Z")

</div>

You need to use a Perspective Style / CSS in your CSS theme. Apply the P. Style to the `props.style.classes` of your label

---

<div class="post-metadata">

**Author:** ![manjuyadav95.m](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@manjuyadav95.m](https://forum.inductiveautomation.com/u/manjuyadav95.m)\
**Post date:** [November 3, 2021, 6:38am UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/12 "2021-11-03T06:38:49Z")

</div>

Thanks for your reply.

```auto
if({this.props.text}="Refill Tank", if({this.props.style.backgroundColor}='rgb(217,0,0)', 'rgb(255,255,0)', 'rgb(217,0,0)'), 'rgb(95,180,120)')

```

by doing the above expression binding on the label, I am getting the proper output but it’s not changing the color of the label as I am getting error\_cycle detected.

Possible only using Perspective Style / CSS ?

I didn’t use CSS before so plz guide me

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/2/a2cb2519cc502a586a07abd3adcc85a7f034d332.png)  
what to select here?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 3, 2021, 6:54am UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/13 "2021-11-03T06:54:40Z")

</div>

Well, I suppose you could use an expression with RGB values to do it… but it certainly wouldn’t be the recommended way. Regardless, to use an expression like you are, you need to use an alternating value to alternate the colour between your two colours. E.g. using a session prop set with an expression to flip-flop between false and true. Then your expression would be:

```auto
if({this.props.text} = 'Refill Tank'
   ,if({this.session.custom.system.pulses.t500ms}
      ,'rgb(...)'
      ,'rgb(...)'
   )
   ,'rgb(...)'
)

```

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 3, 2021, 6:56am UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/14 "2021-11-03T06:56:47Z")

</div>

Select the Base Style and configure the Background Colour in there for both of your animation frames @ 0% and 100%

---

<div class="post-metadata">

**Author:** ![manjuyadav95.m](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@manjuyadav95.m](https://forum.inductiveautomation.com/u/manjuyadav95.m)\
**Post date:** [November 3, 2021, 7:59am UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/16 "2021-11-03T07:59:53Z")

</div>

This idea worked out. thanks a lot 🙂

@ 0 and 100% added bg color then on label text under expression binding, added transform, below scripting transform to get the background for the label Hope this helps others too

```auto
a="Sufficient Volume"
	b="Refill Tank"
	if value==0:
		self.props.style.backgroundColor="#5FB478"
		self.props.style.classes=None
		return a
	else:
		self.props.style.classes="NewStyle"
		return b

```

---

<div class="post-metadata">

**Author:** ![Leandro\_Garcia\_Carva](https://avatars.discourse-cdn.com/v4/letter/l/6f9a4e/32.png) [@Leandro\_Garcia\_Carva](https://forum.inductiveautomation.com/u/Leandro_Garcia_Carva)\
**Post date:** [February 27, 2023, 7:07pm UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/17 "2023-02-27T19:07:10Z")

</div>

Sorry for bring it up again,

But how can I make Visibility of label component to blink at Perspective?

is there a way to make the label component blink the leters?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [February 27, 2023, 7:32pm UTC](https://forum.inductiveautomation.com/t/visibility-of-label-component-to-blink/37483/18 "2023-02-27T19:32:51Z")

</div>

Instead of animating the background colour in the Perspective style, animate the font colour.  
You can also animate the opacity which will animate it's visibility