[BUG-11342] Perspective - Can't draw any shapes

Build 8.0.0-beta0 (b2018110708)

Perspective Module. I can’t seem to draw any basic shapes in a View (rectangle, circle, line, etc). I select a shape tool and clicking and dragging on the View just seems to draw a selection box to select other objects on the screen.

2 Likes

Those drawing tools are only for use in Vision. You probably have that toolbar due to resetting your panels, which then places all the toolbars on your designer regardless of the context you are in. This is a bug we are aware of. Navigating to Vision in your designer and then back to Perspective should get rid of it as well as any other toolbars that don’t work in Perspective.

1 Like

Ah, that worked going from Vision back to Perspective, thanks.

Are there shape drawing tools in Perspective? I can’t seem to find anything

There aren’t any at the moment. The closest you’d get is using the image or icon component for any sort of graphics along those lines.

There’s the ‘drawing’ container. You can drag svgs into the view and it will make a drawing component, like it would make a group of shapes in Vision. May want to get a vector image program to make whatever you want, then drag & drop the file into the view.

3 Likes

Thanks Michael, I actually use InkScape for the majority of my vector work for SCADA, but it’s easier sometimes for really simple things to just drag on a simple shape in Ignition. But I assume these will be back, just not yet?

1 Like

Hmm, so I’ve dragged on an SVG into a Perspective View, but I can’t edit it at all. Is this something that is yet to come to Perspective?

1 Like

Interactive drawing tools will be added to Perspective, absolutely. I doubt they’ll make the initial 8.0 release, however.

That said, support for vector drawings (svg) is in perspective today. You can draw something (in inkscape, for example), save it as an SVG, and then drag it into perspective. You will notice that the properties of the drawing component that is created actually contains all of the SVG paths, transforms, styles, etc. So while it is certainly awkward and inconvenient to do so today (because of the lack of interactive drawing tools), what is exciting about this model is that all of the drawing information is modeled in component properties, meaning that they are fully dynamic and can be manipulated by the binding system.

11 Likes

That's freaking awesome.

3 Likes

Thats indeed the way to go forward as SVG is platform independent and plugin free! Everything is rendered by the browser! No JVM, no plugins. Amazing! Awesome!

1 Like

Very interesting. I created a line using inkScape and I imported it into Perspective. Now, it is not clear for me how to handle dynamically the endpoints, because I can’t see them in the properties. How do I do it?

It depends on what line was drawn by inkscape. You can open the SVG file with a text editor (notepad or something more readable) to inspect it.

One possibility is that inkscape added a path (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path), in that case, the line is just encoded as a string, and you can modify that string as a whole, but it’s quite hard to parse a generic path to get out the end points.

The other possibility is that inkscape added a line object (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line), in which case the endpoints are simply encoded as (x1,y1), (x2, y2), which should be very easy to modify.

In any case, it’s possible to write SVG files by hand. F.e. the SVG below is a line from the top left corner (0,0) to the bottom right corner (100%, 100%), and it will scale to whatever size you want in Ignition (can even be used for horizontal and vertical lines.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="20"
   height="20"
   viewBox="0 0 100% 100%"
   id="svg2"
   version="1.1">
    <line
       style="stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       x1="0"
       x2="100%"
       y1="0"
       y2="100%" />
</svg>
2 Likes

Hello Inductive Automation,

Can someone give an update about the possibility to add drawing tools in Perspective?

I am an Ignition fanboy since 7.9.3 and a new Perspective addict. But I cannot understand why we cannot draw free shapes in Perspective.

Thanks.

Work on drawing tools will begin soon-ish, after piping support for Perspective is finished.

2 Likes

Not to downplay any exciting development that the IA team has planned for the future, but is there a reason you couldn’t just create SVGs in a vector editing program and drop them into your views? I have run into very few instances where going this route would prevent me from accomplishing something that the drawing tools in Vision would have allowed.

1 Like

When trying to represent a complex process, it is often necessary to have lines joining various components in complex ways and if one had to do a SVG for in place of each line, also keeping in mind that real factories are frequently modified, so this is not a one off and done sort of deal but rather an ongoing work, this is a major headache for developing an effective HMI system. For those of us who spend a significant portion of our working day developing HMI screens for customers will have our workload drastically increased for lesser results if we can’t draw natively in the system we are working in. As of now, also one has to import the SVG and re-start the Designer to utilize it…so in other words, this is a big deal and I hope Inductive Automation are able to get effective drawing tools sorted soon for Perspective because I know customers are also going to love the mobile capability and screen resolution adaptation in real time that Perspective offers.

I don't know what you mean by needing to restart the designer? SVGs imported (embedded option) appear on the page immediately without any need to restart anything. I presume the same if you add an SVG to the image library, but then you lose all functionality associated with an SVG so it defeats the purpose.

While not ideal, I use labels with borders for pipework, in absence of proper pipe/line drawing tools. These however work really well. The only issue is that if you use one label for joined pipes (e.g. two perpendicular pipes), the click box is the entire bounding box, so it makes selecting components beneath them difficult; if the perpendicular sections are long, you might spend more time accidentally dragging around your pipe than doing anything else...

1 Like

As someone who spends a significant amount of my working day developing HMI/SCADA screens, I would agree that it would be a huge headache to lay out an entire screen or even a complex section of a screen in an vector graphics program and embed it into a Perspective view only to have the customer’s factory layout change a month later and have them ask you to redo your screen. :slight_smile:

When I use SVGs, I try to break them up into the smallest, most reusable sections (usually at the device level) to help retain layout flexibility for the future. I tend to create a template view for each device type that contains my graphics (whether SVGs or simply just labels with some creative application of style classes), embed them into a coordinate view where needed, then join them using labels or containers as your “piping” or “wiring.” I usually set up a style class with a set background color for all of my piping, then it’s just a matter of adjusting the coordinates and sizing to get the necessary layout. If devices move in the future, it’s just a simple matter of dragging them around on screen and then adjusting your piping/wiring to match after the fact.

Of course, it is entirely possible to quickly create device graphics natively in Perspective without SVGs as well. Everything in the screenshot below are either labels or containers with some styling applied to them:
image

Your mileage may vary, just saying that a lack of traditional drawing tools is not the end of the world.

@swolnisty
Just an FYI if you weren’t aware, stroke weight scales by default. If you want to maintain the weight you set, you can use the style:

vector-effect: non-scaling-stroke

(Just comparing your tank stroke compared with your pumps’ stroke)

3 Likes

I have noticed this but had not bothered to track down the CSS property to fix it yet. I appreciate the heads-up!

2 Likes