Results 1 to 19 of 19

Thread: Design User Interface using QT - Help needed

  1. #1
    Join Date
    Feb 2014
    Location
    Romania
    Posts
    25
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5
    Platforms
    Windows

    Default Design User Interface using QT - Help needed

    Hello all,

    First of all I apologize if this subject has been already debated on the forums, but I couldn't find anything to solve my issue.

    I am using the Visual 2010 Add-In for Qt(Qt Vs. 5.2.0). I want to have something similar to this(click on the below image so you can have a better view about this).
    QT_UI.jpg

    So, as you can see I have a label where I display about three pics. These pics are loaded from a given directory.
    I want to be able to load multiple image from the directory but only display three and move through the image list with those buttons(Up and Down). When I load these images, a current image can be selected to be displayed as a preview.

    This is my desired behavior.

    What I don't know.

    What to choose to display the related images from the image list. I've used a QWidget where multiple QLabel have been added. Each label is used to display a image. However, I can't trigger an action in order to be able to have a preview of a given image(currently I'm using a click() Preview button to set the preview of the first image from my list). So, this is not seems to be a good approach.

    I read multiple articles about QGraphicsView and QGraphicsScene and this seeems what I have to use. Unfortunately I am not able to make this working.
    I don't know how to implement that, to display those three images and navigate between the image list with Up and Down button.

    I would be gratefully if you can share these knowledge with me and all the QT users.

    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.

    If you need more details from me, please do not hesitate to ask.

    Thanks a lot,
    Danny

  2. #2
    Join Date
    Oct 2013
    Posts
    41
    Thanks
    1
    Thanked 8 Times in 7 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Design User Interface using QT - Help needed

    Well I haven't worked a lot with images, but it looks like the easy thing to do would be to turn your QLabels into QPushButtons and use the image as the QIcon for the button.

  3. #3
    Join Date
    Feb 2014
    Location
    Romania
    Posts
    25
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5
    Platforms
    Windows

    Default Re: Design User Interface using QT - Help needed

    Quote Originally Posted by sulliwk06 View Post
    Well I haven't worked a lot with images, but it looks like the easy thing to do would be to turn your QLabels into QPushButtons and use the image as the QIcon for the button.
    Thank you! Indeed, this can be the easy approach. I didn't tried this yet so I can't tell you how it would look like.

    However, I am still waiting for someone who can give me a reply with related guidance for using QGraphicsView and QGraphicsScene, and how it would look like this approach.

  4. #4
    Join Date
    Apr 2013
    Location
    Prague
    Posts
    256
    Thanks
    3
    Thanked 65 Times in 59 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: Design User Interface using QT - Help needed

    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.

  5. #5
    Join Date
    Oct 2006
    Location
    New Delhi, India
    Posts
    2,467
    Thanks
    8
    Thanked 334 Times in 317 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Design User Interface using QT - Help needed

    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

  6. #6
    Join Date
    Feb 2014
    Location
    Romania
    Posts
    25
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5
    Platforms
    Windows

    Default Re: Design User Interface using QT - Help needed

    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

  7. #7
    Join Date
    Feb 2014
    Location
    Romania
    Posts
    25
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5
    Platforms
    Windows

    Default Re: Design User Interface using QT - Help needed

    Hi all,

    I'm afraid I can't add a QPixmap as a QlistWidget item. Here's what I've tried:
    Qt Code:
    1. QString fileNamePics = QFileDialog::getOpenFileName(this, tr("Open File"),
    2. "E:\\Personal\\TestImageLoaderQt",
    3. tr("Images (*.jpg"));
    4.  
    5. QPixmap imgPixmap (fileNamePics);
    6.  
    7. QIcon imgIcon(imgPixmap);
    8.  
    9. myListWidget->setViewMode(QListView::IconMode);
    10.  
    11. QListWidgetItem *LWidgetItem = new QListWidgetItem(imgIcon, "Image Name", myListWidget,0);
    12.  
    13. ui.myListWidget->insertItem(1, LWidgetItem);
    To copy to clipboard, switch view to plain text mode 
    Unfortunately, nothing is displayed.

  8. #8
    Join Date
    Apr 2013
    Location
    Prague
    Posts
    256
    Thanks
    3
    Thanked 65 Times in 59 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: Design User Interface using QT - Help needed

    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:
    Qt Code:
    1. QListWidgetItem *LWidgetItem = new QListWidgetItem(imgIcon, "Image Name");
    2. 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.

  9. #9

    Default Re: Design User Interface using QT - Help needed

    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.

  10. #10
    Join Date
    Feb 2014
    Location
    Romania
    Posts
    25
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5
    Platforms
    Windows

    Default Re: Design User Interface using QT - Help needed

    Quote Originally Posted by nengtyas View Post
    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?
    Last edited by nimrod1989; 16th March 2014 at 20:44.

  11. #11
    Join Date
    Apr 2013
    Location
    Prague
    Posts
    256
    Thanks
    3
    Thanked 65 Times in 59 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: Design User Interface using QT - Help needed

    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.

  12. #12
    Join Date
    Feb 2014
    Location
    Romania
    Posts
    25
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5
    Platforms
    Windows

    Default Re: Design User Interface using QT - Help needed

    Ok, I've done this.
    Qt Code:
    1. QString fileNamePics = QFileDialog::getOpenFileName(this, tr("Open File"),
    2. "E:\\Personal\\TestImageLoaderQt",
    3. tr("Images (*.jpg"));
    4.  
    5. QPixmap imgPixmap (fileNamePics);
    6. QIcon imgIcon(imgPixmap);
    7. ui.pushButtonUp->setIcon(imgIcon);
    8. 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?

  13. #13
    Join Date
    Apr 2013
    Location
    Prague
    Posts
    256
    Thanks
    3
    Thanked 65 Times in 59 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: Design User Interface using QT - Help needed

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

    Therefore:
    Qt Code:
    1. QPixmap imgPixmap(fileNamePics);
    2. QIcon imgIcon(imgPixmap.scaled(100,80));
    3.  
    4. ui.PushButtonUp->setIcon(imgIcon);
    To copy to clipboard, switch view to plain text mode 

  14. #14
    Join Date
    Mar 2014
    Location
    Dubai
    Posts
    2
    Qt products
    Qt/Embedded
    Platforms
    Windows

    Default Re: Design User Interface using QT - Help needed

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

  15. #15
    Join Date
    Feb 2014
    Location
    Romania
    Posts
    25
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5
    Platforms
    Windows

    Default Re: Design User Interface using QT - Help needed

    Quote Originally Posted by Radek View Post
    (1) Scaling pixmaps: see QPixmap::scaled()
    (2) When you setIcon() the icon is displayed on the button. The subsequent setIconSize() will change nothing.

    Therefore:
    Qt Code:
    1. QPixmap imgPixmap(fileNamePics);
    2. QIcon imgIcon(imgPixmap.scaled(100,80));
    3.  
    4. 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?

  16. #16
    Join Date
    Apr 2013
    Location
    Prague
    Posts
    256
    Thanks
    3
    Thanked 65 Times in 59 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: Design User Interface using QT - Help needed

    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.

  17. #17
    Join Date
    Feb 2014
    Location
    Romania
    Posts
    25
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5
    Platforms
    Windows

    Default Re: Design User Interface using QT - Help needed

    Hi Radek,

    I think I have something which is pretty much what I've wanted. Here's how it looks like:

    CurrentView.png

    So, when I double click on an item from my QListView, the related item will be displayed on my central label. The Up and Down buttons will be deleted from the UI since there is no need of them (you can navigate through the QListWidget using its scroolBar).

    Here's my code
    Qt Code:
    1. QStringList listaPics = QFileDialog::getOpenFileNames(this, tr("Open File"),
    2. "E:\\Personal\\TestImageLoaderQt",
    3. tr("Images (*.jpg"));
    4.  
    5. //get the pixList
    6. for(int i = 0; i < listaPics.size(); i ++)
    7. {
    8. QPixmap imgPixmap (listaPics[i]);
    9. pixList.append(imgPixmap);
    10. }
    11.  
    12. for (int i = 0; i < pixList.size(); ++i)
    13. {
    14. QPixmap pix(pixList[i]);
    15.  
    16. QIcon *iconImage = new QIcon(pix);
    17.  
    18. QListWidgetItem *listWindgetItemImage = new QListWidgetItem;
    19. listWindgetItemImage->setIcon(*iconImage);
    20.  
    21. ui.listWidgetImage->addItem(listWindgetItemImage);
    22. ui.listWidgetImage->setIconSize(QSize(70, 80));
    23. }
    To copy to clipboard, switch view to plain text mode 
    When an item is doubleClicked(), I update my central Qlabel which display the image in a preview mode. Unfortunately, I need somehow to scale my label which holds my image in order to be properly displayed (not the image to be scaled in order to fit in my QLabel. The QLabel needs to be scaled upon the image sizes).
    Have any tips about this?

  18. #18
    Join Date
    Apr 2013
    Location
    Prague
    Posts
    256
    Thanks
    3
    Thanked 65 Times in 59 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: Design User Interface using QT - Help needed

    If I understand well, the central (picture displaying) widget is a QLabel and it scales your image. You do not want the image scaled. If so then make the central widget a QWidget and create a QPainter in it. If you need to draw an image, then "erase background" of the QWidget by QPainter::fillRect() and then draw the image at a given point (it depends on the sizes of the image) by QPainter::drawImage(). You will need QImages instead of QPixmaps now.

  19. #19
    Join Date
    Feb 2014
    Location
    Romania
    Posts
    25
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5
    Platforms
    Windows

    Default Re: Design User Interface using QT - Help needed

    Hi Radek,

    Thank you for your help. I got this working using the QLabel->resize() function in order to properly display a scaled image.

Similar Threads

  1. User Interface Ontology as a way to guide Qt GUI design
    By Nathaniel Christen in forum General Discussion
    Replies: 7
    Last Post: 16th June 2011, 19:06
  2. design help with QList in an interface
    By GuusDavidson in forum Qt Programming
    Replies: 2
    Last Post: 7th February 2011, 08:05
  3. Replies: 5
    Last Post: 28th May 2010, 17:28
  4. Problem with design interface
    By tux-world in forum Newbie
    Replies: 5
    Last Post: 10th March 2010, 15:19

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.