[FIXED] Creating custom widget in pyqt5

Issue

I know there are answers specific to this topic, but I am trying to create a node widget like shown below

Here is the code I tried.

from PyQt5.QtWidgets import *


class NNodeLayout(QWidget):

    def __init__(self, container):
        super(NNodeLayout, self).__init__(container)
        
        self.node_frame = QFrame(container)

        self.node_frame.setFrameShape(QFrame.StyledPanel)
        self.node_frame.setStyleSheet('background-color: blue')
        self.node_frame.setMinimumSize(50, 50)

        self.node_frame_layout = QVBoxLayout()
        self.node_frame_grid_layout = QGridLayout()  
        self.node_frame_layout.setSpacing(0)
        self.node_frame_layout.setContentsMargins(0, 0, 0, 0)
        self.node_frame_grid_layout.setContentsMargins(5, 0, 5, 0)

        self.node_frame_layout.addWidget(QLabel('hello: '))
        self.node_frame_layout.addLayout(self.node_frame_grid_layout)
        self.node_frame.setLayout(self.node_frame_layout)


    def n_label(self, lbl_name):
        print(lbl_name)
        lbl = QLabel(lbl_name)
        lbl.setStyleSheet('background-color:blue')
        self.node_frame_grid_layout.addWidget(lbl)

    def n_input(self, place_holder = ""):
        text_input = QLineEdit()
        text_input.placeholderText(place_holder)
        self.node_frame_grid_layout.addWidget(text_input)

    def n_input_point_shape_color(self):
        pass

    def n_top_bar(self):
        pass

    def n_move(self, x, y):
        self.node_frame.move(x, y)

    def n_resize(self, width, height):
        self.node_frame.resize(width, height)

    def n_geometry(self):
        return self.node_frame.geometry()

I need to add those socket marked in red to be displayed beside the text

Solution

Unfortunately you cannot directly draw on a parent from a child widget. Or, better, you could, but it might cause some performance issues if you have many children, as each child would request a repaint on the parent, and that's not good.

On the other hand, your approach has some issues: not only your NNodeLayout is not a layout, but you're not actually using it, as you're adding another widget (the frame).

The simplest solution is to create a subclass of QFrame that contains 2 nested vertical layouts, and reimplement the paint event.

class NodeFrame(QFrame):
    _margin = 4
    _styleSheet = '''
            NodeFrame {{
                border: 1px solid white;
                border-radius: {0}px;
                background: #3f3f3f;
                margin: {0}px;
            }}
            QWidget {{
                color: white;
            }}
            QLineEdit {{
                color: palette(text);
            }}
        '''
    def __init__(self, parent=None):
        super().__init__(parent)

        layout = QVBoxLayout(self)
        self.headerLayout = QVBoxLayout()
        layout.addLayout(self.headerLayout)
        self.contentLayout = QVBoxLayout()
        layout.addLayout(self.contentLayout)

        self.options = []
        self.setMargin(self._margin)

    def setMargin(self, margin):
        self._margin = max(4, margin)
        self.setStyleSheet(self._styleSheet.format(self._margin))

    def addHeaderWidget(self, widget):
        self.headerLayout.addWidget(widget)

    def removeHeaderWidget(self, widget):
        self.headerLayout.removeWidget(widget)

    def addOption(self, widget, color=Qt.white):
        self.insertOption(-1, widget, color)

    def insertOption(self, index, widget, color=Qt.white):
        if index < 0:
            index = self.contentLayout.count()
        self.contentLayout.insertWidget(index, widget)

        self.options.insert(index, (widget, color))

    def removeOption(self, index):
        widget, color = self.options.pop(index)
        self.contentLayout.removeWidget(widget)
        widget.deleteLater()
        self.update()

    def paintEvent(self, event):
        super().paintEvent(event)
        qp = QPainter(self)
        qp.setPen(Qt.darkGray)
        for label, color in self.options:
            geo = label.geometry()
            top = geo.y() + geo.height() / 2 - self._margin
            qp.setBrush(color)
            qp.drawEllipse(0, top, self._margin * 2, self._margin * 2)


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    w = NodeFrame()
    w.addHeaderWidget(QLabel('I am a header'))
    w.addOption(QLabel('Test 1'), Qt.green)
    w.addOption(QLabel('Test 2'), Qt.white)
    w.addOption(QLineEdit('Hello'), QColor('orange'))
    w.show()
    sys.exit(app.exec_())

Answered By - musicamante