Pulsing outputs

[Mitchell_Gerber]

Is there a way to pulse outputs in perspective? I am trying to make an icon flash and not sure the best way to go about it. The flash is controlled by a tag turning on.

Thanks!

[Felipe_CRM]

The cleanest way would probably be to create a flashing CSS style like in this post:

How to run a script continuously to update tags

You'll just have to add a little map transformation that acts like a NOT gate. This can still be done without scripting. For the flashing, you can make an animated style like in the below example. Simply enable this style when either of those alarms are active. [image] It really, really sounds like you can get rid of any startup scripts that drive this behavior and replace them with a tag binding combined with a transformation.

That would automatically loop as long as 'infinite' is checked.

Then, you put an expression binding on props.style.classes:

if({mytag}, 'flashing', '')

assuming your CSS style class is called flashing and your tag is mytag. Adjust the names to fit your situation.

[Steve_Laubach]

I would recommend doing any kind of flashing animations using CSS because it doesn't have to do a round trip to the gateway to process the animation (more saleable).

I prefer to do blinking animations in the advanced style sheet. You just have to make sure you're adjusting the right properties but that's typically fairly simple.

You can use these styles in the code window below to either toggle opacity completely off (hidden) and the other one blinks opacity. Alternatively, you could animate the background color or background-image or really any CSS property you want to. The "psc-" prefix is required for styles defined in the advanced style sheet. You omit that part when you're applying the style to an object.

In this example, you could use a map transform to hide an item with the "opacity-off" style or to blink an item with the "opacity-blink" style

.psc-opacity-off
{
	opacity: 0
}

.psc-opacity-blink
{
	animation: blinkOpacity 1.3s linear infinite;
}

@keyframes blinkOpacity{
	0%, 50%{
		opacity: 1
	}
	50%, 100%{
		opacity: 0
	}
}