GridLayout and VerticalLayout in PyQT5

Question

I am new to PyQT5 in Python2.7. I like to have Verticle Layout with two components. The first area is for Dispaly and the second area is for Control Widgets.

Now problem is (1)Control Widgets are not equally spaced and (2)First area needs more space than the second area.

How can I do that?

My code is as follow.

class Thread(QThread):
   changePixmap = pyqtSignal(QImage)
   def run(self):
        cap = cv2.VideoCapture(0)
        while True:
            ret, frame = cap.read()
            if ret:
                rgbImage = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
                convertToQtFormat = QImage(rgbImage.data, rgbImage.shape[1], rgbImage.shape[0], QImage.Format_RGB888)
                p = convertToQtFormat.scaled(640, 480, Qt.KeepAspectRatio)
                self.changePixmap.emit(p)


class PlayStreaming(QWidget):
    def __init__(self):
        super(PlayStreaming,self).__init__()
        self.initUI()

    @pyqtSlot(QImage)
    def setImage(self, image):
        self.label.setPixmap(QPixmap.fromImage(image))

    def initUI(self):
        self.setWindowTitle("Image")
        self.setGeometry(100, 100, 600, 400)
        self.resize(1800, 1200)
        # create a label
        self.label = QLabel(self)
        self.label.move(280, 120)
        self.label.resize(640, 480)
        th = Thread(self)
        th.changePixmap.connect(self.setImage)
        th.start()



class UIWidget(QWidget): 



     def __init__(self, parent):   
            super(QWidget, self).__init__(parent)
            self.layout = QVBoxLayout(self)

            # Initialize tab screen
            self.tabs = QTabWidget()
            self.tab1 = QWidget()   
            self.tab2 = QWidget()
            self.tab3 = QWidget()
            self.tabs.resize(800,600) 

            # Add tabs
            self.tabs.addTab(self.tab1,"Face")
            self.tabs.addTab(self.tab2,"Human")
            self.tabs.addTab(self.tab3,"Vehicle")

            # Create first tab
            self.createGridLayout()
            self.tab1.layout = QVBoxLayout(self)
            self.display=PlayStreaming()
            self.tab1.layout.addWidget(self.display)
            self.tab1.layout.addWidget(self.horizontalGroupBox)
            self.tab1.setLayout(self.tab1.layout)

            # Add tabs to widget        
            self.layout.addWidget(self.tabs)
            self.setLayout(self.layout)
     def createGridLayout(self):
            self.horizontalGroupBox = QGroupBox("Control")
            layout = QGridLayout()
            layout.setColumnStretch(2, 3)
            layout.addWidget(QPushButton('Test'),0,0) 
            layout.addWidget(QPushButton('Run'),0,1) 
            layout.addWidget(QPushButton('Set Faces'),0,2) 
            layout.addWidget(QPushButton('Recognize'),1,0) 
            layout.addWidget(QPushButton('Rescale'),1,1) 
            layout.addWidget(QPushButton('FacePose'),1,2)
            self.horizontalGroupBox.setLayout(layout)

The current status is

How can I do that?

Answer 1

You must use the strech to set the weights, by default the stretch of each widget is 0 so you just need to set a stretch of 1 to self.display. On the other hand, it is not necessary to use setColumnStretch() since by default all buttons will have the same size:

from PyQt5 import QtCore, QtGui, QtWidgets 
import cv2

class Thread(QtCore.QThread):
   changePixmap = QtCore.pyqtSignal(QtGui.QImage)
   def run(self):
        cap = cv2.VideoCapture(0)
        while True:
            ret, frame = cap.read()
            if ret:
                rgbImage = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
                convertToQtFormat = QtGui.QImage(rgbImage.data, rgbImage.shape[1], rgbImage.shape[0], QtGui.QImage.Format_RGB888)
                p = convertToQtFormat.scaled(640, 480, QtCore.Qt.KeepAspectRatio)
                self.changePixmap.emit(p)


class PlayStreaming(QtWidgets.QWidget):
    def __init__(self):
        super(PlayStreaming,self).__init__()
        self.initUI()

    @QtCore.pyqtSlot(QtGui.QImage)
    def setImage(self, image):
        self.label.setPixmap(QtGui.QPixmap.fromImage(image))

    def initUI(self):
        self.setWindowTitle("Image")
        # create a label
        self.label = QtWidgets.QLabel(self)
        th = Thread(self)
        th.changePixmap.connect(self.setImage)
        th.start()
        lay = QtWidgets.QVBoxLayout(self)
        lay.addWidget(self.label, alignment=QtCore.Qt.AlignCenter)


class UIWidget(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super(UIWidget, self).__init__(parent)
        # Initialize tab screen
        self.tabs = QtWidgets.QTabWidget()
        self.tab1 = QtWidgets.QWidget()   
        self.tab2 = QtWidgets.QWidget()
        self.tab3 = QtWidgets.QWidget()

        # Add tabs
        self.tabs.addTab(self.tab1,"Face")
        self.tabs.addTab(self.tab2,"Human")
        self.tabs.addTab(self.tab3,"Vehicle")

        # Create first tab
        self.createGridLayout()
        self.tab1.layout = QtWidgets.QVBoxLayout()
        self.display = PlayStreaming()
        self.tab1.layout.addWidget(self.display, stretch=1)
        self.tab1.layout.addWidget(self.horizontalGroupBox)
        self.tab1.setLayout(self.tab1.layout)

        # Add tabs to widget        
        layout = QtWidgets.QVBoxLayout(self)
        layout.addWidget(self.tabs)

    def createGridLayout(self):
        self.horizontalGroupBox = QtWidgets.QGroupBox("Control")
        layout = QtWidgets.QGridLayout()
        layout.addWidget(QtWidgets.QPushButton('Test'),0,0) 
        layout.addWidget(QtWidgets.QPushButton('Run'),0,1) 
        layout.addWidget(QtWidgets.QPushButton('Set Faces'),0,2) 
        layout.addWidget(QtWidgets.QPushButton('Recognize'),1,0) 
        layout.addWidget(QtWidgets.QPushButton('Rescale'),1,1) 
        layout.addWidget(QtWidgets.QPushButton('FacePose'),1,2)
        self.horizontalGroupBox.setLayout(layout)


if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    w = UIWidget()
    w.show()
    sys.exit(app.exec_())