[FEATURE-384] Change color of vessel running, stop, etc

Ignition
1

Is it possible to change the color of the vessel component for each state?

vessel

2

Can you edit your post (pencil icon) and add either the Vision or Perspective tag so we know which you’re using?

3

I’m 99% sure that is a Perspective symbol.

4

It is a Perspective symbol component.

5

Idk what props it all has, but you can always target it with css.

.ia_symbolComponent--stopped.ia_vesselSymbolComponent > .vessel_cylindricalTank_tank_conical {
fill: red
}
.ia_symbolComponent--running.ia_vesselSymbolComponent > .vessel_cylindricalTank_tank_conical {
fill: green
}

–default and --faulted work too, faulted already has a fill animation on the tank tho so might want to use somethign else there

image
image1006×297 14.9 KB

(i tried some of the props to color, but i only seemed to color the water, idk if i missed one tho)

6

Thanks for the idea!

1 Like
7

In the Vessel component props, you can modify the style property for fill and select a color.

FC8Cb3wuaR
FC8Cb3wuaR757×830 49.8 KB

However, as victordcq mentioned, some states have animations that will override that fill property.

Here is an existing feature request for adding custom state colors for the Perspective Symbol components.

1 Like