Display image in QTreeView - c++

I'm trying to show an image in a QTreeView together with some other data. To to this I've created an QAbstractItemModel. In the data method, I return some strings for column index 0 and 1 and for the third I wish to return an image. This image however, is not being displayed.
When I return the image as a decoration it displays fine but I wish to add click listeners to the image that will trigger some events. I also wish to position my image to the far right in the treeview and this seems to require a custom delegate. For these reasons I've created a separate column for the image instead.
Image is created in constructor like this: mEditImage = QImage(":/images/myImage.png");
MyModel
QVariant MyModel::data(const QModelIndex &index, int role) const {
if (!index.isValid()) {
return QVariant();
}
if(role == Qt::FontRole) {
return fontData(index);
}
if(role == Qt::ForegroundRole) {
return foreGroundData(index);
}
MyModelItem *item = getItem(index);
/*
* Use decoration to display image. Probably needs a
* custom delegate to be able to position the image correctly.
* (http://www.qtcentre.org/threads/49639-decoration-position-and-alignment)
* (https://qt-project.org/forums/viewthread/24493)
*
* Will use extra column for now instead. Might help with click
* listeners as well.
*
* if(role == Qt::DecorationRole && item->parent() != mRootItem) {
return index.column() == 1 ? mEditImage : QVariant();
}*/
if(role == Qt::SizeHintRole) {
return mEditImage.size();
}
if (role == Qt::DisplayRole) {
QString id = QString::number(item->id());
QString name = item->name();
if(item->parent() != mRootItem && index.column() == 2) {
return mEditImage;
}
if(item->parent() == mRootItem){
return index.column() == 0 ? name : "";
} else {
return index.column() == 0 ? id : name;
}
} else if(role == Qt::BackgroundRole) {
return QVariant();
}
I've had a look here:
http://www.qtcentre.org/threads/29550-How-do-I-display-a-picture-on-a-QTableView-cell
How to set an image for a row?
I've tried changing the image to a QPixmap and QIcon and also tried embedding it in a QLabel (which could not be converted to a QVariant) without luck. Changing the image to a QString displays the string so the row/column logic seems fine. Removing the SizeHintRole logic doesn't make any difference either.
Any help in understanding how to display image data in a QTreeView would be helpful. I seem to be going at this from the wrong direction.
Cheers.

It doesn't matter, how to store image. QPixmap is prefferable for speed drawing.
QVariant MyModel::data(const QModelIndex &index, int role) const
{
item = itemFromIndex( index ); // Your item implementation
...
case Qt::DisplayRole:
return item->getText();
case Qt::DecorationRole:
return item->getImage();
}
Read Qt docs about roles, it's good - http://doc.qt.io/qt-4.8/qt.html#ItemDataRole-enum

Related

Qt: Updating data in a TableView with QAbstractTableModel

I try to implement a table view with two columns. The right columns shows parameters, which should not be changed by runtime, and left column shows values, that should be updated constantly at runtime. For this I implement a data model (derived from QAbstractTableModel). After setting up this I got a table with 3 rows and 2 columns and the right columns shows the parameters. The left columns however remains empty. And after hours I didn't find a solution for this.
This is the relevant code of my data model I think:
QVariant DataTableModel::data(const QModelIndex& index, int role) const
{
if (!index.isValid()) {
return QVariant();
}
if (index.row() >= m_parameter.size()) {
return QVariant();
}
if (role == Qt::DisplayRole || role == Qt::EditRole) {
switch (index.column()) {
case 0:
return m_parameter.at(index.row());
break;
case 1:
return m_value.at(index.row());
break;
}
}
return QVariant();
}
bool DataTableModel::setData(const QModelIndex& index, const QVariant& value, int role)
{
if (!index.isValid() && role != Qt::EditRole) {
return false;
}
//change only values in column 1
if (index.column() == 1) {
m_value.replace(index.row(), value.toString());
emit dataChanged(index, index, { role });
return true;
}
return true;
}
bool DataTableModel::insertRows(int row, int count, const QModelIndex& parent)
{
//the following two methods emits signals that tells the view that the data should be changed
beginInsertRows(QModelIndex(), row, row + count - 1);
for (int i = 0; i < count; ++i) {
m_parameter.insert(row, "");
m_value.insert(row, "");
}
endInsertRows();
return true;
}
In the main class I have a function that calles the functions of the model:
void QVideoMeter::QAddTableContent()
{
QVariant value(QValueList());
m_tableDataModel->insertRows(0, 3, QModelIndex()); //insert 3 rows
m_tableDataModel->AddData(QParameterList());
m_tableDataModel->setData(QModelIndex(), value, 2);
}
QList<QString> QVideoMeter::QValueList()
{
QList<QString> values;
values.append("Test");
values.append("Hallo");
values.append("Welt");
return values;
}
Please, can someone of you review my code and tell me what I'm doing wrong?
Refer to the below two links. They provide the necessary concepts and examples:
QAbstractItemModel Subclass
Editable Tree Model Example
An editable model needs to provide implementations of setData() and
setHeaderData(), and must return a suitable combination of flags from
its flags() function.
Since this example allows the dimensions of the model to be changed,
we must also implement insertRows(), insertColumns(), removeRows(),
and removeColumns().
void MainWindow::insertRow()
{
const QModelIndex index = view->selectionModel()->currentIndex();
QAbstractItemModel *model = view->model();
if (!model->insertRow(index.row()+1, index.parent()))
return;
updateActions();
for (int column = 0; column < model->columnCount(index.parent()); ++column) {
const QModelIndex child = model->index(index.row() + 1, column, index.parent());
model->setData(child, QVariant(tr("[No data]")), Qt::EditRole);
}
}

Why can't you use setData() to set background color of a Cell in QTreeView?

I'm using the following code to try to change the background color of a cell at a given QModelIndex.
ui->TreeView->model()->setData(index, QVariant(QBrush (QColor(Qt::green))) , Qt::BackgroundRole);
where index is given by the dataChanged() signal.
This isn't working. Any ideas why?
Here's my reimplemented setData function.
bool TreeModel::setData(const QModelIndex &index, const QVariant &value, int role)
{
TreeItem *item = getItem(index); //gets item a given index
bool result = item->setData(index.column(), value);
if (result)
emit dataChanged(index, index);
return result;
}
And here is the setData method for the underlying item:
bool TreeItem::setData(int column, const QVariant &value)
{
if (column < 0 || column >= itemData.size())
return false;
itemData[column] = value;
return true;
}
Apologies for the vague question. I've managed to solve it by myself so I will post here in case anyone is ever stuck on a similar issue.
The problem for me was that I hadn't reimplemented QAbstractItemView's data() method to account for the new role.
QVariant TreeModel::data(const QModelIndex &index, int role) const
{
TreeItem *item = getItem(index);
if (role == Qt::BackgroundRole)
return item->data(index.column());
//and so on...
AFAIK the data() method gives the treeview the data out of the model that it needs to present. Within this method I hadn't accounted for the case when role == Qt::BackgroundRole so the view was never given the appropriate information out of the model.

QFileSystemModel custom icons?

In my project, I have a QTreeView displaying a location on my drive. I need to change all the icons of the files to a custom icon but leave the folders alone.
I reimplemented QFileSystemModel and I was able to change ALL the icons. Any way to limit the change to only files instead of folders?
QVariant MyQFileSystemModel::data(const QModelIndex& index, int role) const
{
if(role == Qt::DecorationRole)
return QPixmap(":/icons/TAG_Int.png");
return QFileSystemModel::data(index, role);
}
This:
Becomes:
How can I only change the icon of the files?
Thanks for your time :)
I answered my own question:
QVariant MyQFileSystemModel::data( const QModelIndex& index, int role ) const {
if( role == Qt::DecorationRole )
{
QFileInfo info = MyQFileSystemModel::fileInfo(index);
if(info.isFile())
{
if(info.suffix() == "dat")
return QPixmap(":/icons/File_Icon.png");//I pick the icon depending on the extension
else if(info.suffix() == "mcr")
return QPixmap(":/icons/Region_Icon.png");
}
}
return QFileSystemModel::data(index, role);
}
Try to get filename and check is it a file or not. So it should be something like that:
QVariant MyQFileSystemModel::data(const QModelIndex& index, int role) const
{
if(role == Qt::DecorationRole)
{
QString name = index.data();//get filename
QFileInfo info(name);
if(info.isFile()) //check
return QPixmap(":/icons/TAG_Int.png");//return image if file
}
return QFileSystemModel::data(index, role); //if not, standard processing
}

Persistent text in a QTreeView delegate during edit mode

I'm using a QTreeView with the default delegate to display editable model data. When I double-click or press F2 on the field I want to change, I get the text edit box, but the existing text is erased when the editor appears. I want the existing text to remain but become selected. The "editable tree model" example from the Qt documentation has this behavior exactly, however I can't for the life of me figure out how it is accomplished. The example does not use a custom delegate as far as I can tell and there are no calls related to delegate behavior that I can find. Can this be done without a custom delegate?
Edit: here's my code for the reimplemented QAbstractItemModel::data():
QVariant projectModel::data(const QModelIndex &index, int role) const
{
if (!index.isValid())
return QVariant();
node* item = static_cast<node*>(index.internalPointer());
if (role == Qt::DisplayRole)
return QVariant(item->data(index.column()).c_str());
else if (role == Qt::ForegroundRole)
return item->text_color(index.column());
else if (role == Qt::BackgroundRole)
return item->background_color(index.column());
else if (role == Qt::CheckStateRole)
return item->check_state(index.column());
else if (role == Qt::DecorationRole)
return item->icon(index.column());
else if (role == Qt::TextAlignmentRole)
return item->text_alignment(index.column());
else
return QVariant();
}
Your model should return a data, that you want to see in ediitor, via Qt::EditRole. If data is invalid (QVariant::isValid() == false) then editor will request data via Qt::DisplayRole.

How to display icons in QTableView via a custom QAbstractItemModel?

I'm building a custom QAbstractItemModel model.
The first column contains icons, the second one - text.
This is the code of the data method:
QVariant data ( const QModelIndex & index, int role = Qt::DisplayRole ) const
{
if(role != Qt::DisplayRole )
return QVariant();
int col = index.column();
if (col == 0)
{
return iconProvider->icon(QFileIconProvider::Folder);
}
else if (col == 1)
{
return "TEXT";
}
}
But all I get in the resulting Table View is just text in the second column. There's no folder icon in the first column.
Am I missing something here?
Qt::DisplayRole is only for text. Add:
if ( role == Qt::DecorationRole ) {
return iconProvider->icon(QFileIconProvider::Folder);
}