New Feature: Perspective Piping

If only you could add id's to the svg groups it would have been easy enough to make it for free.
But the name property given in the designer doesnt do anything at all. So it required quite a bit of work, which i cant make for free sorry...

I have no idea if the recent updates for the svg import now allow id's though? Damn i should have asked about this when they asked for the svg update ideas xd

I think you misunderstood what I meant by available to the public - I meant available at all, paid or otherwise :slight_smile:

1 Like

Sooo i updated to the latest nightly and it seems that svg groups finnaly have id's and names! This make a click script a lot easier :smiley:

2 Likes

welp... i just had to try it out didnt it :crazy_face:

Required version 8.1.22

Behold! JS INJECTED SVG CLICKER
jsInjectedSvgClicker.zip (3.6 KB)

edit: I made the value of the binding become the name it writes to in the view.custom props

Be sure to set the custom prop back to null after handling your event so you can trigger the onchange events on the prop :wink:

It should only detect things inside this view. Haven't fully tested it though.

4 Likes

you mean custom anchors for Piping?

It's undocumented, but if you add class ia_drawingComponent__pipingAnchor to an SVG Drawing Element, it'll act like an anchor.

In my example I converted a Sensor Symbol component to a drawing, it has some of these anchors already built in. I then modified the anchor element, and toggled piping draw mode on and off to move it (unfortunately the code doesn't detect this change as it's happening)


3 Likes

Hi @mperkins

I'd like to show you what is actual the difference in the performance of using Perspective native pipelines tools and SVG drawing and importing for a big page. Here I start to use the Perspective pipeline for my P&ID but in the end, the Runtime Performance is very bad that rejected by the client.

Perspective Pipeline:

  • Take 3 days to draw the pipeline as the Designer's UI is getting too sluggish as I draw more pipelines. - Runtime Performance is very bad as it cause even objects which are not part of the page is getting slow. UI is not usable (as shown in the video the top menu is slow in this case)
  • Moving Components in the designer is not possible as UI is very laggy.
    Note: Even Converting the pipeline to SVG drawing by Perspective (v8.1.22) does not help at all. it seems the conversion method creates too much extra metadata that makes UI very slow.

SVG drawing in Inkscape and import it into the Perspective and put it as background:

  • Take 5 hours to draw the pipeline.
  • Runtime Performance is good and the user can work with UI.

For me using Perspective is fun and enjoyable if at least we get the same performance as normal SVG. Back and forth between Inkscape and Perspective is annoying but until fixing the performance of the pipeline this is my workflow.

3 Likes

Just to clarify Nader, by import you mean not embed but to add it to the image management ie stored in the config.idb?

Ans by "background", you mean the css background prop? Or do you just mean use an image component and just put it behind everything else?

Also, this is super useful to know (unfortunate though) ! Thanks for sharing

This is good insight Nader, thank you. I'm currently heads down working on the Drawing Editor, thus far performance looks good and it avoids many of the UI performance bottlenecks being experienced in Perspective- including with Piping. I look forward to implementing some of the techniques used in it to improve performance in Perspective (and Perspective Piping).

2 Likes

This is my biggest fear when I think about drawing tools in Perspective: performance. With performance issues in general with Perspective as it is, I just can't see how drawing tools can be any more responsive. But if this hurdle has been overcome, then that's fantastic news and I hope it's applied to everywhere else as well.

By import mean embedding not using image management. Using image management causing loading problem over internet.
By background I mean put that SVG embedded object behind all of my objects.
Using CSS background properties is good but you can not access the CSS variables for colouring your pipelines.

Good news.
I wonder is it technically possible when user click to edit something you open default OS app for editing SVG?

This way IA don't need to Dev any drawing tools and everyone use what ever they comfortable with.
Many software do this technique.

One important thing that I face during my Dev time that all fancy tools in drawing tools like layering, proxy, xml editing for I'd,... is really important for high efficiency development, so I believe for IA Dev team as SCADA package it will be really hard and costly to develop. Because if we have very simple drawing tools like vision I personally prefer to use external editing tools for big pages and only use native editing tools for very small and simple drawing.

1 Like

Cool, that's how I thought you would be doing it, but the wording tripped me up. I actually don't like the word "Import" used when you drag in an SVG into Perspective, as you're importing it into the image management tool and you're also importing it into Perspective, so the terminology used is confusing. Importing into the image management should use a different term, like "Upload Image" or something

Thank you for taking the time to test this out.
Our clients usually want to have each segment color in depending on the running pumps and valves etc.
And if i'm correct then thats not possible with this method?

Slightly off-topic:
I assume you're also using SVG's for valves etc. Are these all embedded views linked to a UDT?

1 Like

Might be able to do something with that with the markdown component and/or some changes to the svg.
Not sure about performance though. I did something once (not in perspective) that used a bunch of the same svg but needed different colors for each svg. it improved our performance, but idk how it will impact a single big svg. and the perspective markdown ofc. in theorie it should cache the img so coloring should be fine...
i'll take a look into this. (how it worked, not the performance)

1 Like

Here you go, seems to work in perspective.

You'll have to see if its any faster though.

You'll have to create an svg file

Add in a ref to a script, and use some defs and refs for the params.

(perspective)
embedsvg.zip (3.6 KB)

code ='<div height="100%" width="100%"><object height="100%" width="100%" type="image/svg+xml" data="/system/images/param.svg"><param name="fill" value="'+value.fill+'" /><param name="stroke" value="'+value.stroke+'" /></object></div>'
return code

(svg, had to zip it because else its invisible because of the script)
param.zip (414 Bytes)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" width="100%"
    height="100%">
    <defs>
        <ref id="paramX" param="fill" default="black" />
        <ref id="paramY" param="stroke" default="black" />
    </defs>
    <g>
        <rect width="100" height="100" fill="url(#paramX)" stroke="url(#paramY)" />
    </g>
    <script type="text/ecmascript" xlink:href="https://dev.w3.org/SVG/modules/ref/master/ref2.js"></script>
</svg>

if you try let us know if it performs any better :slight_smile:

1 Like

Of course it is possible, simply add Id to pipeline that you want dynamic color.
I already did it for huge SLD diagram and make all line color dynamic base on CB.
Yes all embedded view with udt tag path.

It is very interesting to see this method.
Using CSS background image make my line edgy and low quality.
But this method is really interesting for some other idea.

the svg on click things i made will work different too though... If it will work at all.
But yeah you can try it out for some things atleast:)

1 Like

Since there doesn't appear to be styles, what is the best method for using Perspective Styles for pipes, or really any component where we need to reference a property like fill or stroke vs styles? I can reference themes, but that doesn't help if we need to animate.

The idea here is to use a global color map where we can manage in one location and that gives the option for animation, which I usually use Perspective Styles for.

Hello, while researching your issue I discovered a bug in 8.1.23 :slightly_frowning_face: , converting pipe's to drawing results in an incorrect viewBox and position being applied... Luckily I have a fix queued up for that.

Anyways, my recommendation is to convert the pipes to a Drawing (introduced in 8.1.22), and then apply a style class to the drawing. The style class can be bound to create an animation.

Here's my example project where I have Pipes(converted to Drawing) with a style class bound to [System]Gateway/UptimeSeconds , and a map to convert that value to different style classes.
Forums_Piping_2023-01-11_1014.zip (10.1 KB)