Moving a single image across the screen with a reference value

I need to move an image across my Main Window but I am unable to find the property for the x or y positions. How would I express this in the scripting. It is a PNG file. I am told that the x and y positions are read only, but I can move images on a Siemens or AB HMI so i believe there should be a way to do it in Ignition.

In Vision, you move or resize components with system.gui.transform().

1 Like

Thank you yet again Phil. I have it working.


I was able to get it to move but only if there is an action on the component or something else on the screen. I want to move it with a gateway script but I have never had to point to an object on the screens root container in the gateway or client scripts. How can it do this to keep something moving to a location with a value that will be changing dynamically without any action happening on the screen.

Thank you

You can’t move it with a gateway script. (Scripts are confined to work with the process they are in.) Whatever you are using as input/trigger for your gateway script, implement it instead in a client script. If following tag values, bind the tag(s) to custom properties (of the component itself or maybe in the container) and use propertyChange events.

Psst! Did you mean to publish your contact info?


I am sorry for my ignorance but I have never had to move an image around on a screen before. The X and Y properties don’t exist for me to access and bind to a tag. The only thing I can write a script for is the EVENTS which is what I am trying to get away from. I only see ‘Rotation’ among other things as a choice. I am also not familiar with how to access something in the root container of a window in a Client Script.

You can edit your own posts. But prior versions will still be accessible. IA staff would have to make such an edit.

I wasn’t suggesting that. I presume you are computing your desired x and y from something. Other tags, I would expect. Make custom properties in your window and bind those somethings to them. That makes their data easily available in your window. Then use a propertyChange event where you bound those properties. In that event script, compute your desired x and y, and call system.gui.transform().

RE: Contact info, I pushed a button that said ‘hide revision’ and that seems to have done the thing.

1 Like

Sorry, again not sure how to do this. I have worked on it but no luck. I tried adding custom properties to both the root container and the image on the screen but the image does not give me an option to bind the x and y to the custom property. I may need crayons for this.

Just to be clear I know how to bind the custom properties but not how to tie them to the x, y positions of the image. Where would I use the transform script?

After you have the x and y added as custom properties on your image component you would add this propertyChange script on the component.

if event.propertyName == 'X' or event.propertyName == 'Y':
	system.gui.transform(event.source, event.source.X, event.source.Y)

You can’t bind to the x and y properties as far as I know. Create custom properties on the image that will hold the original x and y coordinates. However you initiate the image move script, first write the current x and y coordinates to the custom properties, then make the adjustment.

image = event.source.parent.getComponent('Image')

if image.isHome:
// Save Original position
	image.initialX = image.x   
	image.initialY = image.y
// Some kind of calculation 
	newX = image.x + 500      
	newY = image.y + 100
// Move Image
	system.gui.transform(image,newX, newY, duration=250)
// Image is not in original location anymore
	image.isHome = 0
// Go back to original position	
system.gui.transform(image,image.initialX, image.initialY, duration=250)
	image.isHome = 1

That was the answer I needed. Thanks Tim I got it working. I work in Unity also and struggle with the transform function but I am learning.