How to display data from MQTT server in real-time?

Eeli K

@AntonioQt So you have the C++ class ready, why don't you continue with the steps I mentioned? Do you have some specific problem?

AntonioQt

I made the following changes in the above code:

	//MyDataClass.h
	    Q_INVOKABLE QString onMQTT_Received(const QMQTT::Message &message);

	//MyDataClass.cpp
	QString MyDataClass::onMQTT_Received(const QMQTT::Message &message)
	{
		QString str;
		str = message.payload();
		return str;
	}

	//main.qml
	import QtQuick 2.6
	ApplicationWindow {
		id: root
		width: 300
		height: 480
		visible: true
		Text{
			text:MyDataClass.onMQTT_Received()
		}
	}

But not seeing any output in QML window. Do I need change anything else?

Eeli K

@AntonioQt http://doc.qt.io/qt-5/qtqml-cppintegration-overview.html#embedding-c-objects-into-qml-with-context-properties

Send a signal from the C++ object and catch it in QML using Connections (see the Qt docs) type.

AntonioQt

Tried with various combinations but not getting output. Kindly provide the code example. My code updates are as below:

//main.cpp

    QQuickView view;
    MyDataClass data;

    view.rootContext()->setContextProperty("myobj", &data);
    view.setSource(QUrl::fromLocalFile("qrc:/main.qml"));
    view.show();

//MyDataClass.cpp
QString MyDataClass::onMQTT_Received(const QMQTT::Message &message)
{
    QString str;
    str = message.payload();
    qDebug() << str;
    emit mySignal(str);
    return str;
}

//main.qml

Item {
    width: 500; height: 800
    Connections {
    target: myobj
    onMySignal:console.log(str)
    }

Am I making some mistakes? Kindly help me resolving this issue. I am not getting output in QML.

SGaist

What is the signature of your signal ?

AntonioQt

Sorry for late response, I was away.
As @SGaist asked below are my code snippet:

 QObject::connect(client, SIGNAL(received(const QMQTT::Message &)), this, SLOT(onMQTT_Received(const QMQTT::Message &)));

I copied from my second comment above.
I hope I understand your question correctly.
How can I catch this signal in QML?

SGaist

Where's your QMQTT come from ?

AntonioQt

@SGaist
I got this library from here:
https://github.com/emqtt/qmqtt/tree/master/src/mqtt

I am using this library to receive data from cloud. This library is fulfilling the requirement - as I am getting the output in Qt as I commented above. Now I just wanted this data(output) in QML.

SGaist

I'd suggest taking a look at Qt's own module for that (it's all new), you can find it here and it might make things easier to integrate with QML.

Eeli K

@AntonioQt "What is the signature of your signal ?" like @SGaist asked - i.e. how it is declared in C++ header? QML sees the argument by the name which is in C++ declaration, not call time name. "onMySignal:console.log(str)" should work if you have

signals: void mySignal(QString str);

but not if you have e.g.

signals: void mySignal(QString someString); //you must use "someString" in QML

AntonioQt

Thinking of trying this @SGaist . But not getting exact link to download the library.

AntonioQt

@Eeli-K Following the same. But not getting the output. I m trying now the latest library as @SGaist suggested.

Eeli K

@AntonioQt You've got:

//MyDataClass.cpp
QString MyDataClass::onMQTT_Received(const QMQTT::Message &message)
{
    QString str;
    str = message.payload();
    qDebug() << str;
    emit mySignal(str);
    return str;
}

and if the str is seen in the debug output then the problem isn't in the mqtt library, it's in your C++ or QML code. So, provided that you have

signals: void mySignal(QString str);

in your class header, MyDataClass::onMQTT_Received as seen above,

view.rootContext()->setContextProperty("myobj", &data);

in main.cpp,

Connections{
target: myobj
onMySignal: {console.log("String received! " + str)}
}

and you see the string in C++ debug output you should also see the "String received!" message plus the string in QML debug output. If not, there's something weird going on. You can also try adding

Component.onCompleted: {console.log(myobj)}

to an item in your main.qml to see if the C++ object is really recognized.

EDIT: If you test something with debug output, please paste the real output here. Sometimes it gives an answer you don't notice and we can't tell without seeing.

SGaist

Looks like the repository is not yet on code.qt.io, but you can get it here.

AntonioQt

@Eeli-K This worked! :D

Thank you so much.
There were two issues with the code, first was resolved by the snippet you provided above.
The second I observed while copying the qDebug output for you guys. There was an error message :

file:qrc:/main.qml: No such file or directory

Means that, no signals were being passed into "main.qml". Then I searched for the resolution and the solution was, modifying the following code in "main.cpp":

view.setSource (QUrl("qrc:///main.qml"));

I did not dig much about how/why it happened?

The next thing I am looking for -to use the str (variable) in Qml. I just want to use this (or any other single) variable with Qml widget. Do we have any quickest way to achieve this?
Once again thank you very much @Eeli-K and @SGaist for your efforts and guidance.

AntonioQt

Solved!
Few things required to be added in addition what @Eeli-K had commented in his last comment. I am providing the final working snippet for future, if anybody is facing the similar issue they may refer the above conversation between experts and me.
Below is the final update in "main.qml" :

Connections {
        target: myobj
        onMySignal: {
            labelStr.text = str // Set the counter to a text label
        }

"labelStr" is a label that has to be defined separately in QML.

GrecKo

That looks like a job for a Q_PROPERTY and not for a signal.

Store the message payload in a member variable of your class, let's say QString m_message.

In your header you'd use a Q_PROPERTY(QString message READ message NOTIFY messageChanged)

Implementation of the getter:
QString message() { return m_message; }

Add a signal void messageChanged(); in your header.
And modify your exisiting onMQTT_Received to be :

void MyDataClass::onMQTT_Received(const QMQTT::Message &message)
{
    m_message = message.payload();
    emit messageChanged();
}

Then in your QML you can just do:

Label {
    text: myobj.message
}

Nice and clean declarative code, no need to deal with Connections and signals in QML.

AntonioQt

Awesome @GrecKo!
Thank you so much. It worked for me.

This was indeed easier. I tried it earlier but couldn't succeed, but the way explained was very explanatory.
So now I understood two exposing data to QML.

Thank you everyone!

SGaist

On a side note, the getter should be const, it doesn't modify anything in the class instance.