In a previous post, I demonstrated how to use an image provider for a relatively simple use case: loading QML from the application’s resources. Another common question I’ve heard is how to do the same from an application model; say you’ve got an existing C++ model that carries images for each item; how do you share those images with QML? You may want to do that if you have existing C++ code for a data model that renders the image data for each item (say, by compositing several different things from a model, such as its description and date).
It’s not hard: again, you need to write a QDeclarativeImageProvider that returns the appropriate images given names that the QML will derive from your model. Of course, you also need to extend your model’s roles to include a role for the image name; your model code will populate this role with a unique name for each item’s image, and the QML will use this role’s value in Image elements’ source property to reference the image. In turn, the declarative runtime will use the resulting source values to request the images from the image provider, which then provides the desired images for rendering.
Here’s what I did for a pixmap provider in a recent project, naming images in my model image://model/---, where — is a unique identifier for the item in the model.
The image provider provides only pixmaps, and is a little more sophisticated than the last one I showed you, because it needs to work with a model, whose data can change underneath us:
class ModelIndexProvider : public QObject, public QDeclarativeImageProvider
{
Q_OBJECT
public:
ModelIndexProvider(QAbstractItemModel& model, int pathRole, int pixmapRole,
QObject* parent = 0);
~ModelIndexProvider();
QPixmap requestPixmap(const QString& id, QSize* size, const QSize& requestedSize);
public slots:
void dataUpdated(const QModelIndex & topLeft, const QModelIndex & bottomRight);
void dataDeleted(const QModelIndex & parent, int start, int end);
void dataReset();
private:
QAbstractItemModel& mModel;
int mPathRole;
int mPixmapRole;
QMap mPixmapIndex;
};
The class uses a QMap to provide an index from the name of each image in the model to its model index; this is used by requestPixmap when it’s passed an id originally from the model and needs to determine the image’s index into the model. requestPixmap looks like this:
QPixmap ModelIndexProvider::requestPixmap(const QString& id, QSize* size, const QSize& requestedSize)
{
QString key = QString("image://model/%1").arg(id);
QModelIndex index = mPixmapIndex[key];
QPixmap image = mModel.data(index, mPixmapRole).value<QPixmap>();
QPixmap result;
if (requestedSize.isValid()) {
result = image.scaled(requestedSize, Qt::KeepAspectRatio);
} else {
result = image;
}
*size = result.size();
return result;
}
This code just looks up the model index of the image given the image name, and then scales the image already in the model before returning it to the caller.
Of course, the mapping between name and index must be maintained; the code performs the necessary registration to watch the model at construction time:
ModelIndexProvider::ModelIndexProvider(QAbstractItemModel& model,
int pathRole, int pixmapRole,
QObject* parent) :
QObject(parent),
QDeclarativeImageProvider(QDeclarativeImageProvider::Pixmap),
mModel(model),
mPathRole(pathRole),
mPixmapRole(pixmapRole)
{
// For each pixmap already in the model, get a mapping between the name and the index
for(int row = 0; row < mModel.rowCount(); row++) {
QModelIndex index = mModel.index(row, 0);
QString path = mModel.data(index, mPathRole).value<QString>();
mPixmapIndex[path] = index;
}
connect(&mModel, SIGNAL(dataChanged(QModelIndex,QModelIndex)),
this, SLOT(dataUpdated(QModelIndex,QModelIndex)));
connect(&mModel, SIGNAL(rowsRemoved(QModelIndex,int,int)),
this, SLOT(dataDeleted(QModelIndex,int,int)));
connect(&mModel, SIGNAL(modelReset()),
this, SLOT(dataReset()));
}
Notice how the constructor takes the roles for the image path and image itself; this way instances of the ModelIndexProvider can be used in more than one project, or more than once in a project, each for different model roles that contain QPixmap instances. The constructor begins by creating the initial index of image names and model indices, and then connects to the model's signals that indicate when the model has changed.
Handling changes isn't difficult; in my case because the model doesn't carry that many items I just recreate the index any time the data is changed or deleted. If you have a complex model that changes a lot, you might want to be smarter about cache invalidation --- or drop the cache entirely and just sequentially search the model for the bitmap data when it's requested, as the QML viewer's pretty good about caching the resulting bitmaps anyway.
void ModelIndexProvider::dataUpdated(const QModelIndex& topLeft, const QModelIndex& bottomRight)
{
// For each pixmap already in the model, get a mapping between the name and the index
for(int row = 0; row < mModel.rowCount(); row++) {
QModelIndex index = mModel.index(row, 0);
QString path = mModel.data(index, mPathRole).value<QString>();
mPixmapIndex[path] = index;
}
}
void ModelIndexProvider::dataDeleted(const QModelIndex&, int start, int end)
{
// For each pixmap already in the model, get a mapping between the name and the index
for(int row = 0; row < mModel.rowCount(); row++) {
QModelIndex index = mModel.index(row, 0);
QString path = mModel.data(index, mPathRole).value<QString>();
mPixmapIndex[path] = index;
}
}
void ModelIndexProvider::dataReset()
{
mPixmapIndex.clear();
}
All that remains is to register the image provider with the Qt declarative runtime, as you saw here!
One important thing to remember is that QML tracks your images by the image source, which is a string, not the bitmap behind the source. Even if your bitmap data is in the model in a role as it is here, changing the bitmap won't update the QML! Instead, you need to change the underlying source name to indicate to the QML that it needs to load a new bitmap. In my code, I do this by appending a timestamp in milliseconds to the source attribute; whenever my bitmap changes I update the model with the same image path and a new timestamp, which triggers a model invalidation in the QML declarative view and a subsequent bitmap fetch and redraw.
Here's the code if you want to try it for yourself.