C++ to change QML object properties

[Vignes]

Still same error, the
@
iObject a(W);
@

Creates following errors:
"main.obj:-1: error: LNK2019: unresolved external symbol "public: _cdecl iObject::iObject(class QObject *)" (??0iObject@@QEAA@PEAVQObject@@@Z) referenced in function main""
And
"debug\HEVC.exe:-1: error: LNK1120: 1 unresolved externals
"
I tried cleaning and rebuild it and created a new project and tried it, same error

All the code in new project follows:
main.qml
@
import QtQuick 2.2
import QtQuick.Window 2.1

Window {
visible: true
width: 360
height: 360

MouseArea {
    anchors.fill: parent
    onClicked: {
        Qt.quit();
    }
}

Text {
    text: qsTr("Hello World")
    anchors.centerIn: parent
}

}
@

main.cpp
@
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtQuick/QQuickWindow>
#include "iobject.h"

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

QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
QQuickWindow *W = (QQuickWindow *)engine.rootObjects().first();
    iObject a(W);
    QObject::connect(engine.rootObjects().first(),SIGNAL(callCpp()),&a,SLOT(onCallCpp()));

return app.exec();

}
@

iobject.h
@
#ifndef IOBJECT_H
#define IOBJECT_H

#include <QObject>

class iObject : public QObject
{
Q_OBJECT
public:
explicit iObject(QObject *parent = 0);

signals:

public slots:
void onCallCpp();

};

#endif // IOBJECT_H
@

iobject.cpp
@
#include "iobject.h"

iObject::iObject(QObject *parent) :
QObject(parent)
{
}
@

I went though several examples and foud ""Animated Tiles":http://qt-project.org/doc/qt-4.8/animation-animatedtiles.html" example. This one uses different library like QtWidgets, QtCore/qstate.h and main.moc. here not QML. This is an old version qt-4.8 as well.

I'm now wondering, that am I using the right QT tool for my project, which uses 4K video playing, editing, analytics tools with the support of OpenGL to be implimented using Cpp.

I chose QML, because of built in OpenGL, and Cpp and JS support. Now Qt Widgets, Qt Quick Application, Qt Quick UI and old version, new version are confusion to me.

It would be great, If you could please help me with these.

Thank you

[p3c0]

Have the files iobject.cpp and .h included in the project structure from Qt Creator?
I have created a small test app based upon the example.
Here's the "Link":https://docs.google.com/file/d/0B3rkZH6q1E7ocTdnOFQwNVBDM2c/edit?pli=1
Please check if it works.

Also Animated Tiles is a completely different example. It doesnot use Qt Quick.
Please do not go over to Qt 4.8 or less. It's lot different from Qt 5.3

You can refer Qt 5 docs for more information.
Following are good links
"http://qt-project.org/doc/qt-5/qtqml-index.html":http://qt-project.org/doc/qt-5/qtqml-index.html
"http://qt-project.org/doc/qt-5/qtqml-cppintegration-topic.html":http://qt-project.org/doc/qt-5/qtqml-cppintegration-topic.html

Let me know if the Sample Application works.

[Vignes]

Thanks, your sample works. I got main working after deleting the build folder. Some reason cleaning didn't work, even when I copy and pasted your code.

I was thinking like this, creating object and connecting it to QML types:
iObject A
A.screenSize (connect to Window : visibility)
A.textApped (connect to Text : text)
A.animantionStart (connect to Animation : start)

Then changing it in cpp and then emitting signal or even creating, changing & destroying QML types in cpp. Like JavaScript in HTML application.

If you can provide this type of sample works on would be very grateful.

*Note: I learn using simple working example rather than reading text with pieces of code, because of my DYSLEXIA.

[p3c0]

You can also use "QMetaObject::invokeMethod":http://qt-project.org/doc/qt-5/qmetaobject.html#invokeMethod to call a javascript function inside a QML and in that function you can do the operations.
For eg.
Test.qml
@
Window {
visible: true
width: 400
height: 400

function changeColor() {
    rect.color="blue"
}

Rectangle {
    id: rect
    anchors.fill: parent
    color: "red"
}

}
@

and to call it from main.cpp

