[feature] Get property from style class

mazeyrat · September 22, 2022, 8:28pm

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 ?

Transistor · September 22, 2022, 9:30pm

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")

YF129701 · September 22, 2022, 10:59pm

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:

mazeyrat · September 23, 2022, 2:00am

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.

Transistor · September 23, 2022, 6:09am

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.

victordcq · September 23, 2022, 7:57am

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?)

mazeyrat · September 23, 2022, 12:33pm

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

victordcq · September 23, 2022, 12:47pm

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)

Transistor · September 23, 2022, 12:56pm

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

mazeyrat · September 23, 2022, 1:20pm

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

Transistor · September 23, 2022, 1:31pm

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.

kgamble · September 23, 2022, 2:20pm

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?

Davis_Tolbert · October 31, 2024, 2:50pm

I know this thread hasn't been posted to for awhile, but I did discover something that I wanted to document here for anybody who comes across this and specifically needs it.If you are trying to style an SVG component (specifically an embedded one) it will not accept styles by default. However, if you go to a portion of an element that you want to style and has properties that can be contained within a style like this for instance.