Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to integrate QML code into existing Widget based project?
Forum Updated to NodeBB v4.3 + New Features

How to integrate QML code into existing Widget based project?

Scheduled Pinned Locked Moved Solved General and Desktop
10 Posts 4 Posters 8.9k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • kahlenbergK Offline
    kahlenbergK Offline
    kahlenberg
    wrote on last edited by
    #1

    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
    
    
    1 Reply Last reply
    0
    • T Offline
      T Offline
      TobbY
      wrote on last edited by
      #2

      @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

      1 Reply Last reply
      0
      • mrjjM Offline
        mrjjM Offline
        mrjj
        Lifetime Qt Champion
        wrote on last edited by
        #3

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

        kahlenbergK 1 Reply Last reply
        2
        • mrjjM mrjj

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

          kahlenbergK Offline
          kahlenbergK Offline
          kahlenberg
          wrote on last edited by
          #4

          @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);
          
          mrjjM J.HilkJ 2 Replies Last reply
          0
          • kahlenbergK 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);
            
            mrjjM Offline
            mrjjM Offline
            mrjj
            Lifetime Qt Champion
            wrote on last edited by
            #5

            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.

            1 Reply Last reply
            0
            • kahlenbergK 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);
              
              J.HilkJ Offline
              J.HilkJ Offline
              J.Hilk
              Moderators
              wrote on last edited by J.Hilk
              #6

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


              Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


              Q: What's that?
              A: It's blue light.
              Q: What does it do?
              A: It turns blue.

              1 Reply Last reply
              0
              • T Offline
                T Offline
                TobbY
                wrote on last edited by TobbY
                #7

                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

                kahlenbergK 1 Reply Last reply
                2
                • T 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
                                      }
                                  }
                              }
                          }
                      }
                  }
                  
                  

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

                  kahlenbergK Offline
                  kahlenbergK Offline
                  kahlenberg
                  wrote on last edited by
                  #8

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

                  1 Reply Last reply
                  0
                  • T Offline
                    T Offline
                    TobbY
                    wrote on last edited by TobbY
                    #9

                    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)
                    kahlenbergK 1 Reply Last reply
                    2
                    • T 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)
                      kahlenbergK Offline
                      kahlenbergK Offline
                      kahlenberg
                      wrote on last edited by
                      #10

                      @TobbY

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

                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved