【PyQt5 实战项目1】武汉大学建筑知识系统--思路分享3（软件版本1.0.0介绍之显示预测的建筑信息、图片）

1. 简述

上篇文章介绍了如何打开以及保存图片，同时在打开图片后需要判断用户上传的文件是否为图片文件。如若不是，则需给用户弹出提示并重新选择上传照片。那么其实在上篇文章大家可以看到，我把 ui.py 和 main.py 是分开的，那么为什么要这么做呢？其中一个原因是软件 designer 生成的 ui 文件就是一个单独的文件，然后我们用到命令 pyuic5 将 ui 文件转为 py 文件；另一个重要的原因则是我们要做到界面与业务相分离！

界面指的就是我们搭建的 ui 界面，因为一旦界面搭建完成后，基本上就很少做出修改了。
业务指的是我们要完成的功能，比如打开图片这个功能，因为在实际开发中，大家经常会看到某某软件更新，新增了某些功能，这里的功能就是业务，业务是我们经常修改的。
所以我们这样区分就可以避免在修改业务代码误将界面代码也修改了！

拓展：这时候不知道有没有同学看完上一篇文章有疑问，就是我给的示例代码为什么和我们的 版本1.0.0 的样式不一样呢，原因是之前的代码没保存下来，只保存了软件的安装包。。。所以在这里也提醒同学们学一下 git 版本控制，这样我们就可以查看旧的代码（比如你写完新代码后一直报错，但是找不出原因，那么 git 就给了你一颗后悔药——恢复最近一次/前几次提交的代码版本，好用！！！那么如何使用 git，可以在 CSDN 上自行搜索，而代码仓库我用的是 Gitee，相当于国内版的 GitHub，不用魔法）。

那么接下来将介绍识别出用户的图片后将要干些什么？显然是显示建筑的相关信息吧！

2. 软件开发停滞？

来到这里，其实我们的神经网络模型还没完全训练出来（一是数据集的收集要花很长时间，其实在其他小组展示的时候数据集是很少的，也就几百甚至只有几十个数据集，所以相对于我们 8964 的样本量，老师是给我们做出了加分的；二是模型训练过程也是很漫长的，由于我们的主流基调还是神经网络，所以调参就是一个漫长的过程，可能还会出现过拟合或者欠拟合【主要还是过拟合！】的现象），那么这个时候没有真正的模型出来，那么我们的软件开发就要停止吗？

答案显示不是！虽然模型没出来，但是我们可以用 python 的 pass 来代替呀，或者我们在预测代码那里就指定预测出来的建筑就是数学与统计学院也是可以的，我们目的是保证软件开发过程中不受影响的继续开发下去，节省时间（因为等模型出来可能就没多少时间开发软件了，这是你就只会优先开发功能，而忽略 UI 界面的美化！）

注：这里提到的 UI 界面美化是关键，这也是为什么我在一开始就提到其他小组的软件被老师痛批，因为他们的软件没有布局，没有排版，就是一系列的控件从上至下依次居中排列，试想你看到这样一款软件还会用吗？所以在大家完成的功能都差不多时，UI 的美化可以帮助你拿到更高的分数！大家也可以看到我们现在的界面也是 low 到爆了吧，那么在后面的版本就会发现我们对整个界面都做出改变（其实这是一个不好的现象，界面重塑之后控件名称的改变会导致你的代码出现 bug，同时重塑界面和调试代码会浪费很多时间（尤其是界面设计），但是对于我们这些非科班同学（小白）来说，这是不可避免的一步【大佬除外！！！】）。

这里就要给大家提出一些我的个人观点：（1）优先开发功能，如果你的功能都不齐全，那么再好看的界面也是白瞎；（2）功能开发完毕后，有剩余时间请一定要美化你的界面，甚至还可以开发老师没要求的功能（当然还是别太卷了 ^ _ ^）。

3. 显示建筑相关信息

现在我开始为大家简介显示建筑相关信息的 UI 界面怎么设计，由于 ui 文件也没保存，所以无法给大家观看在 designer 的设计样式（而且这么 low 的界面设计还是不拿出来展示了，等一下会给出类似的界面供同学参考，后面到新版本的时候就会给大家看看我们的界面构造，所以现在只用听思路，因为前面讲得这些思路都是用在新版本里面的！！！）

1. 当用户上传图片后，预测结束，是不是要有一个文本框来显示此建筑的名字、简介、地址等资料呀，那么这个用什么实现呢（自己想一下）？
   我用的是 Display Widgets 下的 textBrowser，这个文本浏览器里面的内容默认是可以复制，但不可以修改的，那么正好符合我们的预期，即用户不能随意修改我们的介绍，但是对于其中感兴趣的内容可以复制到浏览器搜索。

   
   那么至于我们要显示什么信息，现在可以不同考虑，现在只要有个地方给它放这些文字就可以了！

