MouseArea

patcs

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!!!

mostefa

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")
    }
}

patcs

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

Do you know what is the reason?

mostefa

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

patcs

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)



       }

mostefa

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

Eeli K

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

mostefa

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 !

patcs

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

mostefa

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