# Creating dynamic colors

**URL:** <https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [February 22, 2023, 6:43am UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146 "2023-02-22T06:43:37Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\
**Post date:** [February 22, 2023, 6:43am UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/1 "2023-02-22T06:43:37Z")

</div>

Hello,

I am working on a new project with Ignition 8.1.24 Vision.

I would like to know if there is a nice way to create reusable colors for template animation. For example :  
I would like to make a library of symbols (motors valve, digital value, etc)  
I already have udts containing the necessary tags for the animation.  
Now, I would like to define a series of colors which I want to use on my templates so if for any reason i wanted to change a red 255,0,0 to a 240,0,0, I can do it easly and it applies on every template.

Is this possible? And how?

Additionally, is there a way to copy-paste animation from a circle to a rectangle or any other object easily?

Thanks you.  
Best regards.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [February 22, 2023, 6:57am UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/2 "2023-02-22T06:57:58Z")

</div>

~~Best way for colours is either using client tags to store hex colours as strings, or using a project library to store colours as strings in a library variable, and retrieving these in your bindings using runScript.~~

However, I would recommend also using a dataset tag (or script dictionary) to store lookup values against colours to use, and then use this in your component bindings to get the colour.

For example, I have a status desc tag in all of my device udts which is an expression tag using `case` to get the status of the device as a string (Running, Stopped, Faulted, etc). Then my dataset tag has columns `value` and `styleClass` (perspective, but you can do similar for Vision).  
Then my binding to get the colour is:

```auto
Lookup({System/Datasets/Style Classes/Device Status}, {status desc tag path}, '', 'value', 'styleClass')

```

This way essentially templates your map transforms and allows your maps to reside in a single place, rather than having a gazillion magic case statements everywhere doing colour mapping. Of course, in Vision it's slightly less nice if you use a dataset tag, as your colours will still be magic. But at least you will have _ **far** _ fewer copies and youll know they're all just inside of the few dataset colour maps that you have

Example data in the dataset:

```auto
value, colour, styleClass
"Running", "0, 255, 0", "Device/Status/On" 
"Stopped", "128, 128, 128", "Device/Status/Off"  

```

You would probably use the java.awt.Color data type for the colour column

---

<div class="post-metadata">

**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\
**Post date:** [February 22, 2023, 10:00am UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/3 "2023-02-22T10:00:32Z")

</div>

Ty for your quick answer.  
I will try you solution as soon as possible, but As I see it now, the dataset with the colour inside sounds good.

Thank you very much.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 22, 2023, 2:22pm UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/4 "2023-02-22T14:22:41Z")

</div>

> [@nminchin](#):
>
> Best way for colours is either using client tags to store hex colours as strings, or using a project library to store colours as strings in a library variable, and retrieving these in your bindings using runScript.~~

I did a project this way and found it pretty easy to use. I also used the color picker popup to allow for some user customization on the "options" screen (which came in handy when the first operator I trained was color blind).

I'm sure you could use a binding to the dataset to do the same, but it may (or may not be) as simple.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [February 22, 2023, 3:34pm UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/5 "2023-02-22T15:34:07Z")

</div>

The trouble with binding tags is that you're forever having to retype or repaste the map (eg the case statement) which I never liked. I know with a dataset lookup it's copy pasting still, but with a dataset it's exactly the same copy with only the lookup value part that changes. You don't have to change the mapping, for example for valves that use Open and Closed instead of Stopped and Running; you just add these states into your dataset tag and it starts working. As a bonus, you then also have a full list of all possible states of a device listed in one spot, which may or may not be useful

---

<div class="post-metadata">

**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\
**Post date:** [February 23, 2023, 9:46am UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/6 "2023-02-23T09:46:08Z")

</div>

Hello,

So I tried several think but nothing do the job as I would like to...

I do have implemented a memory tag dataset with my colours inside.  
This is not usable in style customization as the Style Customizer doesn't allow bindings of colours.

I have tried to edit Fill Paint with the colour from my memory tag but this doesn't allow blinking so I gave up that solution.

I have gone one step further and created a memory tag dataset containing exactly the "Styles" property issued from the Style Customizer. Then binded the Styles property to this tag. This does work but...

- The blinking is not synchronized on the different template instance as the blinking "beginning" is based on the tag change so my screen looks like a rainbow christmas tree 😛
- Also, the Style Customizer editor isn't compatible with this kind of bindings...

So I have searched Ignition Forum for that problem once more. I have found similar issues but no real solution...  
My current idea is to create a boolean tag with a frequency of 1 Hz or so to use in my "State" variable (which is used in the Style Customizer) but I am afraid that Ignition will not like that too much performance-wise..  
Also this doesn't change the fact that the Style Customizer "broke" when binding the Styles property...

[Edit] The Styles Customizer is not compatible if binded to a parameter because the parameter because in template edition the parameter has no value. If I bind it to a specific tag it does work.

Any idea?

Thanks!

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 23, 2023, 2:17pm UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/7 "2023-02-23T14:17:45Z")

