Getting an image from mysql database (as BLOB field) through subclassed QSqlQueryMode

I am working on Qt/QML app, which connects to mysql database and fetches data from it. Now, how do I fetch image from database (as BLOB field) using QSqlQueryModel? Now, I know how to connect to database, I've written simple read only subclassed QSqlQueryModel, I do know how to get the value of some field, but how do I get image and show it in some QML ListView? Does anyone has some experience and/or example with QQuickImageProvider, is this right way to go?

Your model needs to return some string id for each image when its data() method is called by the view.
The view's delegate then needs to use that id to construct an "image://" URL.
Your image provider then needs to convert the BLOB data for that id to a QImage.

Cheers,
_

Quote:

---

Originally Posted by anda_skoa

Your model needs to return some string id for each image when its data() method is called by the view.
The view's delegate then needs to use that id to construct an "image://" URL.
Your image provider then needs to convert the BLOB data for that id to a QImage.

Cheers,
_

---

Can you please provide me some example?

Code:

---

QVariant MyModel::data(const QModelIndex & index, int role) const
{
    if (role == ImageRole) {
        return QString::number(index.row());
    }
 
    /// other data
}
 
QImage MyModel::image(const QString &id) const
{
    int row = id.toInt();
 
    // load BLOB for image on row "row", return
}

---

Code:

---

Image {
    source: "image://mysqlimageprovider/" * model.image
}

---

Code:

---

QImage MyImageProvider::requestImage(const QString &d, QSize *size, const QSize &requestedSize, bool requestedAutoTransform)
{
    QImage image = myModel->image(id);
    *size = image.size();
    return image;
}

---

You could even inherit your model from both the current base class and QQuickImageProvider.

Cheers,
_

Quote:

---

Originally Posted by anda_skoa

Code:

---

QVariant MyModel::data(const QModelIndex & index, int role) const
{
    if (role == ImageRole) {
        return QString::number(index.row());
    }
 
    /// other data
}
 
QImage MyModel::image(const QString &id) const
{
    int row = id.toInt();
 
    // load BLOB for image on row "row", return
}

---

Code:

---

Image {
    source: "image://mysqlimageprovider/" * model.image
}

---

Code:

---

QImage MyImageProvider::requestImage(const QString &d, QSize *size, const QSize &requestedSize, bool requestedAutoTransform)
{
    QImage image = myModel->image(id);
    *size = image.size();
    return image;
}

---

You could even inherit your model from both the current base class and QQuickImageProvider.

Cheers,
_

---

Wow, superb idea! Will try asap!

Hmm, it seems I've forgot a little about Qt models, here is my code, first header file:

Code:

---

#ifndef UEPEOPLEMODEL_H
#define UEPEOPLEMODEL_H
 
#include <QImage>
#include <QVariant>
#include <QStringList>
#include <QDebug>
#include <QHash>
#include <QByteArray>
#include <QtSql/QSqlError>
#include <QtSql/QSqlQueryModel>
#include <QtSql/QSqlRecord>
#include <QModelIndex>
#include <QQuickImageProvider>
 
#include "../settings/uedefaults.h"
 
class UePeopleModel : public QSqlQueryModel, QQuickImageProvider
{
    Q_OBJECT
 
/*
private:
    QHash<int, QByteArray> m_ueRoleNames;
 
    void ueGenerateRoleNames();
*/
 
public:
    UePeopleModel(QObject *parent=0);
    ~UePeopleModel();
 
    QVariant data(const QModelIndex &index,
                  int role) const Q_DECL_OVERRIDE;
//    void ueRefresh();
/*
    inline QHash<int, QByteArray> roleNames() const
        { return this->m_ueRoleNames; }
*/
 
public:
    static const int UePersonNameRole=Qt::UserRole+1;
    static const int UePersonImageRole=UePersonNameRole+1;
};
 
#endif // UEPEOPLEMODEL_H

---

and its implementation:

Code:

---

