Develop Reference

PyQt5 - Custom widgets open in separate windows rather than in same window

I'm new at PyQt, and I'm trying to create a main window containing two custom widgets, the first being a data grapher, the second being a QGridLayout containing QLabels. Problem is: the two widgets open in separate windows and have no content.
I've found multiple posts with a similar problem:
PyQt5 Custom Widget Opens in Another Window
Custom widget does not appear on Main Window
PyQt5 Custom Widget Opens in Another Window
And even a FAQ on this specific problem: https://www.pythonguis.com/faq/pyqt-widgets-appearing-as-separate-windows/
But I haven't been able to figure out why my code doesn't work. My aim is to obtain a result as shown below on the left, but instead I'm getting a result as shown on the right:
My code is the following (can be copied and run as it is):
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication, QLabel, QVBoxLayout, QWidget, QGridLayout
from PyQt5.QtGui import QFont
import sys
import pyqtgraph as pg
class CustomWidget_1(QWidget):
def __init__(self):
super(CustomWidget_1, self).__init__()
self.channels = [1, 2, 3, 4, 5, 6, 7, 8]
self.win = pg.GraphicsLayoutWidget(title='Plot', size=(800, 600))
self.plots = list()
self.curves = list()
for i in range(len(self.channels)):
p = self.win.addPlot(row=i, col=0)
p.showAxis('left', False)
p.setMenuEnabled('left', False)
p.showAxis('bottom', False)
p.setMenuEnabled('bottom', False)
self.plots.append(p)
curve = p.plot()
self.curves.append(curve)
self.win.show()
print('CustomWidget_1 initialized.')
class CustomWidget_2(QWidget):
def __init__(self, labelnames):
super(CustomWidget_2, self).__init__()
self.grid = QGridLayout()
self.labelnames = labelnames
self.qlabels = []
for label in self.labelnames:
labelBox = QLabel(label)
labelBox.setFont(QFont('Arial', 16))
labelBox.setStyleSheet('border: 2px solid black;')
labelBox.setAlignment(Qt.AlignCenter)
self.qlabels.append(labelBox)
index = self.labelnames.index(label)
q, r = divmod(index, 6)
self.grid.addWidget(labelBox, q, r)
print('CustomWidget_2 initialized.')
class MainWindow(QWidget):
def __init__(self):
super(MainWindow, self).__init__()
self.labelnames = ['label 1', 'label 2', 'label 3']
self.CustomWidget_1 = CustomWidget_1()
self.CustomWidget_1.setParent(self)
self.CustomWidget_1.show()
self.CustomWidget_2 = CustomWidget_2(self.labelnames)
self.CustomWidget_2.setParent(self)
self.CustomWidget_2.show()
self.mainLayout = QVBoxLayout()
self.mainLayout.addWidget(self.CustomWidget_1)
self.mainLayout.addWidget(self.CustomWidget_2)
self.setLayout(self.mainLayout)
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
predictVisualizer = MainWindow()
sys.exit(app.exec())
Could anyone tell me what I'm doing wrong and how I could fix it? Any pointers towards tutorials and/or templates would be greatly appreciated as well! Thanks!