@
QMetaObject::invokeMethod(engine.rootObjects().first(), "changeColor");
@

You can also keep these calls in separate cpp methods of the iObject class.

[Vignes]

Say I have following main.qml
@
Window {
visible: true
width: 400
height: 400

Rectangle {
id: rect
anchors.fill: parent
color: "red"

    Text {
    id: mytext
    text: qsTr("<b>Hello World!</b>")
    color: "blue"
    }
    MouseArea {
    anchors.fill: parent
    onClicked: {
        Qt.quit();}
    }
}

}
@

How do I use this "const char * QMetaObject::className() const" to get Text object name.

How do I use "QMetaProperty::write(QObject * object, const QVariant & value) const" to change text value

Thank you

[p3c0]

bq. How do I use this “const char * QMetaObject::className() const” to get Text object name.

As shown earlier you can find the exact Item using findChild and then use "metaObject()":http://qt-project.org/doc/qt-5/qobject.html#metaObject to get it's corresponding metaObject and then use it to get "className()":http://qt-project.org/doc/qt-5/qmetaobject.html#className;

bq. How do I use “QMetaProperty::write(QObject * object, const QVariant & value) const” to change text value

This kind of bit tedious, you have to first findChild then get it's metaObject and then iterate over it to find the exact index of the "property":http://qt-project.org/doc/qt-5/qmetaobject.html#property which you want to set and then change the property for that particular index using "write":http://qt-project.org/doc/qt-5/qmetaproperty.html#write

Alternatively you use more user friendly "setProperty":http://qt-project.org/doc/qt-5/qobject.html#setProperty to directly set it instead of first iterating,finding and then changing.

[Vignes]

how do I fix the following issue
@
MouseArea {
id: oneClick
anchors.fill: parent
onClicked: opacity_1.running = true;
}
MouseArea {
id: twoClick
anchors.fill: parent
onDoubleClicked: window1.callCpp()
}
@

Thank you

[Vignes]

How do I use access mouse right click? I tried the following without success:
@
onClicked: {if(mouse.button == Qt.RightButton){if(menu.opacity == 0){opacity_1.running = true;}}}
@
and
@
onPressed: {if(mouse.button == Qt.RightButton){if(menu.opacity == 0){opacity_1.running = true;}}}
@

[Vignes]

Could you tell me how to set-up Git in QtCreator Option > Version Control: Configuration, Miscellaneous, Gitk and Repository Browser ?

Thank you

[Vignes]

What am I doing wrong here :
I have included <QScreen>
@
QScreen *screen;
qDebug() << "Information for screen:" << screen->name();
qDebug() << " Available geometry:" << screen->availableGeometry().x() << screen->availableGeometry().y() << screen->availableGeometry().width() << "x" << screen->availableGeometry().height();
qDebug() << " Available size:" << screen->availableSize().width() << "x" << screen->availableSize().height();
qDebug() << " Available virtual geometry:" << screen->availableVirtualGeometry().x() << screen->availableVirtualGeometry().y() << screen->availableVirtualGeometry().width() << "x" << screen->availableVirtualGeometry().height();
qDebug() << " Available virtual size:" << screen->availableVirtualSize().width() << "x" << screen->availableVirtualSize().height();
qDebug() << " Depth:" << screen->depth() << "bits";
qDebug() << " Geometry:" << screen->geometry().x() << screen->geometry().y() << screen->geometry().width() << "x" << screen->geometry().height();
qDebug() << " Logical DPI:" << screen->logicalDotsPerInch();
qDebug() << " Logical DPI X:" << screen->logicalDotsPerInchX();
qDebug() << " Logical DPI Y:" << screen->logicalDotsPerInchY();
@
Help please

[p3c0]

[quote author="Vignes" date="1406045743"]how do I fix the following issue
@
MouseArea {
id: oneClick
anchors.fill: parent
onClicked: opacity_1.running = true;
}
MouseArea {
id: twoClick
anchors.fill: parent
onDoubleClicked: window1.callCpp()
}
@

Thank you[/quote]

What is the problem ? You need to elaborate.

