img viewer with Qt - qt

I'm trying to create an application based on model/view concept.
i need to open some directory, find all imgs in it and show them in MainWindow (subclass of QMainWindow).
The architecture is something like this:
1) via QDir create QStringList of "good" file names (using file names filter by extentions).
2) create QStandardItemModel and fill it with QStandardItem (QIcon(QImage(fileName).scaled(QSize)), fileName).
3) use QListView to show data from the model.
but there is some problems.
first of all - theModel.columnCount is, e.g., 52 but only one picture is shown on the screen and without its name.
can someone help me:
1) how to fill model correctly? my approach:
QDir dirs(dir);
QStringList imgs = dirs.entryList(QStringList() << "*.jpg" << "*.jpeg" << "*.bmp" << "*.png");
itemModel->clear();
QList<QStandardItem *> listItem;
for(int i = 0; i < imgs.count(); ++i){
QImage image = QImage(dir + "/" + imgs.at(i)).scaled(QSize(size().width()/4, size().height()/4));
QStandardItem *item = new QStandardItem();
item->setIcon(QIcon(QPixmap::fromImage(image)));
item->setData(imgs.at(i));
listItem << item;
}
itemModel->appendRow(listItem);
this code is in one slot of the MainWindow class.
2) as I understand, my view is automatically updated, so it should show all data from the model.
am I right, or some code is necessary?
3) maybe I haven't done somethings in initialization of the model and the view (the code is in te constructor of class MainWindow):
itemModel = new QStandardItemModel(this);
listView = new QListView(this);
listView->setModel(itemModel);
// listView->setFlow(QListView::LeftToRight);
// listView->setLayoutMode(QListView::Batched);
listView->setViewMode(QListView::IconMode);
listView->setResizeMode(QListView::Adjust);
// listView->setGridSize(QSize(size().width()/4, size().height()/4));
listView->setIconSize(QSize(size().width()/4, size().height()/4));
setCentralWidget(listView);

Since you determined that you needed appendColumn the last bit would be to add the QIcon as data with the Qt::DecorationRole. The follow works for me for viewing images in the same folder the program is run (though I don't know why it is shown with a grid layout).
#include <QApplication>
#include <QStandardItemModel>
#include <QListView>
#include <QDir>
#include <QStringList>
#include <QList>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QStandardItemModel* itemModel = new QStandardItemModel();
QListView* listView = new QListView();
QDir dirs(".");
QStringList imgs = dirs.entryList(QStringList() << "*.jpg" << "*.jpeg" << "*.bmp" << "*.png");
QList<QStandardItem *> listItem;
for(int i = 0; i < imgs.count(); ++i){
QImage image = QImage(dirs.absoluteFilePath(imgs.at(i))).scaled(QSize(80, 60));
QStandardItem *item = new QStandardItem();
item->setData(QVariant(QPixmap::fromImage(image)), Qt::DecorationRole);
listItem << item;
}
itemModel->appendColumn(listItem);
listView->setModel(itemModel);
listView->setViewMode(QListView::IconMode);
listView->show();
a.exec();
}

Related

QListView max number of items in view

