CSS variables in Expression

ReyC · April 19, 2024, 1:28pm

Hi,

I am currentely using tag case to set symbol color according to status :

However, this is not satisfactory. Best practice would be to define states based on the component state name, instead of hard color coding.

I found in the CSS theme definition folder the possibility of using variables which correspond to the states of the symbols.

https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/perspective-built-in-themes

C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes

But I do not know if this is the best way to achieve that and I have no idea about how to use these css variables in expressions?

Can someone please give me the proper syntax to achieve somethinig like that :

Secondly, I would like to define and match specific new states name to colors already defined in the theme :

Exemple :
--symbolFill--pause: --qual-2;
--symbolFill--manual: --qual-10;
[/details]

I also did not know how to do that.

Next will be grateful if anyone can share their know-how or advice on the best way to do this.

Daniel.Snyder · April 19, 2024, 2:10pm

If you're on 8.1.26+, you can define custom states for symbols and specify the colors that you want.

If you are using the built in Motor/Pump/Valve etc. symbols, this is probably the best method. You can bind your expression to the state param of the symbol and return state names such as "running" or "stopped" rather than a color.

ReyC · April 19, 2024, 2:36pm

That is interresting, but I rely on my own symbol library based on svg custon design.
How may I use that feature ?