Show image in a column of QTableView from QSqlTableModel - c++

I'm curious about how I can display an image from my database in a QTableView.
Is there something like QTableWidgetItem that I am able to use it in QTableView?
I use QSqlTableModel.

A rough idea is to use QStandardItem::setData to set a QPixmap(transformed into QVariant) on it, then you can set the QStandardItem on the QStandardItemModel.
Sequence: QImage--->QPixmap--->QVariant--->QStandardItem--->QStandardItemModel
For example:
QStandardItemModel *model = new QStandardItemModel;
QImage image(":/cat/lovers/own/myCat.jpg");
QStandardItem *item = new QStandardItem();
item->setData(QVariant(QPixmap::fromImage(image)), Qt::DecorationRole);
model->setItem(0, 0, item);
ui->tableView->setModel(model);
You will have to resize images or cell size, depends on what you need.
[Edit]
If you are using QSqlTableModel, just keep using it. All we need to do is make those path strings into QPixmap and set the item role to be Qt::DecorationRole in that column.
As the document says:
Each item has a number of data elements associated with it and they can be retrieved by specifying a role (see Qt::ItemDataRole) to the
model's data() function.
To do this, the concept is simple: provide QTableView with QVariant of QPixmap as QTableView render them according to Qt::DecorationRole.
You may subclass QSqlTableModel and reimplement the virtual function QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) and make the image column return the QPixmap as QVariant, with the decoration role. So do something like this:
QVariant CustomSqlTableModel::data(const QModelIndex &idx, int role = Qt::DisplayRole) const
{
if (idx.column() == imageColumn) {
QString imgFile = QSqlTableModel::data(idx, Qt::DisplayRole); // get path string
if (role == Qt::DisplayRole)
return QString(); // return the path string for display role
QImage image(imgFile);
/* some modification to the image, maybe */
QPixmap pixmap(imgFile);
if (role == Qt::DecorationRole)
return pixmap; // return QPixmap for decoration role
if (role == Qt::SizeHintRole)
return pixmap.size(); // in case need the image size
}
return QSqlTableModel::data( idx, role ); // use original data() outside the imageColumn
}
Besides, you can also try subclassing QStyledItemDelegate and reimplement paint() function to customize your own delegate, but that will require a more complicated work. An example using delegate can be found here. You can paint whatever you want with delegate, even a button.
*Sorry the code is not tested, as I don't have a database on hand.

I got a question to read image from tableview, so I find the solution as fallow:
QImage name_image = table_store_multi_model_->item(i_row,0)->data(Qt::DecorationRole).value<QPixmap>().toImage();
Generally, we read data with data(), but here need a parameter "Qt::DecorationRole";

Related

Is it possible to add a custom widget into a QListView?

I have a large log data (100, 1000, 100000, ... records) and I want to visualize it in the following manner:
Which widget (e.g. QListView, QListWidget) should I use and how, in order to stay away from performance and memory problems?
Is it possible to add a custom widget into a QListView?
Please, read about:
How to display a scrollable list with a substantial amount of widgets as items in a Qt C++ app?
I want to show every log message in the above format
Solution
To achieve the desired result and stay away from performance issues, even with a very long data log, use a QListView with a custom delegate:
Create a subclass of QStyledItemDelegate, say Delegate
Reimplement the QStyledItemDelegate::paint method to do the custom drawing
Reimplement the QStyledItemDelegate::sizeHint to report the correct size of the items in the list
Use the custom delegate in the view by calling QAbstractItemView::setItemDelegate
Example
I have prepared a working example for you in order to demonstrate how the proposed solution could be implemented and used in an application.
The essential part of the example is the way the delegate paints the items in the list view:
void Delegate::paint(QPainter *painter, const QStyleOptionViewItem &option,
const QModelIndex &index) const
{
QStyleOptionViewItem opt(option);
initStyleOption(&opt, index);
const QPalette &palette(opt.palette);
const QRect &rect(opt.rect);
const QRect &contentRect(rect.adjusted(m_ptr->margins.left(),
m_ptr->margins.top(),
-m_ptr->margins.right(),
-m_ptr->margins.bottom()));
const bool lastIndex = (index.model()->rowCount() - 1) == index.row();
const bool hasIcon = !opt.icon.isNull();
const int bottomEdge = rect.bottom();
QFont f(opt.font);
f.setPointSize(m_ptr->timestampFontPointSize(opt.font));
painter->save();
painter->setClipping(true);
painter->setClipRect(rect);
painter->setFont(opt.font);
// Draw background
painter->fillRect(rect, opt.state & QStyle::State_Selected ?
palette.highlight().color() :
palette.light().color());
// Draw bottom line
painter->setPen(lastIndex ? palette.dark().color()
: palette.mid().color());
painter->drawLine(lastIndex ? rect.left() : m_ptr->margins.left(),
bottomEdge, rect.right(), bottomEdge);
// Draw message icon
if (hasIcon)
painter->drawPixmap(contentRect.left(), contentRect.top(),
opt.icon.pixmap(m_ptr->iconSize));
// Draw timestamp
QRect timeStampRect(m_ptr->timestampBox(opt, index));
timeStampRect.moveTo(m_ptr->margins.left() + m_ptr->iconSize.width()
+ m_ptr->spacingHorizontal, contentRect.top());
painter->setFont(f);
painter->setPen(palette.text().color());
painter->drawText(timeStampRect, Qt::TextSingleLine,
index.data(Qt::UserRole).toString());
// Draw message text
QRect messageRect(m_ptr->messageBox(opt));
messageRect.moveTo(timeStampRect.left(), timeStampRect.bottom()
+ m_ptr->spacingVertical);
painter->setFont(opt.font);
painter->setPen(palette.windowText().color());
painter->drawText(messageRect, Qt::TextSingleLine, opt.text);
painter->restore();
}
The complete code of the example is available on GitHub.
Result
As written, the given example produces the following result:

