CSS pseudo-elements

Ignition Early Access
1

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 1px rgba(255,0,0,0.4),0px 0px 12px 1px rgba(255,0,0,0.4) inset;}
     70% {box-shadow: 0px 0px 6px 3px rgba(255,0,0,0.2),0px 0px 25px 2px rgba(255,0,0,0.2) inset;}
     100% {box-shadow: 0px 0px 2px 1px rgba(255,0,0,0.3),0px 0px 12px 1px rgba(255,0,0,0.3) inset;}
}

and adding an ‘animation’ to the style set to flashbox 2s infinite
image

My question is…
Is there a way to generate and access an elements ‘pseudo-element’ like ‘before’ or ‘after’, or am I just wasting my time? When I have several devices animating on the same screen at the same time the client PC uses a surprising amount of resources (GPU). I’ve read, in a number of places, that rendering a pseudo-element and and altering it’s opacity is a lot less resource intensive

Is it possible to generate a pseudo-element in perspective utilizing a custom css file. I’ve tried, but I can’t seem to get it to work.

I can easily get the example in the link working at codepen.io
this is from chrome’s developer tools from my codepen example
image

But if I try to do it in perspective and look at chromes developer tool, it doesn’t seem to generate the after pseudo element and the function is greyed out.
image

5 Likes
2

Nevermind…
I spent 2 days thinking about (and trying) this with no luck and finally posted something here.
Than I magically found the answer.

You need to include a content to the pseudo-element for it to be generated. Learn something new everyday!

.psc-lblAfter::after{
	content: 'hello';
	opacity: 1;
	box-shadow: 0 5px 15px rgba(200,0,0,1);
}

This is what I wanted to see
image
It’s not pretty (yet) but it works!!
image

2 Likes
3

Hi
Where did you put your @keyframes code in perspective?

2 Likes
4

It took me a little bit to figure out but it’s actually pretty simple.

I just recently downloaded the 8.0.14 nightly (b2020051802) which has the theme updates so the css file structure is a little different. But same concept applies to earlier versions.

Basically I created a new css file, lets call it “MyCSS.css” and placed it in the IA perspective themes folder

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

I put my @keyframes into the new MyCSS.css file.

Since I’m using the ‘light’ theme I made a copy of the existing light.css file and called it MyLight.css. Inside the MyLight.css file I added the line @import "./MyCSS.css"; so that the contents of MyLight now looks like this

@import "./MyCSS.css";
@import "./light/index.css";

Now you just need to tell perspective to use the theme “MyLight”. Change the theme sesseion prop to ‘MyLight’ theme.
image image

Now, since your theme is MyLight it will import the new MyCSS.css file which contains your @keyframes

Now, to run your animation you just need to add a value called ‘animation’ to the object and set the animate to the name of your @keyframe function.
image

I’ve been playing around with creating a new style class and applying it to objects so I can generate the pseudo elements and animate those. Applying a style class to an object, like a label, generates a unique class name that can be referenced for additional css coding. Seems to be working good so far.

Side note - make sure you backup your css files. When I updated to 8.0.14 all of my css files were removed. Luckily I had backup copies and it wasn’t a big deal but I thought I’d share. I’m hoping that it just did it because of the significant theme changes. Hopefully going forward it will retain new files in the folder. If not I’ll throw out a request.

Hope this helps…

13 Likes
5

Thanks, it help me a lot. It is been a year I request to put some sort of property for each object so I can put my case code. But nothing happen. If each object has its own css file the management of the obejct has much easier.
The good thing now if you backup your project theme will be backup too with fonts.
By the way how did you rotate the blue border in your second box?

6

I was really just playing around and I was using this as my inspiration.
https://codepen.io/Inderpreet23/pen/rLzbLk

In perspective I created a view with a CoordinateContainer (150wx150h) containing a label with a white background (144w x 144h postioned at x=3,y=3) and two smaller coordinate containers that can move behind the label.
image image
The two smaller containers inside the big one have gradient backgrounds
image image

I have the animation style binded to the check box property

if({.../chkMove.props.selected},"moveV 1s linear infinite, moveH 1s infinite","")

The moveV and moveH functions are the css animation functions.

@keyframes moveV {
  0%,25%,100% {top: -25px;}
  50%,75% {top: 125px;}
}

@keyframes moveH {
  0%,75%,100% {left: -25px;}
  25%,50% {left: 125px;}
}

This may not be the best way to accomplish this but I was able to get it to do what I wanted.

3 Likes
7

Interesting topic and ideas, thanks for posting!

8

Thnaks. With this option I can do any things. it is time change the scroll bar with css. :grinning:
Make it narrow and more modern. Specially in table.
There are some topic that can make scrollbars hidden while user can scroll with touch or mouse
wheel.

2 Likes
9

I'm glad this was helpful. I'm looking forward to seeing some more of your projects

3 Likes
10

This was a very detailed and helpful thread.
Thank you @dkylep for sharing your findings.
Gave me idea to do the same with SVG and it worked well there too.

11

@dkylep, can you elaborate on this please:

12

never mind please, I noticed the ‘.psc-…’

13
14

A post was split to a new topic: How to implement a loading icon?