5.2-GUI界面开发与IDE使用《智能机器人技术应用》

项目五小型柔性智能制造案例创灵实验平台GUI界面开发与IDE使用任务二职业能力目标01任务描述与要求02任务分析与计划03知识储备04任务实施05任务检查与评价06任务小结07任务拓展08任务二

GUI界面开发与IDE使用掌握UI布局设计；了解并学习小柔智能制造UI界面设计；掌握PyCharmIDE基本使用，并学习使用PyCharm开发项目；了解QtDesigner，在PyCharm上安装QtDesigner；掌握并能够使用QtDesigner设计PyQt5界面。了解工业自动分拣系统需求；掌握工业生产制造自动分拣系统功能模块分析；掌握工业生产制造自动分拣系统功能模块详细设计。职业能力目标01实验目的实验内容职业能力目标01任务描述与要求02任务分析与计划03知识储备04任务实施05任务检查与评价06任务小结07任务拓展08任务二

GUI界面开发与IDE使用要求同学们掌握UI布局设计，了解并学习小柔智能制造UI界面设计；掌握PyCharmIDE基本使用，并学习使用PyCharm开发项目；了解QtDesigner，在PyCharm上安装QtDesigner；掌握并能够使用QtDesigner设计PyQt5界面。任务描述任务要求了解工业自动分拣系统需求，设计对应的需求分析；安装PycharmIDE，完成基础实验；在Pycharm上安装QtDesigner、PyUIC；掌握工业生产制造自动分拣系统功能模块详细设计。任务描述与要求02职业能力目标01任务描述与要求02任务分析与计划03知识储备04任务实施05任务检查与评价06任务小结07任务拓展08任务二

GUI界面开发与IDE使用任务分析思考一下在未来，在我们学习了解完本章知识后，我们可以如何对GUI界面的视觉效果进行优化？根据自己的了解，要怎样去了解认识GUI与IDE，可以促进自己进一步地学习？任务分析与计划03任务计划表项目名称创灵实验平台任务名称GUI界面开发与IDE使用计划方式自主设计计划要求请用6个计划步骤来完整描述出如何完成本次任务序号任务计划1

2

3

4

5

6

通过上面的思考，你是否对本任务要完成的工作有所了解？让我们一起来制订完成本次任务的实施计划吧！任务分析与计划03职业能力目标01任务描述与要求02任务分析与计划03知识储备04任务实施05任务检查与评价06任务小结07任务拓展08任务二

GUI界面开发与IDE使用PyCharmIDE基本使用204知识储备配置界面设置1配置界面设置04通过前面的软件设计部分的任务，我们知道，小柔智能制造项目中有一个很重要的功能是参数配置，这些参数在对机器的安装调试以及出现故障进行调试定位来说非常关键，那么，这部分界面都包含哪些部分呢？配置界面设置041.坐标校准：小柔智能制造中使用的是通过计算机视觉进行物体的识别与定位，那么就需要将图像中的位置转换成现实世界的真实位置，在转换过程中我们需要通过固定一个图像与真实的世界的相对位置，通过这个固定的位置，就可以实现在固定参数下的的坐标值转换，这部分在后面的“机械臂控制模块与传送带”任务部分，我们会详细介绍，这部分转换是如何实现。配置界面设置04

在参数设置中我们需要这样的一个功能，将摄像头固定到指定位置上，我们把它称为“坐标校准”，那么在界面设置上，我们该如何设计呢？首先，如果我们要知道坐标校准的过程，通过上面的简单介绍，我们知道，坐标校准的过程实际上是调整摄像头的位置，使其到达一个指定位置，实际校准过程是在图像中我们指定了3个点，这3点要与实际位置上3点重合，即可确定摄像的位置到达正确位置。所以，坐标校准过程中需要有视频显示，来实时显示摄像头是否调整到位。通过上面的分析，我们知道，在这部分界面上需要有一个显示视频的地方。最终设计的效果如下图：配置界面设置04配置界面设置042.网络设置：在设备出现故障时候，维护人员需要通过ssh协议登录到系统上进行维护，那么就需要对设备的网络地址进行配置，这样就需要有能进行网络配置的界面。根据网络类型，配置的网络类型有以太网络、wifi网络，而配置的内容，则是网络配置中的基本参数，最终的设计效果如下：配置界面设置043.参数设置：对于一些是固定位置，机械臂需要按固定位置进行抓取与放置的操作来说，这里的坐标位置可以将其设置成可调整参数，这样就可以根据不同的环境可能位置上会稍微有些差别，就不需要修改代码来完成，直接通过修改界面上的参数即可完成。另一方面，小柔智能制造中用到两个机械，那么位置放错是否还需要重新放，我们可以设置一个在软件上进行机械臂的位置置换的方法，而这部分也可以放置在参数设置上。通过上述分析，最终的设计效果如下：05任务实施PyCharmIDE基本使用2配置界面设置1304什么是PyCharmIDE？

