python3.6+pyqt5+pycharm5界面编程实例

前言
上一篇博客搭建了环境，参见：
http://blog.csdn.net/m0_37606112/article/details/78419892

本篇给出在pycharm中构建前端可视化界面的代码。

操作步骤
1 打开pycharm，点选tools-external tools-QTDesigner，进入GUI界面：

2 采用拖拉的方式建立lable、EditText、PushButton、PlainText、DialogButton等。
改变这些元素的特性，如名字，大小，排布，比例、文字、背景图片等。
3 点选slot选项，给PushButton按钮关联动作函数。

4 保存上述设置，可以看到，在pycharm左侧的目录中出现了test.ui的文件，选择这个文件，右键选择tools_external-Pyuic5，确定。

可以看到在左侧的同一目录下出现了一个test.py的文件。
无需对test.py文件做任何改动，也无需运行。
5 新建一个main.py的文件：

# -*- coding: utf-8 -*-# @Time    : 2017/11/6 22:54# @Author  : aikes# @Email   : [e-mail]# @File    : main.py# @Software:    python3.6.3#               opencv3.3.0#               pyqt5#               pycharm 2017.2from test import Ui_MainWindow  # 导入uitestPyQt5.ui转换为uitestPyQt5.py中的类from PyQt5 import QtCore, QtGui, QtWidgetsfrom PyQt5.QtGui import QImage,QPixmapfrom PyQt5.QtWidgets import QFileDialog,QInputDialogimport cv2import sysimport numpy as npcv2.namedWindow('MAT',0)cv2.resizeWindow('MAT',480,360)img=cv2.imread('c://girl.png')cv2.imshow('MAT',img)class Mywindow(QtWidgets.QMainWindow, Ui_MainWindow):    # 建立的是Main Window项目，故此处导入的是QMainWindow    # class myform(QWidget,Ui_Form):如建立的是Widget项目，导入的是QWidget    def __init__(self):        super(Mywindow, self).__init__()        self.setupUi(self)#####################################主函数代码#################    def btn_ShowURL(self):        filename=self.plainTextEdit.toPlainText()        ret,img=cv2.VideoCapture(filename).read()        cv2.imshow('MAT',img)    def btn_OpenFile(self):        filename = QFileDialog.getOpenFileName(self,'.png','c:')        self.label.setPixmap(QtGui.QPixmap(filename[0]))    def btn_Change(self):        self.textEdit.setText('世界，我来了！')    def btn_Dialog(self):        url, ok = QInputDialog.getText(self, "Input Dialog", "键入网络地址:")        if ok:            cap=cv2.VideoCapture(url)            ret, img=cap.read()            #cv2.imshow('MAT',img)            self.label.setPixmap(QPixmap.fromImage(cvMatToQimg(img)))###########################################################def cvMatToQimg(mat):    mat = cv2.cvtColor(mat, cv2.COLOR_BGR2RGB)    #mat=cv2.cvtColor(mat,cv2.COLOR_BGR2HSV)    #mat = cv2.cvtColor(mat, cv2.COLOR_BGR2GRAY)    return QImage(mat.tostring(), mat.shape[1], mat.shape[0], mat.shape[2] * mat.shape[1], QtGui.QImage.Format_RGB888)app = QtWidgets.QApplication(sys.argv)window = Mywindow()window.show()# window=myform()   #如果是QWidget#windows.show()#app.exec_()sys.exit(app.exec_())

6 代码解释

from test import Ui_MainWindow  # 导入uitestPyQt5.ui转换为uitestPyQt5.py中的类from PyQt5 import QtCore, QtGui, QtWidgetsfrom PyQt5.QtGui import QImage,QPixmapfrom PyQt5.QtWidgets import QFileDialog,QInputDialogimport cv2import sysimport numpy as np

首先将刚才建立的test内容导入，然后导入QTPY5中的类和方法。

cv2.namedWindow('MAT',0)cv2.resizeWindow('MAT',480,360)img=cv2.imread('c://girl.png')cv2.imshow('MAT',img)

用cv2打开一个窗口，读入并显示一个本地图像文件。

class Mywindow(QtWidgets.QMainWindow, Ui_MainWindow):    # 建立的是Main Window项目，故此处导入的是QMainWindow    # class myform(QWidget,Ui_Form):如建立的是Widget项目，导入的是QWidget    def __init__(self):        super(Mywindow, self).__init__()        self.setupUi(self)###########################################################这里编写slot函数和主程序###########################################################app = QtWidgets.QApplication(sys.argv)window = Mywindow()window.show()# window=myform()   #如果是QWidget#windows.show()#app.exec_()sys.exit(app.exec_())

这是固定模板，无需更改，如果建立的是QWidget窗口，相应替代即可。

    def btn_ShowURL(self):        filename=self.plainTextEdit.toPlainText()        ret,img=cv2.VideoCapture(filename).read()        cv2.imshow('MAT',img)

定义一个函数，当按钮按下时，首先读出plainTextEdit中的图片网络地址，这个地址可以自行键入，然后用cv2.VideoCapture方法读出并显示在外部活动的窗口中。

    def btn_OpenFile(self):        filename = QFileDialog.getOpenFileName(self,'.png','c:')        self.label.setPixmap(QtGui.QPixmap(filename[0]))

按钮按下时，弹出一个对话框，选择一个将要显示的本地图片文件，点击ok，则图片显示在lable中。

    def btn_Change(self):        self.textEdit.setText('世界，我来了！')

EditText文本框中内容按照要求重新赋值。

    def btn_Dialog(self):        url, ok = QInputDialog.getText(self, "Input Dialog", "键入网络地址:")        if ok:            cap=cv2.VideoCapture(url)            ret, img=cap.read()            #cv2.imshow('MAT',img)            self.label.setPixmap(QPixmap.fromImage(cvMatToQimg(img)))

按钮按下时，弹出一个对话框，要求键入一个网络地址，点击ok后，lable中显示出来。

def cvMatToQimg(mat):    mat = cv2.cvtColor(mat, cv2.COLOR_BGR2RGB)    #mat=cv2.cvtColor(mat,cv2.COLOR_BGR2HSV)    #mat = cv2.cvtColor(mat, cv2.COLOR_BGR2GRAY)    return QImage(mat.tostring(), mat.shape[1], mat.shape[0], mat.shape[2] * mat.shape[1], QtGui.QImage.Format_RGB888)

这是一个通用的转换函数，将CV2格式的图片转换为QTPY5格式的文件。

实际效果
初始画面：

点击第一个按钮：

可以看到，文本框中的文字变成“世界，我来了！”

点击第二个按钮：

可以看到外部的图片发生了变化，我们重新输入一个新的网络地址：

图片进行了更新。

点击第三个按钮：

弹出一个对话框，我们在对话框中输入一个网络地址，点击ok：

可以看到lable的图片发生了变化。

点击第四个按钮，弹出一个对话框，在c://目录下选择一个png文件，ok：

小结
有了QTPY5和Pycharm，对于opencv和python的图像处理和GUI界面确实带来了极大的便利，后期我们的例程和学习都将在这样的环境下运行和展示，而且大多数的图像和视频都会是直接来自于网络。