Visibility of label component to blink

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

Vision, or Perspective?

apologies, in vision

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

3 Likes

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

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

getSecond(now())%2
1 Like

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!

@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.

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:

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

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

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

1 Like

Thanks for your reply.

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


what to select here?

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:

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

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

1 Like

This idea worked out. thanks a lot :slight_smile:

@ 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

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

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?

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