Symbol Factory animated symbol color change

Ignition
,
1

Hello, we are using the “centrifugal pump” symbol inside the Perspective symbols component:

image
image743×547 51.3 KB

in particular we use it because it has an animated fan which spins around when the pump is working.
We now need however to change the color of the pump from white to grey based on whether the pump is enabled or not:

image

as we change the color however the blade color of the fan inside the pump and the void between blades is changed with the specified color such that the fan doesn’t seem to be spinning anymore.
Can this problem be fixed by ia? can we import own animated objects into the designer?

Thank you

1 Like
2

You can import vectors from programs like inkscape.

check out https://inductiveuniversity.com/courses/vision-components-and-property-bindings/8.1

it goes through importing, color changing, animating, tinting etc…

3

I would stay away from tinting; it's dodgy! Stick with embedding the SVG as opposed to adding it to the image library where it becomes a mess

4

I don’t disagree, but regardless the video is there and he can check it out.

5

Sorry I updated the question to reflect the fact I’m using perspective and not vision and the fact I use the Symbols component which is inside the right “Perspective Components” menu and not the “Tools” → “Symbol Factory” one (I had some confusion on the difference between the two).
I also tried importing an animated example svg as an icon but the icon becomes static as soon as I open in the designer :frowning:

<svg width="150" height="150" viewBox="0 0 200 200">
    <g transform="translate(100 100)">
      <path transform="translate(-50 -50)" fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path>
      <animateTransform 
          attributeName="transform" 
          type="scale" 
          values="1; 1.5; 1.25; 1.5; 1.5; 1;" 
          dur="1s" 
          repeatCount="indefinite"
          additive="sum">      
      </animateTransform>
  </g>
</svg>

it seems the animateTransform property is not supported by Ignition.

6

you can put css transform animations on svgs. it will be a bit tricky to make this work tho.
infact the animaton on the pump is already css based.

image
this is the best you can get with the pump from igntion. for some reason the blades are not blades but just lines, so you cant fill them… i guess you could increase the stroke-width a bit of the fans so then there are 8 smaller fans

.pump_centrifugal_rotor>g>path:nth-child(1){fill:white;} .ia_symbolComponent-pump-centrifugal{fill:grey;}

7

can you please tell me where to look for the css based animation

and where to put this style?
At the moment the most I could do is use an iframe to view an animated svg put inside the "C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main" directory.

gif_animata

8

They are in the css files. probably located here C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes\light\palette\symbols.css
Tho if you want to make one yourself you should look here:

The correct way is to create a new theme that inhertis the other theme and write this here.
Tho you can also inject the css in a style class in the background-image by putting }{ around it: (no need to asign the styleclass to anything)
}.pump_centrifugal_rotor>g>path:nth-child(1){fill:white;} .ia_symbolComponent-pump-centrifugal{fill:grey;}{

image
image978×355 26.5 KB

9

I applied the style as shown but the pump doesn’t change:

image
image1120×615 73.1 KB

also I don’t understand where you got the class .pump_centrifugal_rotor from, my symbols.css has no notion of this class, it contains:


/** Misc */
.ia_symbolComponent__liquid {
    fill: var(--info);
    fill-opacity: 0.7;
    stroke-width: 2px;
}

.ia_symbolComponent__liquid--warning {
    fill: var(--error);
}

/** Animations */
@keyframes ia_symbolComponent__animate--alternateFill {
    0% {
      fill: var(--symbolFill--default);
    }
    50% {
      fill: var(--symbolFillAnimation--default);
    }
    100% {
      fill: var(--symbolFill--default);
    }
}

[etc..] [etc..]

so I’m struggling with trying figuring out how you manipulate the css of these objects.

10

What do you mean on your screenshot i do see the pump being grey xd.
Ah you want it to be dynamic based on the class.. hmh ups then you will need to do add the classname infront of .ia_symbolComponent-pump-centrifugal...
like so .psc-NewStyle .ia_symbolComponent-pump-centrifugal{...} (psc- is auto added by igntion so is also needed)

Yes it could be located in a different file. i didnt check the files to make this, but used the google chrome debugger to look at the dom elements xd.

image
image1819×523 74.4 KB

you should not manipulate the base theme.css files tho as these willbe overwritten again after an upgrade of igition. you have to make a new one so that doesnt happen.

11

thank you I think I got the hang of it, one last thing however: does your pump still spin after inserting the css?

12

yes if you dont overwrite the animations/transforms and these will still be applied as normal. In this case only the fill gets changed