Responsive Zoom/Scaling XY Coordinate Views for P&ID

Ignition
1

When creating P&ID (Piping & Instrumentation Drawing) views in Ignition Perspective using XY-coordinates with percentage mode and maintaining Aspect Ratio, I ran into misalignment issues where pipe lines and instruments would shift on different screen sizes.

Using CSS transform and transform-origin to uniformly scale and center the entire view using scale(ZoomFactor) translateX(CenterXpx, CenterYpx) & transform-origin: top left . I was able to scale in/out the views on different screen sizes.

Scale InOut Views
Scale InOut Views1869×993 132 KB

I wanted to share this approach because it can make scaling your P&ID views in and out on different screen sizes effortless and ensure your drawings stay perfectly aligned.

I welcome any feedback or suggestions to make it even better!

Thank you,
Pratik Patel
ZoomInOutView.zip (3.1 KB)

7 Likes
2

Thanks for sharing, getting P&IDs to scale properly always takes up a chunk of time to get right with all the various pipes, templates, and objects. Once I have it figured out its a breeze, but I swear I always need to fiddle with it when I first start a project

1 Like
3

Very kind of you to share this - I'll check it out soon! If it works really well you should try to put it on the Ignition Exchange

1 Like