#include "uepeoplemodel.h"
 
UePeopleModel::UePeopleModel(QObject* parent)
    : QSqlQueryModel(parent),
      QQuickImageProvider(QQmlImageProviderBase::Image,
                          0)
{
    QSqlDatabase db;
 
    if(!QSqlDatabase::connectionNames().contains(UePosDatabase::UeDatabaseConnectionNames::DATABASE_CONNECTION_NAME_PEOPLE,
                                                 Qt::CaseInsensitive))
    {
            db=QSqlDatabase::addDatabase(UePosDatabase::DATABASE_DRIVER,
                                         UePosDatabase::UeDatabaseConnectionNames::DATABASE_CONNECTION_NAME_PEOPLE);
    }   // if
 
    db.setHostName(/*this->uePosSettings()->ueDbHostname()*/UePosDatabase::UeDatabaseConnectionParameters::DATABASE_HOSTNAME);
    db.setDatabaseName(/*this->uePosSettings()->ueDbName()*/UePosDatabase::UeDatabaseConnectionParameters::DATABASE_NAME);
    db.setUserName(/*this->uePosSettings()->ueDbUser()*/UePosDatabase::UeDatabaseConnectionParameters::DATABASE_USERNAME);
    db.setPassword(/*this->uePosSettings()->ueDbPassword()*/UePosDatabase::UeDatabaseConnectionParameters::DATABASE_PASSWORD);
 
    if(db.open())
    {
        this->setQuery(UePosDatabase::UeSqlQueries::UeTablePeople::SQL_QUERY_GET_ALL_PEOPLE,
                       db);
        //this->ueGenerateRoleNames();
    }
    else
    {
        qDebug() << db.lastError().text();
    }
}   // default constructor
 
UePeopleModel::~UePeopleModel()
{
}   // default destructor
 
QVariant UePeopleModel::data(const QModelIndex &index,
                             int role) const
{
//    QVariant value;
 
//    if(role<Qt::UserRole)
//    {
//        value=QSqlQueryModel::data(index,
//                                   role);
//    }
//    else
//    {
//        int iColumnIndex=role-Qt::UserRole-1;
//        QModelIndex modelIndex=this->index(index.row(),
//                                           iColumnIndex);
 
//        value=QSqlQueryModel::data(modelIndex,
//                                   Qt::DisplayRole);
//    }   // if
 
//    return value;
 
    QVariant value=QSqlQueryModel::data(index,
                                        role);
 
    if(value.isValid()&&role==Qt::DisplayRole)
    {
        switch(index.column())
        {
            case UePosDatabase::UeTableIndexes::UeTablePeople::INDEX_ID:
                return value.toInt();
 
            case UePosDatabase::UeTableIndexes::UeTablePeople::INDEX_NAME:
                return value.toString();
 
            case UePosDatabase::UeTableIndexes::UeTablePeople::INDEX_APPPASSWORD:
                return value.toString();
 
            case UePosDatabase::UeTableIndexes::UeTablePeople::INDEX_CARD:
                return value.toString();
 
            case UePosDatabase::UeTableIndexes::UeTablePeople::INDEX_IMAGE:
            {
                QImage image;
 
                image.loadFromData(value.toByteArray());
 
                return image;
            }   // case
 
            default:
                return value;
        }   // switch
    }   // if
 
    return QVariant();
}   // data
 
/*
void UePeopleModel::ueRefresh()
{
    this->setQuery(UePosDatabase::UeSqlQueries::UeTablePeople::SQL_QUERY_GET_ALL_PEOPLE);
}   // ueRefresh
*/
 
//void UePeopleModel::ueGenerateRoleNames()
//{
//    //this->roleNames().clear();
//    m_ueRoleNames.clear();
//    for(int iIndex=0; iIndex<this->record().count(); iIndex++)
//    {
///*
//        this->roleNames().insert(Qt::UserRole+1+iIndex,
//                                 this->record().fieldName(iIndex).toUtf8());
//*/
//        m_ueRoleNames.insert(Qt::UserRole+1+iIndex,
//                             this->record().fieldName(iIndex).toUtf8());
//    }   // for
//}   // ueGenerateRoleNames

