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

Can I connect qml with ui?



  • I have a qml file:
    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
    
        }
    }
    

    }

    }}
    

    and in MainWindow I have this:
    void MainWindow::on_dial_sliderMoved(int position)
    {
    }

    How Can I connect these two things?


  • Moderators

    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



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


  • Moderators

    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.



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


  • Moderators

    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.



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


  • Moderators

    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.



  • @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?


  • Moderators

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



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


  • Moderators

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



  • @sierdzio I give you the data first, thanks anyway


  • Moderators

    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.



  • @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?



  • @vale88 I solved thanks


Log in to reply