# Background Color Change

**URL:** <https://forum.inductiveautomation.com/t/background-color-change/8654>\
**Category:** Ignition\
**Created:** [July 1, 2014, 6:29pm UTC](https://forum.inductiveautomation.com/t/background-color-change/8654 "2014-07-01T18:29:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ceccontrols](https://avatars.discourse-cdn.com/v4/letter/c/df705f/32.png) [@ceccontrols](https://forum.inductiveautomation.com/u/ceccontrols)\
**Post date:** [July 1, 2014, 6:29pm UTC](https://forum.inductiveautomation.com/t/background-color-change/8654/1 "2014-07-01T18:29:07Z")

</div>

I have numeric indicators and need to have their background colors changed based on the value of two tags. The first tag is the process setpoint and the second tag is the actual process value (this is the value in the in numeric indicator). When the process value is within 0-2% of the setpoint Background Color A, Above or below 3-5% of the setpoint Background Color B, Above or below more than 5% of the setpoint Background Color C.

Best way to proceed?

---

<div class="post-metadata">

**Author:** ![Brett\_Yeomans](https://avatars.discourse-cdn.com/v4/letter/b/35a633/32.png) [@Brett\_Yeomans](https://forum.inductiveautomation.com/u/Brett_Yeomans)\
**Post date:** [July 1, 2014, 9:43pm UTC](https://forum.inductiveautomation.com/t/background-color-change/8654/2 "2014-07-01T21:43:19Z")

</div>

My method (NooB) would be to add 6 custom properties to the indicator.  
SP,PV,plus2,neg2,plus5,neg5.  
Bind SP and PV to the appropriate tags.  
The negx and plusx would be expressions:

```auto
{Root Container.Numeric Label.sp}+({Root Container.Numeric Label.sp}/100*2)
```

etc.

The Background Color would then have an expression:

`if({pv}>{Root Container.Numeric Label.neg2}&&{pv}<{Root Container.Numeric Label.plus2},"71,255,71",
if({pv}>{Root Container.Numeric Label.neg5}&&{pv}<{Root Container.Numeric Label.plus5},"255,172,71","217,0,0"))`

I think this would make it easy to copy the indicator and just edit the SP and PV to point to the next tags.

There’s probably refinements but its 11pm!

---

<div class="post-metadata">

**Author:** ![JGJohnson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jgjohnson/32/29582_2.png) [@JGJohnson](https://forum.inductiveautomation.com/u/JGJohnson)\
**Post date:** [July 1, 2014, 10:57pm UTC](https://forum.inductiveautomation.com/t/background-color-change/8654/3 "2014-07-01T22:57:26Z")

</div>

I believe you could do it with 1 custom property and an expression using nested if statements.

In the expression, max\_value is the largest possible value of the tag.

```auto
# Psuedo-code for the expression
if( (abs(value - setpoint) / max_value) > .05, 'C', if( (abs(value - setpoint) / max_value) > .03, 'B', 'A' ) )
```

This expression will return either A, B or C for your custom property. I would change the return values to 3, 2 or 1 if I was implementing it.

Use the value of your custom property in the style customizer to set the colors and you’re done.

You might have to use toFloat() to be sure to get a decimal value.

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [July 7, 2014, 8:56pm UTC](https://forum.inductiveautomation.com/t/background-color-change/8654/4 "2014-07-07T20:56:01Z")

</div>

ONE Custom Property to hold the amount of error 😉 :

```auto
abs({Root Container.Process.value}-{Root Container.Setpoint.value})/{Root Container.Setpoint.value}*100
```

If they need to be lopsided above vs. below, then take out the ‘abs’ portion at the begining:

```auto
({Root Container.Process.value}-{Root Container.Setpoint.value})/{Root Container.Setpoint.value}*100
```

The Style Customizer can handle the rest.

Since I can’t currently upload anything to the forum, here’s a Dropbox link:  
[https://www.dropbox.com/s/4blw0kear3i5j9a/colorChanger.vwin](https://www.dropbox.com/s/4blw0kear3i5j9a/colorChanger.vwin)