Re: Checking visible items based on condition

[Naveen_D]

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

[dheerendra]

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

}

[Naveen_D]

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.

[dheerendra]

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

[Naveen_D]

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

[dheerendra]

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.

[Naveen_D]

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

[dheerendra]

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.

[Naveen_D]

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.

[dheerendra]

What is playimage type ?

[Naveen_D]

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

[dheerendra]

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"

[Naveen_D]

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 ?