[Thomas]

Hey,

i don’t know if it is a dumb question, but i’ll ask it anyway, because i am not very experienced in qml/v-play.

i have a custom Button with a mousearea inside. Now i want to do something, as long as the button is pressed and stop, when it gets released. that works fine, until i move my finger/the mouse while pressing. now, when i release the mousebutton, the onrelease method of the mousearea does not get called. What am i doing wrong??

Here is the mouseArea of the button:

 MouseArea {
        id: mouse_area1
        anchors.fill: parent

        hoverEnabled: true

        onPressed: {
            console.debug("BUTTON PRESSED")
            rectangle1.state = "pressed"
            rectangle1.pressed()
        }
        onReleased: {rectangle1.state = "";
            console.debug("BUTTON released")

            rectangle1.released();
        }

        onExited: {rectangle1.state = "";
            rectangle1.released();
        }

        onMousePositionChanged: {
            if (mouseX < rectangle1.width && mouseY < rectangle1.height && mouseX >= 0 && mouseY >=0 && rectangle1.state == "pressed"){
                rectangle1.state = "pressed";
                rectangle1.pressed();
            } else {
                rectangle1.state = "";
                rectangle1.released();
            }
        }

        /*onCanceled: {rectangle1.state = "";
            console.debug("BUTTON canceled")

            rectangle1.released();
        }*/

        onClicked: rectangle1.clicked();

    }

BTW: onMousePositionChanged does not solve the problem and does not cause it.. was just experimenting..

 

Cheers, TS

[Thomas]

tried the following, doesn’t work either. In this way, it gets released as soon as i move the pressed mouse or my finger…

 

onPressedChanged: {
            if (pressed){
                console.debug("BUTTON PRESSED")
                rectangle1.state = "pressed"
                rectangle1.pressed()
            } else {
                rectangle1.state = "";
                console.debug("BUTTON released")

                rectangle1.released();
            }
        }

Cheers,

TS

[David]

Hi TSigmund,

I’m not sure where your actual problem occurs in detail. Maybe you can test following example and describe your problem in more detail. Which platform do you test?

import VPlay 1.0
import QtQuick 1.1

GameWindow {
  id: gameWindow

  Text {
    text: button.state
    color: "white"
  }

  Rectangle {
    id: button
    x: 50
    y: 50
    width: 50
    height: 50

    signal pressed()
    signal released()
    signal clicked()

    MouseArea {
      id: mouseArea
      anchors.fill: parent

      onPressed: {
        console.debug("BUTTON pressed")
        button.opacity = 0.5
        button.pressed()
        button.state = "pressed"
      }
      onReleased: {
        console.debug("BUTTON released")
        button.opacity = 1.0
        button.released()
        button.state = "released"
      }

      onExited: {
        console.debug("BUTTON exited")
        button.opacity = 1.0
        button.released()
        button.state = "exited"
      }

      onMousePositionChanged: {
        console.debug(mouseX,mouseY)
      }

      onCanceled: {
         console.debug("BUTTON canceled")
         button.opacity = 1.0
         button.released()
        button.state = "canceled"
      }

      onClicked: {
        console.debug("BUTTON clicked")
        button.clicked()
      }
    }
  }
}

The example produces following console output when I use the button in the described way.

Pressed button and moved around inside the button. Released button, still inside the button. 

BUTTON pressed
20 27
...
21 27
BUTTON released
BUTTON clicked
BUTTON exited

Pressed button and moved around inside the button. Still pressed, but move outside of the button (exited) and move around outside. Released somewhere outside the button.

BUTTON pressed
16 19
...
17 19
BUTTON exited
51 21
...
52 21
BUTTON released

Cheers,

David

[Thomas]

Okay, thanks. I guess, i found the reason for this strange behavior. The reason is a MultiTouchArea, in which i placed 3 of my Buttons.

I want to be able to press at least to buttons at the same time.

But obviously, this multitoucharea causes the problem.. Everytime i try to move the pressed mouse or finger, it stops working.

here is the Code: (assume, the “TestButton” is the button mentioned above)

 

MultiTouchArea {
            id: buttonarea
            anchors.bottom: parent.bottom
            width: parent.width
            height: parent.height/5

            TestButton {
                id: testButt1
                anchors.left: parent.left
            }
            TestButton {
                id: testButt2
                anchors.left: parent.center
            }
            TestButton {
                id: testButt3
                anchors.left: parent.right
            }
        }

so how do i manage to get that working? do i need to forward the movement to the buttons like the keys have to be forwarded?

 

Cheers,

TS

[Thomas]

FIXED!

fixed the problem on my own by using just the button with a multitoucharea instead of a mousearea and then putting the three buttons into a row-element instead of a multitoucharea.

 

Cheers,

TS

[David]

Hi TSigmund,

I’m glad you found a solution and thanks for sharing!

Cheers,

David