Perspective Responsive Pipes

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).

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

1 Like

You probably need to play around with aspectRatio.

You can also convert pipes to drawing since version 8.1.22.

1 Like

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

3 Likes

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.

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

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.

2 Likes

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

3 Likes

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
image

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

It's the built-in pump graphic

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

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

I've tried to reproduce your strange offsets though and I can't.
image

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.