I need to calculate max number of items in current view of QListView.
I wrote code like this:
void MyListView::resizeEvent(QResizeEvent *event)
{
QListView::resizeEvent(event);
QFontMetrics fm (this->font());
int fontHeight = fm.lineSpacing();
QRect cr = contentsRect();
int windowHeight = cr.bottom() - cr.top();
int maxItemsCount = windowHeight / fontHeight;
qDebug()<<"max items in view: "<< maxItemsCount;
}
but calculated max number of items is is incorrect.
E.g. in case of my window height and font height I get 32 max items in view when in fact current view has 28 items. Perhaps someone can suggest something, how to calculate it properly?
My idea is to use QListView::indexAt() (inherited from QAbstractView) to obtain the row index for
the top-left corner
the bottom-left corner
of the list view viewport and determining the number of visible items by difference of them.
To check this out, I made an MCVE testQListViewNumVisibleItems.cc:
// Qt header:
#include <QtWidgets>
class ListWidget: public QListWidget {
public:
ListWidget(QWidget *pQParent = nullptr): QListWidget(pQParent) { }
virtual ~ListWidget() = default;
ListWidget(const ListWidget&) = delete;
ListWidget& operator=(const ListWidget&) = delete;
int getNumVisibleItems() const
{
const QSize size = viewport()->size();
const QModelIndex qMIdx0 = indexAt(QPoint(0, 0));
const QModelIndex qMIdx1 = indexAt(QPoint(0, size.height() - 1));
//qDebug() << "qMIdx0:" << qMIdx0 << "qMIdx1:" << qMIdx1;
return qMIdx0.isValid()
? (qMIdx1.isValid() ? qMIdx1.row() : count()) - qMIdx0.row()
: 0;
}
};
const int MaxItems = 20;
// main application
int main(int argc, char **argv)
{
qDebug() << "Qt Version:" << QT_VERSION_STR;
QApplication app(argc, argv);
// setup GUI
ListWidget qLst;
qLst.resize(200, 200);
qLst.show();
// timer to populate list view
using namespace std::chrono_literals;
QTimer qTimer;
qTimer.setInterval(1000ms);
// install signal handlers
int n = 0;
QObject::connect(&qTimer, &QTimer::timeout,
[&]() {
qLst.addItem(QString("item %0").arg(++n));
qDebug() << "Visible items:" << qLst.getNumVisibleItems();
if (n >= MaxItems) qTimer.stop();
});
// runtime loop
qTimer.start();
return app.exec();
}
and a CMakeLists.txt:
project(QListViewNumVisibleItems)
cmake_minimum_required(VERSION 3.10.0)
set_property(GLOBAL PROPERTY USE_FOLDERS ON)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_CXX_EXTENSIONS OFF)
find_package(Qt5Widgets CONFIG REQUIRED)
include_directories("${CMAKE_SOURCE_DIR}")
add_executable(testQListViewNumVisibleItems testQListViewNumVisibleItems.cc)
target_link_libraries(testQListViewNumVisibleItems Qt5::Widgets)
built and tested in VS2017 on Windows 10:
After having implemented what came in my mind, I googled a bit to possibly see other approaches. (I admit I should've done before.)
Thereby I found the following possible duplicate:
SO: Simple way to get all visible items in the QListView
The accepted answer doesn't contain much more than the hint for indexAt and a link to a Qt-FAQ article:
How can i get hold of all of the visible items in my QListView?
In order to get hold of the visible items in a QListView http://doc.qt.io/qt-5/qlistview.html, then you can iterate over them using indexAt() http://doc.qt.io/qt-5/qlistview.html#indexAt. You can get hold of the first visible item using indexAt(QPoint(0, 0)), then in order to get the index at the next position then use visualRect() http://doc.qt.io/qt-5/qlistview.html#visualRect to find out what your next call to itemAt() should be. This position would be:
visualRect.y() + visualRect.height() + 1 effectively.
See the following example for an illustration:
#include <QtGui>
QList <QModelIndex>myList;
class ListView : public QListView
{
Q_OBJECT
public:
ListView()
{
QStringListModel *myModel = new QStringListModel(this);
QStringList list;
list << "a" << "b" <<"c" <<"d" <<"e" <<"f" <<"g" <<"h" <<"i" <<"j" <<"k";
myModel->setStringList(list);
setModel(myModel);
QTimer::singleShot(3000, this, SLOT(test1()));
}
public slots:
void test1()
{
QModelIndex firstIndex = indexAt(QPoint(0, 0));
if (firstIndex.isValid()) {
myList << firstIndex;
} while (viewport()->rect().contains(QPoint(0, visualRect(firstIndex).y() + visualRect(firstIndex).height() + 1 ))) {
firstIndex = indexAt(QPoint(0, visualRect(firstIndex).y() + visualRect(firstIndex).height() + 1 ));
myList << firstIndex;
}
qDebug() << myList.count() << "are visible";
}
};
#include "main.moc"
int main(int argc, char** argv)
{
QApplication app(argc, argv);
ListView window;
window.resize(100, 50);
window.show();
return app.exec();
}

How to create Subplot using QCharts?

I want to create two subplots (like 2 rows), the first plot will show the line series graph based on Analog to Digital Converter counts stored in a text file and the second plot will show the line series graph based on Temperature values stored in a text file.
I am able to plot the line series in the same plot, but I want to plot it in two separate subplots.
#include <QApplication>
#include <QMainWindow>
#include <QFile>
#include <QTextStream>
#include <QDateTime>
#include <QTime>
#include <QtCharts/QChartView>
#include <QtCharts/QLineSeries>
#include <QDateTimeAxis>
#include <QValueAxis>
#include <QDebug>
QT_CHARTS_USE_NAMESPACE
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
// Open File
QFile file("D:\\Projects\\Embedded\\ArduinoTempLogger\\01-21-18.txt");
if( !file.open(QIODevice::ReadOnly|QIODevice::Text) )
{
qDebug() << "File don't exist";
return 1;
}
QTextStream stream(&file);
QLineSeries *adc_series = new QLineSeries();
QLineSeries *temp_series = new QLineSeries();
QDateTime datetime = QDateTime::currentDateTime();
while( !stream.atEnd() )
{
QString line = stream.readLine();
QStringList values = line.split(",");
QTime time;
time = QTime::fromString(values[0], "hh:mm:ss");
datetime.setTime(time);
adc_series->append( datetime.toMSecsSinceEpoch(), values[1].toUInt() );
temp_series->append( datetime.toMSecsSinceEpoch(), values[2].toDouble() );
// qDebug() << time.toString("hh:mm:ss") << "-->" << datetime.toMSecsSinceEpoch();
}
file.close();
QChart *chart = new QChart();
chart->legend()->hide();
chart->addSeries(adc_series);
chart->addSeries(temp_series);
// chart->createDefaultAxes();
chart->setTitle("Temperature Plot");
// Since we use QLineSeries, calling createDefaultAxes will create QValueAxis both as X and Y axis.
// To use QDateTimeAxis we need to set it manually to the chart.
// First, the instance of QDateTimeAxis is created, then the number of ticks to be shown is set.
//
QDateTimeAxis *axisX = new QDateTimeAxis;
axisX->setTickCount(10);
axisX->setFormat("hh:mm:ss");
axisX->setTitleText("Time Axis");
chart->addAxis(axisX, Qt::AlignBottom);
adc_series->attachAxis(axisX);
temp_series->attachAxis(axisX);
QValueAxis *axisY = new QValueAxis;
axisY->setLabelFormat("%i");
axisY->setTitleText("Temperature and ADC Value");
axisY->setRange(0, 100);
chart->addAxis(axisY, Qt::AlignLeft);
adc_series->attachAxis(axisY);
temp_series->attachAxis(axisY);
QChartView *chartView = new QChartView(chart);
chartView->setRenderHint(QPainter::Antialiasing);
QMainWindow window;
window.setCentralWidget(chartView);
window.resize(820, 600);
window.show();
return a.exec();
}
The data which I am reading from the file is in the following format.
16:08:45,50,24.4
16:08:46,47,22.9
16:08:47,60,29.3
16:08:48,45,22
16:08:49,49,23.9
16:08:50,54,26.4
16:08:51,46,22.5
16:08:52,40,19.5
16:08:53,50,24.4
16:08:54,50,24.4
16:08:55,50,24.4
16:08:56,59,28.8
16:08:57,49,23.9
16:08:58,62,30.3
16:08:59,58,28.3
16:09:00,47,22.9
16:09:01,54,26.4
16:09:02,61,29.8
16:09:03,47,22.9
16:09:04,50,24.4
16:09:05,55,26.9
16:09:06,46,22.5
16:09:07,60,29.3
16:09:08,49,23.9
16:09:09,57,27.8
16:09:10,42,20.5
16:09:11,49,23.9
16:09:12,56,27.3
16:09:13,64,31.3
16:09:14,51,24.9
16:09:15,53,25.9
16:09:16,57,27.8
I am using Qt 5.14.1 on Windows 10
Can someone please guide me achieving in this?
Thanks in advance.
There is no direct solution provided by Qt, so there are several alternatives:
Create 2 QChartView and place them inside a QVBoxLayout.
Create 2 QChart and place them inside a QChartView using a QGraphicsLinearLayout.
The first method is trivial so I will not show an example, however if I show the code of the second method:
#include <QtWidgets>
#include <QtCharts>
QT_CHARTS_USE_NAMESPACE
class GraphicsView: public QGraphicsView{
public:
GraphicsView(QWidget *parent=nullptr):QGraphicsView(parent){
setScene(new QGraphicsScene);
layout = new QGraphicsLinearLayout(Qt::Vertical);
form = new QGraphicsWidget;
form->setSizePolicy(QSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding));
form->setLayout(layout);
scene()->addItem(form);
layout->setSpacing(0);
}
void addChart(QChart *chart){
if(chart){
layout->addItem(chart);
}
}
protected:
void resizeEvent(QResizeEvent *event){
if(scene())
scene()->setSceneRect(QRect(QPoint(0, 0), event->size()));
if(form)
form->resize(event->size());
QGraphicsView::resizeEvent(event);
}
private:
QGraphicsWidget *form;
QGraphicsLinearLayout *layout;
};
static bool create_series(QLineSeries *adc_series, QLineSeries *temp_series){
QFile file("D:\\Projects\\Embedded\\ArduinoTempLogger\\01-21-18.txt");
if( !file.open(QIODevice::ReadOnly|QIODevice::Text)){
qDebug() << "File don't exist";
return false;
}
QTextStream stream(&file);
QDateTime datetime = QDateTime::currentDateTime();
while( !stream.atEnd()){
QString line = stream.readLine();
QStringList values = line.split(",");
datetime.setTime(QTime::fromString(values[0], "hh:mm:ss"));
adc_series->append( datetime.toMSecsSinceEpoch(), values[1].toUInt() );
temp_series->append( datetime.toMSecsSinceEpoch(), values[2].toDouble() );
}
file.close();
return true;
}
static QChart* create_chart(const QString & title, QLineSeries *series){
QChart * chart = new QChart;
chart->legend()->hide();
chart->addSeries(series);
QDateTimeAxis *axisX = new QDateTimeAxis;
axisX->setTickCount(10);
axisX->setFormat("hh:mm:ss");
axisX->setTitleText("Time Axis");
chart->addAxis(axisX, Qt::AlignBottom);
series->attachAxis(axisX);
QValueAxis *adc_axisY = new QValueAxis;
adc_axisY->setLabelFormat("%i");
adc_axisY->setTitleText(title);
adc_axisY->setRange(0, 100);
chart->addAxis(adc_axisY, Qt::AlignLeft);
series->attachAxis(adc_axisY);
return chart;
}
int main(int argc, char *argv[]){
QApplication a(argc, argv);
QLineSeries *adc_series = new QLineSeries;
QLineSeries *temp_series = new QLineSeries;
if(!create_series(adc_series, temp_series))
return -1;
GraphicsView view;
view.addChart(create_chart("ADC Value", adc_series));
view.addChart(create_chart("Temperature Value", temp_series));
view.show();
view.resize(640, 480);
return a.exec();
}
On the other hand, Qt has not given much love to Qt Charts, so simple tasks such as subplots do not exist, so I recommend using other libraries such as QCustomPlot that do offer that functionality, in this link there is an example.

