基于深度学习的视觉检测小项目（七）开始组态界面

开始设计和组态画面。

• 关于背景和配色

在组态画面之前，先要确定好画面的风格和色系。如果有前端经验和美术功底，可以建立自己的配色体系。像我这种工科男，就只能从网络上下载一些别人做好的优秀界面，然后在photo shop中抠取色号作为界面的颜色库。必须注意的一点，做工程不是搞艺术，千万不要过多加入私人的和个性的元素，比如把图标和背景搞成自己喜欢的动漫人物之类的，因为这样极大概率会引起客户的反感，认为作者轻视项目和审美自私，对客户缺乏应有的尊重。

配色的一些基础知识文章推荐：UI设计界面配色指南，以及UI设计色彩应用规范

• 画面组件的伸展特性

作为一个软件界面，它的另一个必备特性是对显示屏幕分辨率的自动适配能力，我们不太可能让客户只能使用与我们的编程电脑相同分辨率的显示器。一般来讲，界面软件会对显示屏幕有一个最低分辨率的要求，只要显示屏幕高于最低分辨率都应该能够自动适配并正常显示。这样，界面上的有些区域就要具备自动缩放的属性，比如图片显示区。另外一些区域，比如按钮站，它的大小是固定的，不随屏幕分辨率和界面尺寸变化而变化。

下面来完善一下项目的文件框架，并开始组态。

一、在designer中新建QWidget画面，命名为form1.ui，保存在项目的/uis目录下。在画面上放置一个QLabel，一个QPuchButton，分别命名为label_1和btn_1。

二、使用pyuic工具将form1.ui文件转为form1.py文件。并且新建了一些目录和文件，当前的目录结构如下：

functions目录：存放功能函数

ui_project.py：项目级别的一个脚本，所有的对于ui项目而言的全局信号和变量都在这个脚本内定义。

form1.ui：在designer中布局和设计的界面文件。可以理解为界面的图形文件。

form1.py：由form1.ui经uis工具转换而来的py文件。可以理解为界面的前端文件。

form1_func.py：在form1.py基础上增加了功能和信号的py文件。可以理解为界面的后端和功能文件。

main.py：主函数。

uis目录下的__init__.py文件，这个文件的代码如下：

__all__ = ["form1_func"]   # 用于控制哪些模块被导出

这行代码控制了当在别的地方使用“from uis import *”调用uis这个包时，哪些模块被导入，哪些模块不被导入。

三、各个脚本的代码：

1、form1_func.py：

from PySide6.QtCore import Slot
from PySide6.QtWidgets import QWidget

from . import form1   # 导入使用uis工具从form1.ui生成而来的form1.py文件
from functions.ui_project import uiproj    # 导入全局的ui项目对象


# 定义窗口类
class Form1(QWidget, form1.Ui_Form):
    def __init__(self):
        super().__init__()
        self.setupUi(self)   # 加载窗口
        self.run()   # 初始化运行窗口

    def run(self):   # 窗口的运行函数
        self.show()  # 显示窗口
        @Slot()
        def date_show(t):  # 显示日期的槽函数
            self.label_1.setText(t)  # 设置label_1的文本
        uiproj.date_signal.connect(date_show)  # 连接日期信号

        @Slot()
        def on_btn_1_clicked():  # 按钮1点击事件连接的槽函数
            self.label_1.setText("local clicked")  # 设置label_1的文本
        self.btn_1.clicked.connect(on_btn_1_clicked)  # 按钮1点击事件连接槽函数

2、ui_project.py：

# 这里定义项目级别的信号和变量、参数等
import time

from PySide6.QtCore import Signal, QObject, QTimer


# 定义全局的ui项目类
class UiProj(QObject):
    # 定义全局信号
    date_signal = Signal(str)   # 全局的日期信号
    def __init__(self):
        super(UiProj, self).__init__()
        self.time_str = ""   # 全局的日期变量
        self.timer = QTimer()    # 定义全局定时器        

    # 刷新日期变量
    def refresh_time(self):
        self.time_str = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())     # 刷新日期变量
        self.date_signal.emit(self.time_str)     # 发送信号


uiproj = UiProj()   # 生成全局的ui项目对象

3 、main.py：

import sys

from PySide6.QtCore import Signal, QObject
from PySide6.QtWidgets import QApplication
from gui.uis import *  # 导入所有窗口类

from functions.ui_project import uiproj

def main():
    app = QApplication(sys.argv)

    form1 = form1_func.Form1()  # 实例化窗口类

    uiproj.timer.start(1000)  # 启动全局定时器
    uiproj.timer.timeout.connect(uiproj.refresh_time)  # 连接定时器的超时信号

    sys.exit(app.exec())

if __name__ == "__main__":
    main()

以上代码演示了如何使用一个全局的信号和变量来跨窗口操作部件，以及同窗口内局部的信号和槽的连接。凡是用uiproj.开头的信号和变量等，都是全局的。凡是self.开头的都是局部的。

运行截图：