Invisible buttons are still functioning



  • Let say I have 3 different views each in different QML files. In my main.qml. I have done switching between different view using states and visible properties. Suppose If i am in 2nd state, thought the Button in 1st state is invisible If i press on that area It is still functioning. Even I tried with StackView but no use. Also, Can any one tell me how to implement backbutton goes morethan 2 levels. I did with states but only front and back.Moreover If I make my 2nd View(DetailedView) parent as Item instead of reactangel I can clearly see the Buttons from 1st View (Main.qml). what is the mistake and best practise to implement different views.Thanks a lot :)
    Main.qml

    import QtQuick 2.3
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.3
    
    Window{
        id:window
        width: Screen.width
        height: Screen.height
        visible: true
        Item{
            id:mainview
            anchors.fill: parent
    
            states: [
                State {
                    name: "Mainview"
                    PropertyChanges {
                        target: detailedView;visible:false}
                },
                State {
                    name: "DetailedView"
                    PropertyChanges {
                        target: detailedView;visible:true;}
                }
            ]
            Column{
                spacing: 40
                anchors.centerIn: parent
                Button{
                    id:openDetailedview
                    text:"Detailed View"
                }
                Button{
                    id:homingButton
                    text:"Homing"
                }
                Button{
                    id:joggingButton
                    text:"Jogging"
                }
            }
            Connections{
                target:openDetailedview
                onClicked:{
                    mainview.state="DetailedView"
                }
            }
            Connections{
                target:detailedView
                onHomeButtonClicked:{
                    mainview.state="Mainview"
                }
            }
        }
        DetailedView{
            id:detailedView
            anchors.fill:parent
            visible: false
        }
    }
    

    Note: DetailedView.qml also consists of states.
    Detailview.qml

    import QtQuick 2.3
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.3
    Rectangle{
        id:mainUI
        anchors.fill: parent
        signal homeButtonClicked()
        Header{
            id:header
        }
        CentralView{
            id:centralView
            anchors.top: header.bottom
            anchors.bottom: footer.top
        }
        //Model
        SetTable{
            id:setTable
            anchors.top: header.bottom
            anchors.bottom: footer.top
            visible: false
        }
        Footer {
            id: footer
            anchors.bottom: parent.bottom
        }
        states: [
            State {
                name: "MainView"
                PropertyChanges {target: centralView;cycRegVisible:false; ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:false; forwardButtonvisible:true}
            },
            //setTable view state
            State {
                name: "SetTableView"
                PropertyChanges {target: centralView;centralViewVisible:false;}
                PropertyChanges {target: setTable;visible:true;}
                PropertyChanges {target: footer;backButtonvisible:true}
            },
            State {
                name: "CyclicRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:true }
                PropertyChanges {target: footer;backButtonvisible:true}
                PropertyChanges {target: centralView;ctrlReg1Visible:false }
                PropertyChanges {target: centralView;ctrlReg2Visible:false }
                PropertyChanges {target: centralView;cmodeRegVisible:false }
                PropertyChanges {target: centralView;directModeRegVisible:false }
                PropertyChanges {target: centralView;trackingModeRegVisible:false }
                PropertyChanges {target: centralView;displayViewVisible:false }
            },
            State {
                name: "ControlRegister1View"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:true;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;trackingModeRegVisible:false }
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:false }
            },
            State {
                name: "ControlRegister2View"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:true;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;trackingModeRegVisible:false }
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:false }
            },
            State {
                name: "OperationModeRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:true;directModeRegVisible:false }
                PropertyChanges {target: centralView;trackingModeRegVisible:false ;homingModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:false }
            },
            State {
                name: "DirectModeRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:true}
                PropertyChanges {target: centralView;trackingModeRegVisible:false ;homingModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:false }
            },
            State {
                name: "SetTableModeRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:true;trackingModeRegVisible:false;homingModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:false }
            },
            State {
                name: "TrackingModeRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:true;homingModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:false }
            },
            State {
                name: "HomingModeRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:true}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:false }
            },
            State {
                name: "JoggingModeRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:true}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:false }
            },
            State {
                name: "SAcyclicRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:true }
            },
            State {
                name: "StatusRegister1View"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;statusReg1Visible:true }
            },
            State {
                name: "StatusRegister2View"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;statusReg2Visible:true }
            },
            State {
                name: "StatusRegister3View"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;statusReg3Visible:true }
            },
            State {
                name: "SOperationModeRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;sOperationRegVisible:true }
            },
            State {
                name: "SDirectModeRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;sDirectModeRegVisible:true }
            },
            State {
                name: "SSetTableModeRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;sSetTableModeRegVisible:true }
            },
            State {
                name: "STrackingModeRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;sTtrackingModeRegVisible:true }
            },
            State {
                name: "SHomingRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;sHomingModeRegVisible:true }
            },
            State {
                name: "SJoggingRegisterView"
                PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
                PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
                PropertyChanges {target: footer;backButtonvisible:true; }
                PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;sJogginModeRegVisible:true }
            }
        ]
        state: "MainView"
        Connections{
            target: centralView;
            onAcyclicButtonClicked:{
                //                console.log("switching to CyclicRegisterView")
                mainUI.state="CyclicRegisterView"
    
            }
            onControlRegister1ButtonClicked:{
                //                console.log("switching to Control Register1View")
                mainUI.state="ControlRegister1View"
            }
            onControlRegister2ButtonClicked:{
                //                console.log("switching to Control Register2View")
                mainUI.state="ControlRegister2View"
            }
            onOperationModeRegisterClicked:{
                //                console.log("switching to CMODE or operation mode register view")
                mainUI.state="OperationModeRegisterView"
            }
            onDirectModeRegisterClicked:{
                //                console.log("switching to direct mode register view")
                mainUI.state="DirectModeRegisterView"
            }
            onSetTableModeRegisterClicked:{
                //                console.log("switching to settable mode register view")
                mainUI.state="SetTableModeRegisterView"
            }
            onTrackingModeRegisterClicked:{
                //                console.log("switching to trakingmode register view")
                mainUI.state="TrackingModeRegisterView"
            }
            onHomingModeRegisterClicked:{
                //                console.log("switching to homing register view")
                mainUI.state="HomingModeRegisterView"
            }
            onJoggingModeRegisterClicked:{
                //                console.log("switching to joggin register view")
                mainUI.state="JoggingModeRegisterView"
            }
            onSAcyclicButtonClicked:{
                //                console.log("switching to display acyclic register view")
                mainUI.state="SAcyclicRegisterView"
            }
            onSStatusRegister1ButtonClicked:{
                mainUI.state="StatusRegister1View"
            }
            onSStatusRegister2ButtonClicked:{
                mainUI.state="StatusRegister2View"
            }
            onSStatusRegister3ButtonClicked:{
                mainUI.state="StatusRegister3View"
            }
            onSOperationModeRegisterClicked:{
                mainUI.state="SOperationModeRegisterView"
            }
            onSDirectModeRegisterClicked:{
                mainUI.state="SDirectModeRegisterView"
            }
            onSSetTableModeRegisterClicked:{
                mainUI.state="SSetTableModeRegisterView"
            }
            onSTrackingModeRegisterClicked:{
                mainUI.state="STrackingModeRegisterView"
            }
            onSHomingModeRegisterClicked:{
                mainUI.state="SHomingRegisterView"
            }
            onSJoggingModeRegisterClicked:{
                mainUI.state="SJoggingRegisterView"
            }
        }
        Connections{
            target: footer
            onBackButtoncliked:{
    //            console.log("switching to MainView")
                mainUI.state="MainView"
            }
            onForwardButtonClicked:{
                mainUI.state="SetTableView"
            }
            onHomeButtonClicked:{
                homeButtonClicked()
            }
        }
    }
    //}
    

  • Moderators

    @vishnu StackView could be of use here IMO. You can directly pop off to an item.



  • @p3c0
    I tried with an example it still does the same behaviour. If press on the area where buttons are pressed it is changing the views.Moreover with stakeView i know only to and forth .With stakeview how to go to upto 3 indepth views? any smal example would really help me a lot.Also, How to connect properties of one view to another view if I am simply pushing and poping out qml files from Stakeview? Thanks .

    import QtQuick 2.3
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.3
    
    Window {
        visible: true
        width: 360
    
        Column{
            spacing: 40
            anchors.centerIn: parent
            Button{
                id:openLelyview
                text:"Detailed View"
                onClicked: {
                    stackView.push(Qt.resolvedUrl("LelyView.qml"))
                }
            }
            Button{
                id:homingButton
                text:"Homing"
                onClicked: {
                    stackView.push(Qt.resolvedUrl("Register.qml"))
                }
            }
            Button{
                id:joggingButton
                text:"Jogging"
                onClicked: {
                    stackView.push(Qt.resolvedUrl("LelyView.qml"))
                }
            }
        }
    
        StackView {
            id: stackView
            anchors.fill: parent
            // Implements back key navigation
            focus: true
        }
    }
    


  • It is probably not the best solution :

    You could add "enabled : visible" on the button


  • Moderators

    @vishnu Here's an example to pop off an item of any depth. This link clearly explains.
    Here's an example I prepared:

    //Adds 10 items into StackView and also pops to an item at index 4
    import QtQuick 2.4
    import QtQuick.Controls 1.3
    
    Rectangle {
        width: 200
        height: 100
    
        StackView {
            id: stack
            anchors.fill: parent
        }
    
        Component {
            id: item
            Text { }
        }
    
        Row {
            anchors.bottom: parent.bottom
            Button {
                text: "Add"
                onClicked: {
                    for(var a=0; a<10; a++) {
                        var comp = item
                        stack.push(comp.createObject(stack,{"text": "Item"+a}));
                    }
                }
            }
    
            Button {
                text: "Pop"
                onClicked: {
                    var current = stack.get(4)
                    stack.pop(current)
                }
            }
        }
    }
    

    You will also need to set destroyOnPop to true as documented here to not allow items destroy on pop.



  • @p3c0
    sorry for late reply. As you said I modified my program from visible concept to StackView. But now the status of the buttons (on/off) is not preserved.Because when i am pushing I am not making destroyOnPop to false. How to do that with this syntax.

    Button{
                id:openDetailedview
                text:"Detailed View"
                onClicked: {
                    stackView.push(Qt.resolvedUrl("DetailedView.qml"))
                }
            }
    

    In DetailedView.qml there are many on/off buttons.
    Also, It says that qml: Warning: StackView: cannot transition an item that is anchored!.May i know when do we get this kind of error because i even set anchors.fill:parent. Thanks.


  • Moderators

    @vishnu

    How to do that with this syntax.

    stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
    

    Also, It says that qml: Warning: StackView: cannot transition an item that is anchored!.May i know when do we get this kind of error because i even set anchors.fill:parent

    That is the problem. Don't do it.



  • @p3c0
    stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
    I did like this but still status it not restored. So what i did is instantiate the component and make is invisible.
    MainView.qml

     Button{
                id:openDetailedview
                text:"Detailed View"
                onClicked: {
                    stackView.push({item:detailedView,destroyOnPop:false})
                }
            }
    DetailedView{
            id:detailedView
            visible: false
        }
    

    works perfect like this but still qml: Warning: StackView: cannot transition an item that is anchored! is not solved what should i do?
    I even tried replacing
    anchors.fill:parent
    with
    width: parent.width
    height: parent.height
    anchors.left: parent.left but no use.


  • Moderators

    @vishnu qml: Warning: StackView: cannot transition an item that is anchored!
    That is what I said don't anchor it. It will fill automatically.



  • @p3c0
    Sorry.Now i removed it but still. the warning is not shown when pushing deatiledView.qml. But inside deatiledView. I have different buttons.upon clicking i am pushing another qml files.here is the problem.In my case when I am pushing the AcyclicRegister.qml I am getting the error
    DetailedView.qml

    Item {
        id:centralView
    //    width: parent.width
    //    height: parent.height
     ControlView{
    
            id:controlview
            height: (centralView.height)
            width: centralView.width/2
            anchors.left: centralView.left
            anchors.leftMargin: festodesign.buttonGap
            Connections{
                onAcyclicButtonClicked: {
                stackView.push({item:acyclicRegister,destroyOnPop:false})
                }
          }
       AcyclicRegister{
            id:acyclicRegister
            visible: false
            property int byteIndex: 1
            onRegisterstatus: {
                tcpCommunicationPort.datafromQml(byteIndex,index,data);//sending to cpp
            }
        }
     DisplayView{
            id: displayView
            height: (centralView.height)
            width: centralView.width/2
            anchors.left: controlview.right
            anchors.leftMargin: festodesign.buttonGap
            anchors.top: parent.top
            Connections{
                onAcyclicButtonClicked: {stackView.push({item:sAcyclicRegister,destroyOnPop:false})}
           }
    SAcyclicRegister{
            id:sAcyclicRegister
            visible: false
            property int byteIndex: 1
            onRegisterstatus: {
                //            tcpCommunicationPort.datafromQml(byteIndex,index,-1);//sending to cpp
            }
        }
    

    AcyclicRegister.qml

    Register{
        id:acyclicRegister
     //not showing inside text elements
    }
    

    Register.qml

    Rectangle {
        id: register
     //not showing inside text elements
    }

  • Moderators

    @vishnu The item that you are pushing should not be anchored. In your case you are pushingAcyclicRegister and it is anchored to its parent. Remove that. It will automatically be filled.



  • @p3c0
    Ooops.I missed it. Thanks a lot ! works perfect :).
    I have a right-arrow button on my footer where i am pushing a qml file upon clicking. when it is loaded how to disable this button on the footer? Also, I don't want to push the same qml file again and again.How can make a check before pushing If that is alread in the stack i don't the push it? I tried like getting the current item but i always get stacknull.
    var comp=stackView.get(Stack.index);
    console.log("latest stack"+comp)


  • Moderators

    @vishnu

    I have a right-arrow button on my footer where i am pushing a qml file upon clicking. when it is loaded how to disable this button on the footer?

    enabled = false on click

    How can make a check before pushing If that is alread in the stack i don't the push it?

    2 ways.

    var myItem = stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
    //check myItem and store it somewhere
    if(myItem) { }
    
    var myItem = stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
    var comp=stackView.get(myItem.Stack.index); //need the item to get its index and not just Stack.index 
    


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