Perspective Drawing P&ID Views & Pipes

Has anybody been able to find the best way to draw P&ID type views using piping (with gradient shading) in Persective? The symbol factory has a nice set of 3D piping elements but it is a nightmare to get them the proper size and have the gradients line up from piece to piece. Inkscape was my next thought but I’m stuck on how to use the gradient around a pipe corner or intersection. Finally, alignment of the pieces is also a problem. I’m looking for suggestions…otherwise I’ll just use basic lines(imported from Inkscape of course) in a super fancy new HMI which I’d rather not do. Thanks


Just wanted to jump in and let everyone know that being able to draw pipes between various components in a manner superior to Vision is on our list of features to include this year.


1 Like

Thanks for your reply Yousuf. Although I am encouraged by the future features and abilities of Perspective coming down the road in the next year, I am looking for a short term work around so that I can use Perspective at a plant site in July. Anything helpful would be appreciated!

Hi Yousuf,

What about piping in Perspective… we have a lot of customers waiting for this function (with responsible support) in water industry…

Thanks for the update.


Piping is actively being worked on. There isn’t a time frame for this feature though as there is a lot involved. Sorry I don’t have a better time frame :frowning_face:

1 Like

This feature is months away. It could be 1 month, 4 months, or something in between. We have a functional proof of concept, but there are still many things that need to be worked out. Like, @jcoffman said, it’s actively being worked on. Hopefully you’ll be building P&ID’s before you know it. :slight_smile: We appreciate your patience.


In the meantime though, from what I’ve read on here, most people (myself included) are just using Labels with borders set. They’re not ideal in terms of developing with, but they do look nice and you can add a small border radius to make them look nicer. You can’t apply a pipe gradient to it, but any HMI standard (E.g. ASM, HPHMI, etc.) will tell you not to do that anyway, so it’s perfect for now

Anyone (@jcoffman, @ynejati) news on progress / timeline for integration/transfer of Vision

  • line
  • pipe segment / joint
  • (paintable canvas)


1 Like

First party piping is coming…although six months later, I’d still probably stick to Yousuf’s 1-4 month estimate :frowning: - it’s going to hopefully do everything you’d want out of the line & pipe segment Vision components, only a whole lot better.

A Paintable Canvas component as it existed in Vision is basically impossible in Perspective - it was possible in Vision, because the ‘painting’ logic was being run on the JVM - we just had to execute the supplied Jython code. There’s no way to execute Jython on the browser’s frontend, so there’s no way to have a ‘live’ component view that’s actually raw drawing primitives being supplied by the backend. The closest option I could potentially see existing would be a kind of ‘server-side rendering’ component, where a Python function is run to return a dynamic component hierarchy, allowing for really flexible containers.

But, if you’re looking for something for P&ID…honestly, it’s coming, if you’re able to wait for it.

In the meantime though, labels with borders set are your friend :face_with_raised_eyebrow:

This might be a silly question, but when you say pipes do you just mean pipes specifically or will we also get regular lines (e.g. for electrical wiring)?

Aren’t they one and the same? :wink:

Thanks for the update @PGriffith! Will the new line/pipe feature have auto-routing, add/remove points, bend-radius etc? Also do you have a forecast for which version release this feature is slated?

Currently the implementation is part of the coordinate container - you can add pipe segments, join them together (the pipes automatically route between points) and change their appearance locally or globally, similar to how smart symbols work.

We don’t have it targeted to a specific version (we release on a ‘release train’ model; if a feature isn’t ready when the train leaves the station, it doesn’t make it) rather than a ‘waterfall’ model, where features are slated to particular releases.

There is no auto-routing. We purposefully designed them to be “dumb points” to give the designer maximum control.

They are straight lines(effectively-- though there is a “wave” line style) between points within a Coordinate container, with the Designer able to add arbitrary number of Pipes, and each pipe being made of arbitrary numbers of points.

While I can’t promise you a release version, I will say that the feature is pretty far into development, and I’m excited to share more once we get close to shipping.


@mperkins / @PGriffith : thanks for the updates / details!