Make tree folder from QTreeView or QTreeWidget

read folder tree from a Rest API, then show them to user
Example json response after call API:
[
{"name":"/folder1/file1.txt";"size":"1KB"},
{"name":"/folder1/file2.txt";"size":"1KB"},
{"name":"/folder1/sub/file3.txt";"size":"1KB"},
{"name":"/folder2/file4.txt";"size":"1KB"},
{"name":"/folder2/file5.txt";"size":"1KB"}
]
I only want to make GUI like below image:
There are 2 options:
QTreeView
QTreeWidget
In this photo, I used QTreeWidget (with static data).
Currently, I don't know make data model for this.
I made TreeModel to set data for QtreeView.
But When them shown in GUI, All of the data only show in column Name.
I copied the code from http://doc.qt.io/qt-5/qtwidgets-itemviews-simpletreemodel-example.html
But now I can't resolve this problem. I need an example source code for this.
Plus, I also only want show a tree view simply.
don't use QFileSystem because data get from Rest API.
What you have to do is parsing the json by getting the name of the file and the size, then you separate the name using the "/", and add it to the model in an appropriate way.
#include <QApplication>
#include <QJsonDocument>
#include <QJsonArray>
#include <QJsonObject>
#include <QStandardItemModel>
#include <QTreeView>
#include <QFileIconProvider>
QStandardItem * findChilItem(QStandardItem *it, const QString & text){
if(!it->hasChildren())
return nullptr;
for(int i=0; i< it->rowCount(); i++){
if(it->child(i)->text() == text)
return it->child(i);
}
return nullptr;
}
static void appendToModel(QStandardItemModel *model, const QStringList & list, const QString & size){
QStandardItem *parent = model->invisibleRootItem();
QFileIconProvider provider;
for(QStringList::const_iterator it = list.begin(); it != list.end(); ++it)
{
QStandardItem *item = findChilItem(parent, *it);
if(item){
parent = item;
continue;
}
item = new QStandardItem(*it);
if(std::next(it) == list.end()){
item->setIcon(provider.icon(QFileIconProvider::File));
parent->appendRow({item, new QStandardItem(size)});
}
else{
item->setIcon(provider.icon(QFileIconProvider::Folder));
parent->appendRow(item);
}
parent = item;
}
}
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QStandardItemModel model;
model.setHorizontalHeaderLabels({"Name", "Size"});
const std::string json = R"([
{"name":"/folder1/file1.txt";"size":"1KB"},
{"name":"/folder1/file2.txt";"size":"1KB"},
{"name":"/folder1/sub/file3.txt";"size":"1KB"},
{"name":"/folder2/file4.txt";"size":"1KB"},
{"name":"/folder2/file5.txt";"size":"1KB"}
])";
QJsonParseError parse;
// The string is not a valid json, the separator must be a comma
// and not a semicolon, which is why it is being replaced
QByteArray data = QByteArray::fromStdString(json).replace(";", ",");
QJsonDocument const& jdoc = QJsonDocument::fromJson(data, &parse);
Q_ASSERT(parse.error == QJsonParseError::NoError);
if(jdoc.isArray()){
for(const QJsonValue &element : jdoc.array() ){
QJsonObject obj = element.toObject();
QString name = obj["name"].toString();
QString size = obj["size"].toString();
appendToModel(&model, name.split("/", QString::SkipEmptyParts), size);
}
}
QTreeView view;
view.setModel(&model);
view.show();
return a.exec();
}
Note: the semicolon is not a valid separator for the json, so I had to change it.

