4. How to enter Images in a listWidget inside tabWidget

Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to enter Images in a listWidget inside tabWidget


  • I want to make a tabwidget in which have three tabs. every tab have different images and videos coming from URL. I dont know how to manage. a sample image is given below.
    alt text

    0 1 Reply
  • Lifetime Qt Champion

    Hi and welcome to devnet,

    Since you are using a QListWidget, use the QListWidgetItem constructor that takes an icon so it will show the image.

    2 1 Reply

  • @SGaist Can you gave me example by small code because I'm not getting the point.

    0
  • Lifetime Qt Champion

    What point are you not getting ?
    If you give an image to the item, it will be shown on the QListWidget if you have configured it for that.

    2 1 Reply

  • @SGaist bro when i add the icon or image with .additem it throws an error

    0 1 Reply
  • Lifetime Qt Champion

    @Osama_Billah said in How to enter Images in a listWidget inside tabWidget:

    it throws an error

    Then please post your code and the error...

    2

  • @Osama_Billah

    Sample example:

    QListWidget * listwidget = new QListWidget;
ui->tabWidget->addTab(listwidget,QIcon(":/img/alert.png"),"NewTab");

QListWidgetItem *item1 = new QListWidgetItem(QIcon(":/img/Green-true.png"),"item1");
listwidget->addItem(item1);
QListWidgetItem *item2 = new QListWidgetItem(QIcon(":/img/Red-false.png"),"item2");
listwidget->addItem(item2);

    screen1.png

    2

  • Please have a look to code

    # -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'test_for_de.ui'
#
# Created by: PyQt5 UI code generator 5.13.0
#
# WARNING! All changes made in this file will be lost!


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.tabWidget = QtWidgets.QTabWidget(self.centralwidget)
        self.tabWidget.setGeometry(QtCore.QRect(40, 70, 761, 321))
        self.tabWidget.setStyleSheet("QTabWidget::tab-bar {\n"
"    alignment: center;\n"
"    background-color: rgb(0, 100, 142);\n"
"}\n"
"\n"
"QTabBar::tab {\n"
"    background: #B2B2B2;\n"
"    border: 2px solid #C4C4C3;\n"
"    border-bottom-color: #B2B2B2;\n"
"    border-top-left-radius: 4px;\n"
"    border-radius: 10px;\n"
"    border-bottom-right-radius: 2px;\n"
"    border-bottom-left-radius: 2px;\n"
"    color: rgb(255, 255, 255);\n"
"    min-width: 240px;\n"
"    min-height:61px;\n"
"    padding: 2px;\n"
"}\n"
"\n"
"QTabBar::tab:selected, QTabBar::tab:hover {\n"
"    background: #00648E;\n"
"    \n"
"}\n"
"\n"
"QTabBar::tab:selected {\n"
"    border-color: #9B9B9B;\n"
"    border-bottom-color: #C2C7CB;\n"
"}")
        self.tabWidget.setObjectName("tabWidget")
        self.tab = QtWidgets.QWidget()
        self.tab.setObjectName("tab")
        self.listWidget_2 = QtWidgets.QListWidget(self.tab)
        self.listWidget_2.setGeometry(QtCore.QRect(10, 10, 731, 192))
        self.listWidget_2.setObjectName("listWidget_2")
        self.tabWidget.addTab(self.tab, "")
        self.tab_3 = QtWidgets.QWidget()
        self.tab_3.setObjectName("tab_3")
        self.listWidget = QtWidgets.QListWidget(self.tab_3)
        self.listWidget.setGeometry(QtCore.QRect(20, 10, 721, 192))
        self.listWidget.setObjectName("listWidget")
        self.tabWidget.addTab(self.tab_3, "")
        self.tab_2 = QtWidgets.QWidget()
        self.tab_2.setObjectName("tab_2")
        self.listWidget_3 = QtWidgets.QListWidget(self.tab_2)
        self.listWidget_3.setGeometry(QtCore.QRect(20, 20, 721, 192))
        self.listWidget_3.setObjectName("listWidget_3")
        self.tabWidget.addTab(self.tab_2, "")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 21))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.tab_2.clicked.connect(self.images_for_tab2)
        self.tab_3.clicked.connect(self.images_for_tab3)
        self.tab.clicked.connect(self.images_for_tab1)

        self.retranslateUi(MainWindow)
        self.tabWidget.setCurrentIndex(2)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)



    def images_for_tab1(self):
        #images in the list will come from a webURL

        ls = ["C:/Users/OB/Desktop/DevoMech Project/2.JPG" , "C:/Users/OB/Desktop/DevoMech Project/3.JPG" , "C:/Users/OB/Desktop/DevoMech Project/4.JPG"]
        self.listWidget.addItem(ls)

    def images_for_tab2(self):
        ls1 = ["C:/Users/OB/Desktop/DevoMech Project/4.JPG" , "C:/Users/OB/Desktop/DevoMech Project/5.JPG" , "C:/Users/OB/Desktop/DevoMech Project/4.JPG"]
        self.listWidget.addItem(ls1)

    def images_for_tab3(self):
        ls1 = ["C:/Users/OB/Desktop/DevoMech Project/6.JPG" , "C:/Users/OB/Desktop/DevoMech Project/7.JPG" , "C:/Users/OB/Desktop/DevoMech Project/4.JPG"]
        self.listWidget.addItem(ls1)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), _translate("MainWindow", "Tab 1"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_3), _translate("MainWindow", "Page"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), _translate("MainWindow", "Tab 2"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())


