How to reload an image in qml?

Satmosc

I have an other question , I really never made a subclass of something displayable in QML.
I know it should be something by QdeclarativeItem but I donot know how to implement a Simple Image Display !!!
I tried to check if possible to use QLabel which is able to display image too, but I do not know how and where to begin for such a thing
I have a list view which I have headache to reload images . even I am doing all possible changes , but it is not working perfect using signals and QML Image changes :(

EDITed::::

I just add following information
------------------------------- I had success by disabling Cache:false in QML image element.
just do it and you can send a signal to QML image and force it to load again but by a trick I explain.

Step by Step:

Define a Subclass for your QML Window (if you did not already did it. it is easy.)
it should be a class inherited from QDeclarativeView . . create a class using Qt Designer and call it mainwidnow (for example) and chose base class as 'QdeclarativeView' and set Type Information as 'QWidget' . finish and make the class.
inside the constructor of the class , you need to define something like this:
@rootContext()->setContextProperty("mainWindow",this);
setSource(QUrl("qml/test1/mainWindow.qml"));
@
First line to define a context for current class to QML and second like is to assign a QML to current view.
Define a Signal in QML here it is :: void imageChanged();
in your QML image file define a Connections element

@
Image{
id:imgContact ;smooth: true ; anchors.centerIn: parent;width:38;height: 38
source: "image://roster/" + imageName
cache: false

Connections{
    target: mainWindow
    onImageChanged : {
        console.log("From QML....  Data Changed received " + index + "   "+imagename)
        imgContact.source="image://roster/reload/" + imagename
        imgContact.source="image://roster/" + imagename
    }
}

}
@

the connection receives Signals from C++ side rather than QML and the target is the context name defined in C++.
the magic here are three part.
a. cache:false to force qml image not to cache data
b. change the source to force is to reload. I used /reload/ and inside my QDeclarativeImageprovider , I just remove this from id content how ? i explain here later.
c. as soon as the image is changed the signal is emitted and the qml side (connections) receives it and it will modify imgContact source property.

in the QDeclarative Image provider I used a QRegExp to compensate what I want from the extra data.
you can define a regexp like '^reload/(.*)$' simplest model and the cap(1) of the regexp will be only the Id on the pixmap request (or image request).
so you chose which one to load and you will always use id without the extra data.

this is working perfect for me for now , i hope no other problem occurre. if so , I will report here

ZapB

Start small. Get you custom item working on its own first before you worry about using it as a delegate in a ListView. Take a look at this "example":http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML for how to create a custom QML item in C++.

Feel free to come back if anything is not clear.

Satmosc

@ZapB , thanks alot for info. I check it now :)

mario

You could use a Timer (in QML) to have the image source property refreshed each 5 secs, for example:

@
Timer {
interval: 5000
repeat: true
running: true
onTriggered: { image.source = ""; image.source = "pic.png" }
}
@

I think this should work

Satmosc

@Mario. : we are not looking to refresh unexpectly, why should add some overhead to the program while it is not required.
also , it is important to keep the cache : false

mario

Well, you don't have to use a timer, you could simple just manipulate the property from any signal handler in the QML file:

@
image.source = "" ; image.source = "pic.png"
@

Amnell

Hi,

Instead of changing any property value, I suggest to call directly the NOTIFY signal of the QML property through QML, just like that :

@Image {
id: myImage
source: "source.png"
}

onSomething: {
myImage.sourceChanged(); // The NOTIFY signal of the source property
}@

Il will force a reload because (tell me if I'm wrong) QML property's are only updated due to a NOTIFY signal.

SteveKing

I think you might need to add a unique ID onto the end of the image name. QML has an image cache and you might find that "source.png" has been cached, so just telling the QML that the name has changed could result in a reload from the cache rather than from the image on disk.

Steve

Amnell

[quote author="SteveKing" date="1314014784"]I think you might need to add a unique ID onto the end of the image name. QML has an image cache and you might find that "source.png" has been cached, so just telling the QML that the name has changed could result in a reload from the cache rather than from the image on disk.

Steve[/quote]

I've just tested it and you're right :

@Image {
source: "[...]/avatar.png"

MouseArea {
    anchors.fill: parent
    onClicked: {
        parent.sourceChanged(parent.source);
        console.log("Try...");
    }
}

}@

It seems to reload from the cache. But if it's only a cache problem, we only have to wait for the "cache property":http://doc.qt.nokia.com/4.8/qml-image.html#cache-prop, coming with QtQuick 1.1.

EDIT : It needs an ID to work, like you said :

@Image {
source: "[...]/avatar.png"

MouseArea {
    anchors.fill: parent
    onClicked: {
        parent.source = "[...]/avatar.png?abc=" + Math.random();
    }
}

}@

But in this case, sending a new time the NOTIFY is useless.

saggy

@mario i have try this but i got error message ReferenceError: Can't find variable: image ....how to resolve this error