---

Am I using Qt::DisplayRole in right way or should I implement custom roles? And how do I then use this data()method in qml?

You can use Qt::DisplayRole, it is mapped by default to "model.display" in QML.

However, you need to keep in mind that the QtQuick views, e.g. ListView or TableView, do not deal with model columns, only rows, so you will need custom roles anyway.

I would suggest to use custom roles for all columns and not use Qt::DisplayRole other than maybe for debugging (e.g. with a QWidget based table view).

So in your data() method you first need to map the role to a column and then proceed with quering the data from the base class.

Cheers,
_

Ok, I am a little lost now. I've done this:

Code:

---

#ifndef UEPEOPLEMODEL_H
#define UEPEOPLEMODEL_H
 
#include <QImage>
#include <QVariant>
#include <QStringList>
#include <QDebug>
#include <QHash>
#include <QByteArray>
#include <QtSql/QSqlError>
#include <QtSql/QSqlQueryModel>
#include <QtSql/QSqlRecord>
#include <QModelIndex>
#include <QQuickImageProvider>
 
#include "../settings/uedefaults.h"
 
class UePeopleModel : public QSqlQueryModel, QQuickImageProvider
{
    Q_OBJECT
 
public:
    UePeopleModel(QObject *parent=0);
    ~UePeopleModel();
 
    QVariant data(const QModelIndex &index,
                  int role) const Q_DECL_OVERRIDE;
    QImage image(const QString &id) const;
    QImage requestImage(const QString &id,
                        QSize *size,
                        const QSize &requestedSize);
 
public:
    static const int UePersonNameRole=Qt::UserRole+1;
    static const int UePersonImageRole=UePersonNameRole+1;
};
 
#endif // UEPEOPLEMODEL_H

---

and implementation:

Code:

---

#include "uepeoplemodel.h"
 
UePeopleModel::UePeopleModel(QObject* parent)
    : QSqlQueryModel(parent),
      QQuickImageProvider(QQmlImageProviderBase::Image,
                          QQmlImageProviderBase::ForceAsynchronousImageLoading)
{
    QSqlDatabase db;
 
    if(!QSqlDatabase::connectionNames().contains(UePosDatabase::UeDatabaseConnectionNames::DATABASE_CONNECTION_NAME_PEOPLE,
                                                 Qt::CaseInsensitive))
    {
            db=QSqlDatabase::addDatabase(UePosDatabase::DATABASE_DRIVER,
                                         UePosDatabase::UeDatabaseConnectionNames::DATABASE_CONNECTION_NAME_PEOPLE);
    }   // if
 
    db.setHostName(/*this->uePosSettings()->ueDbHostname()*/UePosDatabase::UeDatabaseConnectionParameters::DATABASE_HOSTNAME);
    db.setDatabaseName(/*this->uePosSettings()->ueDbName()*/UePosDatabase::UeDatabaseConnectionParameters::DATABASE_NAME);
    db.setUserName(/*this->uePosSettings()->ueDbUser()*/UePosDatabase::UeDatabaseConnectionParameters::DATABASE_USERNAME);
    db.setPassword(/*this->uePosSettings()->ueDbPassword()*/UePosDatabase::UeDatabaseConnectionParameters::DATABASE_PASSWORD);
 
    if(db.open())
    {
        this->setQuery(UePosDatabase::UeSqlQueries::UeTablePeople::SQL_QUERY_GET_ALL_PEOPLE,
                       db);
        //this->ueGenerateRoleNames();
    }
    else
    {
        qDebug() << db.lastError().text();
    }
}   // default constructor
 
UePeopleModel::~UePeopleModel()
{
}   // default destructor
 
