Perspective Drawing P&ID Views & Pipes

[mperkins]

For these pipes with lots of connection points / vertices, how does this affect the bounding box of the component? Does the bounding box encompass the whole pipe and all its vertices?

So, the pipes themselves do not determine the size of the Coordinate container. If your piping extends past the border of the coordinate container it'll trigger scrollbars in the container.

Also we've thought of a way around the pipes interfering with components. I'll be happy to share everything soon. I can tell you're all as excited as I am, but I really have to focus on finishing developing this .

[jogam]

@mperkins, looking forwards to the new implementation!

[hpark]

Hi all! Great news, we’ve got a working build of the piping drawing tool that we would love to start testing and hear your feedback. For those who are interested in signing up for a remote feedback session, please sign up here to be included in the user feedback list (If you had already signed up before, don’t worry we’ve got you on the list. Just making sure we don’t get duplicate sign ups):

Usability Research Sign-Up

Thank you

[seancourtney1]

Any chance this might be in 8.2, or sooner?

[nminchin]

Hum, this post was back in Feb and I haven’t heard anything from the usability thing since signing up back then. Any updates on where this is at?

[ray]

Hi Nick! Our product design team completed this particular user feedback session and the results are being incorporated into the feature’s builds. If you weren’t contacted for this round of user feedback, you may still be for a future session.

I don’t have an exact release milestone, but the feature is dev-complete and in our QA pipelines now.

[gnguyen]

Hi Ray,
Any new information about availability?

[ray]

@gnguyen

Hi Ray,
Any new information about availability?

There’s no firm release date for this feature. As I understand, the feature is still in active development with a target of Q3 for an MVP release.

[mgraham]

Since you claim to be html based, why not support HTML5’s canvas?
I have used it in the past (not in Ignition) to draw trends from data in a file, and I would love to have that canvas available in Perspective.

I think the key here would be to have javascript available to the designer, with access to tag values from the javascript. I am guessing that might be difficult since I think perspective uses javascript too.

[victordcq]

ive already asked it once, here was the reply:

@mperkins

It’s unlikely that we’ll switch to canvas, as we’d like to have a “flatten” or “convert to SVG” feature in the future, and having pipes be based on SVG’s already makes that conversion a lot easier. SVG’s are a lot easier to have per-segment click events too, which we don’t have yet, but I see @nader is asking for.

if you want to use js you will have to create a module or use the webdev module

[pturmel]

@mgraham

the key here would be to have javascript available to the designer

Don't hold your breath. It is fundamental to Perspective that you never work with javascript.

[PGriffith]

@mgraham

I think the key here would be to have javascript available to the designer, with access to tag values from the javascript. I am guessing that might be difficult since I think perspective uses javascript too.

That's what custom modules (or an iframe component serving up another page, such as from webdev) are for.
We specifically don't want our users to need to learn Javascript (nor CSS, nor HTML) to design in Perspective.

[tupanaster]

Is it possible to change the stroke width of a pipe?

Edit 1:
From @nader.chinichian post

Drawing Tools in perspective

May be it is because there are some performance issue and some feature limitation in pipeline. As I posted earlier in related thread for pipeline, after sometime drawing tools get laggy and it is hard to draw. Also there is no CSS style support for pipeline yet.

Pipes are quite laggy on the Web Browser, not only on the designer. Has anyone experienced a slow performance when using pipes?

[chaoliang]

Just out of curiosity, for the project you mentioned, does it use some kind of algorithm to automatic show the dynamic piping or it’s done manually?

I always have customers asking similar functions, but after done it a few times, the amount of hours spent to achieve bugless, does not worth the actual benefits received.

I did once saw a Spanish company having a algorithm dynamically displaying their conveying system, but still it only apply to their system which has minimum variants across projects.

For water treatment plant, I don’t know whether it’s just a dream or it is achievable to realize the dynamic piping.

[tupanaster]

The pipes I’m using are changing automatically based on ViewPort. If it’s not done that way I’ve seen that the width will remain too big for smaller screen sizes. That’s the case even when using Percentage Coordinate Containers

[witman]

@tupanaster

Has anyone experienced a slow performance when using pipes?

I used a small amount of pipes directly on a view (not sub-views) for the first time recently. At this level, performance is great in browser, but I did have issues in Designer. Editing pipes would become unworkably slow now and then. In fact, it was immediately unworkably slow when I started drawing the first pipe. I almost gave up on it, wondering how anyone could use them, but closing and reopening the view got them snappy.

[mperkins]

the next time you encounter this, would you mind exporting the view- or at least the pipes props and either DM’ing me or posting it here for analysis?

[witman]

You bet; I’m done with the piping for now, but will check on it now and then while working on other stuff on this view and pass on details if I see the issue again. We just upgraded to 8.1.18 too, which may or may not be relevant.