convert GIcon to QIcon

Is there a way to convert between these datatypes? I'm working with Qt but still need some of glib capabilities and I haven't found a way to do this. I need to get a list of the installed applications with GAppInfo and show it in a QListView and to do so I need to get the icon for those applications. Extracting it using g_app_info_get_icon returns a GIcon and what I need to work with is a QIcon in order to get it's QVariant.
GIcon does not provide the actual pixmap for the icon.
You need to load an actual pixmap by requesting icon of certain size.
#include <gio/gdesktopappinfo.h>
#include <gtk/gtk.h>
#include <QtGui>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QIcon icon;
GAppInfo *appInfo = (GAppInfo *)g_desktop_app_info_new("vlc.desktop");
GIcon *gicon = g_app_info_get_icon(appInfo);
QList<int> sizes; sizes << 16 << 24 << 32 << 48 << 64;
foreach (int size, sizes) {
GtkIconInfo *iconInfo = gtk_icon_theme_lookup_by_gicon(gtk_icon_theme_get_default(), gicon, size, (GtkIconLookupFlags)0);
GdkPixbuf *pixbuf = gtk_icon_info_load_icon(iconInfo, NULL);
if (pixbuf == NULL)
continue;
QImage image(
gdk_pixbuf_get_pixels(pixbuf),
gdk_pixbuf_get_width(pixbuf),
gdk_pixbuf_get_height(pixbuf),
gdk_pixbuf_get_rowstride(pixbuf),
QImage::Format_ARGB32);
g_object_unref(pixbuf);
image.save("icon-" + QString::number(size) + ".png");
icon.addPixmap(QPixmap::fromImage(image));
}
g_object_unref(gicon);
return 0;
}

