Perpective - Label annotation

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?

#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)

The Perspective - View Canvas | Ignition User Manual 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.)

1 Like

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.

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"
  }
})

I was experimenting with this before. See View Canvas mouse click coordinates. We didn't get an answer.

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