# P&ID screen in Perspective version **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [February 3, 2023, 12:20pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400 "2023-02-03T12:20:23Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![p.srikanth0707](https://avatars.discourse-cdn.com/v4/letter/p/e47774/32.png) [@p.srikanth0707](https://forum.inductiveautomation.com/u/p.srikanth0707)\ **Post date:** [February 3, 2023, 12:20pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/1 "2023-02-03T12:20:23Z")
Hello, Is it possible to make P&ID screen ? Example something like this, i understand the pipe option from the menu but not confident, i feel difficulty working on P&ID stuff in perspective version. Regards, Srikanth ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/3/d3899d5b61e525773607ad94b2238511d5922e87.png) ---
**Author:** ![code\_skin](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@code\_skin](https://forum.inductiveautomation.com/u/code_skin)\ **Post date:** [February 3, 2023, 12:42pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/2 "2023-02-03T12:42:54Z")
Hello, you can quickly create P&ID screens with Perspective Piping Tool. Have a look here: > **[Perspective Pipes | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/working-with-perspective-components/perspective-pipes)** > > Pipes can be drawn within a coordinate container. These pipes can be used to visualize flow between separate objects on a view. and here > [@New Feature: Perspective Piping](https://forum.inductiveautomation.com/t/new-feature-perspective-piping/49919): > > Introducing Perspective Piping, a major new Coordinate Container feature available in the next nightly. Perspective Piping allows you to quickly draw pipes within Perspective. A new Coordinate Container Prop named "pipes" has been added to the coordinate container. Each pipe is an object containing a name, appearance, various appearance specific props, and an origin. An origin is the (x, y) start point for the pipe. Each origin may have any number of connections, and those connecti… _edit_: updated doc link. ---
**Author:** ![louagejasper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/louagejasper/32/86311_2.png) [@louagejasper](https://forum.inductiveautomation.com/u/louagejasper)\ **Post date:** [February 3, 2023, 12:58pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/3 "2023-02-03T12:58:18Z")
You surely can. You can checkout what @nader.chinichian build on his Youtube channel, particularly [this video](https://www.youtube.com/watch?v=6w8lW19s2y0&t=81s&ab_channel=NaderChinichian). ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [February 3, 2023, 2:02pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/4 "2023-02-03T14:02:19Z")
Yes. You could do it even in the earliest versions of perspective and it has gotten increasingly easy to do it in subsequent versions. I would strongly recommend learning a little bit about SVGs if you're planning to do it. Ignition allows you to embed SVGs into your perspective screens or you can load them into the image library and reference them in the Perspective screen. The image library is not contained in your gateway backup so I would recommend embedding SVGs to reduce future support hassles. Any Ignition version after 8.1.23 and possibly earlier will embed most SVGs and retain most of the graphical details. It's also good to learn how to minimize your SVGs to improve load time. Perspective's ability to embed custom-drawn SVGs allows you to make basically any HMI screen you can imagine. I use Inkscape to draw my SVGs because it's free and I could find tutorials on youtube to learn how to use it relatively quickly. Colleagues and customers frequently tell me that they can't believe that a screen is in a perspective app because of the level of graphics and fast load times. Pipes can be done with the pipe tool or with labels that have their background painted either by a style class or simply a background color animation. I would recommend containing your pipes in a coordinate container with an obvious name such as "pipes" to keep things tidy and to allow you to manipulate pipes independent from moving other things on screen (deep select). Here is a screenshot of some pipes that I did using style classes and labels ![Pipe Styles](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/a/8af354583dbe880a2128fac0dfc15405da6fc849.png) If you want to animate things on screen I would recommend using CSS for that. you can animate things by manipulating properties but you will get better performance from CSS. There's a lot that could be said. It's one of those things where you really impress yourself with your first implementation and then look at it a month later and are embarrassed by it. There's a lot to know and it's easy to start. ---
**Author:** ![brandon1](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@brandon1](https://forum.inductiveautomation.com/u/brandon1)\ **Post date:** [February 3, 2023, 2:19pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/5 "2023-02-03T14:19:03Z")
Quick question. Do you draw your entire screen in Inkscape or just individual components in Inkscape? What is your upper level container type? Is it a Flex container? ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [February 3, 2023, 2:21pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/6 "2023-02-03T14:21:50Z")
For me, I try and draw as much in Inkscape that makes sense. I typically use coordinate container. ---
**Author:** ![brandon1](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@brandon1](https://forum.inductiveautomation.com/u/brandon1)\ **Post date:** [February 3, 2023, 2:24pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/7 "2023-02-03T14:24:34Z")
Don't you find it hard to animate the objects within your Inkscape import? If you need to make a change to it, how to you make sure your animations don't go away when you re-import the change? ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [February 3, 2023, 2:27pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/8 "2023-02-03T14:27:15Z")
Using bindings in the SVG, yes, it's painful. We use a script and a custom property object that contains the references, we bind there. So we can change the SVG at will and nothing is broken. The biggest challenge is click events. We go old school and just plop a component where we need to capture a click event. ---
**Author:** ![brandon1](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@brandon1](https://forum.inductiveautomation.com/u/brandon1)\ **Post date:** [February 3, 2023, 2:29pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/9 "2023-02-03T14:29:16Z")
So is the win with one big SVG the ability for it to scale? If you have it in a coordinate container that has percent mode, will it shrink pretty well for a screen size from iPad to 27inch monitor. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [February 3, 2023, 2:31pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/10 "2023-02-03T14:31:58Z")
To me the win is performance. If you have multiple SVGs load times can suffer. But, scaling is a consideration with multiple SVGs, you may find things don't always line up, maybe a pixel off here and there. Not a problem if it's one SVG. And yes, they scale well, although, it may be hard to read depending on what you scale down to ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [February 3, 2023, 2:32pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/11 "2023-02-03T14:32:52Z")
That all varies. Usually for a visualization screen I'll use a coordinate container because I want a high level of precision to where I am putting things with respect to each other. If I am making a mobile-friendly one I will use a breakpoint container and use coordinate for the version of the screen designed to operate at a desktop resolution and will breakpoint to a custom mobile screen if the screen is loaded on a mobile resolution. Sometimes I will nest a breakpoint inside a breakpoint to support middle-resolutions for specific devices. It can get really complicated and you kind of work all of that out by testing your screens on the target devices and find the fit. I forgot to answer your question about what I draw. I typically draw individual devices as separate SVGs. You can draw the entire background but that is a lot less flexible an inconvenient when people ask you to change things. I would strongly recommend drawing each device as a separate SVG. ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [February 3, 2023, 2:35pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/12 "2023-02-03T14:35:35Z")
I would embed the new SVG and copy the bindings over from the old one. ---
**Author:** ![brandon1](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@brandon1](https://forum.inductiveautomation.com/u/brandon1)\ **Post date:** [February 3, 2023, 2:36pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/13 "2023-02-03T14:36:29Z")
> [@Steve\_Laubach](#): > > It can get really complicated and you kind of work all of that out by testing your screens on the target devices and find the fit. This ^ I know that Perspective has some amazing features over vision but I still enjoy designing in Vision because it is straightforward. My worry with using a Coordinate container is that they will get messed up when the customer changes their iPad generation for example. I appreciate the responses. I still need more time to figure out the best approach. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [February 3, 2023, 2:39pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/14 "2023-02-03T14:39:18Z")
> [@Steve\_Laubach](#): > > I would embed the new SVG and copy the bindings over from the old one. Fairly daunting if you have several hundred bindings no? ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [February 3, 2023, 2:43pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/15 "2023-02-03T14:43:39Z")
If you're using inkscape, make sure you select to save them in the optimized format. It reduces the size a LOT. I tested a detailed valve drawing I made and animated it with 790 instances on the screen (performance test) animating on the same tag. It was almost instant. I could watch it redraw when I used an unoptimized (default) SVG from inkscape. For click events I have been overlaying a button and styling it to be invisible. This lets you use an "on action performed" event. I prefer to put the SVG and the button inside a container to keep things tidy. I don't like the object browser tree to be a cluttered mess. ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [February 3, 2023, 2:47pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/16 "2023-02-03T14:47:08Z")
That would be. I would certainly be looking for a better option if I encountered that kind of a change requirement. ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [February 3, 2023, 2:48pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/17 "2023-02-03T14:48:15Z")
Try making a simulation of the kinds of things you're thinking of making. You can test your test screen using a web browser's emulation modes to see how things are behaving. ---
**Author:** ![DSI600](https://avatars.discourse-cdn.com/v4/letter/d/ad7895/32.png) [@DSI600](https://forum.inductiveautomation.com/u/DSI600)\ **Post date:** [February 3, 2023, 3:51pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/18 "2023-02-03T15:51:26Z")
I have been setting our coordinate container which houses the P&ID screen to fixed. It works well IMO on phone and tablet with no breakpoints needed. The user can scroll and view the P&ID. I also use a style "zoom" and if IOS or Android put ".6" then will zoom out on the phone and tablet then the user can zoom in by pinching to get closer to the area they want. Make sure the "zoom" style is put back to 1 for desktop enviorments. ---
**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:** [February 3, 2023, 4:37pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/19 "2023-02-03T16:37:09Z")
> [@Steve\_Laubach](#): > > The image library is not contained in your gateway backup Citation needed. Images you upload to Image Management in the designer are stored in the internal DB, so they're absolutely stored in the gateway backup. Not sure what else you might mean by 'image library'. ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [February 3, 2023, 4:49pm UTC](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400/20 "2023-02-03T16:49:56Z")
I stand corrected. I thought I had restored a backup at one point and my images were gone. I was referring to the thing under "Tools/Image Management" menu in the designer. [Next page](https://forum.inductiveautomation.com/t/p-id-screen-in-perspective-version/69400.md?page=2)