How to enter Images in a listWidget inside tabWidget

anil_arise

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);

Osama_Billah

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'

jsulm

@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.

Osama_Billah

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

JonB

@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)?

jsulm

@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...

Osama_Billah

@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' "

jsulm

@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

Osama_Billah

@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.

jsulm

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

Osama_Billah

 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)

Osama_Billah

@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.

SGaist

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

Osama_Billah

@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'

Osama_Billah

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.

Osama_Billah

        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)

jsulm

@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 :-)

J.Hilk

Off topic replies forked to here:

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

Osama_Billah

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

Osama_Billah

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)