Skip to main content

挑战任务:PyQt5 编写 GUI 界面

拓展挑战:编写 GUI 图像处理应用程序。

挑战内容

前面我们学习的 OpenCV 内容都是运行在命令行中的,没有界面,所以本次的拓展挑战内容便是:

了解 Python 编写GUI界面的方法,使用 PyQt5 编写如下的图像处理应用程序,实现打开摄像头、捕获图片、读取本地图片、灰度化和 Otsu 自动阈值分割的功能。

挑战题不会做也木有关系,但请务必在自行尝试后,再看下面的解答噢,不然...我也没办法( ̄ ▽  ̄)"

挑战解答

简介

目前我们学的内容都是跑在命令行中的,并没有界面,那么"脚本语言"Python 如何搭建 GUI 界面呢?

其实 Python 支持多种图形界面库,如Tk(Tkinter)wxPythonPyQt等,虽然 Python 自带 Tkinter,无需额外安装包,但我更推荐使用 PyQt,一是因为它完全基于 Qt,跨平台,功能强大,有助于了解 Qt 的语法,二是 Qt 提供了 Designer 设计工具,界面设计上可以拖控件搞定,非常方便,大大节省时间。

大家感兴趣的话,除去官网,下面是一些可参考的资源:

安装

pip install pyqt5

下载速度慢的话,可以到PyPI上下载离线版安装。另外我推荐使用 Qt Designer 来设计界面,如果你装的是 Anaconda 的话,就已经自带了 designer.exe,例如我的是在D:\ProgramData\Anaconda3\Library\bin\,如果是普通的 Python 环境,则需要自行安装:

pip install pyqt5-tools

安装完成后,designer.exe 应该在 Python 安装目录下xxx\Lib\site-packages\pyqt5_tools\

可以使用下面的代码生成一个简单的界面:

import sys
from PyQt5.QtWidgets import QApplication, QWidget

if __name__ == '__main__':
app = QApplication(sys.argv)

window = QWidget()
window.setWindowTitle('Hello World!')
window.show()

sys.exit(app.exec_())

界面设计

根据我们的挑战内容,解决思路是使用 Qt Designer 来设计界面,使用 Python 完成代码逻辑。打开 designer.exe,会弹出创建新窗体的窗口,我们直接点击create

界面的左侧是 Qt 的常用控件Widget Box,右侧有一个控件属性窗口Property Editor,其余暂时用不到。本例中我们只用到了Push Button控件和Label控件:最上面的三个 Label 控件用于显示图片,可以在属性窗口调整它的大小,我们统一调整到 150×150:

另外,控件上显示的文字text属性和控件的名字objectName属性需要修改,便于显示和代码调用。可以按照下面我推荐的命名:

控件显示内容 text控件名 objectName
PushButton打开摄像头btnOpenCamera
PushButton捕获图片btnCapture
PushButton打开图片btnReadImage
PushButton灰度化btnGray
PushButton阈值分割(Otsu)btnThreshold
Label摄像头labelCamera
Label捕获图labelCapture
Label结果图labelResult

这样大致界面就出来了,很简单:

按钮事件

如果你之前有过一些 GUI 开发经验,比如 MFC,WinForm 等,就知道 GUI 是通过事件驱动的,什么意思呢?比如前面我们已经设计好了界面,接下来就需要实现"打开摄像头"到"阈值分割"这 5 个按钮的功能,也就是给每个按钮指定一个"函数",逻辑代码写在这个函数里面。这种函数就称为事件,Qt 中称为槽连接。

点击 Designer 工具栏的Edit Signals/Slots按钮,进入槽函数编辑界面,点击旁边的Edit Widgets可以恢复正常视图:

然后点击按钮并拖动,当产生类似于电路中的接地符号时释放鼠标,参看下面动图:

在弹出的配置窗口中,可以看到左侧是按钮的常用事件,我们选择点击事件"clicked()",然后添加一个名为"btnOpenCamera_Clicked()"的槽函数:

重复上面的步骤,给五个按钮添加五个槽函数,最终结果如下:

到此,我们就完成了界面设计的所有工作,按下 Ctrl+S 保存当前窗口为.ui 文件。.ui 文件其实是按照 XML 格式标记的内容,可以用文本编辑器将.ui 文件打开看看。

ui 文件转 py 代码

因为我们是用 Designer 工具设计出的界面,并不是用 Python 代码敲出来的,所以要想真正运行,需要使用 pyuic5 将 ui 文件转成 py 文件。pyuic5.exe 默认在%\Scripts\下,比如我的是在D:\ProgramData\Anaconda3\Scripts\

打开 cmd 命令行,切换到 ui 文件的保存目录。Windows 下有个小技巧,可以在目录的地址栏输入 cmd,一步切换到当前目录:

然后执行这条指令:

pyuic5 -o mainForm.py using_pyqt_create_ui.ui

如果出现 pyuic5 不是内部命令的错误,说明 pyuic5 的路径没有在环境变量里,添加下就好了。执行正常的话,就会生成 mainForm.py 文件,里面应该包含一个名为"Ui_MainWindow"的类。

