Hi,
I want to design one view like below.
Can anyone suggest how can I do this design?
Thanks…!!!
There are a few options that are regularly discussed on these forums. Take a look at this thread for some ideas.
SVG’s are the way to do it (they aren’t the only way to do it, but they are probably the best way).
You can copy this into a text file, save it as a .svg file and then drag it onto your view, this will give you a blank SVG.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="50mm"
height="50mm"
viewBox="0 0 50 50"
version="1.1">
</svg>
From there it is just a matter of understanding how to work with SVG’s in general and in Ignition.
Here is an excellent resource for SVG’s - Pocket Guide to Writing SVG
This will allow you to understand what all the cryptic information in an SVG is actually doing and you’ll be writing (drawing?) you’re own SVG’s before you know it. Any thing that gets really complex it might be worth downloading an app like Inkscape, but for simple things understanding how to do it will make it pretty quick.
For instance if you want an svg with a line and a circle that can be done very easily. Drop in the blank svg, then add the following structure under the elements property:
The result will be this:
1 Like
You can create SVG graphics in Inkscape for free and import/embed them.
+1 for using Inkscape. Make sure to save as an optimised SVG. I use the settings here:
1 Like
Thank you guys, I will try this.
Surprised no one mentioned the new pipe drawing tools in 8.1.10. I created this example in a couple minutes.
The pipes shown in the image are using P&ID style rendering. Numbers are just labels with a background color and border radius. As you’re dragging the pipes, press Shift to make them angled.
(And here’s the link to the user manual pages: Perspective Pipes - Ignition User Manual 8.1 - Ignition Documentation )
4 Likes
ok, Thank you.
Hi,
I have installed 8.1.10 version but I cant see any componant like pipe.
Can you please confirm once, which version you are using?
Thanks.
You won’t find the pipe drawing tools in the component palette. They’re in the top icons.
- Create a Coordinate View, or put a Coordinate Container inside a view and select into it.
- Click that icon shown above.
- Click in the view anywhere to start drawing pipes. (Note that if you hold Shift, it’ll let you draw angles, in addition to up, down, left, and right.)
If you need further reference, just follow that link to the user manual. It’ll walk you through, and has some animations to demonstrate along the way.
1 Like
okay. Thanks a lot.
May be it is because there are some performance issue and some feature limitation in pipeline. As I posted earlier in related thread for pipeline, after sometime drawing tools get laggy and it is hard to draw.
Also there is no CSS style support for pipeline yet.
Is that only for your monster screens Nader? Or how many pipes are you talking before it becomes noticeably slower?
My only experience is for monster screen as you described which I believe is very common in actual P&ID and diagrams.
My screen get laggy when I reach half of pipes that you seen.
I did some projects with 10x more than that before with SVG and get very nice result.
In one on one comparison even with lower numbers of pipes vs elements, the SVG is always winner.
The only Con in external drawing tools is I have to copy and paste the drawing every time I make changes but it is worth the effort.
You can even see this performance problem when you compare perspective pipeline with Vision drawing tools.
I really hope the future perspective drawing don’t use same technology as pipeline use, because drawing tools should have smooth interface otherwise user can’t draw complex shap.
Also I hope we have full style support in pipeline and drawing in perspective which doesn’t have it right now.
2 Likes
Really, it was because I don't have 8.1.10 yet, so SVG's are the only way for me as of now. But hearing your feed back is less than encouraging.
the pipes are made out of svgs tho, so not sure what is so different
Nader - Gotcha. I also hope performance improves in later versions for very dense screens. For simple to medium complexity drawing, I’ve found it seems to work well in this initial 8.1.10 release.
For the screenshot above, I wouldn’t expect any performance issues, as it’s relatively simple compared to some of the denser screens. It’s also nice to be able to edit and modify the pipes inside the designer without needing to use external tools. As you said, if you want to do simple colors for animations it works great but if you want advanced CSS styling with gradients and moving animations you don’t have those options available at present. If Anita’s target design is what’s contained in the first screenshot I’d probably use the piping tools rather than SVGs, and if the target design is more complex or visually dense, SVGs might still be the way to go.
1 Like
Me too, I think so before, as Kevin said for medium detail it is good, but when the screen has more details moving mouse slows down, selecting objects has delayed, and drawing tools is so laggy.
You can check it but you need to draw something really big that take one day 
In my case Its a simple design, will go with drawing tools in designer.
Thank you all for your suggestions.
I know this is a old forum, but do you know if you can edit imported SVGs to say change color based on tag conditions of multiple tags?