How to have a button flash if the value of the button is less than another value?

Ignition
1

I have this button changing colors with the shown expression... N701:0 Value is less then N101:0 value change to red....Once it changes to RED how do i make it flash??

if({[default]AZ ASRS Conveyor System/Wave Control/C7-1 BB1001A/N701:0.value}<={[default]AZ ASRS Conveyor System/MAIN/Current Wave number N101:0.value}, color(255,0,0), color(0,255,0))

2

Perspective or Vision?

Edit: Most of my projects the last few years have been Perspective. I had to fire up the UI to remember how this was done in Vision.

In Perspective I prefer to make style classes in the advanced style sheet to do a blink animation. You have to add the advanced style sheet by right clicking on styles and selecting the advanced style sheet. You have to adjust the CSS property that you're trying to animate in your style. For example this is a style that blinks the fill color which would be for animating an SVG. You could animate BG color or BG image to get other effects.

.psc-blink-fill-yellow-red{
	animation: blinkFillYellowRed 1.2s linear infinite;
}

@keyframes blinkFillYellowRed {
   0%, 49.9%{
     fill:RGBA(255,255,0,60);
   }
   50%, 100%{
     fill:RGBA(255,0,0,60);
   }
 }

For Vision you can use the style customizer. Access this by right clicking on the object, select "customizers" and select "style customizer". You can bind the customizer to a property you want to use to drive your animation.

3

I'm guessing Vision due to the color() expression. You need to add the appropriate tag into your post title (from the dropdowns provided).

Making a flash is covered in Vision Component Customizers | Ignition User Manual.

Note that expressions ignore extra spaces and line breaks. You can make them more readable.

if(
  {[default]AZ ASRS Conveyor System/Wave Control/C7-1 BB1001A/N701:0.value}
  <=
  {[default]AZ ASRS Conveyor System/MAIN/Current Wave number N101:0.value}, 
  color(255,0,0), 
  color(0,255,0)
)
4

If you add a new custom property and bind it with the expression:

{[default]AZ ASRS Conveyor System/Wave Control/C7-1 BB1001A/N701:0}
<=
{[default]AZ ASRS Conveyor System/MAIN/Current Wave number N101:0}

Then bind the color property with a property reference to your custom property, you'll be able to use the Number To Color Translator, which includes the ability to add animated blinking:

The style customizer is still ultimately much more flexible and powerful, but this is (potentially) easier to get set up with.

1 Like