Given the diagram below:
With Pipes, Pumps, Valves, Vessels. - each of this should be clickable and can change state.
What is the strategy?
In SVG Editor, should I create Same size tile for each devices, and stitch them up in Coordinate Container?
Technically you could do this as one single SVG, but I'm not sure that is the best approach. Would probably be better to create a single SVG for each device type. I would recommend that you use a single SVG for all of the pipes. Each pipe "segment" would be a single group. You could then apply animation to the entire group as opposed to individual elements.
You can use a coordinate container, but that is not the only way to accomplish this, and really it depends on the amount of various sized screens and the range of screen sizes you are trying to accommodate with this view.
I will also say that, your choices for color here are confusing. I would strongly recommend staying away from red as a color used for the "de-energized" state. Generally, red would be used when you want to draw attention to something, for say an alarm condition.
The HPHMI guys would have a hay day with this screen.
Thanks for the tips.
If it would be a single SVG. How would I make individual device clickable?
Should I overlay them with transparent button?
Then I can selectively bind elements of SVG, to react accordingly.
Something like that could work, but I'd emphasize what @lrose said and say making individual SVGs for valves/blowers/etc. With a single big SVG, any small change requires editing everything, and future additions or changes would likely be a nightmare for you or others that come after you.
So the pipe network would be single SVG on the background. And Devices would be separate individual SVG on top of the background SVG.
Is this right?
No. As @lrose said:
I am still connecting the dots.
What does a pipe segment(single group) means? - a cutout portion of the diagram with pipes and devices?
So in the end, I will end up with multiple segment/groups. and stitch/align them up?
Full disclosure: I'm also trying to figure out the best way to do this kind of diagram.
From what I understand, you'd treat pipe segments just like any other component.
Likewise, I'm still trying to figure out a great way to do this, and the pipes and flow are the toughest part. I haven't seen an implementation I've loved yet. You could make individual pipe segment SVGs and group segments together to make implementing color changes based on flow or no flow easier if that's part of it. You could also do single SVGs for whole sections but you kind of run into the same problem of having to edit large sections to make small changes.
We've had great luck with displaying a View Canvas in front of an Embedded SVG. Use the SVG for labels, pipes/buses, and anything not dynamic. Then use your View Canvas to embed dynamic components on top of it.
But how do you do the stitching part? how do you align them on perspective?
If I have pieces of svg like pieces of a puzzle, Is coordinate container the way to go?
This is the one place where I actually use a coordinate container. I have custom width/height view props to keep the SVG and View Canvas sizes lined up. The more I think about it, you may not even need a view canvas but instead could have a child coordinate container. Placement of items on a coordinate view canvas can indeed be a pain, but the advantage is the instances are an array/dict separate from the view's structure. But you could just as easily have a coordinate view and drag/drop embedded views on top of it, such as...
What I meant by segment was a section of pipes that are not separated by another device. Meaning they would all contain the same fluid, and therefore would all use the same animation logic. I can not think of any reason for pipes to be clickable.
All pipes would be a single SVG, with each segment being grouped into a SVG group element. Which allows for a single animation per pipe segment.
I've found the performance of labels with styles is similar to SVGs at least on a typical P&ID drawing. I haven't tried it on a massive process drawing yet. I suspect a single SVG for all pipes would be a little better performance but also less flexible.
One cool thing about doing it that way is you can add a border radius style in addition to the gradient style to make the pipes appear to connect. See the screenshot to see what it looks like.
Corners are kind of tricky but I use a separate style for each type of corner. It's an offset radial gradient. Color animations are just a style swap on a transform if needed.
You can even label the pipes because the pipes are labels and you can offset the labels if you want.
edit:
I forgot to mention, I typically put the pipes in a coordinate container to keep them together. This lets you hide the pipe layer if it's in the way and overlap labels to "connect" pipes.
What you should do is create basic templates and UDTs for each device/equipment in your system that matches up with the AOI for said device/equipment, doing it in such a way that I can add multiple different instances to the same window.
For instance, for a pump it would be something like:
(for vision) I use basic rectangles for pipes, instead of the more detailed ones. I use the built-in P&ID pipes for perspective. I've also developed a method of using coordinate containers for process layouts/overviews on Perspective.
With the upcoming release of drawing tools in 8.3, the single pipework SVG should be significantly less burden to edit it (hopefully!).
I recently did a comparison of initial load speed comparing different methods of drawing pipes, where I added 128 pipes to a page for each, and timed the load speed with a screen recorder set to 60fps (16ms resolution).
I didn't test an SVG as I haven't used this method before, simply due to the effort involved in maintaining them without drawing tools, however I'd expect it to be similar to the piping tool.
I would expect the piping tool and SVGs to be nearly exactly the same depending on the complexity of the SVG, as raw SVG does afford more flexibility, but at load time the piping tool is just SVGs.
I’m not sure if they are compiled into a single SVG, individual SVGs per segment, or individual SVGs per pipe.
I got an idea.
Create the whole P&ID diagram on SVG Editor.
Embed them on Perspective.
For clickable elements, like pumps and valve.
Just add transparent button overlay.
Then bind the fill property of the SVG Elements accordingly.
This sounds so easy and obvious that it might not be the right way.
Keep in mind that if you ever need to edit the SVG and reimport, you'll also need to redo the bindings.
This might be interersting for you to make svg a bit more interactable, esspecially if you end up going for a single big svg. By adding in id's (name property on elements) you can easily script something to triggered based on what name was clicked, without having to make invisible buttons.
