# Perpective - Label annotation

**URL:** <https://forum.inductiveautomation.com/t/perpective-label-annotation/109351>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 4, 2025, 8:21pm UTC](https://forum.inductiveautomation.com/t/perpective-label-annotation/109351 "2025-08-04T20:21:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexandre.rousselet](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@alexandre.rousselet](https://forum.inductiveautomation.com/u/alexandre.rousselet)\
**Post date:** [August 4, 2025, 8:21pm UTC](https://forum.inductiveautomation.com/t/perpective-label-annotation/109351/1 "2025-08-04T20:21:32Z")

</div>

Hi, here I am trying to create some annotation tool on my user interface to locate defects on a part.

My idea was to create an xy container with an onClick event. I get the x/y coordinate of that event and then add a tiny red label at that position in the container.  
Ultimately I store all this in a table so I can delete / modify this labels later on.

So I try to make it block by block:

- Getting event location, no problem.
- Adding a new label in container... problem
- 

My idea in that was: I create an example label, copy and paste that in vs code to understand that structure, and put that again in my script using child.append in my container, below my code, as you can guess it does not work. Runs without alarms, but new\_point is not added.

Any idea how I could add an object as child to my container?

```python
#Below my code
def runAction(self, event):
	# read coordinate
	x = event.pageX
	y = event.pageY

	# Test adding a second point
	new_point = {
    "type": "ia.display.label",
    "version": 0,
    "props": {
      "style": {
        "background-color": "red"
      }
    },
    "meta": {
      "name": "new_point"
    },
    "position": {
      "x": 10,
      "y": 10,
      "height": 5,
      "width": 5
    },
    "custom": {}
    }

	# childs reading before
	for child in self.getChildren():
		system.perspective.print(child.meta.name)
	
	# append new point
	self.children.append(new_point)
	
	# check it out
	for child in self.getChildren():
		system.perspective.print(child.meta.name)

```

---

<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:** [August 4, 2025, 9:11pm UTC](https://forum.inductiveautomation.com/t/perpective-label-annotation/109351/2 "2025-08-04T21:11:27Z")

</div>

The [Perspective - View Canvas | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-embedding-palette/perspective-view-canvas) might be what you want.

I've never used it but if I had to I'd be trying to create a view with a Label or Text Area component on it. Write a script to add a new item to the `instances` property and take it from there. Can you use the right-click to give a context menu to add a new point at the cursor position? (I don't know.)

---

<div class="post-metadata">

**Author:** ![alexandre.rousselet](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@alexandre.rousselet](https://forum.inductiveautomation.com/u/alexandre.rousselet)\
**Post date:** [August 5, 2025, 7:02pm UTC](https://forum.inductiveautomation.com/t/perpective-label-annotation/109351/3 "2025-08-05T19:02:53Z")

</div>

Thanks for pointing out that, I used that View canvas and works fine, can add some points on click in my "drawing area".

So, on the canvas view itself, I added that onClick event to add one more instance item of type "Point" (another view I create that is only a single point).

Problem is... I get pageX and pageY, that shift my all marking based on view origin. Tried some different setup with absolute / relative positions, but that does not change much.

Any idea where could retrieve views / view canvas origin position? I could not locate that in view properties.

```python
def runAction(self, event):
	x = event.pageX
	y = event.pageY
	
	self.props.instances.append(
	{
  "position": "absolute",
  "top": str(y) + "px",
  "left": str(x) + "px",
  "bottom": "auto",
  "right": "auto",
  "zIndex": 1,
  "width": "5px",
  "height": "5px",
  "viewPath": "Pics annotation/Point",
  "viewParams": {},
  "style": {
    "classes": "",
    "backgroundColor": "#FF8C00"
  }
})

```

 ![Screenshot 2025-08-05 at 22.40.19](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2a8753923b480025979231f4eb10bfb1de0b360b.jpeg)

---

<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:** [August 5, 2025, 10:56pm UTC](https://forum.inductiveautomation.com/t/perpective-label-annotation/109351/4 "2025-08-05T22:56:39Z")

</div>

I was experimenting with this before. See [View Canvas mouse click coordinates](https://forum.inductiveautomation.com/t/view-canvas-mouse-click-coordinates/84636). We didn't get an answer.

Watch out, if you do get it working somehow, that it still works at different browser zoom levels.