How to reload an image in qml?

franziss

I have created a thread which polls every 5 second to a mysql table to get a record which contains an image stored as a blob. I convert this blob into an image file which is stored in the local drive. But how do I refresh the qml image?
@
Image {
id: studentReceiveImage
source: "1.png"
}
@

Since the above only loads once. THank you for your kind help

thisisbhaskar

Couple of solutions I can think of.

One is to have a Loader element which unloads and loads the above Image element every 5 seconds. When you unload and load it again, you should get the new image loaded in side Image Item.
second solution is to store images with names 1.png, and 2.png. Alternate this process. And when you have 2.png, set source to 2.png, and next time set the source to 1.png.

Let me think and see If I can find a better solution.

ZapB

Have your C++ expose the image filename as a property, then when the file contents change emit the property notifier signal. This should retrigger QML to refetch the image.

thisisbhaskar

[quote author="ZapB" date="1308830601"]Have your C++ expose the image filename as a property, then when the file contents change emit the property notifier signal. This should retrigger QML to refetch the image.[/quote]

I have a doubt that QML re-fetch the image with this signal.
@franziss, can you try and let us know.

ZapB

It depends how clever QML tries to be. For other properties exposed from C++ the onus is on the setter function to not re-emit a property notifier signal needlessly so as to help break infinite loops between inter-dependent property bindings.

So it may work or it may not. Depends if the QML Image item authors tried to be clever and check if the source URL == the new URL. I have not looked.

franziss

Thakns ZapB! You suggestion works!

To have signals and slots between c++ and qml, please refer to this great example
http://www.developer.nokia.com/Community/Wiki/CS001625_-_Connecting_Qt_signal_to_QML_function

Initially, I stored my image file to the same filename as the old image file, but qml doesn't refresh the image file. So in order to refresh the image, it must be a new filename

Many thanks for ZapB and Vijay suggestions :)

ZapB

Cool. Glad to see you got it working.

Satmosc

I see that what I was searching was a bit explained here. but I should tell that it is easy at all.

If you have an Image Element in QML, you can define a Connection inside Image element.
then in the Connection Element , specify the target equal your C++ Class which must be the context that is inherited from QDeclarative... View , then call on<Signal Name with first letter Capital>

I am using Image Provider by QDeclarative Image Provider.
@
Image{
id:imgContact ;smooth: true ; anchors.centerIn: parent;width:30;height: 30
source: "image://roster/" + jid //"../images/unknownContact_30x30.png"
Connections{
target: mainWindow
onRostermodelContactImageChanged : console.log("From QML.... Data Changed received ")
}
}
@

it is easy....
but I am looking for a suite able way to reload the Image in QML from source rather than changing a property.

ZapB

Another approach would be to create your own MyImage custom C++ type and export that to QML. Then your custom type give it a slot that you can call to refresh the image from source even if the source filename has not changed.

Satmosc

[quote author="ZapB" date="1309766171"]Another approach would be to create your own MyImage custom C++ type and export that to QML. Then your custom type give it a slot that you can call to refresh the image from source even if the source filename has not changed.[/quote]

It looks your recommendation should be much better than QML Image. because QML image resize is also not happening all times . it is randomly and I cannot understand why ! there is something about it that I do not know and I cannot fix it.

I have a question please.
If I use Image Element from Qt ImageViewer , then how is the performance ?
I need to use it as an image element in ListView ? will it cause a performance issue ?

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