# Responsive Zoom/Scaling XY Coordinate Views for P&ID

**URL:** <https://forum.inductiveautomation.com/t/responsive-zoom-scaling-xy-coordinate-views-for-p-id/105472>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 23, 2025, 2:32pm UTC](https://forum.inductiveautomation.com/t/responsive-zoom-scaling-xy-coordinate-views-for-p-id/105472 "2025-04-23T14:32:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pratik.patel.scada](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@pratik.patel.scada](https://forum.inductiveautomation.com/u/pratik.patel.scada)\
**Post date:** [April 23, 2025, 2:32pm UTC](https://forum.inductiveautomation.com/t/responsive-zoom-scaling-xy-coordinate-views-for-p-id/105472/1 "2025-04-23T14:32:28Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/b/3b2a0f0b8172275fbaa018aa10ad8563039876ee.png)

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](https://forum.inductiveautomation.com/uploads/short-url/lt121hYORI6NdVHLEehTXWruWsw.zip) (3.1 KB)

---

<div class="post-metadata">

**Author:** ![jrusso](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@jrusso](https://forum.inductiveautomation.com/u/jrusso)\
**Post date:** [April 23, 2025, 2:36pm UTC](https://forum.inductiveautomation.com/t/responsive-zoom-scaling-xy-coordinate-views-for-p-id/105472/2 "2025-04-23T14:36:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ryan\_Allen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_allen/32/47013_2.png) [@Ryan\_Allen](https://forum.inductiveautomation.com/u/Ryan_Allen)\
**Post date:** [April 23, 2025, 2:40pm UTC](https://forum.inductiveautomation.com/t/responsive-zoom-scaling-xy-coordinate-views-for-p-id/105472/3 "2025-04-23T14:40:05Z")

</div>

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