QVariant UePeopleModel::data(const QModelIndex &index,
                             int role) const
{
    QVariant value=QSqlQueryModel::data(index,
                                        role);
    if(value.isValid())
    {
        switch(role)
        {
            case UePeopleModel::UePersonNameRole:
            {
                return value.toString();
            }   // case
 
            case UePeopleModel::UePersonImageRole:
            {
                return QString::number(index.row());
            }   // case
 
            default:
                value=QVariant();
        }   // switch
    }   // if
 
    return value;
}   // data
 
QImage UePeopleModel::image(const QString &id) const
{
    int iRow=id.toInt();
}   // image
 
QImage UePeopleModel::requestImage(const QString &id,
                                   QSize *size,
                                   const QSize &requestedSize)
{
    QImage image=this->image(id);
 
    *size = image.size();
 
    return image;
}   // requestImage

---

Now what?

Couple of things:

- in order to be able to use this class as a QQuickImageProvider, it needs to have a "is-a" relation ship, i.e. publically inherit from QQuickImageProvider
- in data() it doesn't make sense to use the role as given to query the base class, after all these roles will most often be your custom roles and have no meaning for the base class
- you are missing the roleNames() override that returns the mapping of role names (used in QML) to role numbers (using in the C++ API).

Cheers,
_

Quote:

---

Originally Posted by anda_skoa

Couple of things:

- in order to be able to use this class as a QQuickImageProvider, it needs to have a "is-a" relation ship, i.e. publically inherit from QQuickImageProvider
- in data() it doesn't make sense to use the role as given to query the base class, after all these roles will most often be your custom roles and have no meaning for the base class
- you are missing the roleNames() override that returns the mapping of role names (used in QML) to role numbers (using in the C++ API).

Cheers,
_

---

Well, class is publicly inherited from QQuickImageProvider:

Code:

---

class UePeopleModel : public QSqlQueryModel, QQuickImageProvider

---

I've upgraded function data(), is now ok:

Code:

---

QVariant UePeopleModel::data(const QModelIndex &index,
                             int role) const
{
    QVariant value=QSqlQueryModel::data(index,
                                        role);
    if(value.isValid())
    {
        switch(role)
        {
            case ueRoleName:
            {
                return value.toString();
            }   // case
 
            case ueRoleImage:
            {
                return QString::number(index.row());
            }   // case
 
            default:
                value=QVariant();
        }   // switch
    }   // if
 
    return value;
}   // data

---

But what do I have to put inside method UePeopleModel::image?

Sincerely yours,
Marko

Quote:

---

Originally Posted by MarkoSan

Well, class is publicly inherited from QQuickImageProvider:

Code:

---

class UePeopleModel : public QSqlQueryModel, QQuickImageProvider

---

---

Nope. Unless your code looks different in reality, this is a private inheritance

Quote:

---

Originally Posted by MarkoSan

I've upgraded function data(), is now ok:

---

Nope, see my last comment.

Quote:

---

Originally Posted by MarkoSan

But what do I have to put inside method UePeopleModel::image?

---

You get the BLOB from the base class for the given row and then load it into a QImage.
If the BLOB is data in a format known to Qt, then you can probably use QImage::loadFromData().

Cheers,
_

Quote:

---

Originally Posted by anda_skoa

Nope. Unless your code looks different in reality, this is a private inheritance


Nope, see my last comment.


You get the BLOB from the base class for the given row and then load it into a QImage.
If the BLOB is data in a format known to Qt, then you can probably use QImage::loadFromData().

Cheers,
_

---

Do you have some example regarding this problem, particulary passing text and Image to qml, because I do not understand you regarding data() method?

---

Added after 50 minutes:

Ok, now I've upgraded method image:

Code:

---

QImage UePeopleModel::image(const QString &id) const
{
    return QImage::fromData(this->record(id.toInt()).value(UePosDatabase::UeTableIndexes::UeTablePeople::INDEX_IMAGE).toByteArray(),
                            "PNG");
}   // image

---

Is this ok now?
Secondly, the header of class is now:

