# Perspective Responsive Pipes

**URL:** <https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096>\
**Category:** Ignition\
**Tags:** ignition81, vision, perspective\
**Created:** [December 30, 2022, 5:52pm UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096 "2022-12-30T17:52:24Z")\
**Posts on this page:** 13\
**Page:** 1

<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:** [December 30, 2022, 5:52pm UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/1 "2022-12-30T17:52:24Z")

</div>

Hello all,

Just started messing with Perspective pipes and things. It's a really cool tool, and I wish it was available in Vision. However, I'm having trouble figuring out how to use if effectively.

Trying to make a somewhat responsive layout for a process, but the location of the pipes gets all messed up for different aspect ratios.

Does anybody have tips/tricks they use to get their process flow overviews looking nice in Perspective?  
Using a coordinate container with the iPad aspect ratio (1024x768) in Designer so that it can scale up easily to a full-size desktop (1920x1080).

---

<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:** [December 31, 2022, 2:02am UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/2 "2022-12-31T02:02:39Z")

</div>

Seems like to go to from what I've seen is drawing them in inkscape and then importing the SVG to Perspective

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [December 31, 2022, 3:39am UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/3 "2022-12-31T03:39:51Z")

</div>

You probably need to play around with aspectRatio.

You can also convert pipes to drawing since version 8.1.22.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 31, 2022, 6:09am UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/4 "2022-12-31T06:09:11Z")

</div>

Fix the aspect ratio for all p&id mimics, otherwise you will never get your devices and pipes to line up correctly. Also, any circles eg pump symbols will become distorted/ovals and look unprofessional

---

<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:** [January 3, 2023, 1:43pm UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/5 "2023-01-03T13:43:44Z")

</div>

This seems like the most straight-forward solution. The main mobile device will be iPads, so 1024x768 (4:3), it is. Lots of whitespace in 1920x1080 (16:9), but I think it's usable. Smaller devices will use breakpoint since they're not large enough to show the same view.

However, it still doesn't scale perfectly, even with the fixed aspect ratio.

I would imagine an Inkscape SVG to put in the background that scales with the view, would work as well.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 3, 2023, 10:09pm UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/6 "2023-01-03T22:09:10Z")

</div>

> [@amarks](#):
>
> However, it still doesn't scale perfectly

You will still see 1pixel offsets in places, but that's the best you'll get without having everything within a single SVG due to how scaling works

---

<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:** [January 3, 2023, 10:11pm UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/7 "2023-01-03T22:11:26Z")

</div>

I think I found my issue. I had components grouped together into flex conatiners, so it was those containers shifting that I was seeing. I wish we could simply "group" things like we could in Vision.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 3, 2023, 10:35pm UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/8 "2023-01-03T22:35:16Z")

</div>

> [@amarks](#):
>
> wish we could simply "group" things like we could in Vision.

This was definitely one big thing I noticed going from vision to perspective. I don't use containers in coord views anymore as they're just far too painful to work with, as much as I hate not grouping things together...  
The most confusing and frustrating thing is copying and pasting components between coord containers. If you're not using fixed mode for all coord containers, pasting components is basically impossible since percent mode will kill the size and position of the pasted component if the copied and pasted containing coords are not exactly the same size. The related issue is that you simply can't resize a percent coord container as you'll destroy the sizes of the contained components, you're always having to convert to fixed mode any time you want to edit them which is very annoying.

Using flex containers inside of percent coord containers is also basically unusable, since then different resolutions will scale the coord components like SVGs etc, and your flex containers will scale but the components within it won't, leaving you with mismatching scaled components on the screen

---

<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:** [January 4, 2023, 10:26pm UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/9 "2023-01-04T22:26:32Z")

</div>

> [@nminchin](#):
>
> Using flex containers inside of percent coord containers is also basically unusable, since then different resolutions will scale the coord components like SVGs etc, and your flex containers will scale but the components within it won't, leaving you with mismatching scaled components on the screen

This is what I was struggling the most to comprehend before I came across the percent/aspect ratio settings. Making traditional SCADA process diagrams in Perspective without using it would be impossible.

What's weird is this doesn't seem to entirely fix it. The scaling is still not perfect. I'm designing for iPads in landscape (1024x768) and then it will scale up to a desktop display (1920x1080). Even with the aspect ratio set to 1024:768 the scaling of the pipes is weird.  
For the iPad, these pipes are positioned perfectly, but on the desktop it's off by a noticeable amount, certainly more than 1 px:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/52f4a588217045774c8175644bd7a88456878b1c.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/a/aa012c0fe73f4d4e42084f8c7cdcff007c807f8e.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 4, 2023, 10:40pm UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/10 "2023-01-04T22:40:46Z")

</div>

how is that pump graphic configured? is that an embedded view? is the embedded view a coord view? and what's the mode of that? Coord views that are used for embedding, like device symbols, should be set to percent, also with aspect ratio set

---

<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:** [January 4, 2023, 10:43pm UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/11 "2023-01-04T22:43:21Z")

</div>

It's the built-in pump graphic

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 4, 2023, 10:54pm UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/12 "2023-01-04T22:54:34Z")

</div>

This is one issue with some of these standard components, you don't know and can't change how they're built. So for example, the smart symbols could be using flex containers which as discussed, don't scale well alongside other components. I haven't used those smart symbols though so I can't really comment

Playing with it now, this is another reason I wouldn't use them:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/0/a089231b98c149a47a15c453ab1e40f769f332d0.png)

The graphics are different sizes when you change their orientation, despite having the same physical container size. I understand why, but it wouldn't look professional on a page with multiple orientations to have all different sizes of graphics

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 4, 2023, 11:24pm UTC](https://forum.inductiveautomation.com/t/perspective-responsive-pipes/68096/13 "2023-01-04T23:24:56Z")

</div>

> [@amarks](#):
>
> built-in pump graphic

I've tried to reproduce your strange offsets though and I can't.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/c/4c587702ba4f9c6384fcbcb000aaec6523055f7d.png)

It doesn't matter what resolution I make my browser, the pipe is never off by much. The symbol with text is the worst though, definitely off by more than a few px (those un-centred labels [to the pump circle/feet] also really bug me...). The one without labels is pretty much always centred.  
What also bugs me is that you can't set the stroke to not scale (i.e. apply `vector-effect: non-scaling-stroke`)

All I did to reproduce is to drag on a smart pump symbol, add a piping tool pipe, and set the view mode to percent with the aspect ratio of the view size.
