Change the properties of qml with cpp in run*time

Hello, I would like to know if it is possible to change the property like width, height, etc during runtime. For ex. Ihave a cpp + qml gui. If i make any change in cpp it should automatically reflect on my qml code or UI. I hope you understand the question.

Suppose the temp is set to 50 in cpp, the qml display should also show 50. when i change the temp to 45 it should automatically change in qml to 45.

Any kind of suggestion would be appreciated..

AcerExtensa

You can use signal/slots method for communication between QML & cpp. "Using QML Bindings in C++ Applications":http://doc.qt.nokia.com/4.7-snapshot/qtbinding.html

AcerExtensa

"Connecting Qt signal to QML function":http://www.developer.nokia.com/Community/Wiki/Connecting_Qt_signal_to_QML_function

could you help me with an example. I appreciate it.

AcerExtensa

Just open the links I have send you, where is examples on how to do that....

Examples from first link:
@
QObject rect = object->findChild<QObject>("rect");
if (rect)
rect->setProperty("color", "red");
@

another one:
@
object->setProperty("width", 500);
QDeclarativeProperty(object, "width").write(500);
@

The second link is an step-by-step Tutorial with complete code...

Oh thank you.. it was not loading earlier. let me have a look and get back..

I dont understand what is on that link... could u help me out with my example.

AcerExtensa

Post your current code and explain exactly what you want. which function should change which variable in which qml code.

Test.qml

@import QtQuick 1.1

Rectangle

{
id:rect1
width: 400; height:400
color:"grey"
property string i:"asdff"
property int j:25
property int u:0
visible:true
signal clicked()

 Rectangle {
     id:rect2
     objectName: "rect"
     anchors.top: parent.top
     anchors.topMargin: 45
     anchors.left: parent.left
     anchors.leftMargin: 35
     anchors.right: parent.right
     anchors.rightMargin: 50
     height: 30
     radius: 8
     color:"blue"



     TextEdit {

         id:textinput1
         //text:"Enter the value to pass from QMl to cpp"
         width: 219
         height: 30
         anchors.rightMargin: 96
         anchors.fill: rect2
        visible:true


         TextInput{id:qw
             anchors.fill:textinput1
             font.pixelSize: 25
             text:""
          onAccepted: [object.cppSlot(qw.text),
                       object.cppMethod(qw.text)
                        ]

}}}}
@

@#include <QtCore/QCoreApplication>
#include <QtGui/QApplication>
#include <QDeclarativeView>
#include <QDeclarativeProperty>
#include <QGraphicsObject>
#include <QObject>
#include "MyClass.h"
#include <QDebug>
#include <QDeclarativeContext>

