RE: QML id usage

[Naveen_D]

Hi all,
I want to know how to use the id of the particular image defined in one .qml file within other .qml file ?

for ex,
Image {
id: myimage
}

i want to use this id in other .qml file. how to do this ?

[Eeli K]

You can't, and it's like that on purpose. Id identifies the object in the context it's used. That's the purpose of id, it's not a normal property.

Two files are two different contexts. If you have e.g. file MyImage.qml which has that Image {id:myimage} and another file X.qml, you have to create a MyImage object in X:

MyImage {
id: myimage
}

and then you can use that id which is given in X.qml. It can be the same or different than the id in MyImage.qml. You don't have to give an id, but then you can't refer to the object outside the object itself.

[p3c0]

@Naveen_D How do you include this file in other QML ?

[Naveen_D]

@Eeli-K sorry i didn't get you clearly....

MyImage {
id: myimage
}

I have created the same way as shown by you in my main.qml using that id can i use this ?
what i want to do is...i have an image in x.qml and in some situation i want to change the image to other in y.qml

[dheerendra]

You can't do that. If you are using another X.qml in Y.qml you must be creating object of X. So for Y.qml X.qml is like another class. You need to create the object of X.qml component in Y.qml. This object should new ID & through this you should access the properties defined in X.qml.

[Naveen_D]

hi, even tough when i create an object...i am not able to access the image id of other .qml file.

for ex,
in y.qml i created
X {
id: xobj
}

then when i tried with xobj id i am not able to access. can anyone tell me what i am doing is right ?

[Eeli K]

@Naveen_D Can you give more code, two whole files, and point out what doesn't work there as you expected?

[Naveen_D]

@Eeli-K Ya sure..