Code:

---

class UePeopleModel : public QSqlQueryModel,
                      public QQuickImageProvider

---

to get as-is relationship. Is this ok?
I still do not know what is wrong with data() method:

Code:

---

QVariant UePeopleModel::data(const QModelIndex &index,
                             int role) const
{
    QVariant value=QSqlQueryModel::data(index,
                                        role);
    if(value.isValid())
    {
        switch(role)
        {
            case ueRoleName:
            {
                return value.toString();
            }   // case
 
            case ueRoleImage:
            {
                return QString::number(index.row());
            }   // case
 
            default:
                value=QVariant();
        }   // switch
    }   // if
 
    return value;
}   // data

---

Can someone please help me?!

You data() method is still wrong because you do not handle the role correctly.

As I wrote before, the roles you have specified mean nothing to the data() method of the base class.
So calling the base implementation with the arguments you are getting is not going to work at all.

In comment #7 I explained that you need to map the roles used by you to the columns used by the base class.
A QtQuick view will always call with column 0 and one of the roles you have specified and used by name.
The base class implementation expects column value > 0 for fields other than the first and one of the Qt standard item roles.

So you first need to switch() on the role to determine the column of the data you are supposed to deliver.
Then call the base class' data() with that row/column and e.g. Qt::DisplayRole.

Unless of course the initial role is the image role, in which case you return the identifier that you later on can use to provide the image.

Cheers,
_

Quote:

---

Originally Posted by anda_skoa

You data() method is still wrong because you do not handle the role correctly.

As I wrote before, the roles you have specified mean nothing to the data() method of the base class.
So calling the base implementation with the arguments you are getting is not going to work at all.

In comment #7 I explained that you need to map the roles used by you to the columns used by the base class.
A QtQuick view will always call with column 0 and one of the roles you have specified and used by name.
The base class implementation expects column value > 0 for fields other than the first and one of the Qt standard item roles.

So you first need to switch() on the role to determine the column of the data you are supposed to deliver.
Then call the base class' data() with that row/column and e.g. Qt::DisplayRole.

Unless of course the initial role is the image role, in which case you return the identifier that you later on can use to provide the image.

Cheers,
_

---

Ok, will try, but where do I get identifier that I can later use to provide the image? And am I getting closer with data()method:

Code:

---

QVariant UePeopleModel::data(const QModelIndex &index,
                             int role) const
{
    QVariant value=QVariant();
 
    switch(role)
    {
        case UePeopleModel::ueRoleImage:
        {
            value=this->record(index.row()).value(UePosDatabase::UeTableIndexes::UeTablePeople::INDEX_IMAGE).toString();
        }   // case
 
        case UePeopleModel::ueRoleName:
        {
            value=this->record(index.row()).value(UePosDatabase::UeTableIndexes::UeTablePeople::INDEX_NAME).toString();
        }   // case
 
        default:
            return value;
    }   // switch
 
    return value;
}   // data

---

Quote:

---

Originally Posted by MarkoSan

Ok, will try, but where do I get identifier that I can later use to provide the image?

---

I am not sure what you mean, we had that already several comments ago.
The simplest way is to just encode the row as a string.

Quote:

---

Originally Posted by MarkoSan

And am I getting closer with data()method:

---

Yes, that looks better.
Obviously the handling of the image role is wrong, but the name looks fine.
You wouldn't need to call toString() though.

Cheers,
_

Ok, now I am getting QML runtime errros:

Quote:

---

qrc:/gui/delegates/UePeopleItemDelegate.qml:55:9: QML Image: Cannot open: qrc:/gui/delegates/nan
qrc:/gui/delegates/UePeopleItemDelegate.qml:55:9: QML Image: Cannot open: qrc:/gui/delegates/nan
qrc:/gui/delegates/UePeopleItemDelegate.qml:55:9: QML Image: Cannot open: qrc:/gui/delegates/nan
qrc:/gui/delegates/UePeopleItemDelegate.qml:55:9: QML Image: Cannot open: qrc:/gui/delegates/nan
qrc:/gui/delegates/UePeopleItemDelegate.qml:55:9: QML Image: Cannot open: qrc:/gui/delegates/nan