int main(int argc, char *argv[]) {

//
 QApplication app(argc, argv);
 QDeclarativeView view;
 view.setSource(QUrl::fromLocalFile&#40;"Test.qml"&#41;);
 view.show();
 // to change the property of the parent
 QObject *object = view.rootObject();
 object->setProperty("width", 500);
 QDeclarativeProperty(object, "width").write(500);

 ///// to change the property of the children

 QObject *rect = object->findChild<QObject*>("rect");
 if (rect)
     rect->setProperty("color", "lightblue");

// QObject rect1 = object->findChild<QObject>("pop");
// if (rect1)
// rect1->setProperty("text", "1234560");

 //
 MyClass myClass;
 view.rootContext()->setContextProperty("object", &myClass);
 return app.exec&#40;&#41;;

}

@

@#ifndef MYCLASS_H
#define MYCLASS_H
#include <QtGui/QApplication>
#include <QDeclarativeView>
#include <QDeclarativeProperty>
#include <QGraphicsObject>
#include <QObject>
#include "MyClass.h"
#include <QDebug>
#include <QDeclarativeContext>

class MyClass : public QObject
{
Q_OBJECT

//  if you want to call a method from QML give it as INVOKABLE

public:
Q_INVOKABLE void cppMethod(const QString &msg) {

     qDebug() << "FROM QML" << msg;
 }

public:
Q_INVOKABLE void cppMethod1(int abc=100) {
qDebug() << abc;

public slots:
void cppSlot(int number) {
qDebug() << "Function call from QML" << number;
}
};
#endif // MYCLASS_H
@

Here I would like to change the text parameter in cpp during runtime and it should refelect in qml during runtime..
Thanks a ton for the help

AcerExtensa

You don't have object "rect", you have "rect1" and "rect2"
rect1 - is your rootObject
rect2 - is children of rootObject,

Don't use such words like "object" it may be allready registered.
Do your onAccepted state gets called? Check it with Console.log("test")
Small example how to use properties and slots:

QmlApplicationViewer is just the QDeclarativeView subclass.

main.cpp
@
Q_DECL_EXPORT int main(int argc, char *argv[])
{
QScopedPointer<QApplication> app(createApplication(argc, argv));

QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile&#40;QLatin1String("qml/simple/main.qml"&#41;);

MyClass mcls;
viewer.rootContext()->setContextProperty("myClass", &mcls);
viewer.showExpanded();
mcls.set_fullname("admin");
return app->exec&#40;&#41;;

}
@

myclass.h
@
class MyClass : public QObject
{
Q_OBJECT
Q_PROPERTY(QString fullname READ fullname WRITE set_fullname NOTIFY fullname_changed)

public:
explicit MyClass(QObject *parent = 0):QObject(parent){}
QString fullname(){return this->fname;}

public slots:
void set_fullname(const QString & str){qDebug() << str; this->fname = str; emit this->fullname_changed(this->fname);}

signals:
void fullname_changed(const QString &);

private:
QString fname;
};
@

main.qml
@
import QtQuick 1.1

Rectangle {
width: 360
height: 360
Text {
text: myClass.fullname
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
myClass.set_fullname("from qml");
}
}
}
@

AcerExtensa

Here you can download the test project from the post below: "Simple Project":http://vip2006.net/simple.tar.gz

143U

@
public slots:
void set_fullname(const QString & str)
{
qDebug() << str;
this->fname = str;
emit this->fullname_changed(this->fname);
}
@
is giving an error,,

[Edit: Added @ code formatting -- mlong]

AcerExtensa

I can't read your mind! Which error??? Something about QDebug? Add #include <QDebug>

emit this->fullname_changed(this->fname);

This is giving an error

AcerExtensa

Which error???

expected token ; got this-> i tried several things but not workin

AcerExtensa

Can you just copy the whole error here?
Delete "this->" or delete whole emit statement it is not relevant in this example....

Can u help me with this example. I understand this better.
.qml file
@Rectangle {
id:rect1
signal dataRequired;
signal onchangecolor;
width:250
height:250

function updateData(text) { dataText.text = text}  // slot
function updatecolor(color){rect1.color="red"}

anchors.fill: parent; color: "black"

Text {
    id: dataText
    anchors.centerIn: parent; color: "white"
}

MouseArea {
    anchors.fill: parent
    onClicked:[ dataRequired(),
        onchangecolor()]
}

}@

@#include <QApplication>
#include <QGraphicsObject>
#include <QDeclarativeView>
#include "MyClass.h"

int main(int argc, char *argv[])
{
QApplication app(argc, argv);

MyClass myClass;

QDeclarativeView view;
view.setSource(QUrl("MyItem.qml"));
view.show();
view.setResizeMode(QDeclarativeView::SizeRootObjectToView);

QObject *rootObject = dynamic_cast<QObject*>(view.rootObject());

QObject::connect(rootObject, SIGNAL(dataRequired()), &myClass, SLOT(getData()));
QObject::connect(&myClass, SIGNAL(data(QVariant)), rootObject, SLOT(updateData(QVariant)));

return app.exec&#40;&#41;;

}
@

@#ifndef MYCLASS_H
#define MYCLASS_H

#include <QObject>
#include <QVariant>

class MyClass : public QObject
{
Q_OBJECT

public:
MyClass() {}

public slots:
void getData() {
QString nm("Hello");
emit data(QVariant(nm));
}

signals:
void data(QVariant data);

};

#endif // MYCLASS_H
@

@Acerextensa: I want to change the color of the rectange using signals and slots cud u help me with the code or an idea. I tried this but could not understandt the concept. Thanks a ton for the help..:) I added the signal oncolorchange

AcerExtensa

Pack your project in archive and load somewhere on the web. Don't forget to post the link.

http://www.file-upload.net/download-4697440/binding.zip.html

AcerExtensa

You have already done signal/slot connection for text in your code. Which concept do you not understand?

"binding.zip":http://vip2006.net/binding.zip

I know, that was an example. what should I do if i have to change the color of rectangle rect1, how should the property, function and signal be defined. say I want to change rect1 to yellow.

AcerExtensa

Why can't you just read links I've posted for you?
Examples there, is exactly what you are asking here!

bq. The child could be located like this:
@ QObject rect = object->findChild<QObject>("rect");
if (rect)
rect->setProperty("color", "red");@

Just change the name of object in findChild function from "rect" to "rect1" that's all. Please read it! I would not help you anymore if you will ask question which already explained in examples from tutorials again... Sorry...