[tupanaster]

My pipes? witman’s pipes?

Edit 1:

I got a message about character limits in a post so I deleted half of my pipes.

Pipe props

[ { "name": "air_0", "appearance": "auto", "flanges": true, "lineVariant": "solid", "start": "none", "end": "none", "fill": "#D8D8D8", "stroke": "#D8D8D8", "width": 0, "origin": { "x": 0.7127, "y": 0.0956, "connections": [ { "x": 0.7127, "y": 0.121, "connections": [ { "x": 0.6959, "y": 0.121, "connections": [ { "x": 0.6959, "y": 0.0956, "connections": [ { "x": 0.7042, "y": 0.0956, "connections": [] }, { "x": 0.6767, "y": 0.0956, "connections": [ { "x": 0.6767, "y": 0.0548, "connections": [ { "x": 0.7112, "y": 0.0548, "connections": [ { "x": 0.7324, "y": 0.0548, "connections": [ { "x": 0.7407, "y": 0.0548, "connections": [] }, { "x": 0.7324, "y": 0.0802, "connections": [ { "x": 0.7492, "y": 0.0802, "connections": [ { "x": 0.7492, "y": 0.0548, "connections": [ { "x": 0.7407, "y": 0.0548, "connections": [] }, { "x": 0.7581, "y": 0.0548, "connections": [] } ] } ] } ] } ] } ] }, { "x": 0.6387, "y": 0.0548, "connections": [ { "x": 0.6026, "y": 0.0548, "connections": [ { "x": 0.5653, "y": 0.0548, "connections": [ { "x": 0.5557, "y": 0.0548, "connections": [] }, { "x": 0.5653, "y": 0.1786, "connections": [ { "x": 0.5653, "y": 0.2186, "connections": [ { "x": 0.5865, "y": 0.2186, "connections": [ { "x": 0.5948, "y": 0.2186, "connections": [] }, { "x": 0.5865, "y": 0.2441, "connections": [ { "x": 0.6033, "y": 0.2441, "connections": [ { "x": 0.6033, "y": 0.2186, "connections": [ { "x": 0.5948, "y": 0.2186, "connections": [] }, { "x": 0.6122, "y": 0.2186, "connections": [] } ] } ] } ] } ] } ] } ] } ] }, { "x": 0.6026, "y": 0.1369, "connections": [ { "x": 0.6026, "y": 0.177, "connections": [ { "x": 0.6238, "y": 0.177, "connections": [ { "x": 0.6321, "y": 0.177, "connections": [] }, { "x": 0.6238, "y": 0.2025, "connections": [ { "x": 0.6406, "y": 0.2025, "connections": [ { "x": 0.6406, "y": 0.177, "connections": [ { "x": 0.6321, "y": 0.177, "connections": [] }, { "x": 0.6495, "y": 0.177, "connections": [] } ] } ] } ] } ] } ] } ] } ] }, { "x": 0.6387, "y": 0.0963, "connections": [ { "x": 0.6387, "y": 0.1363, "connections": [ { "x": 0.6599, "y": 0.1363, "connections": [ { "x": 0.6682, "y": 0.1363, "connections": [] }, { "x": 0.6599, "y": 0.1619, "connections": [ { "x": 0.6767, "y": 0.1619, "connections": [ { "x": 0.6767, "y": 0.1363, "connections": [ { "x": 0.6682, "y": 0.1363, "connections": [] }, { "x": 0.6856, "y": 0.1363, "connections": [] } ] } ] } ] } ] } ] } ] } ] } ] } ] } ] } ] } ] }, { "x": 0.7042, "y": 0.0956, "connections": [] }, { "x": 0.7216, "y": 0.0956, "connections": [] } ] } }, { "name": "processwater", "appearance": "auto", "flanges": true, "lineVariant": "solid", "start": "none", "end": "none", "fill": "#9E9E9EE6", "stroke": "#9E9E9EE6", "width": 0, "origin": { "x": 0.9252, "y": 0.9277, "connections": [ { "x": 0.5639, "y": 0.9277, "connections": [ { "x": 0.4397, "y": 0.9277, "connections": [ { "x": 0.4397, "y": 0.8528, "connections": [] } ] } ] } ] } }, { "name": "ProcessWater", "appearance": "auto", "flanges": true, "lineVariant": "solid", "start": "none", "end": "none", "fill": "#9E9E9EE6", "stroke": "#9E9E9EE6", "width": 0, "origin": { "x": 0.4468, "y": 0.8049, "connections": [ { "x": 0.4815, "y": 0.8055, "connections": [ { "x": 0.6627, "y": 0.8055, "connections": [ { "x": 0.6627, "y": 0.7275, "connections": [ { "x": 0.818, "y": 0.7275, "connections": [ { "x": 0.818, "y": 0.6287, "connections": [ { "x": 0.9334, "y": 0.6287, "connections": [] }, { "x": 0.6523, "y": 0.6287, "connections": [ { "x": 0.6523, "y": 0.7867, "connections": [ { "x": 0.4436, "y": 0.7867, "connections": [] } ] } ] }, { "x": 0.818, "y": 0.5368, "connections": [ { "x": 0.6332, "y": 0.5368, "connections": [ { "x": 0.6332, "y": 0.7717, "connections": [ { "x": 0.4447, "y": 0.7717, "connections": [] } ] } ] }, { "x": 0.818, "y": 0.4449, "connections": [ { "x": 0.6184, "y": 0.4449, "connections": [ { "x": 0.6184, "y": 0.7515, "connections": [ { "x": 0.4468, "y": 0.7515, "connections": [] } ] } ] }, { "x": 0.818, "y": 0.3869, "connections": [ { "x": 0.4388, "y": 0.3869, "connections": [] } ] } ] } ] } ] }, { "x": 0.818, "y": 0.8213, "connections": [ { "x": 0.4468, "y": 0.8213, "connections": [] } ] } ] } ] } ] } ] } ] } }, { "name": "processWater_3", "appearance": "auto", "flanges": true, "lineVariant": "solid", "start": "none", "end": "none", "fill": "#9E9E9EE6", "stroke": "#9E9E9EE6", "width": 0, "origin": { "x": 0.4468, "y": 0.7326, "connections": [ { "x": 0.6015, "y": 0.7326, "connections": [ { "x": 0.6021, "y": 0.3209, "connections": [ { "x": 0.524, "y": 0.3209, "connections": [ { "x": 0.524, "y": 0.2733, "connections": [ { "x": 0.4616, "y": 0.2733, "connections": [ { "x": 0.3784, "y": 0.2733, "connections": [ { "x": 0.2958, "y": 0.2733, "connections": [ { "x": 0.2958, "y": 0.2213, "connections": [] } ] }, { "x": 0.3784, "y": 0.2025, "connections": [] } ] }, { "x": 0.4616, "y": 0.2213, "connections": [] } ] } ] } ] } ] } ] } ] } }, { "name": "processWater_4", "appearance": "auto", "flanges": true, "lineVariant": "solid", "start": "none", "end": "none", "fill": "#9E9E9EE6", "stroke": "#9E9E9EE6", "width": 0, "origin": { "x": 0.2958, "y": 0.1206, "connections": [ { "x": 0.3784, "y": 0.1206, "connections": [ { "x": 0.4616, "y": 0.1206, "connections": [ { "x": 0.4616, "y": 0.0173, "connections": [ { "x": 0.528, "y": 0.0173, "connections": [ { "x": 0.6126, "y": 0.0173, "connections": [ { "x": 0.6482, "y": 0.0173, "connections": [ { "x": 0.6849, "y": 0.0173, "connections": [ { "x": 0.7216, "y": 0.0173, "connections": [ { "x": 0.7579, "y": 0.0173, "connections": [ { "x": 0.7579, "y": 0.0882, "connections": [] } ] }, { "x": 0.7216, "y": 0.118, "connections": [] } ] }, { "x": 0.6849, "y": 0.1673, "connections": [] } ] }, { "x": 0.6482, "y": 0.1998, "connections": [] } ] }, { "x": 0.6126, "y": 0.2424, "connections": [] } ] } ] } ] }, { "x": 0.4616, "y": 0.2025, "connections": [] } ] }, { "x": 0.3784, "y": 0.1903, "connections": [] } ] }, { "x": 0.2958, "y": 0.1998, "connections": [] } ] } }, { "name": "processWater_5", "appearance": "auto", "flanges": true, "lineVariant": "solid", "start": "none", "end": "none", "fill": "#9E9E9EE6", "stroke": "#9E9E9EE6", "width": 0, "origin": { "x": 0.7864, "y": 0.1092, "connections": [ { "x": 0.7864, "y": 0.1499, "connections": [ { "x": 0.7505, "y": 0.1499, "connections": [ { "x": 0.7258, "y": 0.1499, "connections": [] }, { "x": 0.7505, "y": 0.1907, "connections": [ { "x": 0.7147, "y": 0.1907, "connections": [ { "x": 0.6886, "y": 0.1907, "connections": [] }, { "x": 0.7147, "y": 0.2314, "connections": [ { "x": 0.6786, "y": 0.2314, "connections": [ { "x": 0.6517, "y": 0.2314, "connections": [] }, { "x": 0.6786, "y": 0.2732, "connections": [ { "x": 0.6158, "y": 0.2732, "connections": [] } ] } ] } ] } ] } ] } ] } ] }, { "x": 0.7624, "y": 0.1092, "connections": [] }, { "x": 0.925, "y": 0.1092, "connections": [] } ] } } ]