Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Can I connect qml with ui?
Qt 6.11 is out! See what's new in the release blog

Can I connect qml with ui?

Scheduled Pinned Locked Moved Solved QML and Qt Quick
16 Posts 2 Posters 2.8k 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.
  • sierdzioS sierdzio

    You can use QQuickWidget to display QML scenes in QtWidgets applications. Other than that, I have no idea what you are asking for. Do you want to react to a signal from QML in C++? Then take a look at https://doc.qt.io/qt-5/qtqml-cppintegration-interactqmlfromcpp.html#connecting-to-qml-signals

    ? Offline
    ? Offline
    A Former User
    wrote on last edited by
    #3

    @sierdzio I have a signal from the dial that is in the ui and I have to change the value of the circular gauge..But I don't know how I can write the connect

    1 Reply Last reply
    0
    • sierdzioS Offline
      sierdzioS Offline
      sierdzio
      Moderators
      wrote on last edited by
      #4

      OK, so you need to connect from C++ to QML. Correct component for that is Connections. You need to expose some C++ object to QML engine (for example via root context property), then use it in Connections component to establish the signal-slot connection.

      (Z(:^

      ? 1 Reply Last reply
      1
      • sierdzioS sierdzio

        OK, so you need to connect from C++ to QML. Correct component for that is Connections. You need to expose some C++ object to QML engine (for example via root context property), then use it in Connections component to establish the signal-slot connection.

        ? Offline
        ? Offline
        A Former User
        wrote on last edited by
        #5

        @sierdzio Excuse me but it's the first time that I use qml and I don't understand..I don't know how I can write the connection..can you show it? thanks

        1 Reply Last reply
        0
        • sierdzioS Offline
          sierdzioS Offline
          sierdzio
          Moderators
          wrote on last edited by
          #6

          I suggest trying writing some simple QML apps first, then. Connecting QtWidgets and QML is not simple.

          Here is an example:

          // C++
          ui->quickWidget->engine()->setContextProperty("yourCppObject", ui->dial);
          
          // QML
          Connections {
            target: yourCppObject
            onSliderMoved: gauge.value = value
          }
          

          This likely won't work as I had to guess all your project structure and object names. But maybe it will give you an idea how to do it.

          (Z(:^

          ? 1 Reply Last reply
          2
          • sierdzioS sierdzio

            I suggest trying writing some simple QML apps first, then. Connecting QtWidgets and QML is not simple.

            Here is an example:

            // C++
            ui->quickWidget->engine()->setContextProperty("yourCppObject", ui->dial);
            
            // QML
            Connections {
              target: yourCppObject
              onSliderMoved: gauge.value = value
            }
            

            This likely won't work as I had to guess all your project structure and object names. But maybe it will give you an idea how to do it.

            ? Offline
            ? Offline
            A Former User
            wrote on last edited by
            #7

            @sierdzio I tried to adjust you code..but it doesn't work with setContextProperty..I show my code:
            in mainWindow.cpp:
            #include "mainwindow.h"
            #include "ui_mainwindow.h"
            #include "pie1.h"
            #include "QQuickView"

            MainWindow::MainWindow(QWidget *parent) :
            QMainWindow(parent),
            ui(new Ui::MainWindow)
            {
            ui->setupUi(this);

            ui->qml->setSource(QUrl("qrc:///QmL.qml"));
            ui->qml->engine()->setContextProperty("yourObject",ui->dial);

            in file.qml:
            import QtQuick 2.7
            import QtQuick.Controls 2.2
            import QtQuick.Controls.Styles 1.4
            import QtQuick.Extras 1.4
            //import QtQuick.Controls.Styles.Desktop 1.0
            //import Qt3D.Extras 2.9

            Item {
            width: 100
            height: 90
            Rectangle {
            id: normalView
            x: 0
            y: 0
            width: parent.width
            height: parent.height
            color: "lightgray"

            CircularGauge {
            value: 19
            anchors.centerIn: parent
            style: CircularGaugeStyle
            {
            minimumValueAngle : -90
            maximumValueAngle : 90
            needle:Rectangle
            {
            width: outerRadius * 0.02
            height: outerRadius * 0.7
            color: "Light Blue"

                }
            
                tickmarkLabel:Text
                {
                    color:"Black"
                    text : styleData.value
            
                }
            

            }

            Connections{
                target:yourObject
                onSliderMoved:gauge.value= value
            }
            

            }

            }}
            

            Excuse me but I tried to read something but it'isn't easy

            sierdzioS 1 Reply Last reply
            0
            • ? A Former User

              @sierdzio I tried to adjust you code..but it doesn't work with setContextProperty..I show my code:
              in mainWindow.cpp:
              #include "mainwindow.h"
              #include "ui_mainwindow.h"
              #include "pie1.h"
              #include "QQuickView"

              MainWindow::MainWindow(QWidget *parent) :
              QMainWindow(parent),
              ui(new Ui::MainWindow)
              {
              ui->setupUi(this);

              ui->qml->setSource(QUrl("qrc:///QmL.qml"));
              ui->qml->engine()->setContextProperty("yourObject",ui->dial);

              in file.qml:
              import QtQuick 2.7
              import QtQuick.Controls 2.2
              import QtQuick.Controls.Styles 1.4
              import QtQuick.Extras 1.4
              //import QtQuick.Controls.Styles.Desktop 1.0
              //import Qt3D.Extras 2.9

              Item {
              width: 100
              height: 90
              Rectangle {
              id: normalView
              x: 0
              y: 0
              width: parent.width
              height: parent.height
              color: "lightgray"

              CircularGauge {
              value: 19
              anchors.centerIn: parent
              style: CircularGaugeStyle
              {
              minimumValueAngle : -90
              maximumValueAngle : 90
              needle:Rectangle
              {
              width: outerRadius * 0.02
              height: outerRadius * 0.7
              color: "Light Blue"

                  }
              
                  tickmarkLabel:Text
                  {
                      color:"Black"
                      text : styleData.value
              
                  }
              

              }

              Connections{
                  target:yourObject
                  onSliderMoved:gauge.value= value
              }
              

              }

              }}
              

              Excuse me but I tried to read something but it'isn't easy

              sierdzioS Offline
              sierdzioS Offline
              sierdzio
              Moderators
              wrote on last edited by
              #8

              Please use code tags to wrap your code in. Makes it easier to read.

              Does ui->dial object have sliderMoved() signal? Is value the name of it's parameter? You need to make sure that these names match in C++ and QML.

              (Z(:^

              ? 1 Reply Last reply
              1
              • sierdzioS sierdzio

                Please use code tags to wrap your code in. Makes it easier to read.

                Does ui->dial object have sliderMoved() signal? Is value the name of it's parameter? You need to make sure that these names match in C++ and QML.

                ? Offline
                ? Offline
                A Former User
                wrote on last edited by
                #9

                @sierdzio

                ////my code in QMl:
                
                import QtQuick 2.7
                import QtQuick.Controls 2.2
                import QtQuick.Controls.Styles 1.4
                import QtQuick.Extras 1.4
                //import QtQuick.Controls.Styles.Desktop 1.0
                //import Qt3D.Extras 2.9
                
                
                Item {
                    width: 100
                    height: 90
                    property alias CircularGauge : circularGauge
                    Rectangle {
                          id: normalView
                          x: 0
                          y: 0
                          width: parent.width
                          height: parent.height
                          color: "lightgray"
                
                
                
                CircularGauge {
                    id: circularGauge
                
                    anchors.centerIn: parent
                    minimumValue : -30
                    maximumValue : 30
                    style: CircularGaugeStyle
                    {
                        minimumValueAngle : -90
                        maximumValueAngle  : 90
                        needle:Rectangle
                        {
                            width: outerRadius * 0.02
                            height: outerRadius * 0.7
                            color: "Light Blue"
                
                        }
                
                        Row {
                            property var items
                            Repeater {
                                model : items
                                property var model : items.get(index)
                                }
                            }
                
                
                
                        tickmarkLabel:Text
                        {
                            color:"Black"
                            text : styleData.value
                
                        }
                
                
                 }
                
                    Connections{
                        target:yourObject
                        onSliderMoved:gauge.value= value
                    }
                }
                
                
                    }}
                
                ///My Code in MainWindow:
                
                #include "mainwindow.h"
                #include "ui_mainwindow.h"
                #include "pie1.h"
                #include "QQuickView"
                #include <QtQml>
                
                
                MainWindow::MainWindow(QWidget *parent) :
                    QMainWindow(parent),
                    ui(new Ui::MainWindow)
                {
                    ui->setupUi(this);
                
                
                
                ui->qml->setSource(QUrl("qrc:///QmL.qml"));
                
                //ui->qml->setContent(QUrl("qrc:///QmL.qml"),"yourObject",ui->dial)
                
                ui->qml->engine()->rootContext()->setContextProperty("yourObject",ui->dial->sliderMoved());
                
                    ui->widget_l->a = 0;
                    ui->widget_l->b= 90*16;
                    ui->widget_l->c= 90*16;
                    ui->widget_l->d =90*16;
                
                
                
                
                }
                
                MainWindow::~MainWindow()
                {
                    delete ui;
                }
                
                void MainWindow::on_dial_sliderMoved(int position)
                {
                
                

                Can You help me?

                sierdzioS 1 Reply Last reply
                0
                • ? A Former User

                  @sierdzio

                  ////my code in QMl:
                  
                  import QtQuick 2.7
                  import QtQuick.Controls 2.2
                  import QtQuick.Controls.Styles 1.4
                  import QtQuick.Extras 1.4
                  //import QtQuick.Controls.Styles.Desktop 1.0
                  //import Qt3D.Extras 2.9
                  
                  
                  Item {
                      width: 100
                      height: 90
                      property alias CircularGauge : circularGauge
                      Rectangle {
                            id: normalView
                            x: 0
                            y: 0
                            width: parent.width
                            height: parent.height
                            color: "lightgray"
                  
                  
                  
                  CircularGauge {
                      id: circularGauge
                  
                      anchors.centerIn: parent
                      minimumValue : -30
                      maximumValue : 30
                      style: CircularGaugeStyle
                      {
                          minimumValueAngle : -90
                          maximumValueAngle  : 90
                          needle:Rectangle
                          {
                              width: outerRadius * 0.02
                              height: outerRadius * 0.7
                              color: "Light Blue"
                  
                          }
                  
                          Row {
                              property var items
                              Repeater {
                                  model : items
                                  property var model : items.get(index)
                                  }
                              }
                  
                  
                  
                          tickmarkLabel:Text
                          {
                              color:"Black"
                              text : styleData.value
                  
                          }
                  
                  
                   }
                  
                      Connections{
                          target:yourObject
                          onSliderMoved:gauge.value= value
                      }
                  }
                  
                  
                      }}
                  
                  ///My Code in MainWindow:
                  
                  #include "mainwindow.h"
                  #include "ui_mainwindow.h"
                  #include "pie1.h"
                  #include "QQuickView"
                  #include <QtQml>
                  
                  
                  MainWindow::MainWindow(QWidget *parent) :
                      QMainWindow(parent),
                      ui(new Ui::MainWindow)
                  {
                      ui->setupUi(this);
                  
                  
                  
                  ui->qml->setSource(QUrl("qrc:///QmL.qml"));
                  
                  //ui->qml->setContent(QUrl("qrc:///QmL.qml"),"yourObject",ui->dial)
                  
                  ui->qml->engine()->rootContext()->setContextProperty("yourObject",ui->dial->sliderMoved());
                  
                      ui->widget_l->a = 0;
                      ui->widget_l->b= 90*16;
                      ui->widget_l->c= 90*16;
                      ui->widget_l->d =90*16;
                  
                  
                  
                  
                  }
                  
                  MainWindow::~MainWindow()
                  {
                      delete ui;
                  }
                  
                  void MainWindow::on_dial_sliderMoved(int position)
                  {
                  
                  

                  Can You help me?

                  sierdzioS Offline
                  sierdzioS Offline
                  sierdzio
                  Moderators
                  wrote on last edited by
                  #10

                  @vale88 said in Can I connect qml with ui?:

                  Can You help me?

                  As said - names have to match. I don't have enough information to say whether they do or not. You do.

                  MainWindow::on_dial_sliderMoved(int position)

                  That suggest the parameter is names "position" and not "value". But I don't know if that is true for your signal definition, or only in the slot.

                  (Z(:^

                  ? 1 Reply Last reply
                  3
                  • sierdzioS sierdzio

                    @vale88 said in Can I connect qml with ui?:

                    Can You help me?

                    As said - names have to match. I don't have enough information to say whether they do or not. You do.

                    MainWindow::on_dial_sliderMoved(int position)

                    That suggest the parameter is names "position" and not "value". But I don't know if that is true for your signal definition, or only in the slot.

                    ? Offline
                    ? Offline
                    A Former User
                    wrote on last edited by
                    #11

                    @sierdzio I must move the value of dial in MainWindow and the same value I must see in circular Gauge, only this

                    sierdzioS 1 Reply Last reply
                    0
                    • ? A Former User

                      @sierdzio I must move the value of dial in MainWindow and the same value I must see in circular Gauge, only this

                      sierdzioS Offline
                      sierdzioS Offline
                      sierdzio
                      Moderators
                      wrote on last edited by
                      #12

                      @vale88 said in Can I connect qml with ui?:

                      @sierdzio I must move the value of dial in MainWindow and the same value I must see in circular Gauge, only this

                      Yes, I know that. And I did tell you how to do it, twice, and given some hints. More I cannot do without more data, as mentioned in my previous comment.

                      (Z(:^

                      ? 1 Reply Last reply
                      2
                      • sierdzioS sierdzio

                        @vale88 said in Can I connect qml with ui?:

                        @sierdzio I must move the value of dial in MainWindow and the same value I must see in circular Gauge, only this

                        Yes, I know that. And I did tell you how to do it, twice, and given some hints. More I cannot do without more data, as mentioned in my previous comment.

                        ? Offline
                        ? Offline
                        A Former User
                        wrote on last edited by
                        #13

                        @sierdzio I give you the data first, thanks anyway

                        1 Reply Last reply
                        0
                        • sierdzioS Offline
                          sierdzioS Offline
                          sierdzio
                          Moderators
                          wrote on last edited by
                          #14

                          But not all of it. Please, read my comments with some understanding. I've told you how to connect, and that you need the signal, slot and parameter names to match (exactly the same strings). Your data does not specify what signal is sent by your dial, I've been only guessing that so far. Is the signal names sliderMoved? Does it have exactly one parameter, named position? If yes, then you can use that in Connections like this:

                          Connections {
                            target: yourObject
                            onSliderMoved: gauge.value = position
                          }
                          

                          But again, I'm only guessing.

                          (Z(:^

                          ? 1 Reply Last reply
                          3
                          • sierdzioS sierdzio

                            But not all of it. Please, read my comments with some understanding. I've told you how to connect, and that you need the signal, slot and parameter names to match (exactly the same strings). Your data does not specify what signal is sent by your dial, I've been only guessing that so far. Is the signal names sliderMoved? Does it have exactly one parameter, named position? If yes, then you can use that in Connections like this:

                            Connections {
                              target: yourObject
                              onSliderMoved: gauge.value = position
                            }
                            

                            But again, I'm only guessing.

                            ? Offline
                            ? Offline
                            A Former User
                            wrote on last edited by
                            #15

                            @sierdzio sliderMoved is the signal of dial that I write doing "go to slot" in ui...it's very easy to understand..when I move the dial, so the value of dial changes, the value of circular gauge must change...is it clear?

                            ? 1 Reply Last reply
                            0
                            • ? A Former User

                              @sierdzio sliderMoved is the signal of dial that I write doing "go to slot" in ui...it's very easy to understand..when I move the dial, so the value of dial changes, the value of circular gauge must change...is it clear?

                              ? Offline
                              ? Offline
                              A Former User
                              wrote on last edited by
                              #16

                              @vale88 I solved thanks

                              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