How to integrate QML code into existing Widget based project?

[kahlenberg]

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

[TobbY]

@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

[mrjj]

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

[kahlenberg]

@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);

[mrjj]

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.

[J.Hilk]

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

[TobbY]

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

[kahlenberg]

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

[TobbY]

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)

[kahlenberg]

@TobbY

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