This question already has answers here:
Qt 4: Move window without title bar
(2 answers)
Closed 2 years ago.
I am trying to make an image viewer in PyQt5 with Python.
So far I have the functionality I want at the moment, this is a matter of styling the GUI how I would like it.
It looks almost how I want it.
I struggled to get that transparentish background, but managed to by setting windowflags to FramelesswindowHint. Unfortunately, now I don't have a menubar to close the application if I want to and drag the window around. I figure I will have to craft my own bar if I want to style it in a way that suits my background, which is fine, adding an X button to close the window shouldn't be too much of an issue.
My question is, how do I make it so I can drag the window around? I could make a rectangle widget and position it at the top with my buttons, but how do I get the whole window to move if the user clicks and drags it? I know similar questions are around, but I'm not sure how to make click and drag functions yet on objects in PyQt5 and it seems they use different layout strategies so I'm finding them confusing.
Here is my code:
from PyQt5 import QtCore, QtGui, QtWidgets
import os
class Ui_MainWindow(object):
def __init__(self):
cwd = r"C:\Users\chees\PycharmProjects\PYQT5GUI\images"
self.imagelist = []
self.imagepaths = []
self.imagecount = 0
for a, b, c in os.walk(cwd):
self.imagelist = c
for i in c:
self.imagepaths.append(a + "\\" + i)
print(self.imagepaths)
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.setWindowModality(QtCore.Qt.NonModal)
MainWindow.resize(661, 580)
MainWindow.setAttribute(QtCore.Qt.WA_TranslucentBackground)
MainWindow.setWindowFlags(QtCore.Qt.FramelessWindowHint)
self.centralwidget = QtWidgets.QWidget(MainWindow)
self.centralwidget.setObjectName("centralwidget")
self.b = QtWidgets.QWidget(self.centralwidget)
self.b.setGeometry(QtCore.QRect(0, 0, MainWindow.width(), MainWindow.height()))
self.b.setStyleSheet("background-color: rgba(0, 0, 0, 70%); border:1px; border-radius:25px;")
self.imageviewer = QtWidgets.QLabel(self.centralwidget)
self.imageviewer.setGeometry(QtCore.QRect(170, 60, 351, 321))
self.imageviewer.setText("")
self.imageviewer.setPixmap(QtGui.QPixmap("images/IMG1.jpg"))
self.imageviewer.setScaledContents(True)
self.imageviewer.setObjectName("imageviewer")
self.backward_button = QtWidgets.QPushButton(self.centralwidget)
self.backward_button.setGeometry(QtCore.QRect(50, 471, 120, 50))
self.backward_button.setObjectName("backward_button")
self.backward_button.clicked.connect(self.backward)
self.forward_button = QtWidgets.QPushButton(self.centralwidget)
self.forward_button.setGeometry(QtCore.QRect(510, 470, 120, 50))
self.forward_button.setObjectName("forward_button")
self.forward_button.clicked.connect(self.forward)
MainWindow.setCentralWidget(self.centralwidget)
self.statusbar = QtWidgets.QStatusBar(MainWindow)
self.statusbar.setObjectName("statusbar")
self.statusbar.setStyleSheet("background-color: rgba(255,255,255, 40%)")
MainWindow.setStatusBar(self.statusbar)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
self.changesize()
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
self.backward_button.setText(_translate("MainWindow", "<<"))
self.forward_button.setText(_translate("MainWindow", ">>"))
def changesize(self):
self.imageviewer.adjustSize()
if self.imageviewer.width() < 500:
MainWindow.resize(500, self.imageviewer.height() + 200)
self.b.resize(500, self.imageviewer.height() + 200)
self.imageviewer.move((500-self.imageviewer.width())//2, 55)
else:
MainWindow.resize((self.imageviewer.width() + self.imageviewer.width() // 8), (self.imageviewer.height() + 200))
self.b.resize((self.imageviewer.width() + self.imageviewer.width() // 8),
(self.imageviewer.height() + 200))
self.imageviewer.move(self.imageviewer.width() // 16, 55)
self.forward_button.move(MainWindow.width()-150,MainWindow.height()-80)
self.backward_button.move(30, MainWindow.height() - 80)
self.statusbar.showMessage(self.imagepaths[self.imagecount])
def flipmode(self):
self.imageviewer.setPixmap(QtGui.QPixmap("images\\" + self.imagelist[self.imagecount]))
self.changesize()
print(self.imageviewer.height(), self.imageviewer.width())
def forward(self):
self.imagecount += 1
if self.imagecount == len(self.imagelist):
self.imagecount = 0
self.flipmode()
def backward(self):
self.imagecount -= 1
if self.imagecount < 0:
self.imagecount = len(self.imagelist)-1
self.flipmode()
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
ui = Ui_MainWindow()
ui.setupUi(MainWindow)
MainWindow.show()
print(ui.imagelist)
sys.exit(app.exec_())
Do not modify the code generated by Qt Designer but create another class that inherits
from the appropriate widget and use the initial class to fill it.
One of the ways to drag a window might look like this:
self._old_pos = None
def mousePressEvent(self, event):
if event.button() == QtCore.Qt.LeftButton:
self._old_pos = event.pos()
def mouseReleaseEvent(self, event):
if event.button() == QtCore.Qt.LeftButton:
self._old_pos = None
def mouseMoveEvent(self, event):
if not self._old_pos:
return
delta = event.pos() - self._old_pos
self.move(self.pos() + delta)
from PyQt5 import QtCore, QtGui, QtWidgets
import os
class Ui_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.setWindowModality(QtCore.Qt.NonModal)
MainWindow.resize(661, 580)
self.centralwidget = QtWidgets.QWidget(MainWindow)
self.centralwidget.setObjectName("centralwidget")
self.b = QtWidgets.QWidget(self.centralwidget)
self.b.setGeometry(QtCore.QRect(0, 0, MainWindow.width(), MainWindow.height()))
self.b.setStyleSheet("background-color: rgba(0, 0, 0, 70%); border:1px; border-radius:25px;")
self.imageviewer = QtWidgets.QLabel(self.centralwidget)
self.imageviewer.setGeometry(QtCore.QRect(170, 60, 351, 321))
self.imageviewer.setText("")
self.imageviewer.setPixmap(QtGui.QPixmap("images/IMG1.jpg"))
self.imageviewer.setScaledContents(True)
self.imageviewer.setObjectName("imageviewer")
self.backward_button = QtWidgets.QPushButton(self.centralwidget)
self.backward_button.setGeometry(QtCore.QRect(50, 471, 120, 50))
self.backward_button.setObjectName("backward_button")
self.backward_button.clicked.connect(self.backward)
self.forward_button = QtWidgets.QPushButton(self.centralwidget)
self.forward_button.setGeometry(QtCore.QRect(510, 470, 120, 50))
self.forward_button.setObjectName("forward_button")
self.forward_button.clicked.connect(self.forward)
MainWindow.setCentralWidget(self.centralwidget)
self.statusbar = QtWidgets.QStatusBar(MainWindow)
self.statusbar.setObjectName("statusbar")
self.statusbar.setStyleSheet("background-color: rgba(255,255,255, 40%)")
MainWindow.setStatusBar(self.statusbar)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
self.backward_button.setText(_translate("MainWindow", "<<"))
self.forward_button.setText(_translate("MainWindow", ">>"))
class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow):
def __init__(self):
super().__init__()
self.setupUi(self)
self.setAttribute(QtCore.Qt.WA_TranslucentBackground)
self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
# cwd = r"C:\Users\chees\PycharmProjects\PYQT5GUI\images"
cwd = "D:/_Qt/__Qt/images"
self.imagelist = []
self.imagepaths = []
self.imagecount = 0
for a, b, c in os.walk(cwd):
self.imagelist = c
for i in c:
self.imagepaths.append(a + "\\" + i)
#print(self.imagepaths)
self.changesize()
#++ vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
self._old_pos = None
def mousePressEvent(self, event):
if event.button() == QtCore.Qt.LeftButton:
self._old_pos = event.pos()
def mouseReleaseEvent(self, event):
if event.button() == QtCore.Qt.LeftButton:
self._old_pos = None
def mouseMoveEvent(self, event):
if not self._old_pos:
return
delta = event.pos() - self._old_pos
self.move(self.pos() + delta)
# ++ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
def changesize(self):
self.imageviewer.adjustSize()
if self.imageviewer.width() < 500:
self.resize(500, self.imageviewer.height() + 200)
self.b.resize(500, self.imageviewer.height() + 200)
self.imageviewer.move((500-self.imageviewer.width())//2, 55)
else:
self.resize((self.imageviewer.width() + self.imageviewer.width() // 8), (self.imageviewer.height() + 200))
self.b.resize((self.imageviewer.width() + self.imageviewer.width() // 8),
(self.imageviewer.height() + 200))
self.imageviewer.move(self.imageviewer.width() // 16, 55)
self.forward_button.move(self.width()-150, self.height()-80)
self.backward_button.move(30, self.height() - 80)
self.statusbar.showMessage(self.imagepaths[self.imagecount])
def flipmode(self):
self.imageviewer.setPixmap(QtGui.QPixmap("images\\" + self.imagelist[self.imagecount]))
self.changesize()
# print(self.imageviewer.height(), self.imageviewer.width())
def forward(self):
self.imagecount += 1
if self.imagecount == len(self.imagelist):
self.imagecount = 0
self.flipmode()
def backward(self):
self.imagecount -= 1
if self.imagecount < 0:
self.imagecount = len(self.imagelist)-1
self.flipmode()
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
# MainWindow = QtWidgets.QMainWindow()
# ui = Ui_MainWindow()
# ui.setupUi(MainWindow)
# MainWindow.show()
w = MainWindow()
w.show()
# print(ui.imagelist)
sys.exit(app.exec_())
Related
I am trying to build a simple internet speed test app using pyqt5
I am a beginner and trying to build small apps to learn GUI basics So here is the code whenever i try to change label text from my thread function is says that self has no member named label_7. ignore the print statements i was just using them for debugging
def Update_values(self,MainWindow):
_translate = QtCore.QCoreApplication.translate
self.label_7.setText(_translate("MainWindow", "Download Speed : " + str(down)))
at the upper part of code i got error
Thank you in advance
from PyQt5 import QtCore, QtGui, QtWidgets
import speedtest as st
speed_test = st.Speedtest()
download = speed_test.download()
val = 0
val1 = 0
val3 = 0
down = 0
up = 0
pin = 0
class Ui_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(331, 307)
font = QtGui.QFont()
font.setFamily("Lucida Sans Unicode")
MainWindow.setFont(font)
MainWindow.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor))
MainWindow.setMouseTracking(False)
MainWindow.setTabletTracking(False)
MainWindow.setToolButtonStyle(QtCore.Qt.ToolButtonIconOnly)
MainWindow.setDocumentMode(False)
MainWindow.setTabShape(QtWidgets.QTabWidget.Triangular)
self.centralwidget = QtWidgets.QWidget(MainWindow)
self.centralwidget.setObjectName("centralwidget")
self.gridLayout = QtWidgets.QGridLayout(self.centralwidget)
self.gridLayout.setObjectName("gridLayout")
self.label = QtWidgets.QLabel(self.centralwidget)
font = QtGui.QFont()
font.setFamily("Comic Sans MS")
font.setPointSize(16)
self.label.setFont(font)
self.label.setObjectName("label")
self.gridLayout.addWidget(self.label, 0, 0, 1, 3)
self.line_2 = QtWidgets.QFrame(self.centralwidget)
self.line_2.setFrameShape(QtWidgets.QFrame.HLine)
self.line_2.setFrameShadow(QtWidgets.QFrame.Sunken)
self.line_2.setObjectName("line_2")
self.gridLayout.addWidget(self.line_2, 1, 0, 1, 3)
self.label_2 = QtWidgets.QLabel(self.centralwidget)
self.label_2.setObjectName("label_2")
self.gridLayout.addWidget(self.label_2, 2, 0, 1, 2)
self.label_4 = QtWidgets.QLabel(self.centralwidget)
self.label_4.setFrameShape(QtWidgets.QFrame.NoFrame)
self.label_4.setObjectName("label_4")
self.gridLayout.addWidget(self.label_4, 3, 0, 1, 2)
self.label_3 = QtWidgets.QLabel(self.centralwidget)
self.label_3.setObjectName("label_3")
self.gridLayout.addWidget(self.label_3, 4, 0, 1, 2)
self.label_7 = QtWidgets.QLabel(self.centralwidget)
self.label_7.setObjectName("label_7")
self.gridLayout.addWidget(self.label_7, 5, 0, 1, 2)
self.label_8 = QtWidgets.QLabel(self.centralwidget)
self.label_8.setObjectName("label_8")
self.gridLayout.addWidget(self.label_8, 6, 0, 1, 1)
self.progressBar = QtWidgets.QProgressBar(self.centralwidget)
self.progressBar.setProperty("value", 24)
self.progressBar.setTextVisible(False)
self.progressBar.setObjectName("progressBar")
self.gridLayout.addWidget(self.progressBar, 7, 0, 1, 3)
self.check1 = QtWidgets.QCheckBox(self.centralwidget)
self.check1.setObjectName("check1")
self.check1.stateChanged.connect(self.check_1)
self.gridLayout.addWidget(self.check1, 8, 0, 1, 1)
self.check2 = QtWidgets.QCheckBox(self.centralwidget)
self.check2.setObjectName("check2")
self.check2.stateChanged.connect(self.check_2)
self.gridLayout.addWidget(self.check2, 8, 1, 1, 1)
self.check3 = QtWidgets.QCheckBox(self.centralwidget)
self.check3.setObjectName("check3")
self.check3.stateChanged.connect(self.check_3)
self.gridLayout.addWidget(self.check3, 8, 2, 1, 1)
self.pushButton = QtWidgets.QPushButton(self.centralwidget)
self.pushButton.setObjectName("pushButton")
self.pushButton.clicked.connect(self.start_test)
self.gridLayout.addWidget(self.pushButton, 9, 0, 1, 3)
MainWindow.setCentralWidget(self.centralwidget)
self.statusbar = QtWidgets.QStatusBar(MainWindow)
self.statusbar.setObjectName("statusbar")
MainWindow.setStatusBar(self.statusbar)
self.menubar = QtWidgets.QMenuBar(MainWindow)
self.menubar.setGeometry(QtCore.QRect(0, 0, 331, 22))
self.menubar.setObjectName("menubar")
self.menuFile = QtWidgets.QMenu(self.menubar)
self.menuFile.setObjectName("menuFile")
self.menuAbout = QtWidgets.QMenu(self.menubar)
self.menuAbout.setObjectName("menuAbout")
MainWindow.setMenuBar(self.menubar)
self.actionSave_Results = QtWidgets.QAction(MainWindow)
self.actionSave_Results.setCheckable(False)
self.actionSave_Results.setChecked(False)
self.actionSave_Results.setObjectName("actionSave_Results")
self.actionChange_Save_Directory = QtWidgets.QAction(MainWindow)
self.actionChange_Save_Directory.setObjectName("actionChange_Save_Directory")
self.actionDeveloper = QtWidgets.QAction(MainWindow)
self.actionDeveloper.setObjectName("actionDeveloper")
self.menuFile.addAction(self.actionSave_Results)
self.menuFile.addAction(self.actionChange_Save_Directory)
self.menuAbout.addAction(self.actionDeveloper)
self.menubar.addAction(self.menuFile.menuAction())
self.menubar.addAction(self.menuAbout.menuAction())
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "Internet Speed Test"))
self.label.setText(_translate("MainWindow", "Internet Speed Test By FATE"))
self.label_2.setText(_translate("MainWindow", "Status : Connected"))
self.label_4.setText(_translate("MainWindow", "Ping : --"))
self.label_3.setText(_translate("MainWindow", "Upload Speed : --"))
self.label_7.setText(_translate("MainWindow", "Download Speed : --"))
self.label_8.setText(_translate("MainWindow", "Progress :"))
self.check1.setText(_translate("MainWindow", "Download"))
self.check2.setText(_translate("MainWindow", "Upload"))
self.check3.setText(_translate("MainWindow", "Ping"))
self.pushButton.setText(_translate("MainWindow", "Start"))
self.menuFile.setTitle(_translate("MainWindow", "File"))
self.menuAbout.setTitle(_translate("MainWindow", "About"))
self.actionSave_Results.setText(_translate("MainWindow", "Save Results"))
self.actionChange_Save_Directory.setText(_translate("MainWindow", "Change Save Directory"))
self.actionDeveloper.setText(_translate("MainWindow", "Developer"))
self.Update_values(MainWindow)
def Update_values(self,MainWindow):
_translate = QtCore.QCoreApplication.translate
self.label_7.setText(_translate("MainWindow", "Download Speed : " + str(down)))
# self.label_7.setText(_translate("MainWindow", "Download Speed : 10"))
print(down)
print(up)
print(pin)
def check_1(self, state):
global val
print(val)
if state != self.check1.isChecked():
val += 1
print("YESH "+ str(val))
else:
val -= 1
print("NO" + str(val))
def check_2(self, state):
global val1
print(val1)
if state != self.check1.isChecked():
val1 += 1
print("YESH "+ str(val1))
else:
val1 -= 1
print("NO" + str(val1))
def check_3(self, state):
global val3
print(val3)
if state != self.check1.isChecked():
val3 += 1
print("YESH "+ str(val3))
else:
val3 -= 1
print("NO" + str(val3))
def start_test(self):
self.threadclass = Thread()
self.threadclass.start()
class Thread(QtCore.QThread,Ui_MainWindow):
def __init__(self,parent = None):
super(Thread, self).__init__(parent)
def run(self):
if val == 1:
download = speed_test.download()
download_mbs = round(download / (10**6), 2)
global down
down = download_mbs
self.Update_values(Ui_MainWindow)
if val1 == 1:
upload = speed_test.upload()
upload_mbs = round(upload / (10**6), 2)
global up
up = upload_mbs
if val3 == 1:
ping = speed_test.results.ping
global pin
pin = ping
print("DONE")
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_())
First of all, you should not modify the code generated by Qt Designer, so in my next solution you must regenerate the .py generated by pyuic and call it gui.py: python -m pyuic5 your_ui.ui -o gui.py.
Another error you have is that you should not update the GUI from another thread, nor use global variables since they are prone to generating silent errors, instead you should use the signals as shown below:
from enum import Flag, auto
import threading
from PyQt5 import QtCore, QtGui, QtWidgets
import speedtest
from gui import Ui_MainWindow
class Task(Flag):
NONE = auto()
DOWNLOAD = auto()
UPLOAD = auto()
PING = auto()
class SpeedtestWrapper(QtCore.QObject):
started = QtCore.pyqtSignal()
finished = QtCore.pyqtSignal()
downloaded = QtCore.pyqtSignal(float)
uploaded = QtCore.pyqtSignal(float)
pinged = QtCore.pyqtSignal(float)
def start(self, flag):
threading.Thread(target=self._execute, args=(flag,), daemon=True).start()
def _execute(self, flag):
self.started.emit()
speed_test = speedtest.Speedtest()
if flag & Task.DOWNLOAD:
download = speed_test.download()
download_mbs = round(download / (10 ** 6), 2)
self.downloaded.emit(download_mbs)
if flag & Task.DOWNLOAD:
upload = speed_test.upload()
upload_mbs = round(upload / (10 ** 6), 2)
self.uploaded.emit(upload_mbs)
if flag & Task.DOWNLOAD:
ping = speed_test.results.ping
self.pinged.emit(ping)
self.finished.emit()
class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow):
def __init__(self, parent=None):
super().__init__(parent)
self.setupUi(self)
self._flag = Task.NONE
self.speed_wrapper = SpeedtestWrapper()
self.speed_wrapper.started.connect(self.on_started)
self.speed_wrapper.finished.connect(self.on_finished)
self.speed_wrapper.downloaded.connect(self.on_downloaded)
self.speed_wrapper.uploaded.connect(self.on_uploaded)
self.speed_wrapper.pinged.connect(self.on_pinged)
#QtCore.pyqtSlot()
def start_test(self):
if self._flag != Task.NONE:
self.speed_wrapper.start(self._flag)
#QtCore.pyqtSlot(int)
def check_1(self, state):
if state:
self._flag |= Task.DOWNLOAD
else:
self._flag &= ~Task.DOWNLOAD
#QtCore.pyqtSlot(int)
def check_2(self, state):
if state:
self._flag |= Task.UPLOAD
else:
self._flag &= ~Task.UPLOAD
#QtCore.pyqtSlot(int)
def check_3(self, state):
if state:
self._flag |= Task.PING
else:
self._flag &= ~Task.PING
#QtCore.pyqtSlot()
def on_started(self):
self.label_7.setText(self.tr("Download Speed: --"))
self.label_3.setText(self.tr("Upload Speed: --"))
self.label_4.setText(self.tr("Ping Speed: --"))
self.pushButton.setEnabled(False)
#QtCore.pyqtSlot()
def on_finished(self):
self.pushButton.setEnabled(True)
#QtCore.pyqtSlot(float)
def on_downloaded(self, download):
self.label_7.setText(self.tr("Download Speed: %f" % download))
#QtCore.pyqtSlot(float)
def on_uploaded(self, upload):
self.label_3.setText(self.tr("Upload Speed: %f" % upload))
#QtCore.pyqtSlot(float)
def on_pinged(self, ping):
self.label_4.setText(self.tr("Ping Speed: %f" % ping))
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
w = MainWindow()
w.show()
sys.exit(app.exec_())
I have a form with to labels (clock on the top and running string on the bottom). I added linker_by_grid to form (so that all components can proportional resize when form resize).
When I run project, every seconds text in running string is twitching. If I delete linker_by_grid from form, everything is OK, but all components not autoresizing to form.
Code from QtDesigner:
class Ui_Form(object):
def setupUi(self, Form):
Form.setObjectName("Form")
Form.resize(498, 299)
self.verticalLayoutWidget = QtWidgets.QWidget(Form)
self.verticalLayoutWidget.setGeometry(QtCore.QRect(10, 10, 479, 281))
self.verticalLayoutWidget.setObjectName("verticalLayoutWidget")
self.verticalLayout = QtWidgets.QVBoxLayout(self.verticalLayoutWidget)
self.verticalLayout.setContentsMargins(0, 0, 0, 0)
self.verticalLayout.setObjectName("verticalLayout")
self.label_2 = QtWidgets.QLabel(self.verticalLayoutWidget)
font = QtGui.QFont()
font.setPointSize(15)
self.label_2.setFont(font)
self.label_2.setText("")
self.label_2.setAlignment(QtCore.Qt.AlignCenter)
self.label_2.setObjectName("label_2")
self.verticalLayout.addWidget(self.label_2)
self.tableWidget = QtWidgets.QTableWidget(self.verticalLayoutWidget)
self.tableWidget.setObjectName("tableWidget")
self.tableWidget.setColumnCount(0)
self.tableWidget.setRowCount(0)
self.verticalLayout.addWidget(self.tableWidget)
self.label = QtWidgets.QLabel(self.verticalLayoutWidget)
font = QtGui.QFont()
font.setPointSize(15)
self.label.setFont(font)
self.label.setObjectName("label")
self.verticalLayout.addWidget(self.label)
self.retranslateUi(Form)
QtCore.QMetaObject.connectSlotsByName(Form)
def retranslateUi(self, Form):
_translate = QtCore.QCoreApplication.translate
Form.setWindowTitle(_translate("Form", "Form"))
self.label.setText(_translate("Form", "Running string ... "))
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
Form = QtWidgets.QWidget()
ui = Ui_Form()
ui.setupUi(Form)
Form.show()
sys.exit(app.exec_()) ```
main file:
``` from PyQt5 import QtWidgets
from PyQt5.QtCore import QTimer, QTime
import sys
import untitled
class Widget(QtWidgets.QWidget):
def __init__(self):
super(Widget, self).__init__()
self.ui = untitled.Ui_Form()
self.ui.setupUi(self)
self.x = 477
self.y = self.height() - 30
self.ui.label.move(self.x, self.y)
self.timer = QTimer(self)
self.timer.timeout.connect(self.move_label_left)
self.timer.start(100)
self.timer2 = QTimer(self)
self.timer2.timeout.connect(self.show_clock)
self.timer2.start(1000)
def move_label_left(self):
if self.x == -477:
self.x = 477
self.x -= 2
self.ui.label.move(self.x, self.height() - 30)
else:
self.x -= 2
self.ui.label.move(self.x, self.height() - 30)
def show_clock(self):
time = QTime.currentTime()
text = time.toString('hh:mm:ss')
self.ui.label_2.setText(text)
app = QtWidgets.QApplication(sys.argv)
w = Widget()
w.show()
sys.exit(app.exec_()) ```
You need to remove the label from the layout
import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5 import QtWidgets
from PyQt5.QtCore import QTimer, QTime
#import untitled
class Ui_Form(object):
def setupUi(self, Form):
Form.setObjectName("Form")
Form.resize(500, 350) #(498, 299)
# self.verticalLayoutWidget = QtWidgets.QWidget(Form)
# self.verticalLayoutWidget.setGeometry(QtCore.QRect(10, 10, 479, 281))
# self.verticalLayoutWidget.setObjectName("verticalLayoutWidget")
self.verticalLayout = QtWidgets.QVBoxLayout(Form) #(self.verticalLayoutWidget)
self.verticalLayout.setContentsMargins(0, 0, 0, 50) # + 50
self.verticalLayout.setObjectName("verticalLayout")
self.label_2 = QtWidgets.QLabel(Form) #(self.verticalLayoutWidget)
font = QtGui.QFont()
font.setPointSize(15)
self.label_2.setFont(font)
self.label_2.setText("")
self.label_2.setAlignment(QtCore.Qt.AlignCenter)
self.label_2.setObjectName("label_2")
self.verticalLayout.addWidget(self.label_2)
self.tableWidget = QtWidgets.QTableWidget(Form) #(self.verticalLayoutWidget)
self.tableWidget.setObjectName("tableWidget")
self.tableWidget.setColumnCount(4)
self.tableWidget.setRowCount(3)
self.verticalLayout.addWidget(self.tableWidget)
# self.label = QtWidgets.QLabel(self.verticalLayoutWidget)
# font = QtGui.QFont()
# font.setPointSize(15)
# self.label.setFont(font)
# self.label.setObjectName("label")
# self.verticalLayout.addWidget(self.label)
self.retranslateUi(Form)
QtCore.QMetaObject.connectSlotsByName(Form)
def retranslateUi(self, Form):
_translate = QtCore.QCoreApplication.translate
Form.setWindowTitle(_translate("Form", "Form"))
# self.label.setText(_translate("Form", "Running string ... "))
class Widget(QtWidgets.QWidget):
def __init__(self):
super(Widget, self).__init__()
self.ui = Ui_Form()
self.ui.setupUi(self)
self.ui.tableWidget.setAlternatingRowColors(True) # +
self.ui.tableWidget.horizontalHeader().setSectionResizeMode(QtWidgets.QHeaderView.Stretch) # +
self.labelMove = QtWidgets.QLabel("Running string ... ", self) # +
font = QtGui.QFont() # +
font.setPointSize(15) # +
self.labelMove.setFont(font) # +
self.x = self.width() #477
self.y = self.height() - 30
self.labelMove.move(self.x, self.y)
self.timer = QTimer(self)
self.timer.timeout.connect(self.move_label_left)
self.timer.start(15) # 100
self.timer2 = QTimer(self)
self.timer2.timeout.connect(self.show_clock)
self.timer2.start(1000)
def move_label_left(self):
if self.x <= -150: # 477
self.x = self.width() # 477
self.x -= 1
self.labelMove.move(self.x, self.height() - 30)
else:
self.x -= 1
self.labelMove.move(self.x, self.height() - 30)
self.labelMove.adjustSize() # +++
def show_clock(self):
time = QTime.currentTime()
text = time.toString('hh:mm:ss')
self.ui.label_2.setText(text)
if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
w = Widget()
w.show()
sys.exit(app.exec_())
How to animate position,scale or any other attributes of composed elements inside custom widget, on mouse pointer enters or leaves the QListWidgetItem ?
(see reference image below)
And is there any better way to manage space around ListWidgetItem ?
item_widget.sizeHint() gives unwanted extra space, which is why i added hard coded value to setSizeHint.
ProductMainWindow.py
from PySide2 import QtCore, QtGui, QtWidgets
import productThumbnailWidget
import sys
sys.path.append('E:/code')
class prodMainWindowUI(QtWidgets.QMainWindow):
def __init__(self):
QtWidgets.QMainWindow.__init__(self)
self.setupUi(self)
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(800, 600)
self.centralwidget = QtWidgets.QWidget(MainWindow)
self.centralwidget.setObjectName("centralwidget")
self.verticalLayout = QtWidgets.QVBoxLayout(self.centralwidget)
self.verticalLayout.setObjectName("verticalLayout")
self.productListWidget = QtWidgets.QListWidget(self.centralwidget)
self.productListWidget.setObjectName("productListWidget")
self.productListWidget.setViewMode(QtWidgets.QListWidget.IconMode)
self.productListWidget.setIconSize(QtCore.QSize(256,256))
self.productListWidget.setResizeMode(QtWidgets.QListWidget.Adjust)
self.productListWidget.setMovement(QtWidgets.QListWidget.Static) # disable drag and drop
self.productListWidget.setGridSize(QtCore.QSize(256 + 5, 256 + 5))
self.verticalLayout.addWidget(self.productListWidget)
MainWindow.setCentralWidget(self.centralwidget)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
for i in range(6):
item = QtWidgets.QListWidgetItem(self.productListWidget)
item_widget = productThumbnailWidget.productThumbWidget()
#item.setSizeHint(item_widget.sizeHint())
item.setSizeHint(QtCore.QSize(256,256))
self.productListWidget.addItem(item)
self.productListWidget.setItemWidget(item, item_widget)
def retranslateUi(self, MainWindow):
MainWindow.setWindowTitle(QtWidgets.QApplication.translate("MainWindow", "MainWindow", None, -1))
app = QtWidgets.QApplication(sys.argv)
prodUI = prodMainWindowUI()
prodUI.show()
sys.exit(app.exec_())
productThumbnailWidget
from PySide2 import QtCore, QtGui, QtWidgets
class productThumbWidget(QtWidgets.QWidget):
def __init__(self, parent=None):
super(productThumbWidget, self).__init__(parent)
self.setObjectName("Form")
self.resize(256, 256)
self.setMinimumSize(QtCore.QSize(256, 256))
self.setMaximumSize(QtCore.QSize(256, 256))
self.verticalLayout = QtWidgets.QVBoxLayout()
self.verticalLayout.setContentsMargins(0, 0, 0, 0)
self.verticalLayout.setSpacing(0)
self.verticalLayout.setObjectName("verticalLayout")
self.frame = QtWidgets.QFrame()
self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
self.frame.setObjectName("frame")
self.thumbnailLabel = QtWidgets.QLabel("", self.frame)
self.thumbnailLabel.setObjectName("thumbnailLabel")
self.thumbnailLabel.setScaledContents(False)
self.thumbnailLabel.setGeometry(QtCore.QRect(0, 0, 256, 256))
self.thumbnailLabel.setMinimumSize(QtCore.QSize(256, 256))
self.thumbnailLabel.setMaximumSize(QtCore.QSize(256, 256))
self.thumbnailLabel.setPixmap(QtGui.QPixmap("E:/code/android.png"))
self.backgroundLabel = QtWidgets.QLabel("", self.frame)
self.backgroundLabel.setObjectName("backgroundLabel")
self.backgroundLabel.setGeometry(QtCore.QRect(0, 206, 256, 50))
self.backgroundLabel.setMinimumSize(QtCore.QSize(256, 50))
self.backgroundLabel.setMaximumSize(QtCore.QSize(256, 50))
self.backgroundLabel.setStyleSheet("QLabel#backgroundLabel{\n"
" background: #32353B;\n"
"}")
self.titleLabel = QtWidgets.QLabel("Title", self.frame)
self.titleLabel.setObjectName("titleLabel")
self.titleLabel.setGeometry(QtCore.QRect(10, 218, 246, 25))
self.titleLabel.setMinimumSize(QtCore.QSize(246, 25))
self.titleLabel.setMaximumSize(QtCore.QSize(246, 25))
font = QtGui.QFont()
font.setFamily("SF Pro Display")
font.setPointSize(16)
font.setWeight(75)
font.setBold(True)
self.titleLabel.setFont(font)
self.titleLabel.setStyleSheet("QLabel#titleLabel {\n"
" color: #FFFFFF;\n"
"}")
self.verticalLayout.addWidget(self.frame)
self.setLayout(self.verticalLayout)
Output
The solution is to animate the position of the rectangle using QPropertyAnimation, and to activate the animations using the events QEvent::Enter and QEvent::Leave:
import shiboken2
from PySide2 import QtCore, QtGui, QtWidgets
class RectangleHoverEffect(QtCore.QObject):
def __init__(self, rectangle, parent):
super().__init__(parent)
if not isinstance(rectangle, QtWidgets.QWidget):
raise TypeError(f"{rectangle} must be a QWidget")
if rectangle.parent() is None:
raise ValueError(f"{rectangle} must have a parent")
self.m_rectangle = rectangle
self.m_rectangle.parent().installEventFilter(self)
self.m_animation = QtCore.QPropertyAnimation(
self,
targetObject=self.m_rectangle,
propertyName=b"pos",
duration=300,
easingCurve=QtCore.QEasingCurve.OutQuad,
)
def eventFilter(self, obj, event):
if shiboken2.isValid(self.m_rectangle):
if self.m_rectangle.parent() is obj:
y0 = self.m_rectangle.parent().height()
y1 = self.m_rectangle.parent().height() - self.m_rectangle.height()
if event.type() == QtCore.QEvent.Enter:
self._start_animation(y0, y1)
elif event.type() == QtCore.QEvent.Leave:
self._start_animation(y1, y0)
return super().eventFilter(obj, event)
def _start_animation(self, y0, y1):
self.m_animation.setStartValue(QtCore.QPoint(0, y0))
self.m_animation.setEndValue(QtCore.QPoint(0, y1))
self.m_animation.start()
class ThumbWidget(QtWidgets.QFrame):
def __init__(self, title, pixmap, parent=None):
super().__init__(parent)
self.setFrameShape(QtWidgets.QFrame.StyledPanel)
self.setFrameShadow(QtWidgets.QFrame.Raised)
pixmap_label = QtWidgets.QLabel(pixmap=pixmap, scaledContents=True)
title_label = QtWidgets.QLabel(title)
title_label.setStyleSheet("""color: #FFFFFF""")
font = QtGui.QFont()
font.setFamily("SF Pro Display")
font.setPointSize(16)
font.setWeight(75)
font.setBold(True)
title_label.setFont(font)
background_label = QtWidgets.QLabel(pixmap_label)
background_label.setStyleSheet("background: #32353B;")
background_label.setFixedSize(self.width(), 50)
background_label.move(0, self.height())
background_lay = QtWidgets.QVBoxLayout(background_label)
background_lay.addWidget(title_label)
self.setFixedSize(256, 256)
lay = QtWidgets.QVBoxLayout(self)
lay.setContentsMargins(0, 0, 0, 0)
lay.setSpacing(0)
lay.addWidget(pixmap_label)
effect = RectangleHoverEffect(background_label, self)
class ProductMainWindow(QtWidgets.QMainWindow):
def __init__(self, parent=None):
super().__init__(parent)
self.product_listwidget = QtWidgets.QListWidget(
viewMode=QtWidgets.QListWidget.IconMode,
iconSize=QtCore.QSize(256, 256),
resizeMode=QtWidgets.QListWidget.Adjust,
movement=QtWidgets.QListWidget.Static,
)
self.product_listwidget.setGridSize(QtCore.QSize(256 + 5, 256 + 5))
for i in range(6):
item = QtWidgets.QListWidgetItem()
item_widget = ThumbWidget(f"Title {i}", QtGui.QPixmap("E:/code/android.png"))
item.setSizeHint(QtCore.QSize(256, 256))
self.product_listwidget.addItem(item)
self.product_listwidget.setItemWidget(item, item_widget)
central_widget = QtWidgets.QWidget()
self.setCentralWidget(central_widget)
lay = QtWidgets.QVBoxLayout(central_widget)
lay.addWidget(self.product_listwidget)
self.resize(960, 480)
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
w = ProductMainWindow()
w.show()
sys.exit(app.exec_())
I have a program with two QTreeView. When I press a button, I need to allow the user to select several elements, and when user press Escape, to transfer the selected elements to a waiting function, which will then pass to the handler function.
I've tried to use threads, gevent, and asyncio.
this function in main class, i run this function when i need get some files.
import sys
from PyQt5 import QtWidgets, QtCore
from PyQt5.QtWidgets import *
import ui
import exampleQTV
import asyncio
class PyMap(QMainWindow):
def __init__(self):
super().__init__()
self.setupUi(self)
self.select.clicked.connect(self.selectAction)
def selectAction(self):
self.getSomeFiles("Example", "Select some files, and press Escape", self.leftView)
def getSomeFiles(self, title, path, view):
# return QFileDialog.getOpenFileNames(self, title, path) ### older, and ugly variant
buttonReply = QMessageBox.information(self, "Information", "Select needed files",
QMessageBox.Ok)
loop = asyncio.get_event_loop()
tasks = [loop.create_task(view.getFiles())]
wait_tasks = asyncio.wait(tasks)
result = loop.run_until_complete(asyncio.gather(*tasks))
print (result)
# result = view.getFiles()
return result
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(800, 600)
self.centralwidget = QtWidgets.QWidget(MainWindow)
self.centralwidget.setObjectName("centralwidget")
self.gridLayout = QtWidgets.QGridLayout(self.centralwidget)
self.gridLayout.setObjectName("gridLayout")
self.rightView = exampleQTV.exampleQTV()
self.rightView.setObjectName("rightView")
self.gridLayout.addWidget(self.rightView, 1, 1, 1, 1)
self.leftView = exampleQTV.exampleQTV()
self.leftView.setObjectName("leftView")
self.gridLayout.addWidget(self.leftView, 1, 0, 1, 1)
self.select = QtWidgets.QPushButton(self.centralwidget)
self.select.setObjectName("select")
self.gridLayout.addWidget(self.select, 0, 0, 1, 2)
MainWindow.setCentralWidget(self.centralwidget)
self.menubar = QtWidgets.QMenuBar(MainWindow)
self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 22))
self.menubar.setObjectName("menubar")
MainWindow.setMenuBar(self.menubar)
self.statusbar = QtWidgets.QStatusBar(MainWindow)
self.statusbar.setObjectName("statusbar")
MainWindow.setStatusBar(self.statusbar)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
self.select.setText(_translate("MainWindow", "Select"))
def main():
app = QtWidgets.QApplication(sys.argv)
window = PyMap()
window.show()
app.exec_()
if __name__ == '__main__':
main()
this functions in QTreeView's class
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from multiprocessing.pool import ThreadPool
import asyncio
class exampleQTV(QTreeView):
def __init__(self):
QTreeView.__init__(self)
self.model = QFileSystemModel()
self.model.setRootPath("/") # i'm on linux if you not change from / to for example D:\\
self.setModel(self.model)
self.eventCalled = False
self.requestForEscape = False
self.setColumnHidden(1, True)
self.setColumnHidden(2, True)
self.setColumnHidden(3, True)
def keyPressEvent(self, event):
if event.key() == Qt.Key_Escape:
self.eventCalled = false
def getFiles_thread(self):
while True:
if self.requestForEscape == True:
if self.eventCalled == False:
return self.selectedIndexes()
async def getFiles(self):
self.setSelectionMode(QAbstractItemView.SelectionMode.MultiSelection)
self.eventCalled = True
self.requestForEscape = True
pool = ThreadPool(processes=1)
self.printMessage(1)
async_result = pool.apply_async(self.getFiles_thread)
self.printMessage(2)
result = await async_result.get()
self.printMessage(3)
# ### Sorry if it not corrent, i'm just copied from doc
# tasks = [self.getFiles_thread()]
# loop = asyncio.get_event_loop()
# result = loop.run_until_complete(asyncio.gather(*tasks))
# task = [gevent.spawn(self.getFiles_thread(), 2)]
# result = gevent.joinall(task)
# result = await self.getFiles_thread()
self.setSelectionMode(QAbstractItemView.SelectionMode.SingleSelection)
return result
def printMessage(self, message):
print(message)
output:
1
2
The tasks of the GUI such as the selection of items, listening to keyboard events, etc. do not need to be executed in another thread, nor in another process.
Your way of programming is procedural but in the GUI the paradigm of Event-driven Programming is used, in the case of Qt it is implemented through the signals, slot and events. Only tasks that synchronously consume a lot of time must be executed in another thread, for example I emulated the task of copying with QtCore.QThread.sleep(...).
Considering the above I have implemented the logic of enabling the selection, listen to the keyPressEvent, emit a signal with the selected indexes, and call the heavy function with the data.
main.py
import sys
from functools import partial
from PyQt5 import QtCore, QtGui, QtWidgets
import exampleQTV
class PyMap(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
self.setupUi(self)
self.select.clicked.connect(self.selectAction)
self.leftView.selectedIndexesSignal.connect(
self.on_selectedIndexesSignal
)
thread = QtCore.QThread(self)
thread.start()
self.m_worker = Worker()
self.m_worker.moveToThread(thread)
#QtCore.pyqtSlot()
def selectAction(self):
buttonReply = QtWidgets.QMessageBox.information(
self,
"Information",
"Select needed files",
QtWidgets.QMessageBox.Ok | QtWidgets.QMessageBox.Cancel,
)
if buttonReply == QtWidgets.QMessageBox.Ok:
self.leftView.setEnableMultiSelection(True)
#QtCore.pyqtSlot(list)
def on_selectedIndexesSignal(self, indexes):
paths = []
for ix in indexes:
path = ix.data(QtWidgets.QFileSystemModel.FilePathRole)
paths.append(path)
print(paths)
wrapper = partial(self.m_worker.heavyTask, paths)
QtCore.QTimer.singleShot(0, wrapper)
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(800, 600)
self.centralwidget = QtWidgets.QWidget(MainWindow)
self.centralwidget.setObjectName("centralwidget")
self.gridLayout = QtWidgets.QGridLayout(self.centralwidget)
self.gridLayout.setObjectName("gridLayout")
self.rightView = exampleQTV.ExampleQTV()
self.rightView.setObjectName("rightView")
self.gridLayout.addWidget(self.rightView, 1, 1, 1, 1)
self.leftView = exampleQTV.ExampleQTV()
self.leftView.setObjectName("leftView")
self.gridLayout.addWidget(self.leftView, 1, 0, 1, 1)
self.select = QtWidgets.QPushButton(self.centralwidget)
self.select.setObjectName("select")
self.gridLayout.addWidget(self.select, 0, 0, 1, 2)
MainWindow.setCentralWidget(self.centralwidget)
self.menubar = QtWidgets.QMenuBar(MainWindow)
self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 22))
self.menubar.setObjectName("menubar")
MainWindow.setMenuBar(self.menubar)
self.statusbar = QtWidgets.QStatusBar(MainWindow)
self.statusbar.setObjectName("statusbar")
MainWindow.setStatusBar(self.statusbar)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
self.select.setText(_translate("MainWindow", "Select"))
class Worker(QtCore.QObject):
#QtCore.pyqtSlot(list)
def heavyTask(self, paths):
print("started")
# emulate heavy task
QtCore.QThread.sleep(5)
print(paths)
print("finished")
def main():
app = QtWidgets.QApplication(sys.argv)
window = PyMap()
window.show()
app.exec_()
if __name__ == "__main__":
main()
exampleQTV.py
from PyQt5 import QtCore, QtGui, QtWidgets
class ExampleQTV(QtWidgets.QTreeView):
selectedIndexesSignal = QtCore.pyqtSignal(list)
def __init__(self, parent=None):
super(ExampleQTV, self).__init__(parent)
self.model = QtWidgets.QFileSystemModel(self)
self.model.setRootPath(QtCore.QDir.rootPath())
self.setModel(self.model)
for i in (1, 2, 3):
self.setColumnHidden(i, True)
self.setSelectionMode(QtWidgets.QAbstractItemView.NoSelection)
self.expandAll()
def setEnableMultiSelection(self, enable):
self.setSelectionMode(
QtWidgets.QAbstractItemView.MultiSelection
if enable
else QtWidgets.QAbstractItemView.NoSelection
)
def keyPressEvent(self, event):
if event.key() == QtCore.Qt.Key_Escape:
self.selectedIndexesSignal.emit(self.selectedIndexes())
self.selectionModel().clearSelection()
self.setEnableMultiSelection(False)
super(ExampleQTV, self).keyPressEvent(event)
Since pyqt doesn't have horizontal text in vertical tab option, I followed this link to make it happen.
I wanted to have icons on the left and then text after icon and different color for selected tab text, inactive tabs text. Below code gets it done almost. The only problem is text alignment is center. I tried changing tabRect.center() but changing it with left and top or right etc is making it crash.
The commented code which I got from this linkgets me left alignment but it didn't have icons which I added. But in that I am unable to change text color of inactive tabs.
I am new to python and I am unable to find a solution for this. I tried this as well link but this only sets background color. tried using this option as well setTabTextColor link but it didn't work for some reason. been trying from 2 days.
Whenever I try to set text color using stylesheet with commented code, the "color" option won't work in stylesheet. any ideas on how to get this done? thanks
from PyQt5 import QtCore, QtGui, QtWidgets
class TabBar(QtWidgets.QTabBar):
def tabSizeHint(self, index):
s = QtWidgets.QTabBar.tabSizeHint(self, index)
s.transpose()
return s
def paintEvent(self, event):
painter = QtWidgets.QStylePainter(self)
opt = QtWidgets.QStyleOptionTab()
for i in range(self.count()):
self.initStyleOption(opt, i)
painter.drawControl(QtWidgets.QStyle.CE_TabBarTabShape, opt)
painter.save()
s = opt.rect.size()
s.transpose()
r = QtCore.QRect(QtCore.QPoint(), s)
r.moveCenter(opt.rect.center())
opt.rect = r
c = self.tabRect(i).center()
painter.translate(c)
painter.rotate(90)
painter.translate(-c)
painter.drawControl(QtWidgets.QStyle.CE_TabBarTabLabel, opt)
painter.restore()
# for i in range(self.count()):
# self.initStyleOption(opt, i)
# c = self.tabRect(i)
# c.moveLeft(35)
# painter.drawControl(QtWidgets.QStyle.CE_TabBarTabShape, opt)
# # painter.setPen(QColor(255, 255, 255))
# painter.drawText(c, QtCore.Qt.AlignVCenter | QtCore.Qt.TextDontClip, self.tabText(i))
# if i == 0:
# painter.drawImage(QtCore.QRectF(8, 8, 20, 20), QtGui.QImage("images/logo.png"))
# if i == 1:
# painter.drawImage(QtCore.QRectF(8, 44, 20, 20), QtGui.QImage("images/data.png"))
# if i == 2:
# painter.drawImage(QtCore.QRectF(8, 82, 20, 20), QtGui.QImage("images/browse.png"))
# if i == 3:
# painter.drawImage(QtCore.QRectF(8, 120, 20, 20), QtGui.QImage("images/off.png"))
# if i == 4:
# painter.drawImage(QtCore.QRectF(8, 158, 20, 20), QtGui.QImage("images/cal.png"))
# if i == 5:
# painter.drawImage(QtCore.QRectF(8, 196, 20, 20), QtGui.QImage("images/fol.png"))
# if i == 6:
# painter.drawImage(QtCore.QRectF(8, 232, 20, 20), QtGui.QImage("images/exc.png"))
# painter.end()
class TabWidget(QtWidgets.QTabWidget):
def __init__(self, *args, **kwargs):
QtWidgets.QTabWidget.__init__(self, *args, **kwargs)
self.setTabBar(TabBar(self))
self.setTabPosition(QtWidgets.QTabWidget.West)
The solution is to use a QProxyStyle to redirect text painting:
from PyQt5 import QtCore, QtGui, QtWidgets
class TabBar(QtWidgets.QTabBar):
def tabSizeHint(self, index):
s = QtWidgets.QTabBar.tabSizeHint(self, index)
s.transpose()
return s
def paintEvent(self, event):
painter = QtWidgets.QStylePainter(self)
opt = QtWidgets.QStyleOptionTab()
for i in range(self.count()):
self.initStyleOption(opt, i)
painter.drawControl(QtWidgets.QStyle.CE_TabBarTabShape, opt)
painter.save()
s = opt.rect.size()
s.transpose()
r = QtCore.QRect(QtCore.QPoint(), s)
r.moveCenter(opt.rect.center())
opt.rect = r
c = self.tabRect(i).center()
painter.translate(c)
painter.rotate(90)
painter.translate(-c)
painter.drawControl(QtWidgets.QStyle.CE_TabBarTabLabel, opt);
painter.restore()
class TabWidget(QtWidgets.QTabWidget):
def __init__(self, *args, **kwargs):
QtWidgets.QTabWidget.__init__(self, *args, **kwargs)
self.setTabBar(TabBar(self))
self.setTabPosition(QtWidgets.QTabWidget.West)
class ProxyStyle(QtWidgets.QProxyStyle):
def drawControl(self, element, opt, painter, widget):
if element == QtWidgets.QStyle.CE_TabBarTabLabel:
ic = self.pixelMetric(QtWidgets.QStyle.PM_TabBarIconSize)
r = QtCore.QRect(opt.rect)
w = 0 if opt.icon.isNull() else opt.rect.width() + self.pixelMetric(QtWidgets.QStyle.PM_TabBarIconSize)
r.setHeight(opt.fontMetrics.width(opt.text) + w)
r.moveBottom(opt.rect.bottom())
opt.rect = r
QtWidgets.QProxyStyle.drawControl(self, element, opt, painter, widget)
if __name__ == '__main__':
import sys
app = QtWidgets.QApplication(sys.argv)
QtWidgets.QApplication.setStyle(ProxyStyle())
w = TabWidget()
w.addTab(QtWidgets.QWidget(), QtGui.QIcon("zoom.png"), "ABC")
w.addTab(QtWidgets.QWidget(), QtGui.QIcon("zoom-in.png"), "ABCDEFGH")
w.addTab(QtWidgets.QWidget(), QtGui.QIcon("zoom-out.png"), "XYZ")
w.resize(640, 480)
w.show()
sys.exit(app.exec_())
In case you have previously designed any tab in QtDesigner.
For example, I have designed this tab in QtDesigner:
Now I have generated the py file from the ui file, and the UI file, looks like this:
# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'tabwidget.ui'
#
# Created by: PyQt5 UI code generator 5.13.2
#
# 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.gridLayout = QtWidgets.QGridLayout(self.centralwidget)
self.gridLayout.setObjectName("gridLayout")
self.tabWidget = QtWidgets.QTabWidget(self.centralwidget)
self.tabWidget.setObjectName("tabWidget")
self.tab = QtWidgets.QWidget()
self.tab.setObjectName("tab")
self.gridLayout_2 = QtWidgets.QGridLayout(self.tab)
self.gridLayout_2.setObjectName("gridLayout_2")
self.pushButton_reach = QtWidgets.QPushButton(self.tab)
self.pushButton_reach.setObjectName("pushButton_reach")
self.gridLayout_2.addWidget(self.pushButton_reach, 1, 1, 1, 1)
self.label = QtWidgets.QLabel(self.tab)
self.label.setAlignment(QtCore.Qt.AlignCenter)
self.label.setObjectName("label")
self.gridLayout_2.addWidget(self.label, 0, 1, 1, 1)
self.tabWidget.addTab(self.tab, "")
self.tab_2 = QtWidgets.QWidget()
self.tab_2.setObjectName("tab_2")
self.tabWidget.addTab(self.tab_2, "")
self.gridLayout.addWidget(self.tabWidget, 0, 0, 1, 1)
self.pushButton_addoptions = QtWidgets.QPushButton(self.centralwidget)
self.pushButton_addoptions.setObjectName("pushButton_addoptions")
self.gridLayout.addWidget(self.pushButton_addoptions, 1, 0, 1, 1)
MainWindow.setCentralWidget(self.centralwidget)
self.statusbar = QtWidgets.QStatusBar(MainWindow)
self.statusbar.setObjectName("statusbar")
MainWindow.setStatusBar(self.statusbar)
self.retranslateUi(MainWindow)
self.tabWidget.setCurrentIndex(0)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
self.pushButton_reach.setText(_translate("MainWindow", "I am here"))
self.label.setText(_translate("MainWindow", "Gotcha!"))
self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), _translate("MainWindow", "First Tab"))
self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), _translate("MainWindow", "Second Tab"))
self.pushButton_addoptions.setText(_translate("MainWindow", "ADD options"))
And from eyllanesc's answer I figured out how to add tabs vertically and I added the pre-existing First-Tab to my modified tabwidget as follows:
import sys
from PyQt5.QtWidgets import QMainWindow, QApplication
from PyQt5 import QtGui, QtWidgets, QtCore
import tabwidget
# new additions
class TabBar(QtWidgets.QTabBar):
def tabSizeHint(self, index):
s = QtWidgets.QTabBar.tabSizeHint(self, index)
s.transpose()
return s
def paintEvent(self, event):
painter = QtWidgets.QStylePainter(self)
opt = QtWidgets.QStyleOptionTab()
for i in range(self.count()):
self.initStyleOption(opt, i)
painter.drawControl(QtWidgets.QStyle.CE_TabBarTabShape, opt)
painter.save()
s = opt.rect.size()
s.transpose()
r = QtCore.QRect(QtCore.QPoint(), s)
r.moveCenter(opt.rect.center())
opt.rect = r
c = self.tabRect(i).center()
painter.translate(c)
painter.rotate(90)
painter.translate(-c)
painter.drawControl(QtWidgets.QStyle.CE_TabBarTabLabel, opt)
painter.restore()
# class TabWidget(QtWidgets.QTabWidget):
# def __init__(self, *args, **kwargs):
# QtWidgets.QTabWidget.__init__(self, *args, **kwargs)
# self.setTabBar(TabBar(self))
# self.setTabPosition(QtWidgets.QTabWidget.West)
# new additions
class app_window(QMainWindow):
def __init__(self):
super().__init__()
self.ui = tabwidget.Ui_MainWindow()
self.ui.setupUi(self)
# self.ui.tabWidget = TabWidget()
self.ui.tabWidget.setTabBar(TabBar(self.ui.tabWidget))
self.ui.tabWidget.setTabPosition(self.ui.tabWidget.West)
self.ui.tabWidget.insertTab(0, self.ui.tab, "My tab")
self.ui.pushButton_reach.clicked.connect(self.display)
self.show()
def display(self):
print("reached")
self.close()
if __name__ == '__main__':
app = QApplication(sys.argv)
w = app_window()
w.show()
sys.exit(app.exec_())
Now my windows look like this:
I hope this will clear many people's problem who directly just want to recreate their tabwidget vertically!
I couldn't get working the first answer with only text (not icons) because my text get cut.
And even if I was able to run the second answer I think it isn't clear.
So here is my answer:
This code defines VerticalTabWidget class using second answer's code:
import sys
from PyQt5.QtWidgets import *
from PyQt5 import QtGui, QtWidgets, QtCore
class TabBar(QTabBar):
def tabSizeHint(self, index):
s = QTabBar.tabSizeHint(self, index)
s.transpose()
return s
def paintEvent(self, event):
painter = QStylePainter(self)
opt = QStyleOptionTab()
for i in range(self.count()):
self.initStyleOption(opt, i)
painter.drawControl(QStyle.CE_TabBarTabShape, opt)
painter.save()
s = opt.rect.size()
s.transpose()
r = QtCore.QRect(QtCore.QPoint(), s)
r.moveCenter(opt.rect.center())
opt.rect = r
c = self.tabRect(i).center()
painter.translate(c)
painter.rotate(90)
painter.translate(-c)
painter.drawControl(QStyle.CE_TabBarTabLabel, opt)
painter.restore()
class VerticalTabWidget(QTabWidget):
def __init__(self, *args, **kwargs):
QTabWidget.__init__(self, *args, **kwargs)
self.setTabBar(TabBar())
self.setTabPosition(QtWidgets.QTabWidget.West)
class app_window(QMainWindow):
def __init__(self):
super().__init__()
tabs = VerticalTabWidget()
tabs.addTab(QWidget(), "First Tab")
tabs.addTab(QWidget(), "Second Tab")
tabs.addTab(QWidget(), "Third Tab")
self.setCentralWidget(tabs)
if __name__ == '__main__':
app = QApplication(sys.argv)
w = app_window()
w.show()
sys.exit(app.exec_())
You can just copy the TabBar and VerticalTabWidget classes into your code and use VerticalTabWidget as any QTabWidget.