I'm using the built in Perspective symbols for motors, pumps, valves etc that are found in the "symbols" category in perspective components. The states for these objects(running, stopped, open, etc) are tied to styles that are controlled from Project Properties>Perspective>Symbols. However I need to add some objects that aren't included in the default symbol palette(three way valve specifically). I have created this object in a .SVG file, and can add animations to it. Is there a way to tie these animations to the styles that the built in objects use? Ideally I would like them to match the built in symbols, and change when I change the overall color theme(light, dark, etc).
To get your styles to change when the theme changes, you need to use the defined colour variables that are configured by ignition. Have a look at the "Built in Theme Colours" in this link:
https://docs.inductiveautomation.com/display/DOC80/Perspective+Themes
If you use these variables to set the SVG colours and styles, it should react to the theme changes.
Also if you use the "Inspect" function in your browser right click menu on a pre built valve you will see the css that is defined for each part of the component, so you can match the classes that are use to make it the same.
David, Thank you for the reply. Unfortunately the link you sent doesn't seem to work for me. Is this the section you were talking about?
I tried what is described in this link, and it does not appear to work. I can enter the css code for the "paint" but the color does not change. If i manually pick a color from the palette it works though. The first screenshot is the SVG properties, the second is what I would like to tie my SVG animations to.
Thanks,
try:
var(--seq-6)
Yes it will give you a warning about it not being a color, but it should still work.
Technically you shouldn't need the var(), but either should work.
Of course there are also things to look out for like this:
EDIT: Also, did you try it in a browser?
1 Like
That did the trick! Thank you. I did try it in a browser, and it also did not work without the "var()".
EDIT: Just for anyone else who finds this, here are my steps to tie it to the correct color:
Open up Symbols states under project properties(see second screenshot in my other reply), then open up the "variables.css" for one of the themes. From here, you can correlate the hex codes of the symbol states to the CSS names. So for example, the "running" state light theme uses #A1A1A1 for the secondary color. In your CSS, this correlates to "--neutral-50". Bind the color animation to var(--neutral-50), and this color will match your other states, and change when you change your theme.
2 Likes