# Perspective: drawing lines and polygons

**URL:** <https://forum.inductiveautomation.com/t/perspective-drawing-lines-and-polygons/95479>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [September 3, 2024, 1:06pm UTC](https://forum.inductiveautomation.com/t/perspective-drawing-lines-and-polygons/95479 "2024-09-03T13:06:25Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![pgmo](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@pgmo](https://forum.inductiveautomation.com/u/pgmo)\
**Post date:** [September 3, 2024, 1:06pm UTC](https://forum.inductiveautomation.com/t/perspective-drawing-lines-and-polygons/95479/1 "2024-09-03T13:06:25Z")

</div>

Hi, I need to **programmatically** draw some lines and polygons in Ignition Perspective: any suggestion?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 3, 2024, 2:19pm UTC](https://forum.inductiveautomation.com/t/perspective-drawing-lines-and-polygons/95479/2 "2024-09-03T14:19:52Z")

</div>

You can use the label component's borders to create

- rectangles (easy)
- squares (easy)
- circles (create a square and set the border radii to 50%)
- line (set the height to 1 or whatever your line thickness is)
- triangles (if I remember correctly, set the border to 50% and turn on only one side)

![Lines and polys](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/2/a2e1098cac8c2ffff3d85f864e7a8a6bcba1403e.png)

I've never done it but you can try creating a view with a label in it and parameters to control the appearance.  
Then use the View Canvas component to load multiple instances of the view and move them to the desired locations.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 3, 2024, 2:23pm UTC](https://forum.inductiveautomation.com/t/perspective-drawing-lines-and-polygons/95479/3 "2024-09-03T14:23:26Z")

</div>

You are better of just creating an svg.

Well you can use polygon if its only straight lines

> **[\- SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon)**
>
> The element defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point.

if you need bends you will need paths, which is a bit harder

> **[Paths - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)**
>
> The element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.

you can acces the svg element component by dragging in something from the symbol factory

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [September 3, 2024, 2:35pm UTC](https://forum.inductiveautomation.com/t/perspective-drawing-lines-and-polygons/95479/4 "2024-09-03T14:35:49Z")

</div>

Typically drawings are best done as embedded SVGs. I use Inkscape to draw the SVGs and then I selected the "embedded" option when I drag drop the SVG into Ignition.

NOTE: You get better performance if you save the SVG as "optimized SVG" file type.

If you're just doing boxes, circles or lines you can always use borders on labels. To draw a circle you just set the border radius to 100%. People have varying opinions on this method. The performance is about the same as an SVG and you can add text to it fairly easily because it's a label. I personally feel like labels are a cleaner implementation in a lot of situations (not all).

I would recommend using SVGs if you're drawing devices or other complicated things.

---

<div class="post-metadata">

**Author:** ![pgmo](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@pgmo](https://forum.inductiveautomation.com/u/pgmo)\
**Post date:** [September 3, 2024, 3:30pm UTC](https://forum.inductiveautomation.com/t/perspective-drawing-lines-and-polygons/95479/5 "2024-09-03T15:30:55Z")

</div>

Thanks all for your suggestions. Unfortunately they don't fit my use case: I'll get a set of coordinates from the database, on which set I will have to draw polylines on a map of the customer factory. XY chart could be an option. One other way I'm considering is a site where I draw polyline on a canvas with a javascript drawing library, site that will be loaded into an IFrame component, served by the Ignition Webdev module (WebDev is a must to avoid cross origin issues, if I used node to base the external site).  
I was told that Ignition 8.3 should bring more drawing functions (anything like `system.perspective.drawPolyline(...)` would be perfect), but no one knows what will come actually and when.  
Regards

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [September 3, 2024, 3:33pm UTC](https://forum.inductiveautomation.com/t/perspective-drawing-lines-and-polygons/95479/6 "2024-09-03T15:33:09Z")

</div>

Consider dynamically generating the `props.elements` of an embedded SVG.

---

<div class="post-metadata">

**Author:** ![pgmo](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@pgmo](https://forum.inductiveautomation.com/u/pgmo)\
**Post date:** [September 3, 2024, 3:34pm UTC](https://forum.inductiveautomation.com/t/perspective-drawing-lines-and-polygons/95479/7 "2024-09-03T15:34:26Z")

</div>

Thanks @pturmel ,I'll give it a try!

---

<div class="post-metadata">

**Author:** ![msteele](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/msteele/32/77889_2.png) [@msteele](https://forum.inductiveautomation.com/u/msteele)\
**Post date:** [September 3, 2024, 4:38pm UTC](https://forum.inductiveautomation.com/t/perspective-drawing-lines-and-polygons/95479/8 "2024-09-03T16:38:59Z")

</div>

> [@pturmel](#):
>
> Consider dynamically generating the `props.elements` of an embedded SVG.

Also, consider that `props.elements` for a SVG can be bound to a document tag (just as `props.instances` for a view canvas can be bound to a document tag).
