Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 2 Support (Qt 5) › Horizontal Joystick Controller

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #13143

    Darren

    I am trying to make a joystick controller, similar to the one supplied by v-play.  I want mine only to move horizontally though.

    I want the controller to respond in the same way as the v-play controller does so it will have the following behaviours:

    1. Initially centred, the thumb-stick can drag to the left or right within the background bounds.
    2. When the drag is released, the thumb-stick re-centres itself.
    3. If a part of the background is touched, the thumb-stick jumps to the touch.
    4. If the touch is released, the thumb-stick re-centres itself.
    5. If a drag is made following the touch, the thumb-stick will drag from the touched position.

     

    I have the following problems:

    1. On touch, the thumb-stick jumps to the TouchPoint as required. However if a drag immediately follows the touch, the thumb-stick jumps back to the position it was in before the touch, before initiating the drag.

    2. If the thumb-stick is dragged to the right and released, it immediately jumps back to centre as required. If it is dragged to the left boundary, there is a delay before it jumps back to centre.

    Please can you help?

    Running the below code illustrates the problems:

    import QtQuick 2.0
        Item {
        id: horizontalController
        width: 300
        height: 100   
    
        Rectangle {
            id: controllerBackground
            width: (parent.width / 3) * 2
            height: parent.height
            anchors.centerIn: parent
            color: "white"
        }
        Flickable
        {
            id: controllerFlick
            width: parent.width / 3 * 2
            height: parent.height
            anchors.centerIn: parent
            contentX: width / 4
            contentWidth: bounds.width
            contentHeight:  bounds.height
            boundsBehavior: Flickable.StopAtBounds
    
            onMovementEnded: {
                contentX = width / 4
            }
    
            MultiPointTouchArea{
                id: controllerTouchArea
                enabled: true
                anchors.fill: bounds
                touchPoints: TouchPoint {id: controllerTouchPoint }
                onPressed: {
                    controllerFlick.contentX = Math.min(Math.max(controllerBackground.width - controllerTouchPoint.x,0),controllerBackground.width / 2)
                }
                onReleased: {
                    controllerFlick.contentX = controllerFlick.width / 4
                }
            }
    
            Item{
                id: bounds
                width: controllerFlick.width * 1.5
                height: controllerFlick.height
                Rectangle {
                    id: image
                    width: parent.width / 3
                    height: parent.height
                    anchors.centerIn: parent
                    color: "red"
                }
            }
           }
        }

     

    #13144

    Günther
    Felgo Team

    Hi Darren!

    I think using a Flickable for moving the controller handle within the controller area might create more problems than it solves. I suggest to manually set the x-position of the handle whenever the user touches the area.
    Also, if only one touch source is needed, you can use a simple MouseArea instead of the MultiPointTouchArea.

    A simple solution could look something like this:

    Scene {
        // ...
    
        // display controller position
        Text {
          text: "Position: "+controller.position
          anchors.centerIn: parent
        }
    
        // horicontal controller
        Item {
          id: controller
          width: 300
          height: 100
    
          // controller position property holds handle position as value between [-1, 1]
          readonly property real position: (2 * handle.x / (controller.width - handle.width)) - 1
    
          // background fills controller area
          Rectangle {
            id: controllerBackground
            anchors.fill: parent
            color: "white"
          }
    
          // controller handle
          Rectangle {
            id: handle
            width: parent.width / 3
            height: parent.height
            x: (parent.width - width) * 0.5 // center handle initially
            color: "red"
          }
    
          // mouse area for touch inputs
          MouseArea {
            anchors.fill: parent
    
            // move handle to touch position on press
            onPressed: controller.moveHandle(mouse.x)
    
            // center handle on release
            onReleased: controller.moveHandle(controller.width * 0.5)
    
            // move handle on drag
            onMouseXChanged: {
              if(pressed) {
                controller.moveHandle(mouse.x)
              }
            }
          }
    
          // function to move handle to target position
          function moveHandle(xPos) {
            var newX = xPos - handle.width * 0.5
    
            // check bounds
            if(newX < 0)
              newX = 0
            else if(newX > controller.width - handle.width)
              newX = controller.width - handle.width
    
            handle.x = newX
          }
        } // controller
      }

     

    If you want to animate the handle to not jump but move to the center after a release, you can also animate the x-property of the handle instead of directly setting the value. See here for more information about Qt Quick Animations.

     

    Cheers,
    Günther

     

    #13159

    Darren

    Hi Günther!

     

    That works perfectly, thank you! It seems I was just over-complicating it by using the Flickable and MultiTouchPointArea.

    Although I never would have thought to use the MouseArea object as I want it to work on a touch screen.. but it does work just perfectly on my Android phone.

    Thanks for your help and for being so quick too!

    Darren.

    #13160

    Günther
    Felgo Team

    No problem Darren! 😉

    If you are new to Felgo it might be a good idea to look at some demos of our SampleLauncher.
    We also have some step-by-step tutorials that can help you to understand how things work with Felgo.

    Best,
    Günther

    • This reply was modified 5 years, 3 months ago by  GT.
Viewing 4 posts - 1 through 4 (of 4 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded