Perspective: How to use css theme classes on components?

[nminchin]

I found this to implement tooltips:
https://www.w3schools.com/css/css_tooltip.asp
But I have no idea how to actually implement it in Perspective
I can put it into my own theme file, but how do I actually apply it to a component in Perspective?

[CTavakoli]

I have the same question, in general, after creating my own class in css (so far is fine), then how do I insert my own division in a view referring to that class ?

Thanks if someone could help.

perspective, css

[cmallonee]

Instead of .tooltip, you should supply something like .psc-MyStyleClass. You should then attach a Perspective Style Class named "MyStyleClass" to the component which you would like to attach the tooltip to. There is no way to attach a css class of "tooltip" to a Perspective component, but you can attach Perspective Style Classes, which are then attached to the component with the pattern of "psc-" + <style_class_name>.

If you want to attach the tooltip to a component across ALL of your projects, you would ignore the "classes" in the example and instead place the properties from that example into the component.

To be clear - we do NOT recommend this, and I would suspect that if you do this and then encounter an issue with the component that support would not help you. We build and test components with the properties you see in the .css files because those are the properties we feel the components need to behave properly across hundreds of scenarios.

@CTavakoli

how do I insert my own division in a view referring to that class ?

There is no way to insert your own <div> element, outside of the Markdown component (not that the Markdown component would do what you want). The only way to "apply" a class to a component is through using Perspective Style Classes.

[CTavakoli]

Thanks for the reply,

Is it possible to add “animate” for individual SVG elements? I couldn’t make it work, if I can do that, then I can work around everything else I need,

[rbabcock]

I was able to get some animations working by doing as cmallonee suggested. Create or modify one of the CSS theme files and do something like:

.psc-SomeStyleName {
    animation: <some animation CSS here>;
}

Keyframes work, as well. Then you just type SomeStyleName into the style.classes property of your component and you're good to go.

These posts might explain it better than I can.

CSS pseudo-elements

I’ve been playing around with some css animation For example I have a rectangle representing a device. There will be multiple of these in a room. If the device goes into an error state the box shadow flashes red. User can then click on the device to open a new view to interact with the device. I also have a settings icon come into screen if the user holds down the mouse. [CSS animation] The blinking box shadow comes from custom CSS @keyframes flashbox { 0% {box-shadow: 0px 0px 2px 1…

Perspective base a style class on another style class

v8.0.15 Can I base a style class on another style class? Instead of having to either define the same styles twice or assign two styles to a component, I want to be able to add the styles defined in one class into another class, where the same precedence logic would apply as normal: if a particular style has two definitions (one from the linked class and one from the current class), then the current class’ version would take precedence. Or am I doing Perspective wrong? (really I’m just fumblin…

On another note, I was able to get a tooltip to show up with some static text, but I've been looking for a way to change it within the designer, maybe as a component property. I am learning as I go with CSS, so if anyone has any suggestions I would appreciate it.

[CTavakoli]

Thank you,
It did it, more or less the same way you indicated, I just set the animation on the object itself, instead of the css class, but the result is the same, thank you again for the tip, I try to upload a small demo video.

[rbabcock]

I guess I did fail to mention that you could do it that way. I’ve been interested in making animations easily repeatable, tunnel vision gets us all, apparently!

[John_S1]

Can you please tell me how you have achieved this? I'm a newbie in this, so please share some docs or video that I can refer to do the same.
Thank you.

[cmallonee]

Animations are quite a bit easier to manage if you're using 8.1.22 or newer. This thread deals with a simple rotation animation: Style for (Icon) Rotation

[John_S1]

Thank you very much,
Do you have some reference on how I can create something like that, any document link from IA, As I Said I'm just a newbie and stared to explore more on this. Please guide me.

[nminchin]

I suggest you have a look at this exchange project, and then Google how to create a CSS animation for what you're trying to achieve. IA won't have anything explaining how to do this. While Perspective supports CSS, IA don't officially support CSS in terms of providing resources for using it, especially not more advanced concepts.

Ignition Exchange

[cmallonee]

As @nminchin said, CSS is not an Inductive Automation concept or tool - it's an existing language users may use within our product. Much like Python or Java, we might have simple examples - but to learn the in-depth, advanced techniques you need to explore documentation of the language itself.

[John_S1]

Thank you guys, I will have a look at it. Thanks for the support.

[Elsayed_Ragab]

How to import Animate.css library into ignition ?

[victordcq]

The problem with imported css libs is that perspective adds a prefix to classes.
So you will have to edit all the css to acount for that

%installDirectory%\data\modules\com.inductiveautomation.perspective\themes\README.md

You could add your css files here, follwing the instructions
Than will have to edit the css to account for the psc- prefix from perspective. And than import them into your themes