Re: Checking visible items based on condition



  • Hi all,

    how to check if an item is visible using if condition,

    for example, there is one screen called menuscreen(.qml) and mediaplay(.qml) at present if mediaplay is visible, how to check this using if condition. i tried with the following but didn't get any output

    if(musicScreen.visible === true)
                                {
                                    console.log(qsTr("its music screen"))
                                    menusrcn.visible= true
                                    musicScreen.visible= false
                                }
    }
    


  • It should work. Just check following sample.

    Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle
    {
    id : abc
    width: 200;height: 200;color : "blue"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (abc.visible == true){
                abc.visible = false
            }else {
                abc.visible = true
            }
        }
    }
    

    }



  • Thanks for your reply,
    Does it work only for onClicked instance ? Becoz in my case it is not entering the if condition itself...i am not getting console statements defined in the if condition.



  • Can you tell how your code is getting called ? Where did you write code for that check ? Can you paste the complete code here ?



  • Ya sure...I am using voice recognition, based on the voice i am calling the condition to check currently it is in which visible item(like menuscreen or mediaplay).

    import QtQuick 2.0
    import QtQuick.Layouts 1.2
    import QtGraphicalEffects 1.0
    import QtQuick.Window 2.2
    import QtQuick 2.5
    import QtQuick.Dialogs 1.2
    
    
    Rectangle {
        id: main_menurect
        width: (Screen.width/2)+200
        height: (Screen.height/2)
        color: "#e9ebf8"
        anchors.centerIn: parent
    
        property bool checkicon: false
    
        MediaPlay{
            id:mediaPlayObject
        }
    
        Image {
            id: back_img
            source: "qrc:/Settings/HomeScreen.png"
            anchors.centerIn: parent
        }
    
        ColumnLayout
        {
            id: main_column_layout
            spacing: 50
            anchors.centerIn: parent
    
            //First Row
            RowLayout{
                id: firstrow
                spacing: 50
                anchors.horizontalCenter: parent.horizontalCenter
    
    
                //Music
                Rectangle{
    
                    id:mediaRect
                    width: main_menurect.width/5
                    height: main_menurect.height/4
                    color: "transparent"
    
                    Image {
                        id: media_image
                        source: "qrc:/MediaPlayer/MusicMain-icon.png"
                        width: parent.width-4
                        height: parent.height-4
                        smooth: true
                        fillMode: Image.PreserveAspectFit
                        anchors.centerIn: parent
                        antialiasing: true
    
                        Text {
                            id: mediatext
                            text: qsTr("Media")
                            anchors.top: parent.bottom
                            anchors.horizontalCenter: media_image.horizontalCenter
                            color: "white"
                            font.pixelSize: parent.height * (2 / 15)
                        }
                    }
    
                    MouseArea{
                        id: media_mousearea
                        anchors.fill: parent
                        onClicked: {
                            vedioScreen.visible = true
                            main_menurect.visible = false
                        }
                    }
                }
                //Phone
                Rectangle{
                    id:phoneRect
                    width: main_menurect.width/5
                    height: main_menurect.height/4
                    color: "transparent"
    
                    Image {
                        id: phone_image                                       
                        source: "qrc:/Phone/AppbarIcon2.png"
                        anchors.centerIn: parent
                        width: parent.width-15
                        height: parent.height-15
                        smooth: true
                        fillMode: Image.PreserveAspectFit
                        antialiasing: true
    
                        Text {
                            id: phonetext
                            anchors.top: parent.bottom
                            anchors.horizontalCenter: phone_image.horizontalCenter
                            text: qsTr("Phone Book")
                            color: "white"
                            font.pixelSize:  parent.height * (2 / 15)
                        }
    
                        MouseArea{
                            id: phone_mousearea
                            anchors.fill: parent
                            onClicked: {
                                phoneScreen.visible = true
                                main_menurect.visible = false
                            }
                        }
                    }
    
    
                }
    
    
    
                //Radio
                Rectangle{
                    id:fmRect
                    width: main_menurect.width/5
                    height: main_menurect.height/4
                    color: "transparent"
                    Image {
                        id: radio_image
                        source: "qrc:/MainPage/RadioImg.png"
                        smooth: true
                        width: parent.width-10
                        height: parent.height-10
                        fillMode: Image.PreserveAspectFit
                        anchors.centerIn: parent
                        antialiasing: true
    
                        Text {
                            id: radiotext
                            anchors.top: parent.bottom
                            anchors.horizontalCenter: radio_image.horizontalCenter
                            text: qsTr("Radio")
                            color: "white"
                            font.pixelSize: parent.height * (2 / 15)
                        }
                    }
    
                    MouseArea{
                        id: fm_mousearea
                        anchors.fill: parent
                        onClicked: {
                            //radioScreen.visible = true
                            main_menurect.visible = false
                            radioSubScreen.visible = true
                        }
                    }
    
                }
            }
    
            //Second Row
            RowLayout{
                id: secondrow
                spacing: 50
                visible: true
                anchors.horizontalCenter: parent.horizontalCenter
    
                //VC
                Rectangle{
                    id:homeRect
                    width: main_menurect.width/5
                    height: main_menurect.height/4
                    color: "transparent"
                    Image {
                        id: home_image
                        source:"qrc:/Settings/AppbarIcon.png"
                        anchors.centerIn: parent
                        width: parent.width-15
                        height: parent.height-15
                        fillMode: Image.PreserveAspectFit
                        antialiasing: true
    
                        Text {
                            id: hometext
                            anchors.top: parent.bottom
                            anchors.horizontalCenter: home_image.horizontalCenter
                            text: qsTr("Voice Control")
                            color: "white"
                            font.pixelSize: parent.height * (2 / 15)
    
                        }
                    }
                    Connections {
                        target: VoiceRecogObject
                        onPlaymusicsignal: {
                            console.log("Recorded Voice :" + recordedString)
    
                            var receivedString = recordedString.slice(1, -1)
                            var GotoMusicString = new String("GOTO MUSIC PLAYER")
                            var GotoHomeString = new String("GOTO HOME")
                            var GotoSettingString = new String("GOTO SETTINGS")
                            var GotoVideoString = new String("GOTO VIDEO PLAYER")
                            var GotoRadioString = new String("GOTO RADIO")
                            var GotoMenuString = new String("GOTO MENU")
                            var GotoMediaString = new String("GOTO MEDIA")
                            var GotoPhoneString = new String("GOTO PHONE")
                            var PlaySongString = new String("PLAY SONG")
                            var PlayString = new String("PLAY")
                            var PauseString = new String("PAUSE")
                            var StopString = new String("STOP")
                            var NextSongString = new String("NEXT SONG")
                            var PreviousSongString = new String("PREVIOUS SONG")
                            var VolumeIncreaseString = new String("VOLUME INCREASE")
                            var VolumeDecreaseString = new String("VOLUME DECREASE")
                            var RepeatOnString = new String("REPEAT ON")
                            var RepeatOffString = new String("REPEAT OFF")
                            var ShuffleOnString = new String("SHUFFLE ON")
                            var ShuffleOffString = new String("SHUFFLE ON")
                            var MuteString = new String("MUTE")
                            var GoBackString = new String("GO BACK")
    
                            console.log(receivedString)
                            if(receivedString.localeCompare(GotoMusicString) === 0)
                            {
                                console.log("play music")
                                musicScreen.visible= true
                            }
                            else if(receivedString.localeCompare(PauseString) === 0)
                            {
                                mysong.pausemusic()
                            }
                            else if(receivedString.localeCompare(PlayString) === 0)
                            {
                                mysong.pausemusic()
                            }
                            else if(receivedString.localeCompare(GotoSettingString) === 0)
                            {
                                console.log("Settings Screen")
                                settingScreen.visible= true
                            }
                            else if(receivedString.localeCompare(GotoHomeString) === 0)
                            {
                                console.log("Menu Screen")
                                menusrcn.visible= true
                            }
                            else if(receivedString.localeCompare(GotoRadioString) === 0)
                            {
                                console.log("Radio Screen")
                                radioSubScreen.visible= true
                            }
                            else if(receivedString.localeCompare(GotoVideoString) === 0)
                            {
                                console.log("Radio Screen")
                                radioSubScreen.visible= true
                            }
                            else if(receivedString.localeCompare(GotoMediaString) === 0)
                            {
                                console.log("Media Screen")
                                videoScreen.visible= true
                                menusrcn.visible= false
                            }
                            else if(receivedString.localeCompare(GotoPhoneString) === 0)
                            {
                                console.log("Phone Screen")
                                phoneScreen.visible= true
                            }
                            else if(receivedString.localeCompare(PlaySongString) === 0)
                            {
                                console.log("Song Play")
                                musicScreen.visible= true
                                checkicon= true
                                mysong.openFile()
    //                            mediaPlayObject.play_image="qrc:/MediaPlayer/pauseIcon.png"
                                if(checkicon == true)
                                {
                                    if(play_image.source==="qrc:/MediaPlayer/pauseIcon.png")
                                    {
                                        mysong.pausemusic()
                                        play_image.source="qrc:/MediaPlayer/PlayIcon.png"
                                    }
                                    else
                                    {
                                        mysong.pausemusic()
                                        play_image.source="qrc:/MediaPlayer/pauseIcon.png"
                                    }
                                }
                            }
                            else if(receivedString.localeCompare(GoBackString) === 0)
                            {
                                console.log(qsTr("Back to respective screen"))
                                if(musicScreen.visible == true)
                                {
                                    console.log(qsTr("its music screen"))
                                    musicScreen.visible= false
                                    menusrcn.visible= true
                                }
                                else if(phoneScreen.visible == true)
                                {
                                    console.log(qsTr("its phone screen"))
                                    menusrcn.visible= true
                                    phoneScreen.visible= false
                                }
                                console.log("after checking condition")
                            }
                            else
                            {
                                console.log("please try again")
                            }
                        }
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            VoiceRecogObject.vStartProcess()
                        }
                    }
                }
    
                // Settings
                Rectangle{
                    id:settingsRect
                    width: main_menurect.width/5
                    height: main_menurect.height/4
                    color: "transparent"
    
                    Image {
                        id: setting_image
                        source: "qrc:/MainPage/AppbarIcon3.png"
                        width: parent.width-15
                        height: parent.height-15
                        smooth: true
                        fillMode: Image.PreserveAspectFit
                        anchors.centerIn: parent
                        antialiasing: true
    
                        Text {
                            id: settingtext
                            anchors.top: parent.bottom
                            anchors.horizontalCenter: setting_image.horizontalCenter
                            text: qsTr("Settings")
                            color: "white"
                            font.pixelSize: parent.height * (2 / 15)
    
                        }
                    }
                    MouseArea{
                        id: settings_mousearea
                        anchors.fill: parent
                        onClicked: {
                            settingScreen.visible = true
                            main_menurect.visible = false
                        }
                    }
                }
    
                Rectangle{
                    id:tvRect
                    width: main_menurect.width/5
                    height: main_menurect.height/4
                    color: "transparent"
                    Image {
                        id: tv_image
                        source: "qrc:/MainPage/tv-icon.png"
                        width: parent.width-6
                        height: parent.height-6
                        smooth: true
                        fillMode: Image.PreserveAspectFit
                        anchors.centerIn: parent
                        antialiasing: true
                    }
    
                    Text {
                        id: tvtext
                        anchors.top: parent.bottom
                        anchors.horizontalCenter: tv_image.horizontalCenter
                        text: qsTr("Televison")
                        color: "white"
                        font.pixelSize: parent.height * (2 / 15)
    
                    }
    
                    MouseArea{
                        id: tv_mousearea
                        anchors.fill: parent
                        onClicked: {
                            tvScreen.visible = true
                            main_menurect.visible = false
                        }
                    }
                }
            }
        }
    }
    

    the if conditions are in the connections part of the code
    this is the actual part where i am not able get the output.

    else if(receivedString.localeCompare(GoBackString) === 0)
                            {
                                console.log(qsTr("Back to respective screen"))
                                if(musicScreen.visible == true)
                                {
                                    console.log(qsTr("its music screen"))
                                    musicScreen.visible= false
                                    menusrcn.visible= true
                                }
                                else if(phoneScreen.visible == true)
                                {
                                    console.log(qsTr("its phone screen"))
                                    menusrcn.visible= true
                                    phoneScreen.visible= false
                                }
                                console.log("after executing condition")
                            }
    


  • It must be a issue of your code condition. Execution may not be coming to that block of code. Please check your condition

    receivedString.localeCompare(GoBackString) === 0

    This must be source of the problem.



  • console.log(qsTr("Back to respective screen"))

    Sir i get this statement in the console. but i am not getting the next console statement i.e

    console.log(qsTr("its music screen"))

    console.log(qsTr("its phone screen"))

    again i get the last console statement.

    console.log("after executing condition")



  • You have if else condition. That is the reason only one statement gets executes. Both cannot execute. If may be hitting the condition where menu screen and phone screen visible flags are false. So you may see both the condition are false.

    Can you try printing the values of MusicScreen.visible and PhoneScreen.visible values just before the if condition of MusicScreen.visible===true ? That should give us the idea why it so.



  • I got the output sir, Thanks
    One more doubt i have, in the same code i am creating an object of MediaPlay.qml

    MediaPlay{
    id:mediaPlayObject
    }

    using this object i am trying to change an image property of mediaplay in menuscreen, but it is not happening...can you tell me what is problem here?

    else if(receivedString.localeCompare(PlaySongString) === 0)
    {
    console.log("Song Play")
    musicScreen.visible= true
    checkicon= true
    mysong.openFile()
    // mediaPlayObject.play_image="qrc:/MediaPlayer/pauseIcon.png"
    if(checkicon == true)
    {
    if(play_image.source==="qrc:/MediaPlayer/pauseIcon.png")
    {
    mysong.pausemusic()
    play_image.source="qrc:/MediaPlayer/PlayIcon.png"
    }
    else
    {
    mysong.pausemusic()
    play_image.source="qrc:/MediaPlayer/pauseIcon.png"
    }
    }
    }

    in this part i am trying to change the image.



  • What is playimage type ?



  • Play_image is the id given for Image in mediaPlay.qml.

    Rectangle{
                    id:music1Rect
                    width: music_main_rect.width/5
                    height: music_main_rect.height/4
                    color: "transparent"
                    Image {
                        id: play_image
                        source: "qrc:/MediaPlayer/PlayIcon.png"
                        width: parent.width-10
                        height: parent.height-10
                        smooth: true
                        fillMode: Image.PreserveAspectFit
                        anchors.centerIn: parent
    
                        MouseArea {
                            anchors.fill: parent
    //                        onPressAndHold:{
    
    //                            initailposition = control.value
    //                            console.log("initailposition in QML",initailposition)
    
    //                            checkicon = false
    //                            mysong.openFile()
    //                            play_image.source ="qrc:/MediaPlayer/pauseIcon.png"
    
    //                        }
                            onClicked: {
                                checkicon = false
                                if(checkicon == false)
                                {
                                    if(play_image.source=="qrc:/MediaPlayer/pauseIcon.png")
                                    {
                                        mysong.pausemusic()
                                        play_image.source="qrc:/MediaPlayer/PlayIcon.png"
                                    }
                                    else
                                    {
                                        mysong.pausemusic()
                                        play_image.source="qrc:/MediaPlayer/pauseIcon.png"
                                    }
                                }
                            }
                        }
                    }
                }
    


  • I prefer you to post the question separately as this is different question and helps others as well. Also I suggest to read on how to create the QML components and crete the objects from components, how do we access the properties present inside those objects.

    Nevertheless

    Rectangle{
    id:music1Rect
    width: music_main_rect.width/5
    height: music_main_rect.height/4
    property alias imgSource : play_image.Source
    color: "transparent"
    Image {
    id : play_image
    }
    }

    Once you create the MediaObject

    You should assign the image as mediaPlayer.imgSource = "qrc:/naveen.png"



  • I prefer you to post the question separately as this is different question and helps others as well. Also I suggest to read on how to create the QML components and crete the objects from components, how do we access the properties present inside those objects.

    Sir i have posted this in other thread.
    https://forum.qt.io/topic/75428/re-qml-id-usage/9

    Sir When i use property alias also i am not able to change the image...Is there anything else i need to do for this ?


Log in to reply
 

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