Skip to content

[PyQt5] Tutorial(3) QMainWindow, QIcon, QPixmap, QPalette

Last Updated on 2021-04-12 by Clay

Today, I tried to developed my go board application in PyQt5 while I was running the experiment. I tried many different window function in the process, so I put it into a note, so that I can read it in future.

Today should be divided into four parts: set the window title, set the Icon, set the background, hide the window title …… I feel that the last item almost erased all the previous works XDD

And then, let’s start it!

Set window title

First, this should be the look we made when we opened Qt Designer.

If we don’t do anything or add any components, save the UI file and turn it into a Python file.

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'QMainWindow.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(873, 705)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 873, 25))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

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

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))


We can see, this UI file we generated this time is very naive. We just only defined components MainWindow, Menubar, Statusbar ……

And we should be create a new Python file to inherit this interface file.

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets, QtGui
from QMainWindow import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

We can see, nothing in this figure.

If you want to set the name of the program above, we can modify it with a simple program.

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets, QtGui
from QMainWindow import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

        # MainWindow Title
        self.setWindowTitle('QIcon Test!!')


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

We change the window title name!

Because the new class we defined is inherited from the original MainWindow class, we only need to call our own setWindowTitle() to modify the title we want.

We can also define the status bar below StatusBar.

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets, QtGui
from QMainWindow import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

        # MainWindow Title
        self.setWindowTitle('QIcon Test!!')

        # StatusBar
        self.statusBar().showMessage('TEST Again!!!')


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

The text we set is also displayed in the lower left corner.

How is it possible to set it up very easily?

Set Icon

Next, we set the window icon.

Basically we only need one line of instructions.

self.setWindowIcon(QtGui.QIcon('pic/Python_PyQt5.png'))
# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets, QtGui
from QMainWindow import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

        # MainWindow Title
        self.setWindowTitle('QIcon Test!!')

        # StatusBar
        self.statusBar().showMessage('TEST Again!!!')

        # Set Window Icon
        self.setWindowIcon(QtGui.QIcon('pic/Python_PyQt5.png'))


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

We can compare the above figures. Do you find that the Icon (upper left corner) has changed the icon?

Of course, I feel a little humble, a little embarrassed Hahahahaha.

The original picture is like this:

If fact, It’s the picture I put at the beginning.

Set background

Then, let’s come to the background that I have been tossing for a long time! In fact, the background is unexpectedly set, but we need to introduce two new components: QPalette, QPixmap.

As the name suggests, QPixmap is a pixmap, we can read the image in. And QPalette is the palette, we can place any color on it.

In here I will pass the image read by QPixmap to QPalette, and then pass the QPalette object to our MainWindow.

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets, QtGui
from QMainWindow import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

        # MainWindow Title
        self.setWindowTitle('QIcon Test!!')

        # StatusBar
        self.statusBar().showMessage('TEST Again!!!')

        # Set Window Icon
        self.setWindowIcon(QtGui.QIcon('pic/Python_PyQt5.png'))

        # Pixmap
        image = QtGui.QPixmap()
        image.load('pic/Python_PyQt5.png')
        image = image.scaled(self.width(), self.height())

        # Palette
        palette = QtGui.QPalette()
        palette.setBrush(self.backgroundRole(), QtGui.QBrush(image))
        self.setPalette(palette)


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

Among:

image.scaled(self.width(), self.height())

This line of instructions I made the size of the picture, to avoid the picture can not be placed up to the window, of course you will see, maybe the picture has little distorted.

By the way, if you want to set a background color instead of placing a picture: 

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets, QtGui
from QMainWindow import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

        # MainWindow Title
        self.setWindowTitle('QIcon Test!!')

        # StatusBar
        self.statusBar().showMessage('TEST Again!!!')

        # Set Window Icon
        self.setWindowIcon(QtGui.QIcon('pic/Python_PyQt5.png'))

        # Pixmap
        # image = QtGui.QPixmap()
        # image.load('pic/Python_PyQt5.png')
        # image = image.scaled(self.width(), self.height())
        #
        # Palette
        palette = QtGui.QPalette()
        palette.setBrush(self.backgroundRole(), QtGui.QColor(150, 200, 100))
        self.setPalette(palette)


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

Like this!

We change the object passed in palette.setBrush() to QtGui.QColor(), and then fill in the RGB three primary colors, you can color the background.

Hide the window title

Yes! finally come to the part to waste all of our works!

We can easily hide our window title with just one instruction:

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets, QtGui, QtCore
from QMainWindow import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

        # MainWindow Title
        self.setWindowTitle('QIcon Test!!')

        # StatusBar
        self.statusBar().showMessage('TEST Again!!!')

        # Set Window Icon
        self.setWindowIcon(QtGui.QIcon('pic/Python_PyQt5.png'))

        # Pixmap
        image = QtGui.QPixmap()
        image.load('pic/Python_PyQt5.png')
        image = image.scaled(self.width(), self.height())

        # Palette
        palette = QtGui.QPalette()
        palette.setBrush(self.backgroundRole(), QtGui.QBrush(image))
        self.setPalette(palette)

        # Hide Window Title
        self.setWindowFlag(QtCore.Qt.FramelessWindowHint)


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

How is it? Did you really get rid of the annoying frame? If we optimize for the corners, a fashion interface will be made!

Maybe after the completion of my notation program, I will try to optimize the interface again, and then record the notes!

References

Read More

Tags:

Leave a Reply