Dynamic components in Perspective

Hello guys,
at the moment I’m working on a Vision Project where i build an image in this way using script :

  • Inside a Container component i create a PMIRectangle
  • Using again PMIRectangles i create object inside parent shape
  • I create few PMICirlces miming welding points

I’m almost at a good point on it, but since I only started working on this project, i was wondering why don’t switch to Perspective.

Can someone please point me at some docs, i would like to know if i could achive the same using the new evoironment.

I paste my code to let you know which components I’m using, and if there is something similar to have the same result,
thanks for your time.

import com.inductiveautomation.factorypmi.application.components.PMIRectangle
import com.inductiveautomation.factorypmi.application.components.PMICircle
import math
from java.awt.event import MouseAdapter
from java.awt.event import MouseListener


class ScreenMouseListener(MouseAdapter):

	def __init__(self, itemInfo, pmiItem):
		self.itemInfo = itemInfo
		self.pmiItem = pmiItem
	
	def mousePressed(self, event):
		#event.getSource().parent.selectedItemPoint = str(self.item['centerPoint'])
		#print dir(event.getSource().parent)
		#props = event.getSource().parent.getDynamicProps()
		#print type(props)
		#print props.get(selectedItemPoint").value
		#props.put("selectedItemPoint", "cammello")
		#event.getSource().parent.setDynamicProps({'selectedItemPoint': 'a'})
		if self.itemInfo['mousePressedDelegate'] is not None : 
			self.itemInfo['mousePressedDelegate'](self.itemInfo)
		
	#def mouseReleased(self, event):
		#event.source.parent.SelectedNesting = str(self.item['centerPoint'])
	
	def mouseClicked(self, event):
		system.gui.transform(
			self.pmiItem, 
			self.pmiItem.getX()+5, self.pmiItem.getY()+5,
			self.pmiItem.getWidth(),self.pmiItem.getHeight()
		)
		
	#def mouseEntered(self, event):
	#	self.pmiItem.setBackground( 
	#		system.gui.color(
	#			self.itemInfo["colorHovered"]['r'],
	#			self.itemInfo["colorHovered"]['g'],
	#			self.itemInfo["colorHovered"]['b'],
	#			self.itemInfo["colorHovered"]['h'])
	#	)
			
		#system.gui.transform(
		#	self.pmiItem, 
		#	self.pmiItem.getX()-5, self.pmiItem.getY()-5,
		#	self.pmiItem.getWidth()+10, self.pmiItem.getHeight()+10
		#)

	#def mouseExited(self, event):
	#	self.pmiItem.setBackground( 
	#		system.gui.color(
	#			self.itemInfo["color"]['r'],
	#			self.itemInfo["color"]['g'],
	#			self.itemInfo["color"]['b'],
	#			self.itemInfo["color"]['h'])
	#	)
			
		#system.gui.transform(
		#	self.pmiItem, 
		#	self.itemInfo["centerPoint"]['y'], self.itemInfo["centerPoint"]['x'],
		#	self.itemInfo['width'], self.itemInfo['height']
		#)


def cleanCanvas(canvasContainer):
			canvasContainer.removeAll()
		
def canvasRefreshUI(canvasContainer):
	canvasContainer.updateUI()



def canvasPaintInsideWrapperFrame(canvas, rectangle):
	canvasPaintRectangle(canvas, rectangle)
	