---

Here is QML ListView error is generated in:

Code:

---

ListView
    {
        id: uePeopleListView
        boundsBehavior: Flickable.DragAndOvershootBounds
        snapMode: ListView.SnapToItem
        highlightRangeMode: ListView.ApplyRange
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.bottom: parent.top
        anchors.bottomMargin: -128
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0
        orientation: ListView.Horizontal
        flickableDirection: Flickable.HorizontalFlick
        antialiasing: true
        spacing: 16
        delegate: UePeopleItemDelegate
        {
            id: uePersonDelegate
 
            ueParamPersonImage: "//image://UePeopleModel/"*uePeopleModel.ueImage
            ueParamPersonName: "Test"//UePersonNameRole
        }
        model: uePeopleModel
    }

---

and here is ListView's delegate:

Code:

---

import QtQuick 2.3
 
Item
{
    id: uePeopleItemDelegate
 
    property string ueParamPersonImage
    property string ueParamPersonName
 
    width: 256
    height: 256
    antialiasing: true
 
    clip: true
 
    Rectangle
    {
        id: ueRectangleMain
        color: "#000000"
 
        radius: 16
        anchors.fill: parent
        antialiasing: true
        border.color: "#ffffff"
        border.width: 4
        clip: true
        //opacity: 0.7
 
        Grid
        {
            antialiasing: true
            anchors.rightMargin: 12
            anchors.leftMargin: 12
            anchors.bottomMargin: 12
            anchors.topMargin: 12
            anchors.fill: parent
            spacing: 4
            rows: 2
            columns: 1
        }
 
        Row
        {
            id: ueRowImage
            anchors.rightMargin: 12
            anchors.leftMargin: 12
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottomMargin: 48
            anchors.topMargin: 12
        }
 
        Image
        {
            id: uePersonImage
            x: 12
            y: 12
            width: 232
            height: 196
            antialiasing: true
            fillMode: Image.PreserveAspectFit
            source: ueParamPersonImage
        }
 
        Column
        {
            id: ueColumnPeopleInfo
            x: 12
            y: 214
            width: 232
            height: 30
            spacing: 0
        }
 
        Text
        {
            id: ueTextPersonName
            x: 12
            y: 214
            width: 232
            height: 30
            color: "#ffffff"
            text: ueParamPersonName
            font.bold: true
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 16
        }
    }
}

---

The number of erros is consistent with number of records that I wish to display. What is now wrong?!

The image URL must be something like
"image://providername/imageid"

providername is what you register your image provider with, imageid is what your model returns for the image role in data().

Code:

---

delegate: UePeopleItemDelegate
        {
            id: uePersonDelegate
 
            ueParamPersonImage: "image://UePeopleModel/" + model.uePeopleModel.ueImage
        }

---

Assuming that your roleNames() method has a mapping of "ueImage" to the numerical UePeopleModel::ueRoleImage

From the log output I would guess that you are not using an image URL, thus the value returned from the model is considered a relative filename, your delegate is inside the Qt resource system under "delegates" and the value you pass back from then model is "nan".

Cheers,
_

Quote:

---

Originally Posted by anda_skoa

The image URL must be something like
"image://providername/imageid"

providername is what you register your image provider with, imageid is what your model returns for the image role in data().

Code:

---

delegate: UePeopleItemDelegate
        {
            id: uePersonDelegate
 
            ueParamPersonImage: "image://UePeopleModel/" + model.uePeopleModel.ueImage
        }

---

Assuming that your roleNames() method has a mapping of "ueImage" to the numerical UePeopleModel::ueRoleImage

From the log output I would guess that you are not using an image URL, thus the value returned from the model is considered a relative filename, your delegate is inside the Qt resource system under "delegates" and the value you pass back from then model is "nan".