you should write fewer lines of code and debug slowly, if you are new to pyqt5 you should read carefully the basic Layout creation, like you are creating a website interface, link: https://www.pythonguis.com/tutorials/pyqt-layouts/
This is the code I have edited, you can can refer:
import sys
from PyQt5.QtCore import QSize,Qt
from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget,QGridLayout,QVBoxLayout,QLabel,QHBoxLayout
from PyQt5.QtGui import QPalette, QColor
class CustomWidget_1(QWidget):
def __init__(self,color):
super(CustomWidget_1, self).__init__()
self.setAutoFillBackground(True)
layout = QGridLayout()
self.setLayout(layout)
self.setFixedSize(QSize(400,300))
palette = self.palette()
palette.setColor(QPalette.Window, QColor(color))
self.setPalette(palette)
class CustomWidget_2(QWidget):
def __init__(self,color):
super(CustomWidget_2, self).__init__()
self.setAutoFillBackground(True)
layout = QHBoxLayout()
self.setLayout(layout)
self.setFixedSize(QSize(400,134))
layout.setContentsMargins(70,0,0,0)
palette = self.palette()
palette.setColor(QPalette.Window, QColor(color))
self.setPalette(palette)
Label1 = QLabel()
Label1.setText('abc')
Label2 = QLabel()
Label2.setText('sad')
Label3 = QLabel()
Label3.setText('qv')
layout.addWidget(Label1)
layout.addWidget(Label2)
layout.addWidget(Label3)
class MainWindow(QMainWindow):
def __init__(self):
super(MainWindow, self).__init__()
self.setWindowTitle("My App")
layout = QVBoxLayout()
layout.addWidget(CustomWidget_1("blue"))
layout.addWidget(CustomWidget_2("red"))
widget = QWidget()
widget.setLayout(layout)
self.setCentralWidget(widget)
app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()

PyQt5 drawing lines that have mouse events

I have an application where I draw 2 custom widgets and then draw a line between them. I want to add a mousePressEvent to the line.
What would be the best way to do this?
I suppose I could create a QWidget of x pixel thickness and y length and then fill in the whole widget with the colour I want the line to have. Then the QWidget has the mousePressEvent that I can override. This doesn't seem like the most elegant solution and feels more like a workaround. Is there a better way?
import sys
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPaintEvent, QPainter, QPen, QFont
from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QLabel
class MyWidget(QWidget):
def __init__(self, name, parent):
super().__init__(parent)
self.setAutoFillBackground(True)
self.setFixedSize(300, 100)
p = self.palette()
p.setColor(self.backgroundRole(), Qt.white)
self.setPalette(p)
lbl_name = QLabel(name, self)
lbl_name.setFont(QFont('Arial', 16))
lbl_name.move((self.width() - lbl_name.width()) / 2, self.height()/2 - lbl_name.height()/2)
class MainWindow(QMainWindow):
def __init__(self, parent=None):
super().__init__(parent)
self.main_widget = QWidget(self)
self.widget_1 = MyWidget("Widget 1", self)
self.widget_1.move(50, 50)
self.widget_2 = MyWidget("Widget 2", self)
self.widget_2.move(700, 600)
self.resize(1200, 800)
self.setCentralWidget(self.main_widget)
def paintEvent(self, a0: QPaintEvent) -> None:
super().paintEvent(a0)
painter = QPainter(self)
painter.setPen(QPen(Qt.red, 3, Qt.SolidLine))
widget_1_x = self.widget_1.pos().x() + self.widget_1.size().width()
widget_1_y = self.widget_1.pos().y() + self.widget_1.size().height() / 2
widget_2_x = self.widget_2.pos().x()
widget_2_y = self.widget_2.pos().y() + self.widget_2.size().height() / 2
halfway_x = widget_1_x + (widget_2_x - widget_1_x) / 2
# add mousePressEvents to these lines:
painter.drawLine(widget_1_x, widget_1_y, halfway_x, widget_1_y)
painter.drawLine(halfway_x, widget_1_y, halfway_x, widget_2_y)
painter.drawLine(halfway_x, widget_2_y, widget_2_x, widget_2_y)
if __name__ == "__main__":
app = QApplication(sys.argv)
myapp = MainWindow()
myapp.show()
sys.exit(app.exec_())
How the above code looks like when run

Adding or removing a QWidget without affecting any other widgets

