Dynamic image management on GUI

drbroly

Hello, I am trying to develop an application that will process images. Users will add images in a batch (via file selection or camera feed) and click "start" to process the batch.

I'm trying to make a GUI that displays the images the user has chosen, which will be an unknown amount. If the user wishes to remove the image, they have to click the image to be prompted to remove it.

What I currently have will add frames to my grid, each containing a QLabel to hold the image.

"ImagePreview.h"

#pragma once

#include <QLabel>

class ImagePreview : public QLabel
{
	Q_OBJECT

public:
	explicit ImagePreview(const QString& text = "", QWidget* parent = 0);
	~ImagePreview();
	void addPix(QPixmap pix);

signals:
	void clicked();

protected:
	void mousePressEvent(QMouseEvent* event);

};

ImagePreview.cpp

#include "ImagePreview.h"

ImagePreview::ImagePreview(const QString& text, QWidget* parent)
: QLabel(parent)
{
	setText(text);
}

ImagePreview::~ImagePreview()
{
}

void ImagePreview::addPix(QPixmap pix)
{
	setPixmap(pix);
}


void ImagePreview::mousePressEvent(QMouseEvent* event)
{
	emit clicked();
}

main.h

#include "ui_TISACompanion.h"
#include <QString>
#include "addNewPerson.h"
#include <array>
#include "ImagePreview.h"
#include <QSignalMapper>


class TISACompanion : public QMainWindow
{
	Q_OBJECT

public:
	TISACompanion(QWidget *parent = Q_NULLPTR);
	~TISACompanion();

	QWidget central{ this };
	QGridLayout centralLayout{ &central };

	std::array<QFrame, 10> frames;
	std::array<ImagePreview, 10> imageViews;
	std::array<QVBoxLayout, 10> layouts;

	QSignalMapper *signalMapper = new QSignalMapper(this);

private:
	Ui::TISACompanionClass ui;

public slots:
	void removeItem(int);
};

main.cpp

TISACompanion::TISACompanion(QWidget* parent)
: QMainWindow(parent)
{
	ui.setupUi(this);
	setCentralWidget(&central);

//Populate frames
	const int n = ceil(sqrt(10));
	for (int i = 0; i < 10; ++i) {
		frames[i].setFrameShape(QFrame::StyledPanel);
		centralLayout.addWidget(&frames[i], i / n, i%n, 1, 1);
	}
//Prepare images
	for (int i = 0; i < 10; ++i) {
		QPixmap pix("./Pictures/myImage.jpg");
		imageViews[i].addPix(pix);

//Map our current index to the slot as a reference
		QObject::connect(&imageViews[i], SIGNAL(clicked()), signalMapper, SLOT(map()));
		signalMapper->setMapping(&imageViews[i], i);

		//connect(&imageViews[i], SIGNAL(clicked()), this, SLOT(removeItem()));
		QObject::connect(signalMapper, SIGNAL(mapped(int)), (&imageViews[i], SLOT(removeItem(int))));

//images->layouts, layouts->frames
		layouts[i].addWidget(&imageViews[i]);
		frames[i].setLayout(&layouts[i]);
	}

   void TISACompanion::removeItem(int index)
   {
	 //To do
   }
}

I'm not particularly married to this strategy of adding images, so i'm open to changes. I'm struggling especially with the removal.

Edit - SGaist priovided the perfect direction needed for my problem

mrjj

Hi
If you thrown in a scrollarea
http://doc.qt.io/qt-5/qscrollarea.html
It could work ok.
There is nothing inherently bad using labels but it might get heavy if you
have too many.

About removing.
http://doc.qt.io/qt-5/qlayout.html#takeAt
You must take back ownership from layout, then delete it.

dheerendra

How about using your own widget, use paintEvent() & use drawPixmap to draw the image. While removing you, you simply pass the null pixmap for redrawing. This way removal also will be easy stuff.

SGaist

Hi,

Sounds rather like a good fit for the MVC pattern. You can use a QAbstractListModel to manage your list of images and a QListView to show them.

drbroly

@SGaist Thanks for the suggestion! I will try :)