Design User Interface using QT - Help needed

[Radek]

I recommend QToolButton class. The class is intended for toolbars but it is a fully functional "bitmap button" which can display a QIcon without a text. Therefore, 2 QPushButtons with 3 QToolButtons in between and QPixmap (or QImage) to the right. If you click Up or Down, redo the icons. When you click a QToolButton, redo the image.

As to devising the GUI: set sizes of the button and the QIcon, remove text and set style to QToolButtonIconOnly in the Designer.

[aamer4yu]

So, how to load multiple images, display only some of them(about 3 of them) in a label, be able to navigate through the image list and be able to display one image from those three as a preview image. Just sent a signal when I select a picture and set the image in the preview label.

You could also try for QListWidget / QListView with iconView. You can click the items aka images and do the desired operation. If you fix the grid size of list widget, you may be able to limit the images to three as desired. On button click , you can simply change the current index of the listWidget OR move the scroll bars ...
Also you can have a model with QListWidget which will load images from a given directory which will again ease ur work

[nimrod1989]

Hi all,

Thank you for the valuable information. You give me a starting point. I've just get back to work and I'll let you know how things go.

As soon as I have something working I'll share with you.

Thanks,
Danny

[nimrod1989]

Hi all,

I'm afraid I can't add a QPixmap as a QlistWidget item. Here's what I've tried:

QString fileNamePics = QFileDialog::getOpenFileName(this, tr("Open File"),
		"E:\\Personal\\TestImageLoaderQt",
		tr("Images (*.jpg"));
 
	QPixmap imgPixmap (fileNamePics);
 
	QIcon imgIcon(imgPixmap);
 
	myListWidget->setViewMode(QListView::IconMode);
 
	QListWidgetItem *LWidgetItem = new QListWidgetItem(imgIcon, "Image Name", myListWidget,0);
 
	ui.myListWidget->insertItem(1, LWidgetItem);

QString fileNamePics = QFileDialog::getOpenFileName(this, tr("Open File"),
		"E:\\Personal\\TestImageLoaderQt",
		tr("Images (*.jpg"));

	QPixmap imgPixmap (fileNamePics);

	QIcon imgIcon(imgPixmap);
	
	myListWidget->setViewMode(QListView::IconMode);

	QListWidgetItem *LWidgetItem = new QListWidgetItem(imgIcon, "Image Name", myListWidget,0);

	ui.myListWidget->insertItem(1, LWidgetItem);

To copy to clipboard, switch view to plain text mode 

Unfortunately, nothing is displayed.

[Radek]

Yes, it is not.

(1) If you specify the parent in the QListWidgetItem ctor (it must be a QListWidget *), the item will be added to the parent widget. The widget becomes the owner of the item. Therefore, adding the widget again using QListWidget::insertItem() is wrong. Comment out the insertItem() line and see.

(2) You gain more flexibility, if you create "stand alone" items, which you add to the widget subsequently by addItem()/insertItem(). Therefore:

QListWidgetItem *LWidgetItem = new QListWidgetItem(imgIcon, "Image Name");
ui.myListWidget->insertItem(0, LWidgetItem);

QListWidgetItem *LWidgetItem = new QListWidgetItem(imgIcon, "Image Name");
ui.myListWidget->insertItem(0, LWidgetItem);

To copy to clipboard, switch view to plain text mode 

Note also, that rows are numbered from zero and that you can insert only before an existing item. Adding an item into an empty widget: either add or insert at position 0. Anyway, I don't think you get what you want. You get an "icon view" of a list widget rather than bitmap buttons.

[nengtyas]

I propose QToolButton type. This type is supposed for toolbars however this is a thoroughly well-designed "bitmap button" which will show a QIcon with no textual content. Therefore, 3 QPushButtons along with 3 QToolButtons between as well as QPixmap (or QImage) for the correct. Should you just click In place or maybe Straight down, redo the icons. Once you just click a QToolButton, redo the impression.

[nimrod1989]

