B4J Question Tracking the position of an animation

ElliotHC

Active Member
Licensed User
I am moving an image with this code:

B4X:
iv1.Initialize("iv1")
iv1.SetImage(im)
MainForm.RootPane.AddNode(iv1,X_Pos,0,230,230)
iv1.SetLayoutAnimated(Image_Speed,X_Pos,1670.0,230,230)

Does anyone know how I can track the X and Y position of the image as it does it's animation?

Thanks
 

Daestrum

Expert
Licensed User
Longtime User
Small example (uses JavaObject Library) adds a changelistener to the imageview position
B4X:
Sub Process_Globals
 Private fx As JFX
 Private MainForm As Form
 Dim iv As ImageView
 Dim im As Image
End Sub
Sub AppStart (Form1 As Form, Args() As String)
 MainForm = Form1
 MainForm.Show
 im.Initialize("","c:/temp/hannah.jpg") ' the image
 iv.Initialize("iv")
 iv.SetImage(im)
 MainForm.RootPane.AddNode(iv,10,10,100,100)
 Dim jo As JavaObject = iv ' the imageview
 Dim o As Object = jo.CreateEvent("javafx.beans.value.ChangeListener","moved",False)
 jo.runmethodJO("layoutXProperty",Null).RunMethod("addListener",Array(o)) ' make sure you choose property that will change
 iv.SetLayoutAnimated(5000,100,300,100,100)
End Sub
Sub moved_Event(MethodName As String, Args() As Object)' ignore the arguments
 Log("X :"&iv.Left&" Y :"&iv.Top)' read the posn from the imageview
End Sub
 
Last edited:
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
Another option is to implement the animation yourself. It is quite simple.

B4X:
Sub Button1_Click
   AnimateTo(Button1, 1000, Rnd(0, 500), Rnd(0, 500))
End Sub

Sub AnimateTo(View As B4XView, Duration As Int, TargetX As Int, TargetY As Int)
   If Duration = 0 Then
       View.Left = TargetX
       View.Top = TargetY
       Return
   End If
   Dim StartTime As Long = DateTime.Now
   Dim StartX As Int = View.Left
   Dim StartY As Int = View.Top
   Do While DateTime.Now < StartTime + Duration
       Dim f As Float = (DateTime.Now - StartTime) / Duration
       Dim x As Int = StartX + f * (TargetX - StartX)
       Dim y As Int = StartY + f * (TargetY - StartY)
       View.Left = x
       View.Top = y
'       Log(x & ", " & y)
       Sleep(10)
   Loop
   View.Left = TargetX
   View.Top = TargetY
End Sub
It should be smooth in release mode.
 
Upvote 0

ElliotHC

Active Member
Licensed User
Small example (uses JavaObject Library) adds a changelistener to the imageview position
B4X:
Sub Process_Globals
 Private fx As JFX
 Private MainForm As Form
 Dim iv As ImageView
 Dim im As Image
End Sub
Sub AppStart (Form1 As Form, Args() As String)
 MainForm = Form1
 MainForm.Show
 im.Initialize("","c:/temp/hannah.jpg") ' the image
 iv.Initialize("iv")
 iv.SetImage(im)
 MainForm.RootPane.AddNode(iv,10,10,100,100)
 Dim jo As JavaObject = iv ' the imageview
 Dim o As Object = jo.CreateEvent("javafx.beans.value.ChangeListener","moved",False)
 jo.runmethodJO("layoutXProperty",Null).RunMethod("addListener",Array(o)) ' make sure you choose property that will change
 iv.SetLayoutAnimated(5000,100,300,100,100)
End Sub
Sub moved_Event(MethodName As String, Args() As Object)' ignore the arguments
 Log("X :"&iv.Left&" Y :"&iv.Top)' read the posn from the imageview
End Sub

Thankyou Daestrum, although I'm really still quite inexperianced with B4J. Do you think you might be able to help me join a few dots here?

What goes in "layoutXProperty"? Also, 'MethodName' am I supposed to change that too?

I'm currently trying to implement this with iv1 but it's saying Method: layoutXProperty not found, probably pretty obvious to most, any chance you might be able to help me figure out what I'm supposed to put in there?

Thanks again.
 
Upvote 0

Daestrum

Expert
Licensed User
Longtime User
'layoutXProperty' is a property that all nodes (controls) contain. It basically holds the controls X position within the rootpane.
It's related property is layoutYProperty, which is the Y position.

You don't have to put anything into layout(X/Y)Property, you just refer to it by name.

MethodName is supplied by the changeListener, again you don't need to do anything with it.

Can you post the error you are getting.
 
Upvote 0

ElliotHC

Active Member
Licensed User
upload_2019-5-29_13-25-38.png


upload_2019-5-29_13-26-8.png



upload_2019-5-29_13-26-20.png
 
Upvote 0

Daestrum

Expert
Licensed User
Longtime User
It should be layoutXProperty, you have LayoutXProperty.
It's not a class, so following java convention, it will start with a lowercase letter.
 
Upvote 0

Daestrum

Expert
Licensed User
Longtime User
What position is it moving from > to, if there is no change in the X value(it moves vertically), then you have to use layoutYProperty, if it moves horizontally then you use layoutXProperty. If it moves in both then you can use either.
 
Upvote 0
Top