Changing an asset's Tint Colour based on multiple inputs

Ignition
,
1

Hello.

Say i have an image (its a pipe) and i want it to change tint color based on the state of different inputs how would i best go about this? Script? Expression?

Essentially when

Liquid 1 is True = Tint pipe Blue
Liquid 2 is True = Tint pipe Brown
Liquid 3 is True = Tint pipe grey
Liquid 4 is True = Tint pipe Black

Only 1 will ever be true at once based on how its programmed in the PLC, if 1 is on the other 3 are off.

Using Ignition 8.1, screens in vision.

Cheers

2

Use an expression binding on the tint color property.

case(True,
	{Root Container.Liquid 1.someProperty}, color(0,102,255),
	{Root Container.Liquid 2.someProperty}, color(144,86,16),
	{Root Container.Liquid 3.someProperty}, color(170,170,170),
	{Root Container.Liquid 4.someProperty}, color(0,0,0),
	color(255,255,255)
)
2 Likes
3

Thanks

Can you be a bit more specific? still learning the expression syntax.

How do i incorporate the tag bindings into this?

4

You will need to create custom properties on your component or root and bind your tags to these which you can then reference in your case or if statements. Alternatively, you can also read tags directly using the tag() function which takes a string tag path and reads it. I’d recommend against the tag function though and use custom props / tag bindings.

5

Thanks,

I have made 4 custom property’s on the asset. Colour 1, Colour 2, Colour 3, Colour 4. They are bound to the relevant tag.

Once again bit green to this but i have come up with this

case({Root Container.Container.Image 136.Colour1}=True, // this is the custom property bound to tag 1(colour1). If colour 1 = True then do below
{Root Container.Container.Image 136.tintColor}, color(0,255,0), // change it to green if true
color(213,213,213) // if not true change it to grey
)

Just returns 213,213,213 at the moment and cant be changed. Any tips?

6

Are colourX props Booleans or colours? I would have thought youd have ‘liquidX’ custom props instead of colourX, but you could also have both which would make the colours more easily defined and visible. If you’re reusing these colours throughout the project, you should look at storing the colours as strings inside of client tags for Vision, and perspective styles (or better, a custom css theme in variables which are mapped into p styles) for Perspective

7

ColourX are booleans. Its a once off case and wont be used everywhere. Just changes a tank color by changing the tint based on what product is selected with an option of 4 products.

case(True, 
{Root Container.Container.Image 136.Colour1},
{Root Container.Container.Image 136.tintColor}, color(0,255,0), 
color(213,213,213)
)

Currently have this but doesn’t work yet, feel im getting closer. Gives a 5 argument error. Obviously only changes 1 color atm but yea

trying to follow this case - Ignition User Manual 8.1 - Ignition Documentation

8

Figured it out, found nested IF statements the way to go

if({Root Container.Container.Image 137.Colour1} = true,  // if this propery becomes true
	color (0,255,0), // turn the image to green
	 
if ({Root Container.Container.Image 137.Colour2} = true, // if this properyy becomes true
	color (255, 0, 0), // turn to red
	
if ({Root Container.Container.Image 137.Colour3} = true, // if this properyy becomes true
	color (0, 0,255), // turn to blue
	
if ({Root Container.Container.Image 137.Colour4} = true, // if this properyy becomes true
	color (255,255, 0), // turn to yellow

	color (213,213,213) // Use grey when everything is false
))))

For anyone reading in the future. You need to add custom property’s to the image and bind them to the tags you want to use. Then use the above expression.

9

Don't give up, you were so close. I would never use nested ifs over a case statement.
It was giving you a 5 argument error because it expects 6 based on your setup, and you only provided 5.

case(True, 
{Root Container.Container.Image 136.Colour1}, #YOU NEED A RETURN VALUE HERE
{Root Container.Container.Image 136.tintColor}, color(0,255,0), 
color(213,213,213)
)

case(True, 
{Root Container.Container.Image 136.Colour1}, color(0,0,0), // Color for case 1
{Root Container.Container.Image 136.tintColor}, color(0,255,0), // Color for case 2 
color(213,213,213) // Default Color
)
10

I would have done a binEnum() to produce a state value, then use that state as the driving property in the Style Customizer. The style Customizer would also let you handle multiple properties, if needed.

binEnum({Root Container.Container.Image 137.Colour1},
        {Root Container.Container.Image 137.Colour2},
        {Root Container.Container.Image 137.Colour3},
        {Root Container.Container.Image 137.Colour4},
       ) // Return position of first true value

image
image701×814 35.4 KB

Properties bound by the Style customizer will have the RGB venn icon.
image

1 Like