QT: Qtableview wrapping text

I am working with QtableView of Qt. I am facing one problem. I am not able to fix the content in to complete cell . In my case i have fix size of column and rows can be stretched. following is sample code
#include <QApplication>
#include"QStandardItemModel"
#include"QTableView"
#include"QStandardItem"
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QStandardItemModel *model = new QStandardItemModel(8,3);
QTableView * pQTableView = new QTableView();
for(int r = 0;r<8;r++)
for(int c = 0; c<3; c++)
{
QModelIndex index1= model->index(r,c);
QVariant value("Swaminarayan maharaj");
model->setData(index1, value,Qt::DisplayRole );
QVariant value1( Qt::AlignCenter);
model->setData(index1, value1,Qt::TextAlignmentRole );
}
pQTableView->resize(400,400);
pQTableView->setModel(model);
pQTableView->setColumnWidth(0, 100);
pQTableView->setColumnWidth(1, 100);
pQTableView->setColumnWidth(2, 100);
pQTableView->show();
return a.exec();
}
As you can see i wants each cell to have "Swaminarayan maharaj".But Swaminarayan shold be in first line of the cell and "maharaj" in second line. Inshort each cell shold display content in two lines.
In folllowing link i found Qt::TextWordWrap but i am not able to use in my code
http://www.qtcentre.org/threads/27839-For-Qt-4-6-x-how-to-auto-size-text-to-fit-in-a-specified-width

Resources