Tracking mouse movement during Button pressed



  • I want to track mouse/touch movement (coordinates inside the Window or more specifically inside a MouseArea inside the main view) while a Controls 2 Button is pressed down. The movement starts when the user presses the button down. Then he/she moves mouse/finger while the button is pressed, inside the MouseArea which is larger than the button. Then he/she releases it. I have several such buttons close to each other and the user can move the mouse/finger freely in the screen so that it can go above other similar buttons and other items. The MouseArea itself isn't important, only that I can track the mouse movement while a button is pressed so that I can send forward information about movement.

    Is there any simple way to do it? If not, how about a non-simple way?


  • Moderators

    @Eeli-K
    most examples of MouseArea are covering this no? Actually thats almost the whole purpose of the MouseArea element



  • I have read the documentation back and forth but haven't looked at all possible examples in Qt's example app collection.

    I don't know how to let the MouseArea receive all the position changed events and simultaneously propagating all the events to other items so that other item's behavior doesn't change. Maybe the greatest problem is that I can't use

    MouseArea {
      onPressed: {mouse.accepted = false}
    }
    

    to propagate events to other items because then the area stops reveiving events, as the documentation says. So what's left to do is to find the item which is under the event coordinates (by handling coordinate conversion and item child structrue) and "manually" handling its properties. Then I would have to replicate every item's behavior in the MouseArea event handling code.

    So I repeat my problem: is there a way to receive mouse coordinates in MouseArea (or in some other way) but let the UI work exactly as it works without the MouseArea, in a simple way which doesn't require knowledge about the other parts or the exact structure of the UI?


  • Moderators

    @Eeli-K
    Does the following do what you want?

    MouseArea {
           anchors.fill: parent
           propagateComposedEvents: true
           onClicked: {
                    mouse.accepted = false
            }
            onPositionChanged: {
                    console.log( mouse.x + "," + mouse.y )
                    mouse.accepted = false
            }
    }
    


  • @raven-worx said in Tracking mouse movement during Button pressed:

    @Eeli-K
    Does the following do what you want?

    Unfortunately not. Here's a small application...

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.0
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
    
        Item {
            anchors.fill: parent
            MouseArea {
                id: mouseArea
                z: 2
                anchors.fill: parent
                propagateComposedEvents: true
                onClicked: {
                    console.log("clicked on area")
                    mouse.accepted = false
                }
    
                onPositionChanged: {
                    console.log("mouse position changed", mouse.x, mouse.y);
                    mouse.accepted = false
                }
                onPressed: {
                    console.log("mouse pressed on area")
                    //mouse.accepted = false
                }
            }
            Button {
                id: button
                onPressedChanged: {
                    console.log(button.pressed)
                }
                onClicked: {
                    console.log("buttonClicked")
                }
            }
        }
    }
    

    MouseArea.onPressed either has "mouse.accepted = false" or not. In both cases it doesn't do what I want. Either Button doesn't get all the events or the MouseArea doesn't get the following events.



  • I think I found a satisfying solution.

    Button {
                MouseArea {
                    id:buttonMouseArea
                    anchors.fill: parent
                    onPositionChanged: {
                        console.log("mouse position changed on button area", mouse.x, mouse.y);
                    }
                    onPressed: {
                        mouse.accepted = true
                        button.down = true
                    }
                    onReleased: {
                        mouse.accepted = true
                        button.down = false
                    }
                ...
    

    The secret is that when the button is pressed the mouse area receives events even outside the area (actually even beyond the application window on desktop!). Therefore it works as I want it to.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.