Changing Valve Color

I haven't done it, but a quick look at the structure suggests that you need to expand each element and look for the stopColor value or the fill value. You then need to create a binding on each of these. Note that any gradient fills probably have at least three stops.

To prevent early onset madness, I suggest that you define the colors for each state as a session variable so that the color definitions can easily be redefined without having to revisit every valve. Something like:

  • Then put a custom prop on the valve. e.g. 'colorPalette'.
  • Add an expression binding to it to return the {session.custom.valvePalette.open} object when the valve is 'open', etc.
  • Create a Property Binding on each of the pump SVG colors to the appropriate value. e.g.,
    this.custom.colorPalette.solid

It's a bit of work but you only need to do it once.

Further reading.

2 Likes