C++ to change QML object properties

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

p3c0

bq. Is “mousearea” has “.entered” event

That won't work. AFAIK, you can use "containsMouse":http://qt-project.org/doc/qt-5/qml-qtquick-mousearea.html#containsMouse-prop to do that provided you must set hoverEnabled to true for MouseArea

bq. I need to read a compressed file and create an Image on the screen

Do you mean jpg, png etc.. ? And do you mean you have those images and you have to just set them using Image element with size you mentioned? You can have MouseArea for Image element.

Since you are using QML, there would be no use of QGraphicsView, Scene etc..
QQuickImageProvider allows you to provide an image from C++ to qml. Check its documentation for more details.
Using QPainter you can draw acording to you needs, since you are using QML, to use QPainter you will have to use QQuickPaintedItem, override paint method and draw your contents. Have a look at it's docs for a basic idea.

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

Do you mean you are creating your own image ? or you want to set an existing image in a QML

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

What do you intend to use for square blocks, Image element ?

The best way IMO to help you would be if you would post codes like previous of what you done so that we get a clear understanding of what you intend to do.

Vignes

The images are from a compress video clip similar to H.264, but not same and file format is .BIN. Each frame in the compressed video is processed by splitting it into square blocks and doing several processes.

I need to read this bin file, then extract a frame or picture at given point, then display its' compression processes details. E.g. the first picture in the compressed video is on the screen. This will be split into a combination of block regions like complex grids. When each block is clicked, a popup window will open next to it and display details of the compression process was done to it.

I need to play this video file at the highest possible frame rate. I believe QML uses OpenGL. I also need to extract picture and display and able to play .YUV format video.

The video file or picture size will go up to 4K resolution. If I'm successful, with your help I'll. Qt QML based next generation compressed video player with analytical tools and video editor will be built.

(I may need to switch the display into Luma, Croma mode, which is filtering process.)

p3c0

What i think is you need to do those processing i.e read this bin file, then extract a frame or picture at given point on C++ side and use a Grid element to place these pictures using may be an Image element. QML definitely uses OpenGL.
Sorry, but i have never worked on Video using QML so i can't be useful there. And coming to image i think QML image element can handle that resolution.
May be you should have look at "QtAV":https://github.com/wang-bin/QtAV if its useful.

Vignes

Hi, I want to detect .bin file on load and call a function in qml. I mange to do the follow code.
@
onAccepted: {
var str = openFile.fileUrl;
var rx = /.bin/;
if(rx.test(str)){
urlCpp(str);
}
else {
imageViewer.source = str;
}
}
@

But I am looking for full QML RegExp reference list. I couldn't locate it on http://qt-project.org/. Could you let me know the url for QML RegExp reference please.
Thank you.

jeremy_k

I find the w3schools.com javascript reference to be pretty good for js portion of QML.

http://www.w3schools.com/jsref/jsref_obj_regexp.asp

p3c0

You can extract the filename extension using split and then compare
@
var f = "myfile.bin"
console.log(f.split('.').pop())
@

Vignes

Hi,
I tried to test QtAV examples (downloaded the ZIP file), but I couldn't get them build. I even tried the following link https://github.com/wang-bin/QtAV/wiki/Use-QtAV-In-Your-Projects
I couldn't get it build.
There is qml example code :
@import QtQuick 2.0
import QtAV 1.3
Item {
VideoOutput {
anchors.fill: parent
source: player
}
AVPlayer { //or MediaPlayer
id: player
source: "test.mp4"
}
MouseArea {
anchors.fill: parent
onClicked: player.play()
}
}@

If I want to get this to work, what should I do?
If I were to add new video decoder format e.g H.265, where should I add?

Thanks

p3c0

Since this is a completely new topic now than the original one I would suggest you to create a new Post, add there what you have done and what errors do you get on compiling plus your new questions related to it.

Vignes

Hi,
I have an issue that is related to Mac OS. In QML, I am setting the window flag to "SplashScreen" at starting point then after one second, I change the window flag to "Window". This second change course the contents inside the window to disappear. But the same code on MS Windows works fine (contents does not disappear).

I want the window start without frame then after a second frame appears.

Is it possible to solve this issue?

Thanks

Vignes

Hi,
I have an issue that is related to Mac OS. In QML, I am setting the window flag to "SplashScreen" at starting point then after one second, I change the window flag to "Window". This second change course the contents inside the window to disappear. But the same code on MS Windows works fine (contents does not disappear).

I want the window start without frame then after a second frame appears.

Is it possible to solve this issue?

Thanks

p3c0

I'm not quite sure about this one as I don't have Mac OS to try this. But since it works on Windows and not on Mac it could probably a bug. You can report it on "Qt Bug Tracker":https://bugreports.qt.io.