error is 

Traceback (most recent call last):
  File "C:\Users\OB\Desktop\DevoMech Project\test_for_de.py", line 114, in <module>
    ui.setupUi(MainWindow)
  File "C:\Users\OB\Desktop\DevoMech Project\test_for_de.py", line 77, in setupUi
    self.tab_2.clicked.connect(self.images_for_tab2)
AttributeError: 'QWidget' object has no attribute 'clicked'
    0 1 Reply
  • Lifetime Qt Champion

    @Osama_Billah said in How to enter Images in a listWidget inside tabWidget:

    'QWidget' object has no attribute 'clicked'

    The error tells you what is wrong - there is no clicked signal. What type is tab_2?

    I doubt this is going to work:

    def images_for_tab2(self):
        ls1 = ["C:/Users/OB/Desktop/DevoMech Project/4.JPG" , "C:/Users/OB/Desktop/DevoMech Project/5.JPG" , "C:/Users/OB/Desktop/DevoMech Project/4.JPG"]
        self.listWidget.addItem(ls1)

    This way you add strings not images.
    Take a look at what @anil_arise gave you.

    2 1 Reply

  • as the images come from a website so every time the number of images and Videos will be change

    0 2 Replies

  • @Osama_Billah
    You still presumably do not want to add them all as a single string item, as you have done, do you?

    Don't you want to use https://doc.qt.io/qt-5/qlistwidget.html#addItems for a list, not just one item via addItem(const QString &label)?

    2
  • Lifetime Qt Champion

    @Osama_Billah said in How to enter Images in a listWidget inside tabWidget:

    as the images come from a website so every time the number of images and Videos will be change

    So what? It's your job to add them to the list. In the code you posted you add strings not images: please read documentation https://doc.qt.io/qt-5/qlistwidget.html#addItems This is to add a list of STRINGS, not images.
    Again: take a look at what @anil_arise suggested...

    1

  • @jsulm @anil_arise @SGaist oky thank you I'm checking that. as I'm new so It allow me to post after 10 min so sorry for late reply. and another question as I name the tab like tab1, tab2 so how can I call it. because it gave an error " 'QWidget' object has no attribute 'clicked' "

    1 1 Reply
  • Lifetime Qt Champion

    @Osama_Billah said in How to enter Images in a listWidget inside tabWidget:

    because it gave an error " 'QWidget' object has no attribute 'clicked' "

    It's not clear to me what you're trying to achieve. If you want to get a signal if a tab was activated then use https://doc.qt.io/qt-5/qtabwidget.html#currentChanged

    1 1 Reply

  • @jsulm I wanna to do this

    self.tab_2.clicked.connect(self.images_for_tab2)

    if the user click on tab_2 it call the own function.
    @anil_arise as I write the code it gave an error on invalid syntax. I'm Using python.
    Sorry for the trouble but I'm new learner.

    0 1 Reply
  • Lifetime Qt Champion

    @Osama_Billah https://doc.qt.io/qt-5/qtabwidget.html#currentChanged
    If you get errors please post your code and errors.

    1 

  •  self.tab.clicked.connect(self.images_for_tab1)

        self.retranslateUi(MainWindow)
        self.tabWidget.setCurrentIndex(2)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)



    def images_for_tab1(self):
        #images in the list will come from a webURL

        QListWidget * listwidget = new QListWidget()
        #ui->tabWidget->addTab(listwidget,QIcon(":/img/alert.png"),"NewTab");

        QListWidgetItem *item1 = new QListWidgetItem(QIcon("C:/Users/OB/Desktop/DevoMech Project/4.JPG"),"item1")
        listwidget->addItem(item1)
        QListWidgetItem *item2 = new QListWidgetItem(QIcon("C:/Users/OB/Desktop/DevoMech Project/5.JPG" , "item2")
        listwidget->addItem(item2)

    Capture.PNG

    0

  • @jsulm @SGaist @anil_arise @JonB Thanks for your time. I know it's hard for all of you but I'm totally new and have no idea.

    0
  • Lifetime Qt Champion

    You are mixing C++ syntax with Python syntax, that's the error you are getting. There's not pointer nor new operator in Python.

    1 1 Reply

  • @SGaist I change it to this

            self.item1 = self.QListWidgetItem.QIcon("C:/Users/OB/Desktop/DevoMech Project/4.JPG", "item1")
        self.listWidget_3.addItem(item1)
        self.item2 = self.QListWidgetItem.QIcon("C:/Users/OB/Desktop/DevoMech Project/5.JPG", "item2")
        self.listWidget_3.addItem(item2)

    Now the error is
    Traceback (most recent call last):
    File "C:\Users\OB\Desktop\DevoMech Project\test_for_de.py", line 127, in <module>
    ui.setupUi(MainWindow)
    File "C:\Users\OB\Desktop\DevoMech Project\test_for_de.py", line 83, in setupUi
    self.item1 = self.QListWidgetItem.QIcon("C:/Users/OB/Desktop/DevoMech Project/4.JPG", "item1")
    AttributeError: 'Ui_MainWindow' object has no attribute 'QListWidgetItem'

    0

  • problem solved. thanks @SGaist @jsulm @anil_arise @JonB I just want to know that every beginner face these problems. or I'm the special one.

    0 1 Reply 

  •         item1 = QtWidgets.QListWidgetItem(QIcon("path_to_pic"), "Name_of_pic")
        self.listWidget_2.addItem(item1)
        item2 = QtWidgets.QListWidgetItem(QIcon("path_to_pic"), "Name_of_pic!
        self.listWidget_2.addItem(item2)

    Capture.PNG

    1
  • Lifetime Qt Champion

    @Osama_Billah said in How to enter Images in a listWidget inside tabWidget:

    I just want to know that every beginner face these problems. or I'm the special one.

    At the beginning we are all beginners :-)

    1 1 Reply
  • Moderators

    Off topic replies forked to here:

    https://forum.qt.io/topic/111424/the-art-of-programming

    3

  • Thanks for your response. One more thing how to convert these images horizontally and increase the size. @SGaist @jsulm @anil_arise @JonB

    0

  • this is the code. I used QIcon the one @anil_arise suggest

    self.tabWidget.setIconSize(QtCore.QSize(32, 32))
QtWidgets.QListWidgetItem.setLayoutDirection(QtCore.Qt.LeftToRight)
    0
Log in to reply