[feature] Get property from style class

I would like to obtain with script or expression some style property, especially background.

Use case
In some component with color property, and without style to drive it, I dont want to hard code the color value…

Is there any way to manipulate style classe with script or sdk ?

I’m not sure that I understand your question but if you want to change the style then …

  • Create the two styles in Perspective | Styles.
  • In the Perspective Property Editor select one of the styles in props.style.classes.
  • Add an expression binding to the props.style.classes. In the example below we change the style from blinking to noBlink depending on the value of tag_x.
    if({[default]tag_x}, "blinking", "noBlink")

Are you asking specifically about modifying Perspective style classes or just the style property of certain components?

Just to get the easiest case out of the way:

The issue is for example to set a color property on a component, this color property is not in a style class.
I would like to read the value of the color from a style ressource.

It’s still not clear what you are asking. Can you add a bit more detail what problem you’re trying to solve?

You can’t read the CSS files, as far as I know.
Are you using themes properly? (They’re great for maintaining consistency across an application.)

https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes

See down at the bottom where all the presets are defined for you.

True you cant really get the css file, but the styles are stored in json.

C:\Program Files\Inductive Automation\Ignition\data\projects\PROJECTNAME\com.inductiveautomation.perspective\style-classes\STYLENAME\style.json

Idk why you would want to get this though. if you want to use fixed/dynamic colors in a style, you can use var() or -- (i think?)

Yes I use some theme variable for main colors, but other colors are stored in style classes.

You can also create your own css variables in the :root

(example with injection)
} :root{--test:red;} {

(note that it might take a restart of the page before it works in the designer)

I still don’t understand what you are trying to do. Please give us an example with some screenshots and code.

image
just a wat to bind the color from a styles class to the color property of an icon

OK. You want to apply a color defined in a style to a component that does not accept style classes such as the icon component. (This is sensible as it allows you to maintain the theme.)
I can’t see a way to do that. I’ll have a further think.

A style class that sets the Font Color will do this. Is there any reason it needs to be done in binding instead of just using the style itself?

1 Like