In this Python PyQt5 lesson we want to learn about Python PyQt5 QColorDialog & QFontDialog, the QColorDialog class provides a dialog widget for specifying colors. the color dialog’s function is to allow users to choose colors. For example, you might use this in a drawing program to allow the user to set the brush color. the QFontDialog class provides a dialog widget for selecting a font. a font dialog is created through one of the static getFont() functions.
Now open your Qt Designer, you can just write pyqt5designer in your terminal, after opening the Qt Designer you need to create Widget window. now we add widgets in Qt Designer.
- Add a vertical layout at the top
- Add a horizontal layout at the bottom
- In the VBoxLayout add a QTextEdit
- In the HBoxLayout add two QPushButton
This is the design.
![Qt Designer QColorDialog Design](https://geekscoders.com/wp-content/uploads/2020/09/pyqt5-colordialog-with-fontdialog.jpg)
After completing the design you need to save the .ui file, iam going to name it colord.ui, now copy the file and paste it in the Scripts folder of your Python installation, because we want to convert our ui file in to python file and for converting you need to use pyuic5 module. pyuic5 module is located in the Scripts folder of your Python installation, run this command for converting in your terminal.
1 |
pyuic5 colord.ui -o colordialog.py -x |
And this is the converted code also we have added our clicked() signal with the method that we want to connect.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
# -*- coding: utf-8 -*- # Form implementation generated from # reading ui file 'colord.ui' # # Created by: PyQt5 UI code generator 5.15.1 # # WARNING: Any manual changes made to this # file will be lost when pyuic5 is # run again. Do not edit this file unless # you know what you are doing. from PyQt5 import QtCore, QtGui, QtWidgets from PyQt5.QtWidgets import QColorDialog, QFontDialog class Ui_Form(object): def setupUi(self, Form): Form.setObjectName("Form") Form.resize(525, 423) self.verticalLayout_2 = QtWidgets.QVBoxLayout(Form) self.verticalLayout_2.setObjectName("verticalLayout_2") self.verticalLayout = QtWidgets.QVBoxLayout() self.verticalLayout.setObjectName("verticalLayout") self.textEdit = QtWidgets.QTextEdit(Form) self.textEdit.setObjectName("textEdit") self.verticalLayout.addWidget(self.textEdit) self.verticalLayout_2.addLayout(self.verticalLayout) self.horizontalLayout = QtWidgets.QHBoxLayout() self.horizontalLayout.setObjectName("horizontalLayout") self.pushButtonColor = QtWidgets.QPushButton(Form) self.pushButtonColor.setObjectName("pushButtonColor") # connected the method to the clicked signal self.pushButtonColor.clicked.connect(self.colorDialog) self.horizontalLayout.addWidget(self.pushButtonColor) self.pushButtonFont = QtWidgets.QPushButton(Form) self.pushButtonFont.setObjectName("pushButtonFont") #connected the method to the clicked signal self.pushButtonFont.clicked.connect(self.fontDialog) self.horizontalLayout.addWidget(self.pushButtonFont) self.verticalLayout_2.addLayout(self.horizontalLayout) self.retranslateUi(Form) QtCore.QMetaObject.connectSlotsByName(Form) #methods for changing color and font def colorDialog(self): color = QColorDialog.getColor() self.textEdit.setTextColor(color) def fontDialog(self): font, ok = QFontDialog.getFont() if ok: self.textEdit.setFont(font) def retranslateUi(self, Form): _translate = QtCore.QCoreApplication.translate Form.setWindowTitle(_translate("Form", "Form")) self.pushButtonColor.setText(_translate("Form", "Change Color")) self.pushButtonFont.setText(_translate("Form", "Change Font")) 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_()) |
You can see that we have also added our two methods, because we want to use these methods in the QPushButton clicked signal. the first method is for changing the color of textedit, we just get the color from QColorDialog and we set the color to the textedit. the second method is for changing font size of the text, and we do the same task, we get the font and set the font for the text.
1 2 3 4 5 6 7 8 9 10 |
#methods for changing color and font def colorDialog(self): color = QColorDialog.getColor() self.textEdit.setTextColor(color) def fontDialog(self): font, ok = QFontDialog.getFont() if ok: self.textEdit.setFont(font) |
Run the complete code and this is the result.
![PyQt5 ColorDialog - Working with QColorDialog & QFontDialog in PyQt](https://geekscoders.com/wp-content/uploads/2020/09/font-color-dialog-in-pyqt.jpg)