Strange system.gui.transform behavior with templated instances

Ignition
, ,
1

I wanted to create an animated toggle button that would actually slide when toggled. This code is attached to a button's actionPerformed event handler. It just toggles a variable and slide over the object by it's own width when clicked:

this = event.source
toggleState = not this.toggleState
this.toggleState = toggleState

if toggleState == False:
	target = this.x - this.width
	this.text = this.state0Text
elif toggleState == True:
	target = this.x + this.width
	this.text = this.state1Text
system.gui.transform(
    this,
    newX=target,
    duration=200,
    acceleration=system.gui.ACCL_EASE
)

This works perfectly fine when done directly in the editor.
Then I wanted to template it and started getting really weird behavior when resizing the instance. The animation works fine if I keep the original size, but it breaks if I resize.

Even weirder, the breaking behavior is different if the objects are 'loose' or grouped within the template. See screenshots:

non_templated
non_templated1671×787 31.6 KB

templated_loose
templated_loose1655×833 30.1 KB

templated_grouped
templated_grouped1641×771 30.4 KB

As you can see, when templated, the button doesn't slide over the right amount. I added some print statements to check the values of 'this.x', 'this.width' and 'target'. The first time I click the button, the values appear correct, but the object doesn't actually gets moved the right amount, which throws off all subsequent toggles.

I'm even more perplexed at the behavior when the object is grouped within the template. Now not only the position is wrong, it also somehow scales the button, even though I'm not changing the scale in the code.

To reiterate, those are the exact same objects, with the same code, the only difference is being a template instance or not.

This was only a fun little test so I'm not too worried about keeping it non-templated, but I feel like this is either a bug or I'm wrong about the expected behavior.

Either way I appreciate any advice!

2

Add the coordSpace argument to the transform() call--you need designer coordinates for this.

3

Thanks for the reply, I used this code for the updated call and I still get the same behavior

system.gui.transform(
    this,
    newX=target,
    duration=200,
    acceleration=system.gui.ACCL_EASE,
    coordSpace=system.gui.COORD_DESIGNER
)
4

Is the template configured to "allow layout" ?

5

It wasn't before. I enabled it and now it maintains aspect ratio when resizing, but I still get the same offset behavior.

image
image1371×335 23.9 KB

6

That might be the best you get. You may need to ensure it is always resized with fixed aspect ratio.

7

I can live with that, since it works fine when not in a template. Just wanted to make sure I wasn't doing something obviously wrong.

Thanks!

8

It's possible that this forum post could be applicable to this use case:
How to transform a component inside of a vision template

The problem is that the coordspace argument is always relative to the designer's window editor NOT the designer's template editor. As long as the template instance in the window is not stretched or squished when it's placed in the window, it will work fine, but if it has been resized after being dragged and dropped, then the transform will be off by that proportional amount.

9

Thanks for the link, at least it confirms I'm not the only one that was perplexed by this behavior. I'll have to try your scaling solution if I ever come back to this.