def canvasPaintCircle(canvasContainer, circle):

	# controllo tipo rect		
	errMessages = []
	if not "radius" in circle : errMessages.append('radius parameter missing in dict')
	else : 
		circle['width'] = circle['radius']
		circle['height'] = circle['radius']
	
	if not "color" in circle : errMessages.append('color parameter missing in dict')
	else :
		if not "r" in circle['color'] : errMessages.append('color.r parameter missing in dict')
		if not "g" in circle['color'] : errMessages.append('color.g parameter missing in dict')
		if not "b" in circle['color'] : errMessages.append('color.b parameter missing in dict')
		if not "h" in circle['color'] : errMessages.append('color.h parameter missing in dict')
	
	if not "centerPoint" in circle : errMessages.append('centerPoint parameter missing in dict')
	else :
		if not "x" in circle['centerPoint'] : errMessages.append('centerPoint.x parameter missing in dict')
		if not "y" in circle['centerPoint'] : errMessages.append('centerPoint.y parameter missing in dict')
	
	if errMessages : raise Exception('\n'.join(errMessages))
	#
	
	
	## rectangle adesso dovrebbe essere cosi 
	# {'height': 100, 'width':100, 
	#  'color': {'r':100, 'g':100, 'b':100, 'h':100}, 
	#  'colorHovered': {'r':100, 'g':100, 'b':100, 'h':100}, 
	#  'centerPoint': {'x':125, 'y':125}, 
	#  'mousePressedDelegate': None}
	c = com.inductiveautomation.factorypmi.application.components.PMICircle()
		
	c.setBackground( system.gui.color(circle["color"]['r'],circle["color"]['g'],circle["color"]['b'],circle["color"]['h']) )
	c.setForeground( system.gui.color(100,100,0) )
	c.setFill(1)
	c.outline = False
	if circle['mousePressedDelegate']:
		c.addMouseListener(ScreenMouseListener(circle, c))
	
	canvasContainer.addComponent(c)
	
	#(component, [newX], [newY], [newWidth], [newHeight], [duration], [callback], [framesPerSecond], [acceleration], [coordSpace])
	#system.gui.transform(rettangolo, (disposizione[0][0] * costantOfScale), (disposizione[0][1] * costantOfScale), larghezza, altezza)
	system.gui.transform(c, circle["centerPoint"]['y'], circle["centerPoint"]['x'], circle['height'], circle['width'])
	

def canvasPaintRectangle(canvasContainer, rectangle):
	
	# controllo tipo rect		
	errMessages = []
	if not "height" in rectangle : errMessages.append('height parameter missing in dict')
	if not "width" in rectangle : errMessages.append('width parameter missing in dict')
	
	if not "color" in rectangle : errMessages.append('color parameter missing in dict')
	else :
		if not "r" in rectangle['color'] : errMessages.append('color.r parameter missing in dict')
		if not "g" in rectangle['color'] : errMessages.append('color.g parameter missing in dict')
		if not "b" in rectangle['color'] : errMessages.append('color.b parameter missing in dict')
		if not "h" in rectangle['color'] : errMessages.append('color.h parameter missing in dict')
	
	if not "centerPoint" in rectangle : errMessages.append('centerPoint parameter missing in dict')
	else :
		if not "x" in rectangle['centerPoint'] : errMessages.append('centerPoint.x parameter missing in dict')
		if not "y" in rectangle['centerPoint'] : errMessages.append('centerPoint.y parameter missing in dict')
	
	if errMessages : raise Exception('\n'.join(errMessages))
	#
	rettangolo = com.inductiveautomation.factorypmi.application.components.PMIRectangle()
		
	rettangolo.setBackground( system.gui.color(rectangle["color"]['r'],rectangle["color"]['g'],rectangle["color"]['b'],rectangle["color"]['h']) )
	rettangolo.setForeground( system.gui.color(100,100,0) )
	rettangolo.setDrawFill(1)
	
	if rectangle['mousePressedDelegate']:
		rettangolo.addMouseListener(ScreenMouseListener(rectangle, rettangolo))
	

	rettangolo.overrideHeight = rectangle['height']
	rettangolo.overrideWidth = rectangle['width']
		
	if "rotation" in rectangle :
		if rectangle['rotation']:
			rettangolo.overrideSize = True
			latoLungoFrame = math.sqrt(math.pow(rectangle['height'], 2) + math.pow(rectangle['width'], 2))
			rectangle['width'] = latoLungoFrame
			rectangle['height'] = latoLungoFrame
			rettangolo.setRotation(rectangle['rotation'])
	
	canvasContainer.addComponent(rettangolo)
	
	#(component, [newX], [newY], [newWidth], [newHeight], [duration], [callback], [framesPerSecond], [acceleration], [coordSpace])
	#system.gui.transform(rettangolo, (disposizione[0][0] * costantOfScale), (disposizione[0][1] * costantOfScale), larghezza, altezza)
	system.gui.transform(rettangolo, rectangle["centerPoint"]['y'], rectangle["centerPoint"]['x'], rectangle['height'], rectangle['width'])

Adding components at runtime is possible with Vision but utterly unsupported. I haven’t seen anything that suggests it is possible with Perspective.

The supported technique in Vision is the Template Canvas.

The supported technique in Perspective is the View Canvas.

Thank you Phil, very useful as always.
Didn’t know about template canvas, and it seems a much cleaner way to achieve the same result on Ignition.

dynamic images using svg's would do what you want.