Moving a single image across the screen with a reference value

Ignition
1

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.

2

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

1 Like
3

Thank you yet again Phil. I have it working.

4

Phil,

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

5

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.

6

Psst! Did you mean to publish your contact info?

8

Phil,

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.

10

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

11

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().

12

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

1 Like
13

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.

14

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?

15

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

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
else:
// Go back to original position	
system.gui.transform(image,image.initialX, image.initialY, duration=250)
	image.isHome = 1
17

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.