人脸识别演示界面：python GUI--tkinter实战（1）

写在前面

     2018年走到尾声，2019年寒假实习和春招的压力扑面而来，在大学象牙塔里待了5年多，虽然计算机专业，但是编程能力弱的可怜。借抱大佬大腿马上要参加的一个比赛，队友已经写好了核心功能，将界面演示的部分交给了我，顺便练习（ru men）一下python的界面编程。由于所选模型底层库的调用和模型框架必须使用python2，所以界面GUI库的选择有很大局限性，这里选择了python自带的tkinter库，无需安装，简单快速，python2/3兼容，只需要更改一下一些名称就可以移植使用。但是最大的缺点就是丑！除了丑还是丑。这里简单记录一下tkinter库的使用，如果写的不够准确还请多多指正。

一、tkinter基础知识

Tkinter：Tkinter 模块(Tk 接口)是 Python 的标准 Tk GUI 工具包的接口 .Tk 和 Tkinter 可以在大多数的 Unix 平台下使用,同样可以应用在 Windows 和 Macintosh 系统里。Tk8.0 的后续版本可以实现本地窗口风格,并良好地运行在绝大多数平台中。在本文中尽量列出在python2/3中的不同之处。

1、调用

导入tkinter模块：

import tkinter #python 3

import Tkinter #python 2

导入tkinter库：

from Tkinter import * #python 2

from tkinter import * #python 3

在其他模块的调用中也有不同，后续会详细介绍。

2、基本结构

·导入 Tkinter 模块

·创建控件

·指定这个控件的 master， 即这个控件属于哪一个

·告诉 GM(geometry manager) 有一个控件产生了。

import Tkinter

top = Tkinter.Tk()

#创建控件、指定master、告诉master控件产生

# 进入消息循环

top.mainloop()

3、Tkinter 组件

 Tkinter的提供各种控件，如按钮，标签和文本框，一个GUI应用程序中使用。这些控件通常被称为控件或者部件。目前有15种Tkinter的部件，具体可以参见链接查看详细参数。

组件有部分共同属性，也有各自的特有属性，在规定一个控件的属性时要注意不能混用。

4、几何管理

几何管理简单来说就是一个画布的版面，规定了各个控件所在区域的位置，几何管理方式有三种：包（pack）、网格（grid）、位置（place）。针对同一个GM不能混用几何管理，而且tkinter会自动进行大小缩放等操作，所以必须不断调整参数得到满意的布局。（无法实时地进行可视化编程真是逼死强迫症，你以为的布局和呈现的布局总是不同的）

·包：作为最基本简单的管理方法，只需要给出方位的大体位置和控件是否延伸等参数即可完成自动的对齐，如果创建的控件比较简单就可以使用此方法。

·网格：如果控件比较复杂，最终呈现的效果是整齐的，可以使用网格管理，只需要告诉控件需要放在第几行第几列即可。

·位置：如果前两者的布局仍然无法满足花式控件的摆放需求，那么就计算一下当下GM大小，给出准确的位置吧。规定好控件大小和具体摆放坐标（先在纸上画好，算好...）再不断运行看看输出效果再调整。

二、解决思路

在本部分将介绍如何使用tkinter完成一个基本的人脸识别界面呈现的思路。

1、设计目标

我们的基本需求如下：

用户选择想得到分类的人脸图片，显示在界面中，通过点击原始模型和修改后模型的按钮得到分类结果和置信度；将人脸图片添加一些扰动，显示扰动后的效果图，再次放入两个模型中得到预测结果。得到四组分类结果和置信度，可以进行对比，看出模型的性能以及扰动的效果。

具体需求拆分如下：

1、用户可以直接选择本地图片和摄像头现场拍照进行人脸识别的数据源。

2、对于选择后的图片进行显示，如果是本地照片将给出图片标签，截图照片显示截图日期作为图片标签。

3、显示在原始模型和修改模型中运行后的分类结果和置信度。

4、在所选图片上选择要添加的扰动（图片标记）。

5、显示触发器和所选照片合成后的效果图。

6、将合成图片在原始模型和修改模型中进行预测，并给出分类结果和置信度。

2、布局效果图

根据上述需求，绘制出理想的界面效果图：

图一:界面理想效果图

3、控件布局

如图一所示：

7个按钮控件（Button），供用户选择，其中3按钮需要出现弹窗（filedialog）：选择文件（get_file）、拍照截图（shot_pic）、选择扰动（get_trg）；

5个标签控件（Label），其中2个用于显示图片，三个分别显示图片标签、分类结果、置信度；

8个输入控件（Entry），用于输出从后台模型中获取的分类结果和置信度的值。

由于控件较多，而且希望尽量整齐，这里选用grid（）几何布局来规划控件的位置，可以在Excel里标记各个控件的大体位置，方便标注行列值：

图二：grid（）布局行列值

由于tkinter的布局会自行进行调整，所以这个demo的运行结果并不理想，比如按钮之间的间距，整个面板在窗口的位置，还有，最想要的背景图片！在修改了无数版的布局以后，最终呈现的效果如下：

图三：最终运行效果图

看到这里是不是已经觉得可以右上角小叉叉退出了？绞尽脑汁搜索配色方案，依然拯救不了tkinter呈现的效果，理想和现实的差距隔了十万八千里。会在后面的细节中详细介绍可以优化的细节参数。

先暂时总结强调一下tkinter不能做到的：

（1）tkinter的几何布局不能混用：所以当我们使用了grid（）进行控件布局以后，无法采用pack（）进行填充背景图片，因此多彩炫酷的背景图没有了，只能填充一下基本的纯色；而且为了使主体功能区域处于整个窗口的中央，留下来的grid布局空白处，其实会被tkinter自行调节吞掉，不会有合适的留白，只能通过慢慢调整空间边距获得一些空白；

（2）控件不能选择透明度：在tkinter中，想要调整透明度就得针对整个生成窗口进行操作，无法改变部分控件的透明度，也就没有了扁平化的按钮和好看的文本显示框。（题外话：当生成一个完全透明的，隐藏标题栏的窗口时，会发生什么？）

（3）对于插入图片的格式有严格要求：tkinter自己只认gif，而且将jpg和png强制转换成gif也是无法识别的，想扩展这个，装pillow库实现，调用语句：

from PIL import Image, ImageTk

看到此处，一定破灭了梦想，如果不是因为只能用python2，还是去尝试pyqt写界面吧。下一篇文章将每个模块的具体实现进行代码描述，而且会针对如何调用摄像头实现截图进行详细介绍！

see you again~

参考链接：

Python GUI 编程(Tkinter) | 菜鸟教程

Python Tkinter GUI(三)显示图片 - 小飞飞的博客 - CSDN博客