0

I'm trying to make an interface and I want to insert Qlabel and Qbutton inside qlabel while keeping the resize feature as QVBoxLayout and QHBoxLayout do.

This is what I want to accomplish but with the change in size as QVBoxLayout and QHBoxLayout do. enter image description here

My code :

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(604, 460)
        self.verticalLayout = QtWidgets.QVBoxLayout(Form)
        self.verticalLayout.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout.setSpacing(0)
        self.verticalLayout.setObjectName("verticalLayout")
        self.frame = QtWidgets.QFrame(Form)
        self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame.setObjectName("frame")
        self.verticalLayout_2 = QtWidgets.QVBoxLayout(self.frame)
        self.verticalLayout_2.setContentsMargins(0, 0, 0, 9)
        self.verticalLayout_2.setSpacing(0)
        self.verticalLayout_2.setObjectName("verticalLayout_2")
        self.label = QtWidgets.QLabel(self.frame)
        self.label.setStyleSheet("QLabel {\n"
"background-color: #09102a;\n"
" }")
        self.label.setText("")
        self.label.setObjectName("label")
        self.verticalLayout_2.addWidget(self.label)
        self.frame_2 = QtWidgets.QFrame(self.frame)
        self.frame_2.setMaximumSize(QtCore.QSize(16777215, 70))
        self.frame_2.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame_2.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame_2.setObjectName("frame_2")
        self.horizontalLayout = QtWidgets.QHBoxLayout(self.frame_2)
        self.horizontalLayout.setObjectName("horizontalLayout")
        self.label_2 = QtWidgets.QLabel(self.frame_2)
        self.label_2.setMinimumSize(QtCore.QSize(120, 60))
        self.label_2.setMaximumSize(QtCore.QSize(120, 60))
        self.label_2.setStyleSheet("QLabel {\n"
"    font: 75 13pt \"MS Shell Dlg 2\";\n"
"    padding-right :5px;\n"
"    padding-left :5px;\n"
"    image: url(:/icons/images/icons/battery-monitoring.png);\n"
"    image-position: left;\n"
"    background-color: #171d3c;\n"
"    border-radius :20px;\n"
"    color: rgb(255, 255, 255);\n"
" }")
        self.label_2.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
        self.label_2.setObjectName("label_2")
        self.horizontalLayout.addWidget(self.label_2)
        self.label_3 = QtWidgets.QLabel(self.frame_2)
        self.label_3.setMinimumSize(QtCore.QSize(120, 60))
        self.label_3.setMaximumSize(QtCore.QSize(120, 60))
        self.label_3.setStyleSheet("QLabel {\n"
"    font: 75 13pt \"MS Shell Dlg 2\";\n"
"    padding-right :5px;\n"
"    padding-left :5px;\n"
"    image: url(:/icons/images/icons/battery-charger.png);\n"
"    image-position: left;\n"
"    background-color: #171d3c;\n"
"    border-radius :20px;\n"
"    color: rgb(255, 255, 255);\n"
" }")
        self.label_3.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
        self.label_3.setObjectName("label_3")
        self.horizontalLayout.addWidget(self.label_3)
        self.verticalLayout_2.addWidget(self.frame_2)
        self.verticalLayout.addWidget(self.frame)

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))
        self.label_2.setText(_translate("Form", "label 2"))
        self.label_3.setText(_translate("Form", "label 1"))


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_())

After executing the code, this is what I get: enter image description here