2. 那么现在只显示文字是不是感觉太单调，所以我们可以加上显示相应建筑的图片！那么继续问一下自己，用什么方法显示图片呢？
   这里给出我的方法：用 Display Widgets 下的 Label 控件，这个控件可以显示所有图片文件（包括动图 .gif）。

   

3. 除了显示建筑图片，我自行添加了显示用户上传的图片，这样用户可以自行对比。

4. UI 设计展示

下面给出简易的设计界面展示（在 designer 中进行设计）：

那么这个界面要怎么和上一篇文章的界面结合起来呢？我当时的设计思路是：当用户上传的图片文件确认后，新打开一个窗口来显示这个新界面（这时我们有两个窗口，一个是打开图片窗口，一个显示建筑信息的窗口），但是这种方法不好，所以就不展示如何实现两个窗口之间的交互，感兴趣的同学自行研究，下面只给出显示界面信息相关的代码供大家学习参考：

注意：由于大家的目录文件和我的不一样，所以复制我的代码运行可能不会显示图片，此时需要同学们自行修改代码中的第 16 行和第 26 行的代码，把 "./images/background/background.jpg" 的图片路径改成你的图片相对路径（或者绝对路径），后期将会介绍如何让计算机自己修改，即与上传图片界面进行交互，同学们也可以自行琢磨，自己尝试一下！

import sys

from PyQt5.QtWidgets import QApplication, QWidget
from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(768, 629)
        self.gridLayout = QtWidgets.QGridLayout(Form)
        self.gridLayout.setObjectName("gridLayout")
        self.label_3 = QtWidgets.QLabel(Form)
        self.label_3.setMaximumSize(QtCore.QSize(500, 300))
        self.label_3.setText("")
        self.label_3.setPixmap(QtGui.QPixmap("./images/background/background.jpg"))
        self.label_3.setScaledContents(True)
        self.label_3.setObjectName("label_3")
        self.gridLayout.addWidget(self.label_3, 0, 0, 1, 1)
        self.textBrowser = QtWidgets.QTextBrowser(Form)
        self.textBrowser.setObjectName("textBrowser")
        self.gridLayout.addWidget(self.textBrowser, 0, 1, 2, 1)
        self.label_2 = QtWidgets.QLabel(Form)
        self.label_2.setMaximumSize(QtCore.QSize(500, 300))
        self.label_2.setText("")
        self.label_2.setPixmap(QtGui.QPixmap("./images/background/background.jpg"))
        self.label_2.setScaledContents(True)
        self.label_2.setObjectName("label_2")
        self.gridLayout.addWidget(self.label_2, 1, 0, 1, 1)

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))
        self.textBrowser.setHtml(_translate("Form",
                                            "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\" \"http://www.w3.org/TR/REC-html40/strict.dtd\">\n"
                                            "<html><head><meta name=\"qrichtext\" content=\"1\" /><style type=\"text/css\">\n"
                                            "p, li { white-space: pre-wrap; }\n"
                                            "</style></head><body style=\" font-family:\'SimSun\'; font-size:9pt; font-weight:400; font-style:normal;\">\n"
                                            "<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\"><span style=\" font-size:12pt;\">待添加建筑相关文字信息...</span></p></body></html>"))


class QmyWidget(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)  # 调用父类构造函数，创建窗体
        self.ui = Ui_Form()  # 创建UI对象
        self.ui.setupUi(self)  # 构造UI界面
        self.setWindowTitle("武汉大学建筑知识系统")  # 设置程序窗口名称


if __name__ == "__main__":
    app = QApplication(sys.argv)
    w = QmyWidget()
    w.show()
    sys.exit(app.exec_())

5. 预告

由于不讲 版本1.0.0 的交互使用，所以继续查找按钮和导航按钮都不讲，导航操作将会在 版本1.1.0 里面介绍，同学们也可以自己想想怎么实现导航操作！

下一篇文章将会介绍 版本1.1.0 的界面设计思路，其实对于重塑界面这种属于重大更新操作，因此版本号应该从 2.0.0 开始命名，但是由于之前没有对这方面做出过多了解，所以这里继续沿用旧代码显示的版本号。那我们下篇文章见~

上一篇文章传送门：【PyQt5 实战项目1】武汉大学建筑知识系统–思路分享2（软件版本1.0.0介绍之打开图片）

下一篇文章传送门：【PyQt5 实战项目1】武汉大学建筑知识系统–思路分享4（软件版本1.1.2介绍之新界面搭建与界面跳转）