# Using pipes with flexible screens (Flex containers)

**URL:** <https://forum.inductiveautomation.com/t/using-pipes-with-flexible-screens-flex-containers/70727>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [March 7, 2023, 1:40pm UTC](https://forum.inductiveautomation.com/t/using-pipes-with-flexible-screens-flex-containers/70727 "2023-03-07T13:40:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ali\_Ali](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ali\_Ali](https://forum.inductiveautomation.com/u/Ali_Ali)\
**Post date:** [March 7, 2023, 1:40pm UTC](https://forum.inductiveautomation.com/t/using-pipes-with-flexible-screens-flex-containers/70727/1 "2023-03-07T13:40:56Z")

</div>

Hi all,  
I would like to draw pump stations in perspective like the image attached. The only problem is that the pipe draw tool only available in coordinate containers, and I need the view (template) to be flexible with different devices (HMI, PC, Smart phone). I have tried to put my embedded view (pump station) in flex container or Carousel but the output didn't become right. Hope you can help.

 ![Screenshot 2023-03-07 153305](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/6/167998264994d41e1017d55977f8170d49a66339.jpeg)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 7, 2023, 3:40pm UTC](https://forum.inductiveautomation.com/t/using-pipes-with-flexible-screens-flex-containers/70727/2 "2023-03-07T15:40:54Z")

</div>

There is no free lunch here. You need a coordinate container (with a fixed aspect ratio) to have consistently located pipes. If you want to change the bounding box _of that container_, it's the responsibility of the outer container it's placed in. It's not "easy" to make a PID style screen work on mobile.

---

<div class="post-metadata">

**Author:** ![andrews](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@andrews](https://forum.inductiveautomation.com/u/andrews)\
**Post date:** [March 8, 2023, 7:18pm UTC](https://forum.inductiveautomation.com/t/using-pipes-with-flexible-screens-flex-containers/70727/3 "2023-03-08T19:18:31Z")

</div>

> [@paul-griffith](#):
>
> There is no free lunch here.

Please inform me if this changes.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [March 8, 2023, 8:02pm UTC](https://forum.inductiveautomation.com/t/using-pipes-with-flexible-screens-flex-containers/70727/4 "2023-03-08T20:02:27Z")

</div>

There are multiple ways to go about making P&IDs work on mobile, none of them are particularly easy.

My favorite is the one that I came up with because you don't have to maintain multiple screens between the breakpoint for desktop and mobile. (implicit bias recognized as it is my own solution and the only one I've used).

Here's the gist of it:

I think in most situations you have 3 basic devices to design for.

1. Mobile
2. Tablet (iPad)
3. Desktop (HMI)

Coming from a traditional SCADA system (i.e. Vision), we're used to only having to consider widescreen desktop formats where 1920x1080 is the smallest resolution these days and Ignition can easily scale up from there. Having entirely different views for desktop and mobile access provides somewhat of a disjointed experience, IMO. (Not to mention you now have multiple screens to maintain that display the same information.)

That said, I typically design all of my views to take full advantage of the tablet landscape area. In the case without a tablet, you can design for the desktop area. Design the screen in percent mode and fix the aspect ratio. You can then embed that "root" view in a couple of breakpoint containers that the mobile and desktop will use. At the end of the day (if you're designing for tablet space), this approach may take some extra screens for larger processes, because you're not taking advantage of the full area of your widescreen/desktop displays, but it saves a lot of development and maintenance time.

Here are the results:  
Desktop:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/3/f341526283e1487a807a469bd6d956bcdc0c41dd.png)

iPad (native):  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/7/c7f3f47e7ee2a6af544ae0a9f124151441d5f4d3.png)

Mobile portrait (320x658):

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/c/ac3a29450afdbc62572bdcc57d11684baec81284.png)

Mobile landscape (658x320):

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/3/a34c17b99bd9d0ddaca5cfb8b03f36890640d52c.png)

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [March 8, 2023, 8:07pm UTC](https://forum.inductiveautomation.com/t/using-pipes-with-flexible-screens-flex-containers/70727/5 "2023-03-08T20:07:59Z")

</div>

Also helpful when developing with Perspective:

> [@PSA: Testing Perspective with Chrome Emulated Devices](https://forum.inductiveautomation.com/t/psa-testing-perspective-with-chrome-emulated-devices/68071):
>
> PSA to those who are using Perspective to develop for mobile devices: I just found that Chrome has a built-in device interaction emulator so you can test the responsiveness of your design for mobile devices quite easily. F12, then Ctrl-Shift-M. There are quite a few devices pre-loaded, and custom devices can be added. Keep in mind that the resolution for the custom devices is the browser render resolution, not the device's screen resolution. This has been a huge help as I am developing scre…

---

<div class="post-metadata">

**Author:** ![Ali\_Ali](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ali\_Ali](https://forum.inductiveautomation.com/u/Ali_Ali)\
**Post date:** [March 10, 2023, 3:47am UTC](https://forum.inductiveautomation.com/t/using-pipes-with-flexible-screens-flex-containers/70727/6 "2023-03-10T03:47:14Z")

</div>

Thanks marks that is very helpful. I have done something similar to your suggestion and worked very well for me. And also the hint about chrome built-in emulator is very useful. Thanks again for the help.