The result I want to get. When the screen is enlarged, all the elements must be in place, and this cannot be done by QVBoxLayout and QHBoxLayout. enter image description here

  • I don't understand what you are asking. are you just asking how to make the labels closer together and closer to middle? – Alexander Aug 24 '22 at 19:49
  • Why are using QLabel as container? – musicamante Aug 24 '22 at 20:01
  • Why would you use QLabel as container for another QLabel? – WhoKnowsMe Aug 24 '22 at 20:05
  • Because there will be a Video – RACHID BEN ABDELMALEK Aug 24 '22 at 20:08
  • @RACHIDBENABDELMALEK There will be a video *where*? How? Besides, Designer doesn't allow to set a layout to a QLabel, because it's not a container widget (it could be, but it would be pointless and could create geometry issues for the management of both that layout and the label itself). Please clarify what you *actually* want to achieve, as it seems that you're asking the wrong question. – musicamante Aug 24 '22 at 21:04
  • @musicamante Well, I need it for a vehicle with a camera, it will show me the scene in QLabel, and I need to show the speed and battery status in label 1 and label 2 respectively. – RACHID BEN ABDELMALEK Aug 24 '22 at 22:34
  • @RACHIDBENABDELMALEK show the scene *how*? And what is "scene"? We don't need to know the purpose of your program, but how you intend to achieve it. Why do you specifically need a QLabel? What method or libraries are you using to show the video? – musicamante Aug 24 '22 at 22:41
  • @musicamante Yes I showed it on QLabel using: [link](https://stackoverflow.com/questions/44404349/) – RACHID BEN ABDELMALEK Aug 25 '22 at 11:50
  • @musicamante I have posted a image that shows more about my problem – RACHID BEN ABDELMALEK Aug 25 '22 at 12:29
  • @RACHIDBENABDELMALEK Then ***explain*** that you're going to show a cv video stream by setting QPixmaps in QLabel; please learn to ask questions with the correct details. That said, and as already explained, what you want to do can *not* be done in Designer, since QLabel is *not* a container widget. You either set the layout and create/add the buttons by code, or you use a custom widget by using widget promotion in Designer. Do some research on those topics, as there are dozens of related posts, questions/answers and tutorials. – musicamante Aug 25 '22 at 15:44
  • @musicamante well , i searched a lot and didn't find anything i'll try again – RACHID BEN ABDELMALEK Aug 25 '22 at 16:30

2 Answers2

0

For PyQt6... I'm using this "hack" to do what you're asking because I don't have the proper skills do it the right way, so I'm using QLabels for everything...

from PyQt6           import QtCore, QtWidgets
from PyQt6.QtCore    import QEvent, QObject, pyqtSignal
import sys

class Trigger(QObject):
    event_highjack = pyqtSignal()

    def __init__(s, eventparent, master_fn=None, resize=False, move=False, mousebutton=False, close=None, fn=None):
        super().__init__(eventparent)
        for enum in [k for k,v in {14:resize, 13:move, 19:close, 2:mousebutton}.items() if v]:
            s.eventtype = QEvent.type(QEvent(enum))
        s.master_fn = master_fn or fn
        s._widget = eventparent
        s.widget.installEventFilter(s)
        if s.master_fn:
            s.event_highjack.connect(s.master_fn)

    @property
    def widget(s):
        return s._widget

    def eventFilter(s, widget, event) -> bool:
        if widget == s._widget and event.type() == s.eventtype:
            s.event_highjack.emit()
        return super().eventFilter(widget, event)

class Main(QtWidgets.QMainWindow):
    def __init__(s, *args, **kwargs):
        super().__init__(styleSheet='background:black;color:white', *args, **kwargs)
        s.show()

        label = QtWidgets.QLabel(s, styleSheet='background:magenta')
        label.show()

        def follow_master():
            label.setGeometry(10,10,s.width()-20,s.height()-20)

        Trigger(s, resize=True, fn=follow_master)

if '__main__' in __name__:
    app = QtWidgets.QApplication(sys.argv)
    window = Main()
    app.exec()
Plutonergy
  • 39
  • 1
  • 3
0

I would use the Qt Designer for creating guis. You can place everything as you want and make it moving as you want. Plus gui coding and python coding is seperated and then its much easier to maintain. You can load you gui with uic.loadUi(r"yourgui.ui", self)

accpert.com
  • 109
  • 11