QML: Create two module inside one tab

Chanchan

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

ODБOï

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

Chanchan

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

ODБOï

@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

Chanchan

Ooh ok ! I understand better :) Thanks :D

Chanchan

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

J.Hilk

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

video{// Your QML Reusable component Video.qml

that ought to be a capital V

ODБOï

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

Chanchan

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