Paradigmatic way to layout QTableView vertically

I have a QTableView that shows a model with many columns.
The model contains something like vector<my_item_with_lots_of_fields>; for most applications the size of vector is below 5.
For aesthetic reasons, the model would look better flipped so that each entry would run from top to bottom.
One dirty solution is to change the model so that the row and column indexing is switched. Unfortunately this would break other widgets that access the model.
Is there some easy, paradigmatic way to achieve this effect without changing the underlying model? Perhaps to change the widget?
I think one approach would be to create a proxy model for this. You would then need to do two changes:
1) data method
QVariant MyProxyModel::data(const QModelIndex & index,
int role = Qt::DisplayRole) const
{
return myTableModel::data(QModelIndex(index.column(), index.row()), role);
}
2) headerData method
QVariant MyProxyModel::headerData(int section, Qt::Orientation orientation,
int role = Qt::DisplayRole) const
{
return myTableModel::headerData(section,
orientation == Qt::Horizontal ? Qt::Vertical : Qt::Horizontal, role);
}

Qt: QSS and drawComplexControl()

I have a QDialog containing a QTableView, along with a custom delegate showing a QComboBox for enum types.
When the row is not selected, I still want the QComboBox to be visible (I would like to avoid using QTableView::openPersistentEditor()).
To do so, the custom delegate forwards the paint event to the following method:
QStyleOptionViewItem &option) const
{
painter->save();
QStyleOptionComboBox comboBoxOption;
comboBoxOption.rect = option.rect;
comboBoxOption.state = option.state;
comboBoxOption.state |= QStyle::State_Enabled;
comboBoxOption.editable = false;
comboBoxOption.currentText = enumInfo.valueToKey(curValue);
// The cast is successful, and srcWidget is the QTableView
QWidget *srcWidget = qobject_cast<QWidget *>(option.styleObject);
// style->metaObject()->className() = QStyleSheetStyle
QStyle *style = srcWidget ? srcWidget->style() : QApplication::style();
// However, the QSS is ignored here (while srcWidget->styleSheet() correctly
// returns the style I've set in Qt Designer)
style->drawComplexControl(QStyle::CC_ComboBox, &comboBoxOption, painter, srcWidget);
style->drawControl(QStyle::CE_ComboBoxLabel, &comboBoxOption, painter, srcWidget);
painter->restore();
}
The problem is that I’ve styled the combo box control using QSS, but drawComplexControl() seems to ignore that, despite using the QTableView’s style. Here’s a screenshot:
Is it possible for drawComplexControl() to consider the style sheet?
Thanks
I think that the only way is to grab widget with QPixmap::grabWidget(). And to use this image in delegate.
Seems, that it is not possible to do because of QSS limitation
I believe that you need to use dirty hacks with casting style() to private QStyleSheetStyle

How to put an image and a QProgressBar inside a QTableView?

