Make a component or text flash

I've got a request from our COO to make certain values change when over a certain level. For example, I'm using a 14 segment display to show a temperature and I'd like it to flash red when over... lets say 400. Currently I have an expression that looks at the tag and changes the color to red if greater than 400 else it is green. I'd like for it to also flash, but am kinda stuck on if thats possible. Alternatively, a red square, that would frame my view and would be invisible if the temperature was in the acceptable range, but once outside become visible and then flash.

I'm guess this can happen, but not quite sure how complex it is to do, or if I'm just totally missing something

create a Style Class, we'll call it flash. In the "Edit Style" Dialog in the top right, check the check box for Animated. This will make the configuration options for an animation available.

Click on the 100% key frame marker on the far right of the animation time line. Set the styles to fit your need. In this case something like setting the background to your "red" color.

Configure a binding on the components style.classes property, with an expression like below:

if({value} > 400, 'flash', ''

Now, when your value is above 400, the component will transition between the default background and the red one.

3 Likes

I would recommend this approach, which can also be achieved using the method that lrose detailed above. It falls more in line with proper HMI/interface design methodology.

3 Likes

I've got it working, albeit crudely. I put an svg image in, but for this application I think I can just use the border fill to do the job.