Image display in QML c++

Javeria

I am displaying a list of images , with a main image that gets displayed when the user clicks on one of the images on the list, i am trying to process the image and then display it , for that i needed c++ functions, my program processes the image but it doesn't display the updated image, i save the image in a given path and then pass that path as QString back to QML to display, but it doesnt work, i cant figure out the issue as the saved image is giving correct results

Javeria

Also it displays the saved image when the user clicks on the first image in the QML list of images but not for the rest of the images

Rolias

There's not enough information in your question (at least for me) to tell what's going on. For instance do you have a property set in your C++ with a notify attribute so that QML knows something in the model has changed and it needs to update the image in the view?

I just finished my third video course in the "Qt Trilogy":http://bit.ly/qtTrilogy and this on is on Integrating Qt Quick with C++. If you want a free VIP pass (good for one week) send me a mail through the forum or post a request here.

Javeria

Okay i will check it, but heres my QML code:
@import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick 2.0
ApplicationWindow {
title: qsTr("Sketch_it")
width: 1500
id:root
height: 1000
visible: true
property var imagesListModel: ["file:/C:/original.jpg","file:/D:/11.jpg","file:/D:/test (1).jpg","file:/D:/test (2).jpg","file:/D:/test (3).jpg","file:/D:/test (4).jpg","file:/D:/test (5).jpg"]
ListView {
id: imagesList
anchors.fill:parent
spacing:25
orientation: Qt.Vertical
model: imagesListModel
delegate: Image {
objectName: "Displayimage"
width: 75
height: 100

         source: imagesListModel[index]
        Text{
            text:"Sketch"+(index+1)
        }

         MouseArea {
             anchors.fill: parent

             onClicked: {
                // main.source=imagesListModel[index];
                  m.image=imagesListModel[index];
                  imagesListModel[index]=m.image;
                 main.source=m.image;

               // console.log("User select '"+"' image");
             }
         }
    }
}
Image{
    id:main
    width: 700
    height: 600

    anchors.centerIn: parent
    objectName: RRR
    MouseArea{
      anchors.fill:parent
       onClicked: {


           console.log(mouseX+" "+mouseY);
     }
    }
}

}
@

The m object is set in main object:
@

QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
DetectSquares m;

engine.rootContext()->setContextProperty("m",&m);

@

dasRicardo

I don't understand why you need to save the processed image. You can use a normal "QQuickPaintedItem":http://doc.qt.io/qt-5/qquickpainteditem.html or for better performance "Scenegraph":http://doc.qt.io/qt-5/qtquick-visualcanvas-scenegraph.html to display the processed image.

Javeria

I was saving it to use the path of the image as source for the QML image which is the main image that gets displayed after selecting an image from the list view. But the main image should be processed after getting selected and then get displayed in QML

dasRicardo

Yeah i had supposed that this is the reason for you to save the image but in my opinion u doesn't need it. I would create a custom qml item that load the original image process it and paint it. I give u two suggestions in my previous post (QQuickPaintedItem or Scenegraph) that u can use to paint an image to the screen. Another way can be to load the original image with qml and use a "ShaderEffect":http://doc.qt.io/qt-5/qml-qtquick-shadereffect.html depending a little bit on your processing.

Javeria

I am actually using opencv for processing the image , sorry for not specifying that before so require a c++ function

dasRicardo

Yeah so my previous suggestions are a possible solution.

Rolias

I'm just thinking out loud but my approach to this would be to set the Image{} source property to point to something like m.currentSource. Then of course your C++ class must have a Q_PROPERTY of currentSource that supports read/write/notify. The mouse click will call something in your C++ to trigger the update and the notify on the currentSource property will cause the QML to update with the new image.