Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [Solved] Need help with virtual joystick in QML
Forum Update on Monday, May 27th 2025

[Solved] Need help with virtual joystick in QML

Scheduled Pinned Locked Moved QML and Qt Quick
5 Posts 3 Posters 4.7k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • E Offline
    E Offline
    epicfailguy93
    wrote on 15 Oct 2012, 11:53 last edited by
    #1

    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?
    1 Reply Last reply
    0
    • M Offline
      M Offline
      mlong
      wrote on 16 Oct 2012, 15:25 last edited by
      #2

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

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

      Software Engineer
      My views and opinions do not necessarily reflect those of anyone -- living or dead, real or fictional -- in this universe or any other similar multiverse node. Void where prohibited. Your mileage may vary. Caveat emptor.

      1 Reply Last reply
      0
      • E Offline
        E Offline
        epicfailguy93
        wrote on 16 Oct 2012, 15:33 last edited by
        #3

        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.

        1 Reply Last reply
        0
        • E Offline
          E Offline
          elpuri
          wrote on 16 Oct 2012, 19:17 last edited by
          #4

          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
              }
          }
          

          }
          @

          1 Reply Last reply
          0
          • E Offline
            E Offline
            epicfailguy93
            wrote on 16 Oct 2012, 20:15 last edited by
            #5

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

            1 Reply Last reply
            0

            1/5

            15 Oct 2012, 11:53

            • Login

            • Login or register to search.
            1 out of 5
            • First post
              1/5
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved