How can I display the image as a thumbnail - c++

I have a QTreeView to display the hard drives and Directories. also I have a QListView to display the images files as the following:
But I want to display the images as thumbnails, like the following:
My code:
mainWidget::mainWidget(QWidget *parent) : QWidget(parent), ui(new Ui::mainWidget){
ui->setupUi(this);
dirsModel = new QFileSystemModel;
filesModel = new QFileSystemModel;
dirsModel->setRootPath("");
ui->treeView->setModel(dirsModel);
ui->listView->setModel(filesModel);
dirsModel->setFilter(QDir::AllDirs | QDir::NoDotAndDotDot);
filesModel->setFilter(QDir::Files);
ui->treeView->hideColumn(1);
ui->treeView->hideColumn(2);
ui->treeView->hideColumn(3);
ui->treeView->header()->hide();
}
void mainWidget::on_treeView_clicked(const QModelIndex &index){
ui->listView->setRootIndex(filesModel->setRootPath(dirsModel->filePath(index)));
}
Unfortunately, I don't know what is the way of changing the image view from icon to thumbnail.

Depending on what you are after there are better ways to go about it I think, but here is an example based on a project of mine in python:
What you can do is subclass the QFileIconProvider:
ICON_SIZE = QSize(64,64)
accepted_types = (".jpg",".tiff",".png",".exr",".psd")
# this depends on the plugins you have installed,
# PSD and EXR requires external ones).
class IconProvider(QFileIconProvider):
def __init__(self) -> None:
super().__init__()
def icon(self, type: 'QFileIconProvider.IconType'):
fn = type.filePath()
if fn.endswith(accepted_types):
a = QPixmap(ICON_SIZE)
a.load(fn)
return QIcon(a)
else:
return super().icon(type)
Then on the Model you use:
self.fileSystemModel.setIconProvider(IconProvider)
Example on TreeView:

You should use special ViewMode:
ui->listView->setViewMode(QListView::IconMode);
But it will show you only icons(not whole images), so I think you should create for example QStandardItemModel (because QFileSystemModel is not very suitable) and set pixmap to this model with Qt::DecorationRole, but scale this images to smaller size. As you understand if there are many images in the dir, this process can be long.
As you can see, you should every time (every on_treeView_clicked) get new list of images in the directory, You can do this with:
QStringList QDir::entryList(const QStringList & nameFilters, Filters filters = NoFilter, SortFlags sort = NoSort) const
with special filters. When you have list of files, in the loop you can create pixmaps, scale it and set to model.
By default QListView::IconMode provide Free movement. If you want avoid this you should use:
ui->listView->setMovement(QListView::Static);

Related

display mulitple image thumbnails in qt

I am trying to list image thumbnails on listwidget . Now I can display a thumbnail . I want to display multiple image thumbnails from a directory.
Here is the code I tried so far.
ui->listWidget->setViewMode(QListWidget::IconMode);
ui->listWidget->setIconSize(QSize(320,240));
ui->listWidget->setResizeMode(QListWidget::Adjust);
ui->listWidget->addItem(new QListWidgetItem(QIcon("image path"),"name"));
You must use QDir, set appropriate filters like *.png, *.jpg and in the end use entryInfoList() returns a QFileInfo list that has the information of the fileName and absoluteFilePath.
ui->listWidget->setViewMode(QListWidget::IconMode);
ui->listWidget->setIconSize(QSize(320,240));
ui->listWidget->setResizeMode(QListWidget::Adjust);
QDir directory("/path/of/directory");
directory.setNameFilters({"*.png", "*.jpg"});
for(const QFileInfo & finfo: directory.entryInfoList()){
QListWidgetItem *item = new QListWidgetItem(QIcon(finfo.absoluteFilePath()), finfo.fileName());
ui->listWidget->addItem(item);
}

