黑色的dos窗口对于大部分来说，页面极为不友好，且操作不方便，因此本篇主要讲讲如何结合QtDesigner创建一个UI并初步与串口Api链接。
QtDesigner进行上位机页面设计
Python下的软件页面设计推荐使用Pyqt5，相关的介绍和环境安装参见往期内容。
1. 打开QtDesigner软件，新建窗口，通过拖拖拽拽创建一个最基础功能的界面。小技巧：用group组件将同一类元素放在同一个组中，即美观，又方便查找
2. 设置界Group中通过ComboBox创建串口号与波特率的下拉选择。
3. 调试信息Group则为ListWidget控件，用于展示过程的提示，方便问题定位。
4. 数据的发送与接收Group则加上了hex与否的选择框，方便查看原始十六进制数据
如上图，搭建好页面后，根据往期文章的设置方法，直接在Pycharm中生成UI的py文件。
生成后的Py代码只是一个页面相关的类，所以还需要创建一个主程序，import 生成的页面代码文件，创建对象并实例化。
这样我们就能实例化页面，并让我们的程序不再是黑框的cmd窗口啦。
串口操作事件关联-自动搜索可用串口
有了页面以后，接下来我们就要将页面的各个组件与serial库的操作API相关联了。首先来看看如何动态识别电脑可用端口与打开端口。
USB转串口映射到电脑设备管理器的COM口存在一定的随机性，有可能到COM30+，如果COM下拉选择从1-30，则显得不够智能而且每次都需要打开设备管理器确认。
所以大部分串口调试助手都有动态自动更新可用串口的功能。所以咱们也得跟上才行。实现方法如下：
- 在serial类中导入serial.tools.list_ports
- 使用serial.tools.list_ports.comports()接口获取可用端口。不妨先用下述代码测试一下
- 与页面绑定，为了不破坏自动生成的代码结构，我们在UI代码中创建一个新函数，专门用于自定义的页面设置与更新。此代码会在第一次打开上位机时执行。
串口操作事件关联-串口打开与收发
解决了串口自动搜索，接下来该与Open与收发事件相关联。在选定了串口号以后，通过点击打开按钮，将串口打开或者关闭。因此我们需要将按钮的点击事件注册关联。
- 首先加入初始化函数，创建一个空对象用于后续关联串口引擎。注：__init__()为python类的关键字，在类创建时会自动执行；另外从编码规范来说，不建议在__init__()之外定义类的成员.
- 将按键的click事件关联到一个自定义事件函数，函数内容根据操作需求再行细化
操作层面的详细需求如下：
- 在未打开任何串口之前，允许用户打开
- 如果当前时刻已经有串口打开了，则该按钮文本应变换为“关闭”
- 如果打开失败，还应该有提示信息
代码如下：
接下来参照前面一期内容，关联发送与接收事件。
下面动图为初步效果。
总结
本篇主要介绍了上位机UI设计以及如何与serial相关操作进行关联。
为了展示初学状态，所以代码写的比较随意凌乱。相信大部分人刚接触Python时，状况类似。
下一讲中，我会基于此版本程序，讲讲如何对代码进行优化以及新增Hex格式的收发显示。
关注公众号，获取更多干货哦。
作者：跨界程序员Vincent
