New Feature: Perspective Piping

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