MouseArea



  • Hi to everyone,
    I need help. I need do click and the program do something (whatever) but when I click again I need the program do something totally different. I also need the anchors in both of them be the parents anchors.

    I only can do the first part, when I clicked the program did something but when I clicked again it did the same.

    I hope you can help me!
    thanksss!!!



  • Hi @patcs

    What about statemachine?

    http://doc.qt.io/qt-5/qmlstatemachine.html

    For your case you can have :

    intialState : when you are in initiale state and mouseArea clicked ==> do first processing , and go to state2.
    state2: when you are in state2 and mouseArea clicked ==> do second processing...

    You can get inspired from this part of code , that you can find on then link :

    http://doc.qt.io/qt-5/qmlstatemachine.html

    ```
    

    Button {
    anchors.fill: parent
    id: button

        // change the button label to the active state id
        text: s1.active ? "s1" : s2.active ? "s2" : "s3"
    }
    
    StateMachine {
        id: stateMachine
        // set the initial state
        initialState: s1
    
        // start the state machine
        running: true
    
        State {
            id: s1
            // create a transition from s1 to s2 when the button is clicked
            SignalTransition {
                targetState: s2
                signal: button.clicked
            }
            // do something when the state enters/exits
            onEntered: console.log("s1 entered")
            onExited: console.log("s1 exited")
        }
    
        State {
            id: s2
            // create a transition from s2 to s3 when the button is clicked
            SignalTransition {
                targetState: s3
                signal: button.clicked
            }
            // do something when the state enters/exits
            onEntered: console.log("s2 entered")
            onExited: console.log("s2 exited")
        }
        State {
            id: s3
            // create a transition from s3 to s1 when the button is clicked
            SignalTransition {
                targetState: s1
                signal: button.clicked
            }
            // do something when the state enters/exits
            onEntered: console.log("s3 entered")
            onExited: console.log("s3 exited")
        }
    }
    


  • Thank you a lot @mostefa,
    I cant import QtQml.StateMachine then the program doesnt reconize the StateMachine

    Do you know what is the reason?



  • Hi @patcs

    I think that you can use statemachine

    http://doc.qt.io/qt-5/qmlstatemachine.html

    For your case:

    First time you are in initialState,
    When mouseArea Clicked on firstState ( do something) , and go to state2
    When mouseArea Clicked on secondState (do another thing).

    You can get inspired from this part of code

    Button {
        anchors.fill: parent
        id: button
    
        // change the button label to the active state id
        text: s1.active ? "s1" : s2.active ? "s2" : "s3"
    }
    
    StateMachine {
        id: stateMachine
        // set the initial state
        initialState: s1
    
        // start the state machine
        running: true
    
        State {
            id: s1
            // create a transition from s1 to s2 when the button is clicked
            SignalTransition {
                targetState: s2
                signal: button.clicked
            }
            // do something when the state enters/exits
            onEntered: console.log("s1 entered")
            onExited: console.log("s1 exited")
        }
    
        State {
            id: s2
            // create a transition from s2 to s3 when the button is clicked
            SignalTransition {
                targetState: s3
                signal: button.clicked
            }
            // do something when the state enters/exits
            onEntered: console.log("s2 entered")
            onExited: console.log("s2 exited")
        }
        State {
            id: s3
            // create a transition from s3 to s1 when the button is clicked
            SignalTransition {
                targetState: s1
                signal: button.clicked
            }
            // do something when the state enters/exits
            onEntered: console.log("s3 entered")
            onExited: console.log("s3 exited")
        }
    }
    

    I have no idea what is the reason :(

    What is your Qt version?
    the doc says that he is present since Qt 5.4



  • The program now reconize me StateMachine, but now the problem is that it send me this "Error: StateMachine: No initial state set for StateMachine" and "SignalTransition" appeared with a red underline.

    Also, I dont know what I have to put on first state to my program do the first part of my MouseArea (I know that I put choose between Leftbutton and RightButton, but how I didn't know how to do it, it was the only way that I thought it could work)

    The process that my program should do on first click have to be the first "if" and the second process would be the "else" one.

    Sorry, if my english is not so good, I hope you can understand me @mostefa

    StateMachine{
    id:stateMachine
    initialState: s1
    running: true

    State{
        id: s1
        
        SignalTransition {
            targetState: s2
            signal: 
        }
    }
    

    }

    //definición de la acción que se va a realizar cuando se pulse el ratón
    MouseArea{
    id: direction
    anchors.fill: parent
    acceptedButtons: Qt.LeftButton | Qt.RightButton
    onClicked: {
    if(mouse.button == Qt.LeftButton){
    console.log (needle.needle_angle);
    move.tita = (Math.PI*needle.needle_angle)/180

            counterclockwise.stop()
            clockwise.stop()
            moveNeedle.running = false
            moveBar.running = true
    
            }
    
    
            else{
            move.vi = (745 - barBlue.y)/2
            moveBar.running = false
    
            move.running = true;
    
            console.log(move.vi)
    
    
    
           }


  • @patcs said in MouseArea:

    The program now reconize me StateMachine, but now the problem is that it send me this "Error: StateMachine: No initial state set for StateMachine" and "SignalTransition" appeared with a red underline.

    Also, I dont know what I have to put on first state to my program do the first part of my MouseArea (I know that I put choose between Leftbutton and RightButton, but how I didn't know how to do it, it was the only way that I thought it could work)

    The process that my program should do on first click have to be the first "if" and the second process would be the "else" one.

    Sorry, if my english is not so good, I hope you can understand me @mostefa

    StateMachine{
    id:stateMachine
    initialState: s1
    running: true

    State{
        id: s1
        
        SignalTransition {
            targetState: s2
            signal: 
        }
    }
    

    }

    //definición de la acción que se va a realizar cuando se pulse el ratón
    MouseArea{
    id: direction
    anchors.fill: parent
    acceptedButtons: Qt.LeftButton | Qt.RightButton
    onClicked: {
    if(mouse.button == Qt.LeftButton){
    console.log (needle.needle_angle);
    move.tita = (Math.PI*needle.needle_angle)/180

            counterclockwise.stop()
            clockwise.stop()
            moveNeedle.running = false
            moveBar.running = true
    
            }
    
    
            else{
            move.vi = (745 - barBlue.y)/2
            moveBar.running = false
    
            move.running = true;
    
            console.log(move.vi)
    
    
    
           }
    

    Have a look at qml book state machine part:

    https://qmlbook.github.io/en/ch05/index.html#states-and-transitions

    Maybe this part is more easier to understand for you.



  • @patcs It's safer to use

    import QtQml.StateMachine 1.0 as DSM
    DSM.StateMachine {
    DSM.State {...
    DSM.SignalTransition {...
    

    than just

    import QtQml.StateMachine 1.0
    StateMachine {...
    

    because Qt Quick has confusingly another State type. If you have imported in the wrong order

    import QtQml.StateMachine 1.0
    import QtQuick 2.0
    

    the QtQuick State is used instead of QtQml State. Is that the case with your code?



  • Hi again @patcs

    I made a sample for you (tested with qt 5.8), with qml rectangle with two state ,

    onClicked signals will lead to different process , on depending on which state you are :

    import QtQuick 2.6
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
    
        //Rectangle  : this is your button
        Rectangle {
            anchors.fill: parent
            id: button1
            state: "firstState"
            color: "green"
    
            //process mouseArea onClicked ==> in first state
            function processFirstState()
            {
                //will be called on first onClick processing
                button1.state = "secondState"
                console.log("i am in first state , and i am going to second state")
            }
    
            //process MouseArea onclicked ==> in second state
            function processSecondState()
            {
                //will be called on second onClick processing
                button1.state = "firstState"
                console.log("i am in first state , and i am going to second state")
            }
    
            
            MouseArea {
                id: button1area
                anchors.fill: parent
                onClicked:
                {
                    // Here , you can call the function you want depending on your state
                    button1.state === "firstState" ?
                                button1.processFirstState() : button1.processSecondState()
                }
            }
    
            //Handle property assignement, in every state (here i am changing color property)
            states: [
                State {
                    name: "firstState"
                    PropertyChanges { target: button1; color: "green" }
                },
                State {
                    name: "secondState"
                    PropertyChanges { target: button1; color: "white" }
                }
            ]
        }
    }
    

    Hope this can help you ,

    Best regards !



  • Oh, thank u a lot!!!! It works now!!!!



  • @patcs said in MouseArea:

    Oh, thank u a lot!!!! It works now!!!!

    Good =)

    You are welcome !

    I highly recommend to you , to read this qml book

    https://qmlbook.github.io/

    If you want to have a full significant qml application, (this book helped me a lot when i started with qml)

    So you can mark this post as solved for now !


Log in to reply
 

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