In general terms, without exactly knowing the underlying Perspective technology stack (react, mobX, JxBrowser for wsClient, GSON for JavaObj <–> JSON, Eclipse Jetty as backend)?, a simple poly-line with editable points / line-style should be possible in Ignition/Perspective – no?

It may just be my use case, but we are trying to visualise product flow between buffers (bins/tanks) via mover / route equipment (conveyors, pumps, diverters, valves…) to show (in-)active routes and routes with product flowing and which type (indicated by color). Our to-be-replaced system has the concept of a connection (source to target – including knowledge of what is connected at which point, e.g. for manifolds, turnheads etc.). This is a quite large network of connections/lines/pipes, even the current system (80/90s area) has a rudimentary concept of linking/connecting two elements and add/remove points and move line segments.

The current proposal of having individual segments / dumb points seems awkward especially for a HTML5 based UI - vs. adding one polyline component I would be assembling 10s of segments… Would it not be possible for the pipe/line component to have an array of points (for straight lines of length = 2) that the end user can add remove entries from initially, long term via right-click add/remove points on the UI?

Without having searched extensively this: (albeit 5ish years old) seems to be somewhat in the lines of what I was imagining…

I appreciate the feedback. I think I gave the wrong impression when I said that they’re just dumb points. What I meant is that each point has an X, Y coordinate which are fixed (ie no auto routing). In that way, they are “dumb”.

But there are other ways in which they are “smart”. The props for each Pipe is actually a connected graph- each pipe has an origin point, and that origin has n number of connections, and each of those connections may have n number of other connections. It’s a straight line(effectively) from each point to each of its connections- but the Pipe itself encompasses the entire connected graph. This allows for complex pipes- one origin to unlimited connections.

Furthermore there are comprehensive drag and drop tools in the Designer for moving, rotating, combining, cutting, pasting, changing z-order, etc. As well as style options for fill, stroke, line style, appearance(think P&ID, Simple, Mimic, just like Symbols) etc.

While this won’t be the be-all end-all of P&ID piping, it is already much more impressive than the Vision implementation.


@mperkins, if I understood right, a single line with 3 points in a right angle would have an origin with one connection, and that connection would in turn have another connection–making a 3 point line. That sounds good. We would use multipoint lines in Vision like this, but of course they couldn’t split into additional paths without backtracking.

It’d be slick if pipe connections could be attached to symbols so pipe end would move when the symbol it’s bonded to is moved. Ideally, we could define such connection points on our own SVG “symbols” in some format, to give them predefined pipe/line connection points.

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? If so, this could become a nightmare to then be able to select anything if you have a pipe that stretches the width of the page and might stretch to the top as well. We already have this issue with using Labels and borders with right-angled pipes. We need to keep these as small as possible so that we can still actually design the rest of the page without constantly clicking on the wrong things…

The Alt+click to select components beneath will certainly help here, as was implemented in Vision. But without this, it’s a nightmare

@mperkins, if I understood right, a single line with 3 points in a right angle would have an origin with one connection, and that connection would in turn have another connection–making a 3 point line.

Correct, you could do it that way. You could also have it so the origin has two connections. That would place the origin at the corner of that pipe (Piping is smart enough to recognize that origin as a corner, rather than an “outlet” if the origin has more than one connection).

It’d be slick if pipe connections could be attached to symbols so pipe end would move when the symbol it’s bonded to is moved. Ideally, we could define such connection points on our own SVG “symbols” in some format, to give them predefined pipe/line connection points.

So, we really wanted to avoid automatic routing, particularly at runtime. 1) It’s tricky and full of edge cases 2) We wanted to give the user maximum control where their pipe is routed. With that said in the Designer we have snap points- with most components they’re North, East, South, West respectively… but with Symbols we have some “natural” points. Think the opening for a valve. As you’re dragging a point, it’ll snap to that location on the Component… however if you move the Component, the pipe point doesn’t stick. Again… we wanted to avoid automatic routing, particularly at runtime. If you really insist that the point stick: the point’s coordinates are a prop, and you can stick a binding on it.