Cheers,
_

---

I've changed delegate params to:

Code:

---

ListView
    {
        id: uePeopleListView
        boundsBehavior: Flickable.DragAndOvershootBounds
        snapMode: ListView.SnapToItem
        highlightRangeMode: ListView.ApplyRange
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.bottom: parent.top
        anchors.bottomMargin: -128
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0
        orientation: ListView.Horizontal
        flickableDirection: Flickable.HorizontalFlick
        antialiasing: true
        spacing: 16
        delegate: UePeopleItemDelegate
        {
            id: uePersonDelegate
 
            ueParamPersonImage: "image://UePeopleModel/" + model.uePeopleModel.ueRoleImage
            ueParamPersonName: model.uePeopleModel.ueRoleName
        }
        model: uePeopleModel
    }

---

Now I am getting following errors:

Quote:

---

qrc:/main.qml:52: TypeError: Cannot read property 'UePersonNameRole' of undefined
qrc:/main.qml:51: TypeError: Cannot read property 'ueRoleImage' of undefined
qrc:/main.qml:52: TypeError: Cannot read property 'UePersonNameRole' of undefined
qrc:/main.qml:51: TypeError: Cannot read property 'ueRoleImage' of undefined
qrc:/main.qml:52: TypeError: Cannot read property 'UePersonNameRole' of undefined
qrc:/main.qml:51: TypeError: Cannot read property 'ueRoleImage' of undefined
qrc:/main.qml:52: TypeError: Cannot read property 'UePersonNameRole' of undefined
qrc:/main.qml:51: TypeError: Cannot read property 'ueRoleImage' of undefined
qrc:/main.qml:52: TypeError: Cannot read property 'UePersonNameRole' of undefined
qrc:/main.qml:51: TypeError: Cannot read property 'ueRoleImage' of undefined

---

Here is again UePeopleModel class header, which are ueRoleName and ueRoleImage declared in:

Code:

---

#ifndef UEPEOPLEMODEL_H
#define UEPEOPLEMODEL_H
 
#include <QImage>
#include <QVariant>
#include <QStringList>
#include <QDebug>
#include <QHash>
#include <QByteArray>
#include <QtSql/QSqlError>
#include <QtSql/QSqlQueryModel>
#include <QtSql/QSqlRecord>
#include <QModelIndex>
#include <QQuickImageProvider>
#include <QByteArray>
#include <QSqlRecord>
#include <QDebug>
 
#include "../settings/uedefaults.h"
#include "../settings/uetypes.h"
 
class UePeopleModel : public QSqlQueryModel,
                      public QQuickImageProvider
{
    Q_OBJECT
 
public:
    UePeopleModel(QObject *parent=0);
    ~UePeopleModel();
 
    QVariant data(const QModelIndex &index,
                  int role) const Q_DECL_OVERRIDE;
    QImage ueImage(const QString &id) const;
    QImage requestImage(const QString &id,
                        QSize *size,
                        const QSize &requestedSize);
    UeTypeRoles roleNames() const;
 
public:
    static const int ueRoleName=Qt::UserRole+1;
    static const int ueRoleImage=Qt::UserRole+2;
};
 
#endif // UEPEOPLEMODEL_H

---

and here is roleNames()method:

Code:

---

UeTypeRoles UePeopleModel::roleNames() const
{
    UeTypeRoles roles;
    const int iRoleName=UePeopleModel::ueRoleName;
    const int iRoleImage=UePeopleModel::ueRoleImage;
 
    roles.insert(iRoleName,
                 "ueRoleName");
    roles.insert(iRoleImage,
                 "ueRoleImage");
 
    return roles;
}   // roleNames

---

What am I still missing? I am getting furious!!!!

What is UeTypeRoles?

Why is there "uePeopleModel" between "model" and "ueRoleImage" in QML?

Cheers,
_

Quote:

---

Originally Posted by anda_skoa