I'm developing some kind of download manager and display the file name, it's size and the remaining bytes in a QTableView. Now I want to visualize the progress with a QProgressBar and display an image (to indicate whether it's an down- or upload). How can I add or display a QProgressBar and an image inside the QTableView?
If you are using QTableView, I presume you use a model linked to this view.
One solution would be to use delegates (see QItemDelegate) to paint the progress, In QItemDelegate::paint method you have to define, use QStyle of the widget (widget->style()) to paint the progress (use QStyle::drawControl with QStyle::CE_ProgressBarContents as control identifier).
Check the documentation from the example Star Delegate, to see how to define the delegate for the column you need.
Later edit: Example of defining the delegate paint method (code sketch, not really tested, take it as a principle, not fully working).
void MyDelegate::paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const
{
QStyleOptionProgressBar progressStyle;
progressStyle.rect = option.rect; // Maybe some other initialization from option would be needed
// For the sake of the example, I assume that the index indicates the progress, and the next two siblings indicate the min and max of the progress.
QModelIndex minIndex = index.sibling( index.row(), index.column() + 1);
QModelIndex maxIndex = index.sibling( index.row(), index.column() + 2);
progressStyle.minimum = qvariant_cast< int>( minIndex.data( Qt::UserRole));
progressStyle.maximum = qvariant_cast< int>( maxIndex.data( Qt::UserRole));
progressStyle.progress = qvariant_cast< int>( index.data( Qt::UserRole));
progressStyle.textVisible = false;
qApp->style()->drawControl( QStyle::CE_ProgressBarContents, progressStyleOption, painter);
}
TrackDelegate::TrackDelegate(QObject *parent)
: QItemDelegate(parent)
--------------------------------------------------------------------------------
void TrackDelegate::paint( QPainter* painter,
const QStyleOptionViewItem &option,
const QModelIndex &index) const
{
QStyleOptionViewItem viewOption(option);
QImage image(m_RowBackGroundImagePath);
QPixmap pixmap(m_RowBackGroundImagePath);
qDebug()<<"forward"<<pixmap.width()<<pixmap.height();
pixmap.scaled(option.rect.width(),option.rect.height());
qDebug()<<"back"<<pixmap.width()<<pixmap.height();
qDebug()<<option.rect.width()<<option.rect.height();
QBrush brush(pixmap);
painter->save();
painter->fillRect(option.rect, brush/*QColor(238, 233, 233, 255)*/);
painter->restore();
viewOption.rect = QRect(option.rect.x(), option.rect.y(), option.rect.width(), option.rect.height());
// viewOption.palette.setColor(QPalette::Text, QColor(Qt::red));
// viewOption.palette.setBrush ( QPalette::ButtonText, brush1);
QItemDelegate::paint(painter, viewOption,index);
int progress = index.model()->data(index,Qt::DisplayRole).toInt();
QStyleOptionProgressBar progressBarOption;
progressBarOption.rect = QRect(option.rect.x(), option.rect.y()+(SETHEIGHT - PROGRESSBARHEIGHT)/2, option.rect.width(), /*option.rect.height()*/PROGRESSBARHEIGHT);
//qDebug()<<progressBarOption.rect.x()<<progressBarOption.rect.y()<<progressBarOption.rect.height()<<progressBarOption.rect.width();
//qDebug()<<option.rect.x()<<option.rect.y()<<option.rect.height()<<option.rect.width();
progressBarOption.state |= QStyle::State_Enabled;
progressBarOption.direction = QApplication::layoutDirection();
progressBarOption.fontMetrics = QApplication::fontMetrics();
progressBarOption.minimum = 0;
progressBarOption.maximum = 100;
progressBarOption.textAlignment = Qt::AlignCenter;
progressBarOption.textVisible = true;
progressBarOption.progress = progress < 0 ? 0 : progress;
progressBarOption.text = QString().sprintf("%d%%", progressBarOption.progress);
QApplication::style()->drawControl(QStyle::CE_ProgressBar, &progressBarOption, painter);
break;
}
You probably want to use QTableWidget for this. It has a method which allows you to add widgets like a QProgressBar. It's the "setCellWidget" method.
There is a slot in QProgressBar called setValue(int),
You can update it sending a signal to this progress bar from Your file manager.
This one should be designed in a way it could check or monitor download state and sends those signals periodically.
Good approach to manage up/down/finish images would be to have additional column in table with the image item.
It would be quite easy to update your image if the socket/connection/file corrupt state would change.
Writing any example would be actually writing you a program, so i suggest to post parts of the problems (if any) with code performed by yourself.
QTableView is not for displaying widgets in a layout. Use QGridLayout or some other suitable layout and put the widgets in that layout.

Displaying multiple icons in a single cell of a QTableView

I am writing a small gui app with QT4.5 in QtCreator.
The main screen on the app contains a QTreeView with two columns, the first is text the second is a group of icons. These icons represent the last few states of the item displayed in the row.
I am not sure what the best way to do this is. I have currently implemented this by generating a QPixmap the model's data() method.
QVariant MyModel::data(const QModelIndex &index, int role) const
{
if (role == Qt::DisplayRole || role == Qt::EditRole) {
switch(index.column()) {
case 0:
return item_.at(index.row()).title();
}
}
if (role == Qt::DecorationRole) {
switch(index.column()) {
case 1:
return makeImage(item_.add(index.row()).lastStates());
}
}
return QVariant();
}
QVariant MyModel::makeImage(const QList<MyState> &states) const
{
const int IconSize = 22;
QPixmap image(IconSize * states.size(), IconSize);
QPainter painter(&image);
painter.fillRect(0, 0, IconSize * count, IconSize, Qt::transparent);
for (int i = 0; i < states.size(); ++i) {
QIcon * icon = stateIcon(state.at(i));
icon->paint(&painter, IconSize * i, 0, IconSize, IconSize);
}
return image;
}
This works but for some small problems, the background which should be transparent is full of random noise, even filling this with a transparent colour does not fix it.
Second this does not seem very efficient, I am generating a new Image every time this is called, should I not just draw the icons onto the widget for the cell?
What is the best way to display multiple icons in a single cell?
I would create a custom delegate, based on a hbox, into which you can place all the pictures. Have a look at delegates in the Qt Documentation about model view programming.