PyQt5+QtDesigner编写摄像头界面程序（二）——使用qtdesigner设计软件界面

文章目录

前言
一、程序布局
二、插入功能控件
三、显示软件界面

前言

上一节介绍了PyQt和QtDesigner等工具的安装和环境设置，本节主要介绍QtDesigner的使用方法，利用QtDesigner完成相机控制程序的界面设计。

一、程序布局

还是接着上一节的PyQtTest项目进行编辑，在PyCharm里单击Tools->External Tools->Qt Designer打开Qt Designer；在QtDesigner中打开我们上一节新建的QtTest.ui文件。
此时ui文件中只有一个主窗口，在Property Editor中可以看到该主窗口的所有属性，我们只需要对部分关心的属性进行设置，其它都不需要修改。
在这里插入图片描述
这里，我将objectName和windowTitle都改为CamShow，其中objectName是我们程序代码中使用的窗口名，当我们在代码中需要调用该窗口、或者设置该窗口的参数时都使用这个名称，windowTitle是程序运行时显示的窗口名称；将Width和Height设为1000和600，表示初始窗口大小为1000×600pixels。
接下来，我们在左下方的Widget Box中的Containers下找到Frame控件，用鼠标左键将其拖到中间的显示区域。左键单击选中该Frame，在右侧的Property Editor中找到frameShape和frameShadow，分别设为Box和Raised，这样就可以比较清楚地看到该Frame的边界啦。
我们打算将程序界面分成左、右、下三个区域，分别用来控制相机和图像参数、显示相机图像、显示程序运行信息，因此在显示区域创建三个frame。然后单击空白区域选中主窗口，单击鼠标右键，选择Lay out->Lay out in a Grid，将主窗口设为栅格布局，此时三各frame会自动扩展，占满整个主窗口。用鼠标左键可以拖拽每个frame的位置和大小，得到的布局效果如下图所示。当我们单击frame内部区域并拖拽时，可以移动frame的位置，而当我们单击frame的边框并拖拽时，可以改变其大小。当然，在栅格布局下，所有frame占用的空间是平均分配的，因此一旦我们松开鼠标，这些frame又会自动恢复原来的位置和大小。当然，我们还是可以设置它们的排布方式的，假设我们的主窗口是一个2×2的栅格，第一行每个frame占据一个栅格，第二行每个frame占据两个栅格，然后将frame多拽到对应的栅格的位置就可以啦。如果使用代码设置布局的话会比较简单，在图形界面里设置的话就需要多试几次啦。
在这里插入图片描述
默认情况下，frame中的内容会均分该frame的空间，我们可以通过minimumHeight、minimumWidth、MaximumHeight和MaximumWidth属性来控制这三个frame的大小，在我们拉伸或缩小主窗口时，每个frame的大小将会在其极大与极小值之间变动。我们将三个frame的objectName分别设为SettingFm、DispFm和MsgFm以方便后续的代码编写。
完成后的布局如下图所示：
在这里插入图片描述

二、插入功能控件

接下来，我们根据需要插入各功能控件。
先在SettingFm中插入相机参数控制的控件。首先，我们将想要调控的参数分成两种，一种是颜色控制，另一种是相机参数设置。前者用来调控图像的颜色，后者用来调控曝光时间、增益、亮度、对比度等参数。
因此先在SettingFm中插入三个Frame，将SettingFm的布局设为纵向布局。从上到下的三个Frame一次命名为ColorFm、ParaFm、EmptyFm分别用来放置颜色控制、参数控制的控件，第三个Frame是空的，用来占满剩下的控件，保证前两个Frame总是位于SettingFm的顶部。
接下来，在ColorFm插入一个Check Box，用来控制是否将图像转为灰度图。将其objectName设为GrayImgCkB，text属性设为Gray，右键单击该CheckBox选择Change styleSheet->Add Font，选择显示的字体和大小。然后，右键单击ColorFm，选择Lay out->Lay out in a Grid，将其设置为栅格布局。
接下来插入三行R、G、B颜色通道控制的控件，每一行从左到右依次为Label、Horizontal Slider、Spin Box。以第一行为例，其Label的属性设置如下：objectName-RLb，text-R:,Horizontal Slider的属性如下：objectName:=RSld，minimum:=0，maximum:=255,Spin Box的属性设置为：objectName:=RSpB，minimum:=0，maximum:=255。
完成后的效果如下图所示，有个小细节是，对于第一行的CheckBox，可以通过将其拉宽使其占据两列，这样，R、G、B三个Label的宽度就会被压缩到最小。
在这里插入图片描述
接下来，按照同样的方法，在ParaFm中插入图像参数的控件，效果如下图所示。需要注意的是，第2、3、4行的最右侧使用的是double spin box，最后一行，我们使用的是一个Line Edit控件和一个Button控件，用来显示和选择文件存储路径，其中Line Edit控件的属性readOnly设置为真。当然，对于不同的相机，曝光时间、增益、亮度、对比度可取的范围是不同的，我们需要根据实际情况来设置对应的slider和spinbox的最大和最小值。如果不知道它的范围的话，可以通过试探的方法来找到它的范围，这一点我们后面的部分会有介绍。
在这里插入图片描述
接下来，我们来设计右侧的显示界面，该界面的主要功能控件如下图所示。最上部为一行控制按钮，分别控制摄像头的开始、暂停、保存以及程序的退出。中间区域为一个Label，其text我们设为空，用来显示摄像头的图像,之所以用QLabel来显示图像而不用更常用的Matplotlib是因为一方面我们需要的显示功能比较简单，另一方面用QLabel显示图像的速度更快，当我们控制高帧频相机的时候这一点尤其重要。下部区域用来显示视频信息，包括当前帧频和图像大小，我们使用LCD number来显示这些数字信息，显得比较好看。
在这里插入图片描述
最后，我们在MsgFm中放置一个Text Edit控件，并且将MsgFm设置为栅格布局，使Text Edit控件占满整个frame。
至此，便完成了整个软件界面的设计。

三、显示软件界面

接下来，按照上一节的方法，保存ui文件，并将其转换为新的py文件，在我们上一节创建的QtUi.py文件中输入如下代码，需要注意的是，由于我们修改了主窗口的objectName，其转换生成的py文件中的class的命名也发生了改变，我们在导入该类，并继承该类时也要相应地修改它的名称。

from QtTest import Ui_CamShow
import sys
from PyQt5.QtWidgets import QApplication,QMainWindow

class CamShow(QMainWindow,Ui_CamShow):
    def __init__(self,parent=None):
        super(CamShow,self).__init__(parent)
        self.setupUi(self)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ui=CamShow()
    ui.show()
    sys.exit(app.exec_())

运行该程序，就会显示出我们设计的程序界面啦。显示的结果可能跟想象的有些差别，我们需要反复调整各控件的尺寸，直到界面达到理想的效果。最终的界面效果如下图所示,设计完成的ui文件可以见链接QtTest.ui
在这里插入图片描述
当然，这里只是显示出程序的界面，相当于我们只做好了一个机箱的面板，我们还需要编写各个控件对应的函数才能使程序真正的运行起来。下一节我们来介绍如何编写函数实现控件对应的功能。