I propose QToolButton type. This type is supposed for toolbars however this is a thoroughly well-designed "bitmap button" which will show a QIcon with no textual content. Therefore, 3 QPushButtons along with 3 QToolButtons between as well as QPixmap (or QImage) for the correct. Should you just click In place or maybe Straight down, redo the icons. Once you just click a QToolButton, redo the impression.

Thank you all for the help. Unfortunately, I can't get this working as I need. I can't get it working at all.
Can you please write a few lines of code in order to get a starting point?

---

Added after 15 minutes:

What is the container for my QToolButton? How can I add it?

[Radek]

The frame. It's a button like any other button. Place three QToolButtons on the frame and set their sizes. You can add icons from your app.

[nimrod1989]

Ok, I've done this.

QString fileNamePics = QFileDialog::getOpenFileName(this, tr("Open File"),
		"E:\\Personal\\TestImageLoaderQt",
		tr("Images (*.jpg"));
 
	QPixmap imgPixmap (fileNamePics);
	QIcon imgIcon(imgPixmap);
	ui.pushButtonUp->setIcon(imgIcon);
	ui.pushButtonUp->setIconSize(QSize(100, 80));

QString fileNamePics = QFileDialog::getOpenFileName(this, tr("Open File"),
		"E:\\Personal\\TestImageLoaderQt",
		tr("Images (*.jpg"));

	QPixmap imgPixmap (fileNamePics);
	QIcon imgIcon(imgPixmap);
	ui.pushButtonUp->setIcon(imgIcon);
	ui.pushButtonUp->setIconSize(QSize(100, 80));

To copy to clipboard, switch view to plain text mode 

Here is how it looks like:
QIconOnPushButtons.png
Unfortunately, the iconSize seems to depend on the image which I'm loading. The IconSize is not set as expected with the related values (100, 80). It depends the image I'm loading, its width and height.
My pushButtons have this size(100, 80); It seems that I need to scale this QIcon on my pushButton. I didn't find any functions which implements this.

Does anybody have another approach for this? Maybe I should try to use something else, instead my pushButtons?

[Radek]

(1) Scaling pixmaps: see QPixmap::scaled()
(2) When you setIcon() the icon is displayed on the button. The subsequent setIconSize() will change nothing.

Therefore:

QPixmap imgPixmap(fileNamePics);
QIcon   imgIcon(imgPixmap.scaled(100,80));
 
ui.PushButtonUp->setIcon(imgIcon);

QPixmap imgPixmap(fileNamePics);
QIcon   imgIcon(imgPixmap.scaled(100,80));

ui.PushButtonUp->setIcon(imgIcon);

To copy to clipboard, switch view to plain text mode 

[Danediason]

Hallo everyone,
I like this form, place tell me why use design QT ?
thank,s

[nimrod1989]

(1) Scaling pixmaps: see QPixmap::scaled()
(2) When you setIcon() the icon is displayed on the button. The subsequent setIconSize() will change nothing.

Therefore:

QPixmap imgPixmap(fileNamePics);
QIcon   imgIcon(imgPixmap.scaled(100,80));
 
ui.PushButtonUp->setIcon(imgIcon);

QPixmap imgPixmap(fileNamePics);
QIcon   imgIcon(imgPixmap.scaled(100,80));

ui.PushButtonUp->setIcon(imgIcon);

To copy to clipboard, switch view to plain text mode 

I want to thank you for all the help. Unfortunately, using a QIcons on the related buttons doesn't fulfill my expectations. First of all, I cannot cover a QButton without distorting the image.

So, I would like to have a different approach. Does anybody have any idea what I could try?

[Radek]

OMG! The buttons have some sizes. The icons, as I have seen, have another sizes. Something needs to be "distorted", this cannot be helped. Either prepare "undistorted" icons for the buttons in advance (use some image processor, for example GIMP, for it) or use QListView in Icon mode. In the later case, you get an "icon view", as you know it from file managers, where you can place icons with different sizes. I am afraid, there is no other acceptable solution.