Creating P&IDs that can shrink and grow in perspective

I would like to know what is the best way to create views in perspective to show P&IDs and the important data that can shrink and grow like in the "Chem Feed" view in the Inductive Automation Demo App "Water/Wastewater" Link: Perspective

I have tried creating a P&ID in a Coordinate container with Pipe tools and then embedding this in a flex container to shrink and grow and it doesn't work. I tried the same Coordinate container setting the mode to "percent" instead of fixed and it doesn't work, everything get messed up (pipes not joined with valves and pumps and other stuff messed).
I will guess the demo is using flex containers instead of embedded coordinate containers. However, I do not know of how to create P&IDs in flex containers since creating in flex containers components are in a row or columns. I am not sure how in a flex container you could place the pumps and valve on top of the lines (the pipes) and then how to interconnect the pipes with other elements like in the demo. Could someone guide me on this?

The main view on that page is a coordinate container; you can open your browser devtools and see:

When you were experimenting, did you set an aspect ratio for your percent-mode container? That's crucial to ensure scaling happens consistently and doesn't throw off relative positions of things.

1 Like

Thanks Paul! It makes sense. I'll experiment with the aspect ratio in coordinate container. I think that's the key.