0

I have some problem with the styling of my application in python. I am using the PyQt5 library in python. So basically this is the TemplateWindow class which is being displayed. What i want to do is to add a background color to the left side of the application, this will indicate the 'tools' side menu. The black image you see is a QLabel which i found out i could add style to. Whoever, i have no idea to add a styling to a layout, for an example QGridLayout. Can someone help me with this, i have googled and tried to find answer to this question, but no luck, any help would be appreciated :)

Best Regards, Olav

TemplateWindow Class

class MainWindow(QMainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.title = 'Template Creator'
        self.geometry = (1280, 480, 670, 480)
        # self.setFixedSize(670, 480)
        self.init_ui()

    def init_ui(self):
        self.setWindowTitle(self.title)
        self.setGeometry(self.geometry[0], self.geometry[1], self.geometry[2], self.geometry[3])
        main_menu = self.menuBar()
        file_menu = main_menu.addMenu('File')
        edit_menu = main_menu.addMenu('Edit')
        view_menu = main_menu.addMenu('Windows')
        search_menu = main_menu.addMenu('Search')
        tools_menu = main_menu.addMenu('Tools')
        help_menu = main_menu.addMenu('Help')

        record_btn = QAction('Record Video', self)
        record_btn.setShortcut('Ctrl+R')
        record_btn.triggered.connect(self.set_record)
        view_menu.addAction(record_btn)

        template_btn = QAction('Template', self)
        template_btn.setShortcut('Ctrl+T')
        template_btn.triggered.connect(self.set_template)
        view_menu.addAction(template_btn)

        bounding_box_btn = QAction('Bounding Box', self)
        bounding_box_btn.setShortcut('Ctrl+B')
        bounding_box_btn.triggered.connect(self.set_bounding_box)
        view_menu.addAction(bounding_box_btn)

        home_btn = QAction('Home', self)
        home_btn.setShortcut('Ctrl+H')
        home_btn.triggered.connect(self.set_self)
        view_menu.addAction(home_btn)

        exit_btn = QAction(QIcon('exit24.png'), 'Exit', self)
        exit_btn.setShortcut('Ctrl+Q')
        exit_btn.setStatusTip('Exit application')
        exit_btn.triggered.connect(self.close)
        file_menu.addAction(exit_btn)

        self.show()

    def set_self(self):
        self.setCentralWidget(None)

    def set_record(self):
        self.setCentralWidget(RecordWindow(self))

    def set_template(self):
        self.setCentralWidget(TemplateWindow(self))

    def set_bounding_box(self):
        self.setCentralWidget(BoundingBoxWindow(self))
class TemplateWindow(QWidget):
    def __init__(self, parent):
        super(TemplateWindow, self).__init__(parent)
        self.hlayout = QHBoxLayout()
        self.side_menu = QGridLayout()
        self.main_menu = QVBoxLayout()

        self.side_menu.setAlignment(Qt.AlignTop)

        self.video = None
        self.preview = QLabel(self)

        self.write_btn = QPushButton('Write All')
        self.write_btn.clicked.connect(self.write)

        self.write_frame_btn = QPushButton('Write Frame')
        self.next_frame_btn = QPushButton('Next')
        self.prev_frame_btn = QPushButton('Prev')

        self.category_text = QLabel("Category:")

        self.category = QLineEdit("")

        self.input_text = QLabel("Input File:")

        self.file = QPushButton('C:\\')
        self.file.clicked.connect(self.select_file)

        self.folder_txt: str = 'C:/'
        self.output_text = QLabel("Output Folder:")
        self.out_folder = QPushButton('C:\\')
        self.out_folder.clicked.connect(self.select_folder)

        self.side_menu.addWidget(self.category_text, 0, 0)
        self.side_menu.addWidget(self.category, 0, 1)
        self.side_menu.addWidget(self.input_text, 1, 0)
        self.side_menu.addWidget(self.file, 1, 1)
        self.side_menu.addWidget(self.output_text, 2, 0)
        self.side_menu.addWidget(self.out_folder, 2, 1)
        self.side_menu.addWidget(self.write_btn, 3, 0, 1, 2)
        self.side_menu.addWidget(self.write_frame_btn, 4, 0, 1, 0)
        self.side_menu.addWidget(self.prev_frame_btn, 5, 0)
        self.side_menu.addWidget(self.next_frame_btn, 5, 1)

        self.main_menu.addWidget(self.preview)
        self.hlayout.addLayout(self.side_menu, stretch=0)
        self.hlayout.addLayout(self.main_menu, stretch=3)
        self.setLayout(self.hlayout)
        self.style = """    
            TemplateWindow {
                background-color:black;
            }
            .hlayout {
                background-color:blue;
              }
            .QGridLayout {
                background-color:black;
              }
          """
        self.preview.setStyleSheet("background-color:black;")
        # worker
        self.extractor = None

    def __del__(self):
        print('template destructor')

    def select_file(self):
        file_dir = QFileDialog.getOpenFileName(self, 'Select File', 'C:\\', "Image files (*.mp4)")
        self.file.setText(file_dir[0].split('/')[-1])
        self.file.setToolTip(file_dir[0])
        self.video = cv2.VideoCapture(file_dir[0])
        try:
            _, frame = self.video.read()
            image = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
            self.preview.setPixmap(QPixmap.fromImage(
                QImage(image.data, image.shape[1], image.shape[0], QImage.Format_RGB888).scaled(640, 480,
                                                                                                Qt.KeepAspectRatio)))
        except Exception as error:
            print(error)

    def select_folder(self):
        out_dir = QFileDialog.getExistingDirectory(None, 'Select a folder:', expanduser("~"))
        self.folder_txt = out_dir
        self.out_folder.setText(str(out_dir.split('/')[-1]))

    def write(self):
        self.extractor = VideoExtractor(self)
        self.extractor.start()
petezurich
  • 9,280
  • 9
  • 43
  • 57
  • 1
    As `QGridLayouts` don't have any "frame", changing their *background-color* option has no effect at all. What you can try to do, is to add a `QFrame` widget behind the `QGridLayout`, then set the `QGridLayout` as the `QFrame's` layout. Inside *css*, change the `QFrame's` *background-color* to any color you want. – Carl HR Sep 09 '22 at 20:10
  • 1
    Also, don't replace the central widget continously, use [QStackedWidget](https://doc.qt.io/qt-5/qstackedwidget.html) instead. – musicamante Sep 09 '22 at 20:54

0 Answers0