Android Question Eyes follow code

Douglas Farias

Expert
Licensed User
Longtime User
Hi all.
how can i make this
https://codepen.io/J-Roel/pen/wWGNQN

with panel and imageview, not canvas.

i want to put eyes into a imageview into a panel, and move this with a touch in panel.

someone can give me the way to make this? i need ideias!

images.png


the blue panel = is where i will move the finger
the red panel = the limit
the green is imageview = it need move

my question is...
the blue panel is too large compared to the red panel.
how can i move the imageviews, based on the blue panel move, if the redpanel
it's smaller?

thanks
 
Last edited:

MarkusR

Well-Known Member
Licensed User
Longtime User
something to start with o_O

ImageView1 & 2 is the moving eye ball

B4J
B4X:
Sub MainForm_Touch (Action As Int, X As Float, Y As Float)

    LookAt(ImageView1,300-100,300,X,Y,50)
    LookAt(ImageView2,300+100,300,X,Y,50)

End Sub

Sub LookAt(ImageViewX As ImageView,X1 As Float,Y1 As Float,X2 As Float,Y2 As Float,R As Float)

    Dim dx,dy As Float
    Dim rx,ry As Float
    Dim a As Float
     
    dx = X2 - X1
    dy = Y2 - Y1
             
    a = ATan2D(dy,dx)
     
    rx = CosD(a) * R
    ry = SinD(a) * (R * 1.5)
 
    ImageViewX.Left = -(ImageViewX.Width /2.0) + X1 + rx
    ImageViewX.Top = -(ImageViewX.Height /2.0) + Y1 + ry
 
End Sub
 
Upvote 0

Douglas Farias

Expert
Licensed User
Longtime User
Hi.
thx for the example.
B4X:
#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: False
#End Region

Sub Process_Globals
End Sub

Sub Globals
    'BLUE PANEL
    Private pMain As Panel
   
    'RED PANEL
    Private pLeft As Panel
    Private pRight As Panel
   
    'EYES
    Private pRightEye As Panel
    Private pLeftEye As Panel
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub pMain_Touch (Action As Int, X As Float, Y As Float)
    LookAt(pLeftEye,300-100,300,X,Y,50)
    LookAt(pRightEye,300+100,300,X,Y,50)
End Sub




Sub LookAt(pEye As Panel, X1 As Float, Y1 As Float, X2 As Float, Y2 As Float, R As Float )

    Dim dx,dy As Float
    Dim rx,ry As Float
    Dim a As Float
   
    dx = X2 - X1
    dy = Y2 - Y1
           
    a = ATan2D(dy,dx)
   
    rx = CosD(a) * R
    ry = SinD(a) * (R * 1.5)
 
    pEye.Left = -(pEye.Width / 2.0) + X1 + rx
    pEye.Top = -(pEye.Height / 2.0) + Y1 + ry
 
End Sub

i m trying to use this, but i need understand why this is not correct here on the code above.

here is the result before the touch
before.png

and here later
later.png


thx
 

Attachments

  • MOVER.zip
    72.7 KB · Views: 210
Upvote 0

MarkusR

Well-Known Member
Licensed User
Longtime User
its because your eyes are relativ to its parent panel.
so left,top is 0,0 inside this panel.

x1,y1 is the center of the eye in world coords, x2,y2 the mouse click position in world coords.
Sub LookAt(pEye As Panel, X1 As Float, Y1 As Float, X2 As Float, Y2 As Float, R As Float )
 
Upvote 0

Douglas Farias

Expert
Licensed User
Longtime User
Here is the best result of i get.


B4X:
#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: False
#End Region

Sub Process_Globals
    Private restart As Boolean = False
End Sub

Sub Globals
    'BLUE PANEL
    Private pMain As Panel
   
    'RED PANEL
    Private pLeft As Panel
    Private pRight As Panel
   
    'EYES
    Private pRightEye As Panel
    Private pLeftEye As Panel
   
   
   
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub


Sub pMain_Touch (Action As Int, X As Float, Y As Float)
    Select Action
        Case Activity.ACTION_DOWN
           
        Case Activity.ACTION_MOVE
            If restart Then Return 'IF IS RESTARTING TO CENTER, WAIT FOR IT
           
            Private positionXPercentage As Int = x / pMain.Width * 100 'GET %x OF TOUCH
            Private positionYPercentage As Int = y / pMain.Height * 100 'GET %y OF TOUCH
           
           
            If positionXPercentage >= 0 And positionXPercentage <= 100 Then 'SEND THE % TOUCH AS X
                MoveHorizontal(pLeft,pRight,positionXPercentage)
            End If

            If positionYPercentage >= 0 And positionYPercentage <= 100 Then 'SEND THE % TOUCH AS Y
                MoveVertical(pLeft,pRight,positionYPercentage)
            End If
           
           
        Case Activity.ACTION_UP 'RESTART THE EYES TO CENTER POSITION
            moveBack(pLeft,pRight,50,50)
           

    End Select
End Sub


Sub MoveHorizontal(p1 As Panel, p2 As Panel,x As Int)
    Private positionx1 As Int = x * p1.Width / 100 'CONVERT % TO FLOAT
    Private positionx2 As Int = x * p2.Width / 100 'CONVERT % TO FLOAT
    pLeftEye.Left = positionx1 - (pLeftEye.Width/2)
    pRightEye.Left = positionx2 - (pRightEye.Width/2)
End Sub

Sub MoveVertical(p1 As Panel, p2 As Panel ,y As Int)
    Private positionY1 As Int = Y * p1.Height / 100 'CONVERT % TO FLOAT
    Private positionY2 As Int = Y * p2.Height / 100 'CONVERT % TO FLOAT
    pLeftEye.Top = positionY1 - (pLeftEye.Height/2)
    pRightEye.Top = positionY2 - (pRightEye.Height/2)
End Sub



Sub moveBack(p1 As Panel, p2 As Panel,x As Int, y As Int) 'RESTART TO ORIGINAL POSITION (CENTER)
    restart = True
    Private positionx1 As Int = x * p1.Width / 100 'CONVERT % TO FLOAT
    Private positionx2 As Int = x * p2.Width / 100 'CONVERT % TO FLOAT
    Private positionY1 As Int = Y * p1.Height / 100 'CONVERT % TO FLOAT
    Private positionY2 As Int = Y * p2.Height / 100 'CONVERT % TO FLOAT
    pLeftEye.SetLayoutAnimated(500,positionx1 - (pLeftEye.Width/2), positionY1 - (pLeftEye.Height/2),pLeftEye.Width,pLeftEye.Height)
    pRightEye.SetLayoutAnimated(500,positionx2 - (pRightEye.Width/2), positionY2 - (pRightEye.Height/2),pRightEye.Width,pRightEye.Height)
    Sleep(500)
    restart = False
End Sub

it works with all sizes of red panel, the only problem is the green panel go out 50% and i dont know how to fix it.

ps: i m added the function to back to center if ACTION_UP
WhatsApp Image 2019-05-02 at 18.50.09.jpeg


how can i fix the 50% out problem of green panel?
 

Attachments

  • MOVER.zip
    109.1 KB · Views: 201
Upvote 0

Douglas Farias

Expert
Licensed User
Longtime User
Hi. sorry to post duplicate.
i made it and i m here to share it.
the example above its 100% working.

here is where i m using it

my PET virtual :)

a source is attached

thx
 

Attachments

  • MOVER.zip
    100.4 KB · Views: 181
Upvote 0
Top