C++ to change QML object properties

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.

Vignes

I tried both, none of them are working for me (I cleaned and build it several times).

@property string gradColor : btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor@ has no complain, but doesn't darken the color

@gradient: if(gradOn)...@

complain with underline and doesn't build

p3c0

See if this works,
@
Item {
id: item
width: 200
height: 200
property bool gradOn: false
property color newColor: "red"
property string gradColor : mousearea.pressed ? Qt.darker(newColor, 1.5) : newColor

Rectangle {
    color: "red"
    anchors.fill: parent
    MouseArea {
        id: mousearea
        anchors.fill: parent
        onClicked: { gradOn = true }
    }

    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 }
}

}
@

Vignes

Yes this works, thanks, I thought "Rectangle" Inherits every things from "Item" and add its' additional properties.

Is "mousearea" has ".entered" event (@gradColor : mousearea.entered ? Qt.darker(newColor, 1.5) : newColor@)

Now the important part. I need to read a compressed file and create an Image on the screen. This image will be made of square block region of 64, 31, 16, 8, 4 pixels. When each square is clicked, an information window will display.

I found these libraries can create pixel: #include <QGraphicsScene>, #include <QtOpenGL>, #include <QQuickImageProvider> and #include <QPainter>.

But I don't know which one will be best for me (speed of image creation is very important and easy to implement)?

The number of square block sizes differ from picture to picture. So is It easier to create from Cpp or QML ?

Thank you