</div>

> [@Jeremy](#):
>
> This is not usable in style customization as the Style Customizer doesn't allow bindings of colours.

Style customizer does allow binding of custom colors. It requires a cell update binding on the styles table. You may have to use toColor()

---

<div class="post-metadata">

**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\
**Post date:** [February 23, 2023, 2:48pm UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/8 "2023-02-23T14:48:10Z")

</div>

Oh, didn't knew about this kind of bindings. Thanks for the information.  
Unfortunately, I am a bit lost as how to do it.  
I have found the specific windows to setup the cell update binding. But at the moment my colours are in a dataset tag and I don't know what to input in the "Value" cell of the Cell Bindings. If I use the Property selector, I have something like this :  
{MOT\_S.motor::Metadata.Colours.Anim}  
Which refer to the dataset containing my colours, which is obviously not right. How can I refer to a specific row and column in my dataset?

In any case, this will not solve the problem with the asynchronous blinking but it's good to now.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 23, 2023, 2:49pm UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/9 "2023-02-23T14:49:21Z")

</div>

Use individual tags for your custom colors. Then you can select the state and property and add it to the cell update binding. Then your value would be `toColor({customColorTag})`. I haven't used the dataset method, so @nminchin would have to give you a hand with that. You might be able to access it via `toColor({colorDataset}[0,3])` - just a guess though.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [February 23, 2023, 7:36pm UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/10 "2023-02-23T19:36:28Z")

</div>

If you use a style customiser with blink, you won't be able to sync the blinks between components. The only way to sync them is to use a clock signal, eg a client expression tag using an expression with `now` in it.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [February 23, 2023, 7:45pm UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/11 "2023-02-23T19:45:38Z")

</div>

> [@nminchin](#):
>
> If you use a style customiser with blink, you won't be able to sync the blinks between components.

Have you noticed this to be a huge issue with your end users? To me, blinking out of unison isn't that big of a deal. But, I assume to others it's flat out annoying.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 23, 2023, 8:35pm UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/12 "2023-02-23T20:35:36Z")

</div>

IMO it shouldn't be an issue. It might be a slight annoyance, but it does what it's supposed to do. Draw your attention to something that is wrong.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [February 23, 2023, 10:10pm UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/13 "2023-02-23T22:10:52Z")

</div>

Well it's impossible to do in Perspective nicely (i.e. with P Styles), so I've learnt to not be bothered by it, but when I first came to Vision from other platforms where they _were_ sync'd, it bothered me to no end haha.

---

<div class="post-metadata">

**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\
**Post date:** [February 24, 2023, 9:27am UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/14 "2023-02-24T09:27:23Z")

</div>

I must I have seen the async blink for about 10 second and it has annoyed me quite a lot...  
So have made the blinking tag and synced my template with it, it's less clean code but it's worth it to my opinion and to the option of my colleagues as well.

I must say I miss the colour management of the concurrence with dynamic/blinkable colour palette. usable everywhere.

---

<div class="post-metadata">

**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\
**Post date:** [February 27, 2023, 8:28am UTC](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146/15 "2023-02-27T08:28:06Z")

</div>

So, here is what I have finally done :

- I have an UDT containing :  
-- a Memory Dataset of columns Index (Int), Description (String), Color (Color) containing all possible animation used by Styles customizer  
-- a expression tag for each color usable outside of Styles customizer referencing the dataset. This way it's easier to use for single color references  
-- a memory tag for each color NOT used in Styles customizer for background of popup windows for exemple of for unanimated element.
- I have another UDT containing blinking tag
- In every animated object, I have create an int containing the reference Index of the color Dataset. Additionally, I use the appropriate blinking tag to change this value. This int is used in the Style customizer as long as the color dataset

This wait every color I use several times is referenced in that UDT and if I wanted, I could create an editor and make it available to the user so he could change the colors.
