JoystickControllerHUD issue

Tagged: JoystickControllerHUD

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
December 28, 2015 at 15:37 #12117
Prashant
I wanted to show and use the joystick when i press the screen the first time , so when i press on the screen it will show up

but the the joystick don’t work , i have to release my press and press the joystick again for the joystick to work.

what i want is “when i press on my screen the joystick will appear (which is working), at the same time i want to play with the joystick on the first press. (not on the second press)”

The problem is the joystick don’t know if it was pressed the first time , how can i be able to solve this problem ?

JoystickControllerHUD don’t have enough Signal to control it.
- This topic was modified 8 years, 3 months ago by pvaibhav.tobyrich.
December 28, 2015 at 16:12 #12119

Christian
Felgo Team

Hi,

can you post a full code sample that shows the issue?

Cheers, Chris

December 28, 2015 at 16:43 #12120
Prashant
```
Hi Chris ,
thank for the reply here is the code.

import QtQuick 2.0
```
```
import Felgo 3.0
```
```
Scene {
```
```
    id: mainScreen
```
```
    Item {
```
```
        id: leftThumb
```
```
        height: 310
```
```
        width: 340
```
```
        MouseArea {
```
```
            anchors.fill: parent
```
```
            onPressed: {
```
```
                joystickleft.opacity =1
```
```
                joystickleft.x1 = mouse.x -joystickleft.joystickRadius
```
```
                joystickleft.y1 = mouse.y-joystickleft.joystickRadius
```
```
            }
```
```
        }
```
```
        JoystickControllerHUD {
```
```
            id: joystickleft
```
```
            property double x1 : 0
```
```
            property double y1 : 0
```
```
            x: x1
```
```
            y: y1
```
```
            joystickRadius: parent.width/4
```
```
            thumbRadius : joystickRadius/3
```
```
            source: "../../assets/img/joystickScreen/LeftCircle.png"
```
```
            thumbSource: "../../assets/img/Ellipse.png"
```
```
            onControllerXPositionChanged: console.debug(controllerXPosition)
```
```
            onControllerYPositionChanged:  console.debug(controllerYPosition)
```
```
            opacity: 0
```
```
        }
```
```
    }
```
```
}
```
- This reply was modified 8 years, 3 months ago by pvaibhav.tobyrich.
December 31, 2015 at 13:41 #12129
Günther
Felgo Team
Hi Prashant!

The main problem is, that the MouseArea steals the mouse events from the joystick. But even if you solved that, theres yet another problem: The joystick only reacts to mouse events that are started by a press within the joystick area. So what you essentially need is to have the additional MouseArea handle all the events (event the ones that the joystick itself wouldn’t listen to).

I created a code sample that does exactly that. It uses a normally hidden internal function that allows to manually set the joystick position:
```
Scene {
    id: mainScreen

    // mouse area handles all mouse events
    MouseArea {
      anchors.fill: parent

      // on press -> set initial position and show joystick
      onPressed: {
        updateJoystickPosition()
        joystickleft.opacity = 1
      }

      // on mouse position change -> update joystick position
      onPositionChanged: updateJoystickPosition()

      // hide joystick again on release
      onReleased: joystickleft.opacity = 0

      // helper function - sets joystick position based on current mouse position
      function updateJoystickPosition() {
        // convert mouse area coordinates to joystick coordinates
        var joystickX = mouseX - joystickleft.x
        var joystickY = mouseY - joystickleft.y

        // manually set joystick position
        joystickleft.setJoystickPosition(joystickX, joystickY)
      }

      // joystick controller hud, only used for visuals (events are handled by parent mouse area)
      JoystickControllerHUD {
        id: joystickleft
        anchors.centerIn: parent
        joystickRadius: parent.width/4
        thumbRadius : joystickRadius/3

        opacity: 0 // initially hidden
        enabled: false // always use parent mouse area to handle events

        // fade in/out animation when opacity changes
        Behavior on opacity {
          PropertyAnimation { duration: 150 }
        }

        onControllerXPositionChanged: console.debug("xPos: "+controllerXPosition)
        onControllerYPositionChanged:  console.debug("yPos: "+controllerYPosition)
      }
    }
  }
```
Best, Günther
- This reply was modified 8 years, 3 months ago by GT.
- This reply was modified 8 years, 3 months ago by GT.
January 4, 2016 at 13:00 #12148

Prashant

Thanks Günther , it is now working !