在介绍PyCharm之前，我们首先来看下什么是IDE,IDE全称IntegratedDevelopmentEnvironment,即集成开发环境，是为开发者而设计的开发工具，使用IDE工具可以很方便进行开发代码调试，在工具里可以以插件的形式集成各种开发工具。PyCharm是由JetBrains打造的一款PythonIDE，适合Python开发人群，进行Python软件开发与代码调试。04window10安装PyCharm步骤一：下载安装包：官网：/pycharm/下载网址：/pycharm/download/#section=windows04window10安装PyCharm步骤二：安装软件双击下载的安装包，选择模块工具，完成安装。职业能力目标01任务描述与要求02任务分析与计划03知识储备04任务实施05任务检查与评价06任务小结07任务拓展08任务二

GUI界面开发与IDE使用05任务实施QtDesigner设计GUI界面2使用PyCharm开发项目1GUI界面控制机械臂功能实现3使用PyCharm开发项目1.创建工程：步骤一：打开PyCharm点击菜单键File，菜单选择NewProject。使用PyCharm开发项目1.创建工程：步骤二：选择PurePython然后根据实际情况选择工程项目路径，配置环境，如下图：使用PyCharm开发项目1.创建工程：步骤三：点击create创建项目。使用PyCharm开发项目2.编写代码：步骤四：选择工程项目，鼠标右键，选择New选择PythonFile。使用PyCharm开发项目2.编写代码：步骤五：编写Python代码。使用PyCharm开发项目动手实验：根据上面教程在PC上安装PyCharm，使用PyCharm创建一个名为robot的工程目录，并在工程下面创建一个app.py并创建一个start函数，函数功能是打印“HelloRobot”。若无法自行成功安装QtDesigner+PyUIC，可以仿照10.QtDesigner设计GUI界面下述步骤使用我们提供的环境进行安装学习。05任务实施213使用PyCharm开发项目QtDesigner设计GUI界面GUI界面控制机械臂功能实现QtDesigner设计GUI界面1.QtDesigner：在PyQt中编写UI界面可以直接通过代码来实现，也可以通过QtDesigner来完成。QtDesigner的设计符合MVC的架构，其实现了视图和逻辑的分离，从而实现了开发的便捷。QtDesigner中的操作方式十分灵活，其通过拖拽的方式放置控件可以随时查看控件效果。QtDesigner生成的.ui文件（实质上是XML格式的文件）也可以通过pyuic5工具转换成.py文件。QtDesigner随PyQt5-tools包一起安装(安装方法pipinstall-i/simplepyqt5-tools)，其安装路径在“Python安装路径\Lib\site-packages\qt5_applications\Qt\bin”下。QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：正常QtDesigner包含在PyQt5-tools中，如果没有就通过pipinstall-i/simplepyqt5-tools进行安装，但是我们这里使用PyCharm集成开发环境，所以直接通过PyCharm安装，打开PyCharm，安装方法如下图：步骤一：选中CreateNewProject，创建新项目。QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤二：选中菜单（点击File，选中设置setting）。QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤三：选中ProjectInterpreter，并点击右侧“加号”，下载对应安装包。QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤四：修改pycharm下载源/simple/安装对应安装包： 修改python下载源Url：QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤五：修改完成点击ok按钮。QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤六：点击刷新按钮更新下载源。QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤七：下载一个pyqt5，若版本不同的，可以通过勾选Specifyversion，来进行版本选择。QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤八：下载一个pyqt5-tools工具包。QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤九：再下载一个pyuic5-tools工具包。QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤十：开始工具配置，添加所需工具。QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤十一：找到PyQt5-Tool安装包路径，如下图：QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤十二：在Program栏选择designer.exe。在Workingdirectory栏填入$ProjectFileDir$。QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤十三：在Python包安装目录找到pyuic.exe文件所在目录，如下图：QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤十四：填入Program，在Arguments处填入$FileName$-o$FileNameWithoutExtension$.py,Workingdirectory填入`$ProjectFileDir$`即可：QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：步骤十五：填入$ProjectFileDir$。QtDesigner设计GUI界面2.PyCharm安装配置QtDesigner：动手实验：根据上面教程在PyCharm上安装QtDesigner+PyUIC。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：步骤一：下载UI资源包，后面设计界面样式将会用到。步骤二：1）.打开QtDesigner创建一个主窗口。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：2）.打开WidgetBox工具栏，在工具栏上点击“视图”将“WidgetBox”勾选上。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：步骤三：给主窗口页面添加背景图片。操作方法：1）.打开属性编辑器，2）.选择主窗口，在属性编辑器找到“styleSheet”，如图。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：步骤三：给主窗口页面添加背景图片。操作方法：1）.打开属性编辑器，2）.选择主窗口，在属性编辑器找到“styleSheet”，如图。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：3）.打开“styleSheet”导入下载的UI资源包中的color.qrc文件。添加qrc资源文件： 导入qrc文件：QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：导入color.qrc：