I have a PyQT application with a toolbar, a set of buttons, and a bottom row of additional buttons. I'd like to add a TextEdit underneath the bottom row that the user can hide or show. I would like the TextEdit to extend the bottom portion when being shown but, when the user hides it, I would like that bottom portion removed without affecting the height, width, or sizing of any other of the buttons. Imagine just taking a pair of scissors to the TextEdit section when the user hides it but then gluing it back on when the user wants it back. Is this even possible to do in PyQt? The closest I've found is the implementation below which resizes all the buttons.
from PyQt5.QtCore import Qt, QPoint, QTimer, QThread, QSize
from PyQt5.QtGui import QFont, QImage, QPainter, QPen, QPixmap
from PyQt5.QtWidgets import (
QAction, QApplication, QCheckBox, QFileDialog, QHBoxLayout, QLabel,
QMainWindow, QMenu, QMenuBar, QPlainTextEdit, QPushButton, QSpacerItem,
QSizePolicy, QFrame,
QTextEdit, QVBoxLayout, QWidget, QGridLayout, QToolButton, QComboBox
)
from PyQt5.QtWidgets import QApplication
import sys
class AppWindow(QMainWindow):
def __init__(self, main_widget):
super(AppWindow, self).__init__()
self.main_widget = main_widget
self.setCentralWidget(self.main_widget)
class AppWidget(QWidget):
def __init__(self, panels=[]):
super(AppWidget, self).__init__()
self.panels = panels
self.main_layout = QVBoxLayout(self)
self.setSizePolicy(
QSizePolicy.MinimumExpanding,
QSizePolicy.MinimumExpanding
)
self.toolbar_frame = QFrame(self)
self.toolbar_frame_layout = QHBoxLayout(self.toolbar_frame)
self.toolbar_frame_layout.addStretch()
self.log_button = QToolButton(self.toolbar_frame)
self.log_button.setText('Toggle Log')
self.toolbar_frame_layout.addWidget(self.log_button)
self.toolbar_frame.setLayout(self.toolbar_frame_layout)
self.project_frame = QFrame(self)
self.project_frame_layout = QHBoxLayout(self.project_frame)
self.project_dropdown = QComboBox(self.project_frame)
self.project_dropdown.setMinimumSize(20, 0)
self.project_refresh = QToolButton(self.project_frame)
self.project_refresh.setText('Refresh')
self.project_frame_layout.addWidget(self.project_dropdown)
self.project_frame_layout.addWidget(self.project_refresh)
self.project_frame.setLayout(self.project_frame_layout)
self.panel_frame = QFrame(self)
self.panel_frame_layout = QVBoxLayout(self.panel_frame)
for panel in panels:
self.panel_frame_layout.addWidget(panel)
self.panel_frame.setLayout(self.panel_frame_layout)
self.bottom_frame = QFrame(self)
self.bottom_frame_layout = QHBoxLayout(self.bottom_frame)
self.bottom_frame_layout.addStretch()
self.sg_button = QToolButton()
self.sg_button.setText('Extra Stuff')
self.bottom_frame_layout.addWidget(self.sg_button)
self.bottom_frame.setLayout(self.bottom_frame_layout)
self.log = QTextEdit()
self.log_frame = QFrame(self)
self.log_frame_layout = QHBoxLayout(self.log_frame)
self.log_frame_layout.addWidget(self.log)
self.log_frame.setLayout(self.log_frame_layout)
self.main_layout.addWidget(self.toolbar_frame)
self.main_layout.addWidget(self.project_frame)
self.main_layout.addWidget(self.panel_frame)
self.main_layout.addWidget(self.bottom_frame)
self.app_widgets = QWidget(self)
self.app_widgets.setLayout(self.main_layout)
self.log_widget = QWidget(self)
self.log_widget.setLayout(self.log_frame_layout)
self.total_layout = QVBoxLayout(self)
self.total_layout.addWidget(self.app_widgets)
self.total_layout.addWidget(self.log_widget)
self.setLayout(self.total_layout)
self.log_button.clicked.connect(self.toggle_log)
def toggle_log(self):
if self.log_widget.isHidden():
self.log_widget.show()
QTimer.singleShot(0, self.resize_show)
else:
self.log_widget.hide()
QTimer.singleShot(0, self.resize_hide)
# self.adjustSize() Also does not work.
def resize_show(self):
self.resize(self.width(), self.sizeHint().height())
def resize_hide(self):
self.resize(self.width(), self.minimumSizeHint().height())
class AppPanel(QWidget):
def __init__(self, sections=[]):
super(AppPanel, self).__init__()
self.setSizePolicy(
QSizePolicy.MinimumExpanding,
QSizePolicy.MinimumExpanding
)
self.layout = QVBoxLayout(self)
self.setLayout(self.layout)
self.sections = sections
for section in self.sections:
self.layout.addWidget(section)
class AppSection(QWidget):
def __init__(self, buttons=[]):
super(AppSection, self).__init__()
self.setSizePolicy(
QSizePolicy.MinimumExpanding,
QSizePolicy.MinimumExpanding
)
self.buttons = buttons
self.layout = QGridLayout()
for i, button in enumerate(self.buttons):
col = i % 2
row = i // 2
self.layout.addWidget(button, row, col)
self.setLayout(self.layout)
class AppButton(QToolButton):
def __init__(self, text=''):
super(AppButton, self).__init__()
self.setText(text)
self.setFocusPolicy(Qt.NoFocus)
self.setIconSize(QSize(50, 50))
self.setToolButtonStyle(Qt.ToolButtonTextBesideIcon)
self.setSizePolicy(QSizePolicy.MinimumExpanding, QSizePolicy.MinimumExpanding)
if __name__ == '__main__':
app = QApplication(sys.argv)
app_buttons = [AppButton(text='APPS ' + str(i)) for i in range(5)]
custom_btns = [AppButton(text='Custom ' + str(i)) for i in range(5)]
app_section = AppSection(buttons=app_buttons)
custom_section = AppSection(buttons=custom_btns)
panels = [AppPanel(sections=[app_section, custom_section])]
ex = AppWidget(panels=panels)
lw = AppWindow(main_widget=ex)
lw.show()
app.exec_()