How can I organize QStandardItemModel`s in one QTreeView

I have two QTreeView's.
First (QTreeView1) displayed folders, second (QTreeView2) - displayed subfolders, that are loaded on folder click in first QTreeView1.
On click by folder in QTreeView1, I create QStandardItemModel with subfolders and set this model to QTreeView2. Also all items in both of QTreeView`s is checkable and I want to save all checked items state.
How can I organize models storage for each loaded folders.
Is it should be something like this:
// store folder model on subfolders check state changed
QMap<QStandardItemModel*, QString> modelStorage;
modelStorage.push_back(folderModel, folderPath);
and restore folder on folder click with:
QStandardItemModel* findFolderModel(QString folderPath)
{
QStandardItemModel* model;
foreach(auto path, modelStorage)
{
if (path == folderPath)
{
model = modelStorage.find(folderPath);
}
else model = nullptr;
}
return model;
}
and show model then ... Is it correct way to store all folder models? or it must be dynamically loaded? But in that case I need to store all model data by myself (for example, checked items state ...). Also model`s data can be changed for a while and I cant show "correct" data if I restore model from "snapshots".
UPD also I have question about implementation of my suggestion:
I store/restore models on click by folders in QTreeView1 and it seems to be worked ... but restored models doesn't contains/displays QStandardItems. It happens because treeItem allocated with new operator in local scope? How can I save all QStandardItems in each model in that case?
model = new QStandardItemModel;
QStandardItem* treeItem = new QStandardItem("item");
model->appendRow(treeItem);
//..
modelStorage.insert(folderItem, model);
ui.treeView->setModel(model);
// after restore model pointer is valid, but hadn't contains any items.
I think, you can try to use two QFileSystemModels for your both QTreeViews and don't create QStandardItemModel every time you click item in first QTreeView. As you can see in documentation, QFileSystemModel have setRootPath method. You can use this method for second model every time you click on folder in first QTreeView.
To make your items checkable, browse this helpful articles:
http://www.qtcentre.org/threads/27253-QFileSystemModel-with-checkboxes
QFilesystemmodel with Checkboxes
http://doc.qt.io/qt-5/qidentityproxymodel.html

display a lot of images with Qt

I want to display a lot of images in my Qt application, for that I have created a button that when clicked will access to the computer's user and add images. My issue is that I don't know how to display these images in the application.
Here is my Code:
void Mainwindow::on_pushButton_pressed()
{
QStringList fileName = QFileDialog::getOpenFileNames(this,tr("Open Image"),
"C:/qt-win-opensource-src-4.5.0/bin/",
tr("Image Files(*.png *.jpg *.bmp *.avi *.gif)"));
iterator = new QStringListIterator(fileName);
label = new QLabel;
if(iterator->hasNext())
{
label->clear();
label->setPixmap(QPixmap(iterator->next()));
label->show();
}
}
You should use a scroll area for all those images you want to be displayed. You can set a layout depending on how you want those images to be arranged and display them using instances of QLabel.
iterator = new QStringListIterator(fileName);
label = new QLabel;
if(iterator->hasNext())
{
label->clear();
label->setPixmap(QPixmap(iterator->next()));
ui->scrollArea->layout()->addWidget(label); // need to add a scroll area widget in your ui file
// and set layout to it (horizontal, vertical, grid etc.)
}
This way, should be no problem and your labels should be displayed properly.

QT tree that allows multiselection

I'm making a simple file explorer and I ran into some problems with Qt. I want to show the user a tree view of files on his computer, but I also want to be able to select multiple files/directories and do something with them later on (by selecting checkboxes or multiple select using ctrl+left click or shift+left click). I've placed the QTreeView element and set up a model to it (QFileSystemModel). It gives me a good tree view, but I can't modify the headers (column names) or add my own column with checkbox in every row (for example). Qt is new to me, I've searched for few good hours for some tips/solutions, but nothing is working with QFileSystemModel. Is there anything I can do to get this working?
The code is short and simple:
QString lPath = "C:/";
QString rPath = "C:/";
leftTree_model = new QFileSystemModel(this);
rightTree_model = new QFileSystemModel(this);
leftTree_model->setRootPath(lPath);
rightTree_model->setRootPath(rPath);
//i have actually 2 tree views that work the same
ui->leftTree->setModel(leftTree_model); //ui->leftTree is the first tree view
ui->rightTree->setModel(rightTree_model); //the second
Use something of the following:
CheckStateRole to add checkboxes to your model. To do this, you inherit your custom item model (which you're going to use) from the QFileSystemModel, and reimplement the data() method, where you return bool values for CheckStateRole. You will also need the QAbstractItemModel::setData method to handle changes. You can also check the docs for QAbstractItemModel to see how to change header texts (headerData())
Change the selection mode of your view to allow multiple selections
EDIT:
here's a sample code to inherit from the model
class MyFancyModel : public QFileSystemModel
{
public:
MyFancyModel(QObject* pParent = NULL) : QFileSystemModel(pParent)
{
}
QVariant data(const QModelIndex & index, int role = Qt::DisplayRole ) const
{
if (role == Qt::CheckStateRole)
{
// stub value is true
return true; // here you will return real values
// depending on which item is currently checked
}
return QFileSystemModel::data(index, role);
}
};

Can I store some user data in every item of a QListWidget?

I want to store some filenames in a QListWidget. I need to have the full file paths, but I only want to show the base filename. I probably could store the full filename in the tooltip for each item, but I'd rather not have tooltips for the list items.
You can set data for and get data from each QListWidgetItem. See QListWidgetItem::setData() and QListWidgetItem::data(). Data can be set for different roles. Use Qt::UserRole, which is "The first role that can be used for application-specific purposes."
Try something like this:
QListWidgetItem *newItem = new QListWidgetItem;
QString fullFilePath("/home/username/file");
QVariant fullFilePathData(fullFilePath);
newItem->setData(Qt::UserRole, fullFilePathData);
newItem->setText(itemText);
listWidget->insertItem(row, newItem);
and:
QListWidgeItem* currentItem = listWidget->currentItem();
if (currentItem != 0) {
QVariant data = currentItem->data(Qt::UserRole);
QString fullFilePath = data.toString();
}
Here is how it looks like in Python (PyQt5):
from PyQt5 import QtCore, QtWidgets
# Creates a QListWidgetItem
item_to_add = QtWidgets.QListWidgetItem()
# Setting your QListWidgetItem Text
item_to_add.setText('String to Display')
# Setting your QListWidgetItem Data
item_to_add.setData(QtCore.Qt.UserRole, YOUR_DATA)
# Add the new rule to the QListWidget
YOUR_QListWidget.addItem(item_to_add)
Retrieving the data:
# Looping through items
for item_index in range(YOUR_QListWidget.count()):
# Getting the data embedded in each item from the listWidget
item_data = YOUR_QListWidget.item(item_index).data(QtCore.Qt.UserRole)
# Getting the datatext of each item from the listWidget
item_text = YOUR_QListWidget.item(item_index).text()