this is my menuscreen.qml code where i have created an object of mediaplay
based on some condition i want to change the image of mediaplay in menuscreen

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

                        console.log(receivedString)
                        if(receivedString.localeCompare(GotoMusicString) === 0)
                        {
                            console.log("play music")
                            musicScreen.visible= true
                            if(musicScreen.visible === true)
                            {
                                if(receivedString.localeCompare(GotoMusicString) === 0){}
                            }
                        }
                        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")
                            vedioScreen.visible= true
                        }
                        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
                        {
                            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 condition is within connections,
mediaPlayObject.play_image="qrc:/MediaPlayer/pauseIcon.png"

[Eeli K]

@Naveen_D
So you basically know how to do it, but have some specific problem here. It's still difficult to find the reason because the code you gave requires the whole project. Either give a link to the project source or narrow down the problem to a small self-contained ad-hoc project which we can run. Or at least copy here the application output (not just one line!).

[6thC]

What about creating some objects states (and maybe transitions too)?
https://wiki.qt.io/QML_States_Controlling
instead of messing with the insides of another class you are utilizing a defined state/interface and you design your module to handle the various state configurations/behaviors expected of it.

[Naveen_D]

@6thC I am using voice recognition over here based on the voice i am doing some changes is it possible using states ???

[6thC]

Well, I don't know the conditions to change states, that would be up to you. But sure. I think. It's possible I misunderstand or didn't read what you want enough.

I use states for changing the gui, not images but color and animations based on sensor's numeric values.

states:
  [
      State { name: "inSpec";
          PropertyChanges { target: indicator; color: hudGreen;  }     
      },
      State { name: "warning";
          PropertyChanges { target: indicator; color: "gold";        }
      },
      State { name: "maximum";
          PropertyChanges { target: indicator; color: "red";         }
      }

  transitions: [
      Transition {
          from: "maximum"
          to: "inSpec"
          SequentialAnimation {
              loops: 1;
              ColorAnimation { duration: 300; from: "red";        to: hudGreen; }
              ColorAnimation { duration: 300; from: hudGreen; to: "transparent";}
          }
      },
      Transition {
          from: "warning"
          to: "inSpec"
          ColorAnimation { target: root; duration: 300}
          ColorAnimation { duration: 300; from: "red";        to: hudGreen; }
          ColorAnimation { duration: 300; from: hudGreen; to: "transparent";}
      },
...

And I use this in a method where I pass a control as an argument (with the states and transitions in it) and the sensor value like:

function adjustState(control, value){
... inSpec expression 
              control.state =  "inSpec";
... warning expression 
              control.state =  "warning";
... maximum expression 
              control.state =  "maximum";

[Naveen_D]

I tried using property aliasing...but no output can anyone pls guide me further in this matter....it would be helpful.

[p3c0]

@Naveen_D You need to provide a very minimal complete code of your application which can reproduce the problem. This would be more useful for others to understand.

[Naveen_D]

@p3c0 ya sure here is the code,

main.qml

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2
import QtQuick 2.5


Window {
    //    flags: Qt.FramelessWindowHint

    title: qsTr("Infotainment")
    width: (Screen.width/4)+200
    height: (Screen.height/4)
    visible: true

    ExampleRect1
    {
        id: rect1id
        visible: false
    }

    ExampleRect2
    {
        id: rect2id
        visible: false
    }
    Row
    {
        id: rectrow
        spacing: 100
        anchors.centerIn: parent
        Rectangle {
            id: myRect
            width: 150; height: 100
            color: "transparent"
            border.color: "black"
            Text {
                id: rect1text
                text: qsTr("Rectangle1")
                font.bold: true
                font.pixelSize: 24
                color: "red"
                anchors.centerIn: parent
            }

            MouseArea {
                id: mouseArea
                anchors.fill: parent
                onClicked: {
                    rect1id.visible= true
                    rectrow.visible = false
                    rect2id.visible= false
                }
            }
        }

        Rectangle {
            id: myRect2
            width: 150; height: 100
            color: "transparent"
            border.color: "black"
            Text {
                id: rect2text
                text: qsTr("Rectangle2")
                font.bold: true
                font.pixelSize: 24
                color: "blue"
                anchors.centerIn: parent
            }

            MouseArea {
                id: mouseArea2
                anchors.fill: parent
                onClicked: {
                    rect2id.visible= true
                    rectrow.visible= false
                    rect1id.visible= false
                }
            }
        }
    }
}

ExampleRect1.qml

import QtQuick 2.0
import QtQuick.Window 2.2

Rectangle{
    id: mainRect
    width: (Screen.width/4)+200
    height: (Screen.height/4)
    visible: false

    property alias imgSource : img.source


    Rectangle{
       id: imgRect
       implicitHeight: 100; implicitWidth: 150
       anchors.centerIn: parent

       Image {
           id: img
           source: "qrc:/PlayIcon.png"
       }
    }
}

RectExample2.qml

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2
import QtQuick 2.5

Rectangle{
    id :mainRect
    width: (Screen.width/4)+200
    height: (Screen.height/4)

    ExampleRect1{
        id:exampleRect1Object
    }

    Rectangle{
        id: voicerect
        implicitHeight: 100; implicitWidth: 150
        anchors.centerIn: parent
        color: "red"

        Text {
            id: voiceText
            text: qsTr("Voice Recognition")
            anchors.centerIn: parent
            font.pixelSize: 18
        }

        MouseArea{
            id: voicemousearea
            anchors.fill: parent
            onClicked: {
                rect1id.visible =true
                exampleRect1Object.imgSource= "qrc:/pauseIcon.png"
                mainRect.visible= false
            }
        }
    }
}

[p3c0]

@Naveen_D Ok. And what do you require in this example ?

[Naveen_D]

@p3c0
In the above example, in ExampleRect2.qml i have created an object of ExampleRect1.qml

onClicked: {
rect1id.visible =true
exampleRect1Object.imgSource= "qrc:/pauseIcon.png"
mainRect.visible= false
}

using that object i am changing the image set in exampleRect1.qml but the image remains same, it will not change...

[p3c0]

@Naveen_D AFAICS you are creating 2 instances of ExampleRect1, one is in main.qml and other is in ExampleRect2.qml and you are trying to update this instance instead of one in main.qml

[Naveen_D]

@p3c0 Ya i got the output...thanks

[p3c0]

@Naveen_D Great!