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).
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.
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?
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)
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 
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:)
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 
, 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)
@mperkins i had open the popup when the pipe clicked but i could not set the mouse position from the self and events ,
how to get the current mouse pointer (x,y) position for opening the popup
You could use an onClick event, the event objected returned contains both the clientX/clientY and screenX and screenY
Your comment does give me an idea for an enhancement though... For drawings it would be nice if there were an onElementClicked with a property for the elementAddress for the element within the Drawing being clicked. Similar to how there's a onPipClicked component event
@mperkins can we get the clientX and clientY event for the onpipeclicked also, so it would be useful to open the popup on the mouse pointer position
Hi @mperkins,
Some Bugs to report:
Switching between Pipe and Component mode in the designer will cause the Z-order option in the toolbar to get disabled and I have to close and reopen the view to make them active again.
The binding to individual pipes fill property will hide or disable after opening the view or editing other pipes. This one is a little crazy to show.
Some Ideas for improvement:
Optimising the result of generating SVG of Pipe with Convert To Drawing Tools in Perspective. Right now it generates many properties which cause the system to slow down.
option to disable snap in drawing mode. It is sometimes impossible to draw pipe with having Perspective components in the view.
Hi Nader,
Thank you for reporting these issues.
- Switching between Pipe and Component mode in the designer will cause the Z-order option in the toolbar to get disabled and I have to close and reopen the view to make them active again.
I'll look into this and create a ticket for it.
- The binding to individual pipes fill property will hide or disable after opening the view or editing other pipes. This one is a little crazy to show.
I think I know what you're talking about with this. It's an issue that's not specific to piping, but still frustrating non the less. The issue is when you modify an array (which props.pipes is), the propconfig (bindings etc) aren't always maintained. Under the covers this is because the propconfig for any given prop is a separate JSON object that points to a specific array index in the other props(hopefully that makes sense). There is an open bug for this, and I can see how it can be frustrating and frequently encountered with piping.
- Have a short key to switch between pipe and component modes? It is annoying to do this by mouse.
- Active ctrl+A for Pipe Move Tool Mode
long term the plan was to combine pipe and component modes, unfortunately I don't have the bandwidth to be working on that.
- In Pipe Move Tool Mode we have arrow keys to move pipes.
- Adding a Flange option to the Start and End of Pipes.
- change the direction of the arrow by the user. Sometimes we need to add arrows in a different direction of drawing pipe direction.
- Have the option to change dash space in Line Variation Dashed. (ex 10 2)
- Have a full standard of P&ID pipe type as Line Variation:
- Optimising the result of generating SVG of Pipe with Convert To Drawing Tools in Perspective. Right now it generates many properties which cause the system to slow down.
- option to disable snap in drawing mode. It is sometimes impossible to draw pipe with having Perspective components in the view.
These are all great ideas for enhancements. I'll make some enhancement tickets to follow up with.