bq. onClicked: {if(mouse.button == Qt.RightButton){if(menu.opacity == 0){opacity_1.running = true;}}}

set acceptedButtons: Qt.LeftButton | Qt.RightButton for MouseArea

bq.
QScreen *screen;
qDebug() << "Information for screen:" << screen->name();
.
.
.

@
QScreen *screen = QGuiApplication::primaryScreen();
qDebug() << screen->availableGeometry();
@

[p3c0]

[quote author="Vignes" date="1406047246"]Could you tell me how to set-up Git in QtCreator Option > Version Control: Configuration, Miscellaneous, Gitk and Repository Browser ?

Thank you[/quote]

May be "this":https://qt-project.org/doc/qtcreator-2.8/creator-version-control.html#using-version-control-systems and a youtube tutorial "here":http://www.youtube.com/watch?v=3Dr05-bFMbw help you. I have never used git from Qt Creator, so can't help you that much on it. I normally do it through command line.

[Vignes]

I tried to add two mouse area function on main window: double clicked and a clicked like below:
@
MouseArea {
id: oneClick
anchors.fill: parent
onClicked: opacity_1.running = true;
}
MouseArea {
id: twoClick
anchors.fill: parent
onDoubleClicked: window1.callCpp()
}
@

• Here only the last muse area function works. So I tried merging two and it works :
  @
  MouseArea {
  id: windowClicks
  anchors.fill: parent
  onClicked: if(menu.opacity == 0){opacity_1.running = true;}{opacity_1.running = true;}}}
  onDoubleClicked: window1.callCpp()
  }
  @

I wanted a mouse area function for right mouse clicked, for this I tried the bellow:
@
onPressed: {if(mouse.button == Qt.RightButton){if(menu.opacity == 0){opacity_1.running = true;}}}
@

• Here it did not work, but if I change the "Qt.RightButton" to "Qt.LeftButton" it works

Is there any other way to add multiple mouse event to one area?

How do I use the Right click to run a function?

Is it possible to add or modify or remove mouse event in cpp?

Thanks

[p3c0]

bq. Is there any other way to add multiple mouse event to one area?

Yes. You just did it by adding onClicked and onDoubleClicked event handler to mousearea

bq. How do I use the Right click to run a function?

As I said earlier you need to set acceptedButtons
@
MouseArea {
id: twoClick
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if(mouse.button==Qt.RightButton) {
console.log("Right Click")
}
}
}
@

bq. Is it possible to add or modify or remove mouse event in cpp?

You can set enabled property from C++ by finding child as shown earlier.

[Vignes]

I want to open button that only opens "png" image file or "yuv or bin" video file and display it on fixed size stage (600 x 400).

How do I add open function to a QML item?

What library should I use?

Is canvas best for fast video processing or image processing (e.g. splitting, applying filters .. ) ?

Thank you

[p3c0]

bq. How do I add open function to a QML item?

You can use "FileDialog":http://qt-project.org/doc/qt-5/qml-qtquick-dialogs-filedialog.html to allow user to select a file and in return you get the file path. You can set "nameFilters":http://qt-project.org/doc/qt-5/qml-qtquick-dialogs-filedialog.html#nameFilters-prop to filter what kind of file you want to show.
Then after getting the file path of for eg. image you can set it to "Image":http://qt-project.org/doc/qt-5/qml-qtquick-image.html element which will display the image.

bq. Is canvas best for fast video processing or image processing (e.g. splitting, applying filters .. ) ?

I have not used canvas so can't comment on that. May be someone with greater knowledge would.
You can check "qmlvideofx":http://qt-project.org/doc/qt-5/qtmultimedia-video-qmlvideofx-example.html if it might help you in applying effects to videos.

[Vignes]

One of the reason I chose Qt QML is "qmlvideofx" player example, But it uses "QtMultimedia 5.0" and it doesn't support "yuv" format. In terms of understanding the QML and Cpp, I'm way way off.

@
FileDialog {
id: fileDialog
title: "Please choose a file"
nameFilters: ["Image File (*.png *.jpg *.bmp)"]
onAccepted: {
console.log("You chose: " + fileDialog.fileUrls)
}
onRejected: {
console.log("Canceled")
}
}

