Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved Tracking mouse movement during Button pressed

    QML and Qt Quick
    2
    6
    1777
    Loading More Posts
    • 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
      Eeli K last edited by

      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?

      raven-worx 1 Reply Last reply Reply Quote 0
      • raven-worx
        raven-worx Moderators @Eeli K last edited by

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

        --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
        If you have a question please use the forum so others can benefit from the solution in the future

        1 Reply Last reply Reply Quote 0
        • E
          Eeli K last edited by

          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?

          raven-worx 1 Reply Last reply Reply Quote 0
          • raven-worx
            raven-worx Moderators @Eeli K last edited by

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

            --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
            If you have a question please use the forum so others can benefit from the solution in the future

            E 1 Reply Last reply Reply Quote 0
            • E
              Eeli K @raven-worx last edited by Eeli K

              @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.

              1 Reply Last reply Reply Quote 0
              • E
                Eeli K last edited by

                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.

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post