Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML: Create two module inside one tab



  • Hi ! Here is my problem, I created a video module in QML and also a GPS module.
    My GPS module is called GPS.qml and like this :

    import ...
    
    Item {
    id: mapping
    title: "Map"
    clip: true
    visible: true
    
    [Module implementation, it is quite long so I dont put everything but if needed I can]
    

    Also my video module :

    video.qml

    import ...
    
    Tab {
    title: "RTSP stream"
    
    [same here, this is a quite long implementation but can copy past it if you want]
    

    I would like to have page where my video take the biggest part of the area and where the map is small, on the bottom right of the window.
    I didn't succeed to to this for now. I dont know if I must use Recangle, gridlayout or other thing, and, if I must, how should I do. I have a lot of difficulties with QML ><

    I am sorry if it is not clear, but it is enough to be understandable

    Thanks for help :)



  • hi @Chanchan
    one way to do it with QML Layout type

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Layouts 1.3
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        // Components can be reusable components in separated .qml file
        // Gps.qml
        Component{
            id:gps
            Item{
                Rectangle{
                    anchors.fill: parent
                    color :"lightgrey"
                }
            }
        }
        // Video.qml
        Component{
            id:vid
            Item{
                Rectangle{
                    anchors.fill: parent
                    color :"lightblue"
                }
            }
        }
    
        RowLayout{
            anchors.fill: parent
            Loader{//loads video
                sourceComponent: vid
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.preferredHeight: parent.height
                Layout.preferredWidth: parent.width * 0.7
            }
            Loader{//loads gps
                sourceComponent: gps
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: 80
                Layout.preferredWidth: 80
                Layout.alignment: Qt.AlignBottom
            }
        }
    }
    
    


  • Hi @LeLev Thank for your answer :)

    Instead of Window, can I use a "Tab" prototype ?

    And I dont really understand how your components are linked to the Gps and Video modules ?
    Should I implement them inside the "Component {implementation} ?



  • @Chanchan said in QML: Create two module inside one tab:

    Gps and Video modules

    what do you mean by "modules" ? not this right ? I think you sould say "Component" (or maybe its me not understanding your question)

    for me you have two .qml files Video.qml and Gps.qml so this are Your QML Reusable components, and you want to use this 2 components in a TabView .. so :

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 1.4
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        TabView {
            anchors.fill: parent
            Tab { // tab 1
                title: "Red"
                    RowLayout{
                        anchors.fill: parent
                        Video{// Your QML Reusable component Video.qml
                        //    ~~sourceComponent: vid //edited: no sourceComponent property here~~
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.preferredHeight: parent.height
                            Layout.preferredWidth: parent.width * 0.7
                        }
                        Gps{// Your QML Reusable component Gps.qml
                         //   ~~sourceComponent: gps //edited:no sourceComponent property here~~
                            Layout.fillWidth: true
                            Layout.fillHeight: false
                            Layout.preferredHeight: 80
                            Layout.preferredWidth: 80
                            Layout.alignment: Qt.AlignBottom
                        }
                    }
            }
            Tab { // tab 2
                title: "Blue"
                Rectangle { color: "blue" }
            }
            Tab { // tab 3
                title: "Green"
                Rectangle { color: "green" }
            }
        }
    }
    
    

    edited to delete



  • Ooh ok ! I understand better :) Thanks :D



  • Hi !
    I have an issue with the code that I did not succeed to solve :

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 1.4
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        TabView {
            anchors.fill: parent
            Tab { // tab 1
                title: "Red"
                    RowLayout{
                        anchors.fill: parent
                        video{// Your QML Reusable component Video.qml
                            sourceComponent: video
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.preferredHeight: parent.height
                            Layout.preferredWidth: parent.width * 0.7
                        }
                        Gps{// Your QML Reusable component Gps.qml
                            sourceComponent: mapgps
                            Layout.fillWidth: true
                            Layout.fillHeight: false
                            Layout.preferredHeight: 80
                            Layout.preferredWidth: 80
                            Layout.alignment: Qt.AlignBottom
                        }
                    }
            }
            Tab { // tab 2
                title: "Blue"
                Rectangle { color: "blue" }
            }
            Tab { // tab 3
                title: "Green"
                Rectangle { color: "green" }
            }
        }
    }
    

    I got a error on video{ "invalid property name" I dont know why because my qml file video has this name and id.
    another one on : Gps{// Your QML Reusable component Gps.qml
    sourceComponent: mapgps "Invalid Property Name sourceComponent"

    And when I try to build the code I get
    "QML debugging is enabled. Only use this in a safe environment.
    QQmlApplicationEngine failed to load component
    file:///home/thales/TestGpsVideo/main.qml:28 Cannot assign to non-existent property "sourceComponent"

    I dont understand these errors referring to sourceComponent, reporting from the documentation I think I have used this well but it seems not so...


  • Moderators

    @Chanchan said in QML: Create two module inside one tab:

    video{// Your QML Reusable component Video.qml

    that ought to be a capital V



  • @Chanchan

    sourceComponent: video // this was in my Loader exemple ! i forgot to delete it in the second exemple ! my bad
    

    You have Video.qml and Gps.qml ? Right ? Is there a sourceComponent property in your files ? i guess no..
    Please read some QML doc also ..

    If you have a QML file Gps.qml you just use it where you need like this :

    Gps{
     // ther is no  sourceComponent here ... 
    }
    

    sourceComponent is a property of QML Loader type.



  • Oh okey that's why, I didn't understand thank you both :)


Log in to reply