[Solved] Need help with virtual joystick in QML

epicfailguy93

I'm want create a joystick like that one:
!http://savepic.su/2739585m.png! !http://savepic.su/2728321m.png!
!http://savepic.su/2713985m.png! !http://savepic.su/2707841m.png!
!http://savepic.su/2699649m.png!
Look at my code below:
@import QtQuick 2.0

Item {
signal pressed(real x, real y)
signal moved(real x, real y)
signal released
id: joystick
width: 160
height: 160
onPressed: console.log("Pressed:", x, y)
onMoved: console.log("Moved:", x, y)
onReleased: console.log("Released")
Image {
id: backgroundImage
anchors.fill: parent
source: "background.png"
}
Item {
id: finger
width: 26
height: 26
x: 80-13
y: 80-13
Image {
id: fingerImage
anchors.fill: parent
source: "finger.png"
}
}
MouseArea {
id: joystickArea
anchors.fill: parent
property int signX: 1
property int signY: 1
PropertyAnimation {
id: returnToOrigin
target: finger
properties: "x,y"
to: 80-13
duration: 100
}
onPressed: joystick.pressed(joystickArea.mouseX, joystickArea.mouseY)
onPositionChanged: {
if (Math.pow(joystickArea.mouseX-80, 2) + Math.pow(joystickArea.mouseY-80, 2) < Math.pow(80-13, 2)) {
finger.x = joystickArea.mouseX-13
finger.y = joystickArea.mouseY-13
80 - joystickArea.mouseX > 0 ? signX = 1 : signX = -1
80 - joystickArea.mouseY > 0 ? signY = 1 : signY = -1
joystick.moved(-(80+13signX-joystickArea.mouseX)/80, (80+13signY-joystickArea.mouseY)/80)
} else {
// else what?
}
}
onReleased: {
returnToOrigin.start()
joystick.released()
}
}
}@
I use this images:
background.png
!http://savepic.su/2747776m.png!
finger.png
!http://savepic.su/2731392m.png!

// else what?
Is anyone can help me?

mlong

bq. // else what?
Is anyone can help me?

What, exactly, is your question? What is not working for you so far?

epicfailguy93

I'm sorry, my english is bad, so I wanted to write as less as possible words :)
Pictures describe the situation very well: I want to my joystick continued to follow finger, but it remained a small circle inside a large circle.
Now, do you understand? It is a simple geometry, but it is too hard for me.

elpuri

How about this?

@
import QtQuick 1.1

Rectangle {
width: 500
height: 500

Image {
    id: joystick

    property real angle : 0
    property real distance : 0

    source: "background.png"
    anchors.centerIn: parent

    ParallelAnimation {
        id: returnAnimation
        NumberAnimation { target: thumb.anchors; property: "horizontalCenterOffset";
            to: 0; duration: 200; easing.type: Easing.OutSine }
        NumberAnimation { target: thumb.anchors; property: "verticalCenterOffset";
            to: 0; duration: 200; easing.type: Easing.OutSine }
    }

    MouseArea {
        id: mouse
        property real fingerAngle : Math.atan2(mouseX, mouseY)
        property int mcx : mouseX - width * 0.5
        property int mcy : mouseY - height * 0.5
        property bool fingerOutOfBounds : fingerDistance2 < distanceBound2
        property real fingerDistance2 : mcx * mcx + mcy * mcy
        property real distanceBound : width * 0.5 - thumb.width * 0.5
        property real distanceBound2 : distanceBound * distanceBound

        anchors.fill: parent

        onPressed: returnAnimation.stop()
        onReleased: returnAnimation.restart()
        onPositionChanged: {
            if (fingerOutOfBounds) {
                thumb.anchors.horizontalCenterOffset = mcx
                thumb.anchors.verticalCenterOffset = mcy
            } else {
                var angle = Math.atan2(mcy, mcx)
                thumb.anchors.horizontalCenterOffset = Math.cos(angle) * distanceBound
                thumb.anchors.verticalCenterOffset = Math.sin(angle) * distanceBound
            }
        }
    }

    Image {
        id: thumb
        source: "finger.png"
        anchors.centerIn: parent
    }
}

}
@

epicfailguy93

How about this?
Oh what's great! Thank you so much! :)