Found SVGs in demo, do they exist?

Hello all, not sure if I am asking in the right place, but I am currently learning Perspective, and have been looking at the demos and cloning components of them for practice.
While there, I found a pipe network in the water demo. https://demo.inductiveautomation.com/data/perspective/client/OnlineDemo/apps/water/Overview
I used the browser inspector and these pipes exist as individual svgs, and are what I would expect if we could draw in Perspective.

Do these actually exist somewhere, or is this a case of “we make it, we open back end and do what we want to demos” and not actually representative of what the software can do.

Thank you for reading

1 Like

Presently you create the SVGs in other software and then import into Perspective. Drawing tools are planned.

Also, 8.1.0 (currently available as an RC) has ‘Smart Symbol’ components that take the place of the hardcoded pumps, valves and tanks on that diagram. A (near) future release of 8.1.X will make those components ‘smarter’, by adding support for creating piping between those components.

I am fairly new here, what does RC mean?

Release Candidate, I think it’s a version of software that is Mostly, Probably, ready to work.

Those that mean the the pipes used on the demo are SVGs? I am having a hard time reverse engineering the demo. How do I get viewBox?

When I pulled it apart, 8.1 did not exist. I found it through the inspect tool in chrome. The pipes are SVGs. Not sure how to get a viewBox.

1 Like

If you inspect the page, you can see the viewbox:

If you have the designer project, it should be defined in the props of each “pipe” as well.

FWIW, a lot of us are using the Label component with borders as pipes instead of SVGs as they’re far easier to work with.
I made a ‘Pipe’ view which I use (v8.1.0 LTS) that has params to display top, left, bottom, and right borders / pipes. I have a boolean ‘flow’ param which I can bind to to change the colour of the pipe to indicate that it has contents in it, as well as a param for the type of contents which use Perspective Styles to change the hue of the pipe colour. My styles link to css variables for colours, but you can change them to ‘magic’ colours to demo:
Pipe.zip (3.5 KB)