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

How to integrate QML code into existing Widget based project?



  • Hi,
    I have an existing Widget baset Project and I want to add a qml based ui element into this project. I tried it but qml window is shown in second window, not in mainwindow.

    gauge.qml

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Extras 1.4
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Rectangle {
            width: 350
            height: 350
    
            CircularGauge {
                id: gauge
                anchors.fill: parent
                minimumValue: 0
                maximumValue: 300
                stepSize: 0.001
                value: 132.578
    
                Rectangle {
                    color: "blue"
                    width: parent.width/4+20
                    height: parent.width/10
                    x: gauge.width/2-width/2
                    y: gauge.height/5
                    z: 0
    
                    Text {
                        id:numberText
                        font.family: "Helvetica"
                        font.pointSize: 24
                        color: "white"
                        text: gauge.value.toLocaleString(Qt.locale("de_DE"), 'f', 3)
                        smooth: true
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
    
                    }
                }
    
                style: CircularGaugeStyle {
                    labelInset: outerRadius * 0.15
                    labelStepSize: gauge.maximumValue/10
                    minimumValueAngle: -90
                    maximumValueAngle: 90
    
                    minorTickmarkCount: 1
                    minorTickmarkInset: outerRadius * 0.02
    
                    tickmarkLabel:   Text {
                        font.pixelSize: Math.max(6, outerRadius * 0.1)
                        text: styleData.value
                        color: styleData.value >= 80 ? "black" : "black"
                        antialiasing: true
                    }
    
                    needle: Rectangle {
                        y: outerRadius * 0.15
    
                        implicitWidth: outerRadius * 0.02
                        implicitHeight: outerRadius * 0.9
                        antialiasing: true
                        color: "red"
                    }
    
                    foreground: Item {
                        Rectangle {
                            width: outerRadius * 0.2
                            height: width
                            radius: width / 2
                            color: "red"
                            anchors.centerIn: parent
                        }
                    }
                }
            }
        }
    }
    
    
    

    mainwindow.cpp:

        #include <QQuickView>
        ...
        QQuickView *qmlView = new QQuickView();
        qmlView->setSource(QUrl("qrc:/gauge.qml"));
        QWidget *container = QWidget::createWindowContainer(qmlView, this);
        ui->horizontalLayoutStatus->addWidget(container);
        ...
    

    .pro file:

       QT  += qml quick
    
    


  • @kahlenberg said in How to integrate QML code into existing Widget based project?:

    Window

    Hi,
    Use Rectangle or Item instead of Window. Because Window automatically sets up the window for use with QtQuick.

    Thanks


  • Lifetime Qt Champion

    Hi
    I was wondering if not
    http://doc.qt.io/qt-5/qquickwidget.html
    is teh one you want to use ?



  • @TobbY
    Thanks for reply. I tried Item and Rectangular, but it didn't show anything.

    @mrjj I tried it, it shows in different window.

    This shows in different window:

        QQuickWidget *view = new QQuickWidget;
        view->setSource(QUrl("qrc:/gauge.qml"));
        view->show();
    

    I tried to embed it into a Layout. It didn't show anything.

        QQuickWidget *view = new QQuickWidget;
        view->setSource(QUrl("qrc:/gauge.qml"));
       ui->horizontalLayoutStatus->addWidget(view);
    

  • Lifetime Qt Champion

    Hi
    Can you try to give it parent?
    QQuickWidget *view = new QQuickWidget(this);
    I had no issue with it becoming window.

    But pay attention to what @TobbY says
    Im not 100% sure u can stuff Window {} into
    QQuickWidget . not tried it.


  • Moderators

    @kahlenberg

    you should make a minimal (not)working example, because I can ensure you, QQuickWidget does work. I'm currently using it.

    Also, keep in mind this bug QQuickwidget not show virtual keyboard in ios when using QQuickWidget.

    Currently only with a "Somewhat important" priority 😞, So it may stay for a while.



  • Hi,
    Please refer this code. it works well for me, maybe you are missing something.

        QHBoxLayout *layout = new QHBoxLayout(this);
        QQuickView *qmlView = new QQuickView();
        qmlView->setSource(QUrl(QStringLiteral("qrc:/gauge.qml")));
    
        QWidget *container = QWidget::createWindowContainer(qmlView, this);
        ui->centralWidget->setLayout(layout);
        layout->addWidget(container);
    
    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Extras 1.4
    import QtQuick.Controls 1.4
    
    Rectangle {
        visible: true
        width: 640
        height: 480
        //title: qsTr("Hello World")
    
        Rectangle {
            width: 350
            height: 350
    
            CircularGauge {
                id: gauge
                anchors.fill: parent
                minimumValue: 0
                maximumValue: 300
                stepSize: 0.001
                value: 132.578
    
                Rectangle {
                    color: "blue"
                    width: parent.width/4+20
                    height: parent.width/10
                    x: gauge.width/2-width/2
                    y: gauge.height/5
                    z: 0
    
                    Text {
                        id:numberText
                        font.family: "Helvetica"
                        font.pointSize: 24
                        color: "white"
                        text: gauge.value.toLocaleString(Qt.locale("de_DE"), 'f', 3)
                        smooth: true
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
    
                    }
                }
    
                style: CircularGaugeStyle {
                    labelInset: outerRadius * 0.15
                    labelStepSize: gauge.maximumValue/10
                    minimumValueAngle: -90
                    maximumValueAngle: 90
    
                    minorTickmarkCount: 1
                    minorTickmarkInset: outerRadius * 0.02
    
                    tickmarkLabel:   Text {
                        font.pixelSize: Math.max(6, outerRadius * 0.1)
                        text: styleData.value
                        color: styleData.value >= 80 ? "black" : "black"
                        antialiasing: true
                    }
    
                    needle: Rectangle {
                        y: outerRadius * 0.15
    
                        implicitWidth: outerRadius * 0.02
                        implicitHeight: outerRadius * 0.9
                        antialiasing: true
                        color: "red"
                    }
    
                    foreground: Item {
                        Rectangle {
                            width: outerRadius * 0.2
                            height: width
                            radius: width / 2
                            color: "red"
                            anchors.centerIn: parent
                        }
                    }
                }
            }
        }
    }
    
    

    0_1536830679577_1c594c57-554a-45c0-9ecf-1aa9fcb66de1-image.png



  • @TobbY
    Thanks. It worked but my centralWidget is not empty. I have put some GUI elements such as drop-down menu, buttons, radio buttons using Designer.
    If I use the code it shows only gauge, other gui elements are not shown. I want to show the gauge on existing GUI.



  • Hello,

    Simply add a widget in your MainWindow and assign your QML container like this.

    ```
    QWidget *container = QWidget::createWindowContainer(qmlView, this);
    QHBoxLayout *layout = new QHBoxLayout(this);
    ui->widget->setLayout(layout);
    ui->widget->setGeometry(container->geometry());
    layout->addWidget(container);
    
    ![0_1536843903076_e8a45463-8837-4fbc-9cdd-f7fb743556d1-image.png](https://ddgobkiprc33d.cloudfront.net/5b6702b1-a7e0-42b1-863f-57561eae910a.png)


  • @TobbY

    Ok thank you. It worked. Sorry for late response.


Log in to reply