RE: QML id usage



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



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


  • Moderators

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



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



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



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



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



  • @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"



  • @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!).



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



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



  • 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";
    


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


  • Moderators

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



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

  • Moderators

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



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


  • Moderators

    @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



  • @p3c0 Ya i got the output...thanks


  • Moderators

    @Naveen_D Great!


Log in to reply
 

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