Bug in animate?

[mikkom]

I have the following code:


var id = this.getNodeAttribute("id");
var x = this.getNodeAttribute("x");
var y = this.getNodeAttribute("y");

Debug.write('Move: '+canvas.screen[id]+" to x"+x+" y"+y);

canvas.screen[id].setX(x);
canvas.screen[id].setY(y);

<!--
canvas.screen[id].animate('x', 100, 1000, false, {motion: 'linear'});
canvas.screen[id].animate('y', 100, 1000, false, {motion: 'linear'});
-->


Everything works ok with setX and setY, the object moves to correct position.

With animate however, the object disappears from the screen and sets both x and y positions to some really strange values (like '1090-990NaN')

I even tried to change the x and y to constant values (100 as in above) and I still get same really strange results.

Is this a bug or don't I get something?

EDIT: Oh and the object is dynamically created with:

var c = new LzView(canvas.screen, {width: this.getNodeAttribute("width"),
height: this.getNodeAttribute("height"),
x: this.getNodeAttribute("x"),
y: this.getNodeAttribute("y"),
name: id,
bgcolor: this.getNodeAttribute("bgcolor")});

[mikkom]

Any ideas?

This is a showstopper for me so if anyone has information about what's wrong I would really appreciate.

[hqm]

You must be doing something else wrong, this works for me:


<canvas width="1400" height="600" debug="true">
<debug width="400" height="300" fontsize="12" x="400"/>

<view name="screen" width="400" height="400" bgcolor="#cccccc"/>

<script>
var c = new LzView(canvas.screen, {width: 50,
height: 50,
x: 100,
y: 200,
name: 'foo',
bgcolor: 0xff0000});


</script>
<simplelayout/>
<button onclick="canvas.screen['foo'].animate('x', 300, 1000, false, {motion: 'linear'});">animate</button>

</canvas>

[hqm]

what is getNodeAttribute, and what context is it executing in? If any values it returns are NaN, then that will propagate as arithmetic is done on them.

[mikkom]

getNodeAttribute is used when I get coordinate data from the server (below)

The strange thing is that setX and setY work correctly.

The server sends messages like <pos id="id" x="100" y="100" />


<connectiondatasource name="myconnection">
<dataset name="server"/>

<method event="onerror" args="error">
Debug.write(this + " Error: " + error);
</method>
<method event="ontimeout">
Debug.write("Connection Timeout");
</method>
</connectiondatasource>


<datapointer xpath="myconnection:server:/pos[1]">
<method event="ondata">
var id = this.getNodeAttribute("id");
var x = this.getNodeAttribute("x");
var y = this.getNodeAttribute("y");

Debug.write('Move: '+canvas.screen[id]+" to x"+x+" y"+y);

canvas.screen[id].setX(x);
canvas.screen[id].setY(y);

<!--
canvas.screen[id].animate('x', x, 1000, false, {motion: 'linear'});
canvas.screen[id].animate('y', y, 1000, false, {motion: 'linear'});
-->

</method>
</datapointer>

[hqm]

Try coercing the values to numbers using "Number(x)". If they are strings, I think arithmetic will act funny.

[mikkom]

I get the exact same results with the code below with Number(X) conversion


<datapointer xpath="myconnection:server:/pos[1]">
<method event="ondata">
var id = this.getNodeAttribute("id");
var x = this.getNodeAttribute("x");
var y = this.getNodeAttribute("y");

Debug.write('Move: '+canvas.screen[id]+' to x:'+x+' y:'+y);
Debug.write('X: '+x+' converted to number '+Number(x));
Debug.write('Y: '+y+' converted to number '+Number(y));

<!--
canvas.screen[id].setX(x);
canvas.screen[id].setY(y);
-->

canvas.screen[id].animate('x', Number(x), 1000, false, {motion: 'linear'});
canvas.screen[id].animate('y', Number(y), 1000, false, {motion: 'linear'});
</method>
</datapointer>



EDIT:

You were right after all, I had to convert the values given at the object creation time and at the animation time and now all works. Thank you!