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
Hello, you can quickly create P&ID screens with Perspective Piping Tool. Have a look here:
https://docs.inductiveautomation.com/display/DOC81/Perspective+Pipes
and here
You surely can.
You can checkout what @nader.chinichian build on his Youtube channel, particularly this video.
2 Likes
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
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.
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?
For me, I try and draw as much in Inkscape that makes sense. I typically use coordinate container.
1 Like
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?
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.
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.
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
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.
I would embed the new SVG and copy the bindings over from the old one.
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.
Fairly daunting if you have several hundred bindings no?
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.
That would be. I would certainly be looking for a better option if I encountered that kind of a change requirement.
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.
2 Likes
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.
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'.
1 Like
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.