Resizing the widget alone is not a valid solution, because it only overrides the geometry set by the layout without notifying the parent widget.
This is also important as you should not resize the widget based on its hint alone when showing the log: if you increase the size of the window while the log is hidden and then show it again, it will not occupy all the available space.
What you need to do is to access the top level window, force its layout to lay out its contents again, and use its hint to for the resize.
def resize_hide(self):
self.window().layout().activate()
self.window().resize(
self.window().width(),
self.window().minimumSizeHint().height()
)

You can set the alignment policy for your top widget:
[...]
self.total_layout.setAlignment(self.app_widgets, Qt.AlignTop)
self.setLayout(self.total_layout)
[...]
The app_widget will not be resized anymore when you hide your text edit.

How to dynamically add and delete plot widgets in a QScrollArea?

I have a GUI with a button; I add a new matplotlib plot to a scroll area in another tab of the interface. And I can do that multiple times. The problem is I want to add a function where the "remove" button removes only the widget he's in.
Here's an minimal reproducible example of what I have:
import sys
from PyQt5.QtWidgets import (
QApplication,
QMainWindow,
QWidget,
QPushButton,
QVBoxLayout,
QHBoxLayout,
QTabWidget,
QScrollArea,
)
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
from matplotlib.backends.backend_qt5agg import NavigationToolbar2QT as NavigationToolbar
from matplotlib.figure import Figure
class MainWindow(QMainWindow):
def __init__(self, parent=None):
super(MainWindow, self).__init__(parent)
# Window
self.setWindowTitle("DataVisualizationPrototype")
self.setGeometry(400, 200, 900, 800)
self.activateWindow()
self.raise_()
self.tab_widget = TabWidget()
self.setCentralWidget(self.tab_widget)
class TabWidget(QTabWidget):
def __init__(self, parent=None):
super(TabWidget, self).__init__(parent)
self.tab1 = QWidget()
self.plot_button = QPushButton("Add plot")
lay = QVBoxLayout(self.tab1)
lay.addWidget(self.plot_button)
self.tab2 = QWidget()
self.scroll_area = QScrollArea()
self.scroll_container = QWidget()
self.scroll_area.setWidgetResizable(True)
self.scroll_area.setWidget(self.scroll_container)
self.scroll_layout = QHBoxLayout(self.scroll_container)
lay = QVBoxLayout(self.tab2)
lay.addWidget(self.scroll_area)
self.addTab(self.tab1, "Home")
self.addTab(self.tab2, "Comparison")
self.plot_button.clicked.connect(self.plot)
def plot(self):
canvas = FigureCanvas(Figure())
ax = canvas.figure.add_subplot(111)
toolbar = NavigationToolbar(canvas, self)
dltbtn = QPushButton("Remove")
container = QWidget()
lay = QVBoxLayout(container)
lay.addWidget(canvas)
lay.addWidget(toolbar)
lay.addWidget(dltbtn)
self.scroll_layout.addWidget(container)
container.setMinimumWidth(400)
ax.plot([1, 2, 3, 4])
ax.set_ylabel("some numbers")
def main():
app = QApplication(sys.argv)
view = MainWindow()
view.show()
sys.exit(app.exec())
if __name__ == "__main__":
main()
Can anybody help write a command to delete the 'container' which the remove button is in?