What is UeTypeRoles?

Why is there "uePeopleModel" between "model" and "ueRoleImage" in QML?

Cheers,
_

---

I've corrected QML model statement into:

Code:

---

ListView
    {
        id: uePeopleListView
        boundsBehavior: Flickable.DragAndOvershootBounds
        snapMode: ListView.SnapToItem
        highlightRangeMode: ListView.ApplyRange
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.bottom: parent.top
        anchors.bottomMargin: -128
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0
        orientation: ListView.Horizontal
        flickableDirection: Flickable.HorizontalFlick
        antialiasing: true
        spacing: 16
        delegate: UePeopleItemDelegate
        {
            id: uePersonDelegate
 
            ueParamPersonImage: "image://uePeopleModel/"+model.ueRoleImage
            ueParamPersonName: model.ueRoleName
        }
        model: uePeopleModel
    }

---

and UeTypeRoles is declared in uetypes.h as:

Code:

---

#ifndef UETYPES
#define UETYPES
 
#include <QHash>
#include <QByteArray>
 
typedef QHash<int, QByteArray> UeTypeRoles;
 
#endif // UETYPES

---

and now am I getting following runtime QML errors:

Quote:

---

qrc:/gui/delegates/UePeopleItemDelegate.qml:55:9: QML Image: Invalid image provider: image://uepeoplemodel/undefined
qrc:/main.qml:52:32: Unable to assign [undefined] to QString
qrc:/gui/delegates/UePeopleItemDelegate.qml:55:9: QML Image: Invalid image provider: image://uepeoplemodel/undefined
qrc:/main.qml:52:32: Unable to assign [undefined] to QString
qrc:/gui/delegates/UePeopleItemDelegate.qml:55:9: QML Image: Invalid image provider: image://uepeoplemodel/undefined
qrc:/main.qml:52:32: Unable to assign [undefined] to QString
qrc:/gui/delegates/UePeopleItemDelegate.qml:55:9: QML Image: Invalid image provider: image://uepeoplemodel/undefined
qrc:/main.qml:52:32: Unable to assign [undefined] to QString
qrc:/gui/delegates/UePeopleItemDelegate.qml:55:9: QML Image: Invalid image provider: image://uepeoplemodel/undefined
qrc:/main.qml:52:32: Unable to assign [undefined] to QString

---

Now, I've done step-by-step debugging of method data(), the database IS open and connection to it IS established (checked 5 times), and I've addes some debug code int data() method:

Code:

---

QVariant UePeopleModel::data(const QModelIndex &index,
                             int role) const
{
    QVariant value=QVariant();
 
    switch(role)
    {
        case ueRoleImage:
        {
            for(int iIndex=0; iIndex<this->record().count(); iIndex++)
            {
                qDebug() << this->record().fieldName(iIndex) << " ";
                qDebug() << this->record().value(iIndex) << " ";
            }   // for
            //value=this->record(index.row()).value(UePosDatabase::UeTableIndexes::UeTablePeople::INDEX_IMAGE).toByteArray();
            value=this->record(index.row()).value("IMAGE").toByteArray();
            int i=0;
        }   // case
 
        case ueRoleName:
        {
            value=this->record(index.row()).value(UePosDatabase::UeTableIndexes::UeTablePeople::INDEX_NAME).toString();
            int i=0;
        }   // case
 
        default:
            return value;
    }   // switch
 
    qDebug() << value;
 
    return value;
}   // data

---

Here are outputs if qDebug():

Quote:

---

"ID"
QVariant(QString, "")
"NAME"
QVariant(QString, "")
"APPPASSWORD"
QVariant(QString, "")
"CARD"
QVariant(QString, "")
"ROLE"
QVariant(QString, "")
"VISIBLE"
QVariant(QString, "")
"IMAGE"
QVariant(QByteArray, "")

---

Why am I getting empty values from db?!
P.S.: int i=0; was added for debug purpose, to set breakpoint in this line.