# Perspective Background color on Text box

**URL:** <https://forum.inductiveautomation.com/t/perspective-background-color-on-text-box/88911>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [April 16, 2024, 4:30pm UTC](https://forum.inductiveautomation.com/t/perspective-background-color-on-text-box/88911 "2024-04-16T16:30:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chris\_Adamson](https://avatars.discourse-cdn.com/v4/letter/c/90db22/32.png) [@Chris\_Adamson](https://forum.inductiveautomation.com/u/Chris_Adamson)\
**Post date:** [April 16, 2024, 4:30pm UTC](https://forum.inductiveautomation.com/t/perspective-background-color-on-text-box/88911/1 "2024-04-16T16:30:28Z")

</div>

So I am having trouble find a way to have a text box in perspective change colors.

Basic Idea is I have safety lights that have three different tags that turn on a light to either red,yellow,green. I am trying to mimik the actual function in perspective.

The tags read a 1 on 0 off.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 16, 2024, 5:02pm UTC](https://forum.inductiveautomation.com/t/perspective-background-color-on-text-box/88911/2 "2024-04-16T17:02:29Z")

</div>

Here's one way:

 ![RGB background](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/f/8ff55f30969ffaa51c39364f61857235c53b4dcf.png)

- 
  1. Add the `backgroundColor` property to the label.

- 2, 3. Create an expression binding on it.
- 4, 5, 6. Add the tags.
- 7, 8, 9. Create an expression transform on the tags to encode them as a binary value.
- 10, 11. Add a map transform. I've put a fallback of blue in case none or more than one tag is true.
- 
  1. See the results of each transform.

> **[binEnc | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/appendix/expression-functions/logic/binEnc)**
>
> Takes a list of booleans and treats them like the bits in a binary number.

Note: three tags for one light is probably not the right way to go. One integer tag for the machine status would be better and each state would be mutually exclusive.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 16, 2024, 5:05pm UTC](https://forum.inductiveautomation.com/t/perspective-background-color-on-text-box/88911/3 "2024-04-16T17:05:18Z")

</div>

What @Transistor said, except:

1. Just use an expression binding at the root; no need for an expression structure then a transform.
2. Output a style class name, instead of a direct color, to make it easier to recycle colors elsewhere in the project and to make changes if you ever need to down the road.

And, yeah, the meta comment of "make the states mutually exclusive in the PLC" is also valid.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 16, 2024, 5:53pm UTC](https://forum.inductiveautomation.com/t/perspective-background-color-on-text-box/88911/4 "2024-04-16T17:53:44Z")

</div>

What @paul-griffith said, except:

- I used the structure so the binding could possibly be reused with the tags passed in as parameters. 😜

![G Y R background](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/7/b74e8873537520d055188ec130e6665af64833a4.png)

```auto
case(
  binEnc(
       {[default]tagGreen}, // +1
       {[default]tagYellow},	// +2
       {[default]tagRed} // +4
  ),
  1, "green",
  2, "yellow",
  4, "red",
  "blue"
)

```

I also use style classes and recommend them so ...

- In Project Browser | Perspective | Styles, create three classes: "bgGreen", "bgYellow", "bgRed" with the background color set appropriately.
- Delete the label `backgroundColor` property created above.
- Create an expression binding on the `style.classes` property.

```auto
case(
  binEnc(
       {[default]tagGreen}, // +1
       {[default]tagYellow},	// +2
       {[default]tagRed} // +4
  ),
  1, "bgGreen",
  2, "bgYellow",
  4, "bgRed",
  "" // no background color.
)

```

This will give you consistancy if you use this in multiple places. You only change the color in the style definition and every occurance will be updated.

---

<div class="post-metadata">

**Author:** ![Chris\_Adamson](https://avatars.discourse-cdn.com/v4/letter/c/90db22/32.png) [@Chris\_Adamson](https://forum.inductiveautomation.com/u/Chris_Adamson)\
**Post date:** [April 16, 2024, 8:04pm UTC](https://forum.inductiveautomation.com/t/perspective-background-color-on-text-box/88911/5 "2024-04-16T20:04:20Z")

</div>

I got this to work so far thanks... I have seen the beacon change color to red or none.  
As for the Meta Statement... I don't get to program PLC where I work; I am the first to learn the Ignition at my location as Corporate is planning to fully implement it in stages going forward.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/8/f825fe35fc98d833726891a79864c2b39ac762e2.png)