The logic is to eliminate the widget container since if it is eliminated then its children as well, and for this it is enough to invoke the deleteLater method when the clicked signal is emitted.
dltbtn.clicked.connect(container.deleteLater)

Looking to fix size policy and how scrollArea shows in a tab

so I am trying to use PyQt5 to put a scroll area inside of a tab. Just playing around with a system that reads the serial port.
The issue I am having is that although I set a QVBoxLayout, the size does not seem to adjust to what I want it to be. It seems to be taking its minimum size and not adjusting.
I tried looking at the documentation on QSizePolicy on the website provided, but unfortunately it is all labeled as TODO.
https://www.riverbankcomputing.com/static/Docs/PyQt5/api/qtwidgets/qsizepolicy.html
I was wondering if anyone had some experience with this?
import sys
from PyQt5.QtWidgets import QMainWindow, QSizePolicy, QLabel, QGridLayout, QToolTip, QPlainTextEdit, QScrollArea, QApplication, QPushButton, QWidget, QAction, QTabWidget, QHBoxLayout, QVBoxLayout
from PyQt5.QtGui import *
from PyQt5.QtCore import pyqtSlot, QDateTime, Qt, pyqtSignal, QObject, QSize
import datetime
import serial
import serial.tools.list_ports
import threading
class FDSerial(QMainWindow):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.connected = False
self.fd_line = ""
newAct = QAction(QIcon('icn/001-file.png'), 'New', self)
newAct.triggered.connect(self.init_sc)
self.toolbar = self.addToolBar('New')
self.toolbar.addAction(newAct)
openAct = QAction(QIcon('icn/002-folder.png'), 'Open', self)
self.toolbar.addAction(openAct)
connectAct = QAction(QIcon('icn/003-pendrive.png'), 'Connect', self)
connectAct.triggered.connect(self.find_port)
self.toolbar.addAction(connectAct)
menubar = self.menuBar()
fileMenu = menubar.addMenu('&File')
editMenu = menubar.addMenu('&Settings')
toolsMenu = menubar.addMenu('&Tools')
sessionMenu = menubar.addMenu('&Session')
helpMenu = menubar.addMenu('&Help')
self.statusBar().showMessage('Ready')
self.table_widget = LayoutWidgets(self)
self.setCentralWidget(self.table_widget)
self.setGeometry(400, 400, 800, 600)
self.setWindowTitle('FD Serial Demo')
self.show()
self.c = Communicate()
self.c.serialStuff.connect(lambda: self.table_widget.add_row(self.fd_line))
def init_sc(self):
self.ser = serial.Serial()
self.ser.baudrate = 115200
self.is_connected = False
self.tests_run = 0
self.port_found = False
def find_port(self):
if self.is_connected is False:
self.is_connected = True
else:
self.is_connected = False
for port in serial.tools.list_ports.comports():
if port.vid == 5824 and port.pid == 1155:
self.ser.port = str(port.device)
self.port_found = True
print("Found")
if self.port_found is False:
print("Not found")
x = threading.Thread(target=self.talk_module)
x.start()
def talk_module(self):
self.ser.open()
while self.is_connected is True:
self.fd_line = self.ser.readline().decode()
print(self.fd_line)
self.c.serialStuff.emit()
self.ser.close()
class Communicate(QObject):
serialStuff = pyqtSignal()
class LayoutWidgets(QWidget):
def __init__(self, parent):
super(QWidget, self).__init__(parent)
self.layout = QVBoxLayout(self)
self.thisthat = 0
self.mySizePolicy = QSizePolicy()
self.mySizePolicy.setHorizontalStretch(1)
self.mySizePolicy.setVerticalStretch(1)
# self.mySizePolicy.setHeightForWidth(False)
# self.mySizePolicy.setHorizontalPolicy(QSizePolicy.Maximum)
# self.mySizePolicy.setVerticalPolicy(QSizePolicy.Maximum)
self.tabs = QTabWidget()
self.tab1 = QWidget()
self.tab2 = QWidget()
self.tabs.addTab(self.tab1, "Serial CANFD Interface")
self.tabs.addTab(self.tab2, "Data Visualizer")
self.tab1.layout = QVBoxLayout()
self.tab2.layout = QVBoxLayout()
self.scrollArea = QScrollArea(self.tab1)
self.scrollArea.setWidgetResizable(True)
# self.widget = QWidget()
# self.scrollArea.setWidget(self.widget)
self.layout_SArea = QVBoxLayout(self.scrollArea)
self.layout_SArea.setSpacing(0)
self.tab1.layout.addWidget(self.scrollArea)
self.scrollArea.setSizePolicy(self.mySizePolicy)
self.scrollArea.setStyleSheet("background-color:'#d3f3c8'")
self.layout.addWidget(self.tabs)
self.setLayout(self.layout)
self.qtextbig = QPlainTextEdit()
self.qtextbig.setSizePolicy(self.mySizePolicy)
self.qtextbig.setReadOnly(False)
self.layout_SArea.addWidget(self.qtextbig)
def add_row(self, row):
self.this = str(row)
self.this2 = str(datetime.datetime.now().time())
self.thisthat = self.thisthat + 1
self.qtextbig.appendPlainText(self.this)
self.qtextbig.appendPlainText(self.this2)
self.qtextbig.appendPlainText(str(self.thisthat))
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = FDSerial()
sys.exit(app.exec_())
Here is how the GUI looks right now. The scroll are is way too small! It is in green.
I am looking for the scroll area to take the whole tab size, and then adjust as I adjust the window size. Would appreciate any pointers.
Thanks!