编写逻辑代码

tip

mainForm.py 文件是根据 ui 文件生成的,也就是说重新生成会覆盖掉。所以为了使界面与逻辑分离,我们需要新建一个逻辑文件。

在同一工作目录下新建一个"mainEntry.py"的文件,存放逻辑代码。代码中的每部分我都写得比较独立,没有封装成函数,便于理解。代码看上去很长,但很简单,可以每个模块单独看,有几个需要注意的地方我做了注释:

import sys
import cv2

from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import QFileDialog, QMainWindow

from mainForm import Ui_MainWindow


class PyQtMainEntry(QMainWindow, Ui_MainWindow):
def __init__(self):
super().__init__()
self.setupUi(self)

self.camera = cv2.VideoCapture(0)
self.is_camera_opened = False # 摄像头有没有打开标记

# 定时器:30ms 捕获一帧
self._timer = QtCore.QTimer(self)
self._timer.timeout.connect(self._queryFrame)
self._timer.setInterval(30)

def btnOpenCamera_Clicked(self):
'''
打开和关闭摄像头
'''
self.is_camera_opened = ~self.is_camera_opened
if self.is_camera_opened:
self.btnOpenCamera.setText("关闭摄像头")
self._timer.start()
else:
self.btnOpenCamera.setText("打开摄像头")
self._timer.stop()

def btnCapture_Clicked(self):
'''
捕获图片
'''
# 摄像头未打开,不执行任何操作
if not self.is_camera_opened:
return

self.captured = self.frame

# 后面这几行代码几乎都一样,可以尝试封装成一个函数
rows, cols, channels = self.captured.shape
bytesPerLine = channels * cols
# Qt 显示图片时,需要先转换成 QImgage 类型
QImg = QImage(self.captured.data, cols, rows, bytesPerLine, QImage.Format_RGB888)
self.labelCapture.setPixmap(QPixmap.fromImage(QImg).scaled(
self.labelCapture.size(), Qt.KeepAspectRatio, Qt.SmoothTransformation))

def btnReadImage_Clicked(self):
'''
从本地读取图片
'''
# 打开文件选取对话框
filename, _ = QFileDialog.getOpenFileName(self, '打开图片')
if filename:
self.captured = cv2.imread(str(filename))
# OpenCV 图像以 BGR 通道存储,显示时需要从 BGR 转到 RGB
self.captured = cv2.cvtColor(self.captured, cv2.COLOR_BGR2RGB)

rows, cols, channels = self.captured.shape
bytesPerLine = channels * cols
QImg = QImage(self.captured.data, cols, rows, bytesPerLine, QImage.Format_RGB888)
self.labelCapture.setPixmap(QPixmap.fromImage(QImg).scaled(
self.labelCapture.size(), Qt.KeepAspectRatio, Qt.SmoothTransformation))

def btnGray_Clicked(self):
'''
灰度化
'''
# 如果没有捕获图片,则不执行操作
if not hasattr(self, "captured"):
return

self.cpatured = cv2.cvtColor(self.captured, cv2.COLOR_RGB2GRAY)

rows, columns = self.cpatured.shape
bytesPerLine = columns
# 灰度图是单通道,所以需要用 Format_Indexed8
QImg = QImage(self.cpatured.data, columns, rows, bytesPerLine, QImage.Format_Indexed8)
self.labelResult.setPixmap(QPixmap.fromImage(QImg).scaled(
self.labelResult.size(), Qt.KeepAspectRatio, Qt.SmoothTransformation))

def btnThreshold_Clicked(self):
'''
Otsu 自动阈值分割
'''
if not hasattr(self, "captured"):
return

_, self.cpatured = cv2.threshold(
self.cpatured, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)

rows, columns = self.cpatured.shape
bytesPerLine = columns
# 阈值分割图也是单通道,也需要用 Format_Indexed8
QImg = QImage(self.cpatured.data, columns, rows, bytesPerLine, QImage.Format_Indexed8)
self.labelResult.setPixmap(QPixmap.fromImage(QImg).scaled(
self.labelResult.size(), Qt.KeepAspectRatio, Qt.SmoothTransformation))

@QtCore.pyqtSlot()
def _queryFrame(self):
'''
循环捕获图片
'''
ret, self.frame = self.camera.read()

img_rows, img_cols, channels = self.frame.shape
bytesPerLine = channels * img_cols

cv2.cvtColor(self.frame, cv2.COLOR_BGR2RGB, self.frame)
QImg = QImage(self.frame.data, img_cols, img_rows, bytesPerLine, QImage.Format_RGB888)
self.labelCamera.setPixmap(QPixmap.fromImage(QImg).scaled(
self.labelCamera.size(), Qt.KeepAspectRatio, Qt.SmoothTransformation))


if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
window = PyQtMainEntry()
window.show()
sys.exit(app.exec_())

本文只是抛砖引玉,介绍了 PyQt5 的简单使用,想要深入学习,可以参考本文开头的参考资料噢(●ˇ∀ˇ●)

引用