完成：QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：4）.给主窗口添加背景图片。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：1.点击OK： 2.为了让背景图只作用于主窗口，将样式修改如右图图所示： QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：创灵实验平台显示界面：注意，添加背景后可能窗口的尺寸与背景图片尺寸不一致，此时可以通过拖拽右下方将主窗口拖拽到与背景图片一致的尺寸！QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：步骤四：1）.添加开始按钮、停止按钮、坐标校准与设置按钮：QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：1.双击设置按钮： 2.选择所需按钮：QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：2）.双击按钮，去掉上面的PushButton字体。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：3）.其他按钮以此类推。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：步骤五：1）.添加视频显示容器与日志输出容器；2）.选择label控件，放置在主窗口的视频显示位置。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：将视频界面放在显示位置：QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：3）.选择textBrowser控件，放置在主窗口的日志显示位置。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：放置成功后选择StyleSheet：QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：4）.将textBrowser控件的背景样式，修改为如下图所示：QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：步骤六：导出.ui文件。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：步骤七：.ui文件转.py1）.PyQt5安装成功后，pyuic5也会默认随着安装，可以尝试在cmd命令窗口输入pyuic5-h查看命令是否可以正常使用。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：2）.如果在cmd窗口下找不到该命令，则有可能是环境变量没正确引入，找到Python安装目录的Scripts下看是否有pyuic5.exe，如果有，说明包是正常安装，则只需要将Python安装目录的Scripts添加到环境变量中，如：D:\app\python3.6\Scripts。3）.在上面保存的ColorBlock.ui文件所在目录下，打开cmd或PowerShell,然后执行命令，命令行如下：QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：4）.执行完后，可以看到在ui文件所在的目录下生成了【ColorBlock.py】文件。QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：5）.也可以使用PyCharm上安装的PyUIC进行转换，如下图方式：QtDesigner设计GUI界面3.使用QtDesigner设计Qt界面：动手实验：根据上面教程在PC上根据UI设计，完成小柔智能制造操作界面的主界面Qt设计，并生成.ui和对应的.py文件。05任务实施213使用PyCharm开发项目QtDesigner设计GUI界面GUI界面控制机械臂功能实现GUI界面控制机械臂功能实现步骤一：1）.将资源文件color.qrc转成.py文件：GUI界面控制机械臂功能实现2）.选择在此处打开PowerShell，执行命令【pyrcc5-ocolor_rc.pycolor.qrc】生成【color_rc.py】文件，如下图所示：GUI界面控制机械臂功能实现步骤二：编写逻辑代码1）.UI代码说明：使用PyCharm打开前面设计后转成.py的UI文件【ColorBlock.py】文件使用PyCharm在同级目录下，创建文件名为【app.py】的文件，如下图所示：GUI界面控制机械臂功能实现2）.键入如下代码：（此处请参照Jupyter中）GUI界面控制机械臂功能实现3）.点击运行。GUI界面控制机械臂功能实现4）.点击GUI界面的开始按钮：GUI界面控制机械臂功能实现5）.PyCharm控制窗口输出上面定义函数的内容。职业能力目标01任务描述与要求02任务分析与计划03知识储备04任务实施05任务检查与评价06任务小结07任务拓展08任务二

GUI界面开发与IDE使用任务检查与评价06序号评价内容评价标准分值得分1知识运用（20%）掌握相关理论知识，理解本次任务要求，制定详细计划，计划条理清晰，逻辑正确（20分）20分

理解相关理论知识，能根据本次任务要求、制定合理计划（15分）了解相关理论知识，有制定计划（10分）无制定计划（0分）2专业技能（40%）Pycharm成功创建工程，学会用QtDesig