The problem has nothing to do with the QSizePolicy, they are not really necessary. The problem is that you are not using layouts. I think that using the following instruction:
self.tab1.layout = QVBoxLayout()
self.tab2.layout = QVBoxLayout()
add a layout to each tab, but it is only pointing out that there is a new property called layout that takes the value of the QVBoxLayout and that deletes the reference to the layout method of the tab, ie it only deletes the access to the tab1.layout() method, and doing it is a bad practice.
Considering the above I have used the following code:
# ...
class LayoutWidgets(QWidget):
def __init__(self, parent=None):
super(QWidget, self).__init__(parent)
layout = QVBoxLayout(self)
self.thisthat = 0
self.tabs = QTabWidget()
layout.addWidget(self.tabs)
self.tab1 = QWidget()
self.tab2 = QWidget()
self.tabs.addTab(self.tab1, "Serial CANFD Interface")
self.tabs.addTab(self.tab2, "Data Visualizer")
lay = QVBoxLayout(self.tab1)
self.scrollArea = QScrollArea(widgetResizable=True)
self.scrollArea.setStyleSheet("background-color:'#d3f3c8'")
lay.addWidget(self.scrollArea)
layout_SArea = QVBoxLayout(self.scrollArea)
self.qtextbig = QPlainTextEdit(readOnly=False)
layout_SArea.addWidget(self.qtextbig)
def add_row(self, row):
self.this = str(row)
self.this2 = str(datetime.datetime.now().time())
self.thisthat = self.thisthat + 1
self.qtextbig.appendPlainText(self.this)
self.qtextbig.appendPlainText(self.this2)
self.qtextbig.appendPlainText(str(self.thisthat))
# ...