Rectangle {
    id: button
    width: 100
    height: 50
    color: "blue"
    anchors.right: parent.right
    anchors.top: parent.top


    MouseArea {
        anchors.fill: parent
        onClicked: {
            fileDialog.visible = true;
        }
    }
}

Image {
    id: imageViewer
    source: fileDialog.fileUrls
    width: parent.width
    height: parent.height/0.8
    anchors.bottom: parent.bottom
    anchors.left: parent.left
}

@

How do I pass the file Urls to image source, because above code didn't work?

Thanks

[p3c0]

bq. In terms of understanding the QML and Cpp, I’m way way off

I'd suggest you to read the concepts of QML and C++ integration instead of just directly going for examples.

Going to the code, Image element just displays a single image at a time and hence it won't take URL's but just a single URL.
So,
@
FileDialog {
id: fileDialog
title: "Please choose a file"
nameFilters: ["Image File (*.png *.jpg *.bmp)"]
onAccepted: {
console.log("You chose: " + fileDialog.fileUrls)
imageViewer.source = fileDialog.fileUrls[0]
}
onRejected: {
console.log("Canceled")
}
}

Image {
id: imageViewer
width: parent.width
height: parent.height/0.8
anchors.bottom: parent.bottom
anchors.left: parent.left
}
@

[Vignes]

I red "Integrating QML and C++" in the start and I red it again. Now it made more sense, because I have done few example and as I red I could connect them. However, I still need to do more to understand the where and what fits e.g. "Separate the user interface code from the application logic code, by implementing the former with QML and JavaScript within QML documents, and the latter with C++". With your help, I'll understand it.

Now I have two issues in the following code
@
//Button.qml
import QtQuick 2.2

Rectangle {
id: btn
width: 100
height: 62
border.width: 2
Text{
id: btnLabel
anchors.centerIn: parent
text: btn.label
}

property string label: "Button Label"
property color newColor: "lightblue"
property color onHoverColor: "gold"
property color borderColor: "black"
property string gradColor : newColor
property bool gradOn : false

signal buttonClick()
onButtonClick: {
    console.log(btnLabel.text + " clicked" )
}

MouseArea {
    id: btnMouseArea
    anchors.fill: parent
    onClicked: buttonClick()
    hoverEnabled: true
    onEntered: {parent.border.color = onHoverColor; gradColor = Qt.darker(gradColor, 1.1)}
    onExited:  {parent.border.color = borderColor; gradColor = Qt.darker(gradColor, 0.9)}

// onPressed: {
// console.log("pressed", pressed)
// gradColor = Qt.darker(gradColor, 1.5)
// }
// onReleased: {
//// gradColor = Qt.darker(gradColor, 2/3)
// gradColor = newColor
// }
}
//determines the color of the button by using the conditional operator
color: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor

gradColor: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor

gradient: Gradient {
    GradientStop { position: 0.0; color: gradColor }
    GradientStop { position: 0.17; color: "#6A6D6A" }
    GradientStop { position: 0.77; color: gradColor }
    GradientStop { position: 1.0; color: "#6A6D6A" }
}

}
@

This code: "color: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor" works but This code: "gradColor: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor" doesn't works. Why?

I was trying to put a if statement to around gradient: to switch on and off using "gradOn" custom property. It is not allowed. Any other way of doing this?

Thank you

[p3c0]

bq. This code: “color: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor” works but This code: “gradColor: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor” doesn’t works. Why?

Since you are assigning gradColor a value twice, remove the latter one. You can assign an expression even when you declare a property.
@
property string gradColor : btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor

@

bq. I was trying to put a if statement to around gradient: to switch on and off using “gradOn” custom property. It is not allowed. Any other way of doing this?

Yes, AFAIK but you must create Gradient outside.
@
Gradient {
id: gradient
GradientStop { position: 0.0; color: gradColor }
GradientStop { position: 0.17; color: "#6A6D6A" }
GradientStop { position: 0.77; color: gradColor }
GradientStop { position: 1.0; color: "#6A6D6A" }
}
gradient: if(gradOn) { return gradient } else { return undefined }
@

I'd prefer a ternary one here.