項目五小型柔性智能制造案例創(chuàng)靈實驗平臺GUI界面開發(fā)與IDE使用任務(wù)二職業(yè)能力目標(biāo)01任務(wù)描述與要求02任務(wù)分析與計劃03知識儲備04任務(wù)實施05任務(wù)檢查與評價06任務(wù)小結(jié)07任務(wù)拓展08任務(wù)二

GUI界面開發(fā)與IDE使用掌握UI布局設(shè)計；了解并學(xué)習(xí)小柔智能制造UI界面設(shè)計；掌握PyCharmIDE基本使用，并學(xué)習(xí)使用PyCharm開發(fā)項目；了解QtDesigner，在PyCharm上安裝QtDesigner；掌握并能夠使用QtDesigner設(shè)計PyQt5界面。了解工業(yè)自動分揀系統(tǒng)需求；掌握工業(yè)生產(chǎn)制造自動分揀系統(tǒng)功能模塊分析；掌握工業(yè)生產(chǎn)制造自動分揀系統(tǒng)功能模塊詳細(xì)設(shè)計。職業(yè)能力目標(biāo)01實驗?zāi)康膶嶒瀮?nèi)容職業(yè)能力目標(biāo)01任務(wù)描述與要求02任務(wù)分析與計劃03知識儲備04任務(wù)實施05任務(wù)檢查與評價06任務(wù)小結(jié)07任務(wù)拓展08任務(wù)二

GUI界面開發(fā)與IDE使用要求同學(xué)們掌握UI布局設(shè)計，了解并學(xué)習(xí)小柔智能制造UI界面設(shè)計；掌握PyCharmIDE基本使用，并學(xué)習(xí)使用PyCharm開發(fā)項目；了解QtDesigner，在PyCharm上安裝QtDesigner；掌握并能夠使用QtDesigner設(shè)計PyQt5界面。任務(wù)描述任務(wù)要求了解工業(yè)自動分揀系統(tǒng)需求，設(shè)計對應(yīng)的需求分析；安裝PycharmIDE，完成基礎(chǔ)實驗；在Pycharm上安裝QtDesigner、PyUIC；掌握工業(yè)生產(chǎn)制造自動分揀系統(tǒng)功能模塊詳細(xì)設(shè)計。任務(wù)描述與要求02職業(yè)能力目標(biāo)01任務(wù)描述與要求02任務(wù)分析與計劃03知識儲備04任務(wù)實施05任務(wù)檢查與評價06任務(wù)小結(jié)07任務(wù)拓展08任務(wù)二

GUI界面開發(fā)與IDE使用任務(wù)分析思考一下在未來，在我們學(xué)習(xí)了解完本章知識后，我們可以如何對GUI界面的視覺效果進(jìn)行優(yōu)化？根據(jù)自己的了解，要怎樣去了解認(rèn)識GUI與IDE，可以促進(jìn)自己進(jìn)一步地學(xué)習(xí)？任務(wù)分析與計劃03任務(wù)計劃表項目名稱創(chuàng)靈實驗平臺任務(wù)名稱GUI界面開發(fā)與IDE使用計劃方式自主設(shè)計計劃要求請用6個計劃步驟來完整描述出如何完成本次任務(wù)序號任務(wù)計劃1

2

3

4

5

6

通過上面的思考，你是否對本任務(wù)要完成的工作有所了解？讓我們一起來制訂完成本次任務(wù)的實施計劃吧！任務(wù)分析與計劃03職業(yè)能力目標(biāo)01任務(wù)描述與要求02任務(wù)分析與計劃03知識儲備04任務(wù)實施05任務(wù)檢查與評價06任務(wù)小結(jié)07任務(wù)拓展08任務(wù)二

GUI界面開發(fā)與IDE使用PyCharmIDE基本使用204知識儲備配置界面設(shè)置1配置界面設(shè)置04通過前面的軟件設(shè)計部分的任務(wù)，我們知道，小柔智能制造項目中有一個很重要的功能是參數(shù)配置，這些參數(shù)在對機(jī)器的安裝調(diào)試以及出現(xiàn)故障進(jìn)行調(diào)試定位來說非常關(guān)鍵，那么，這部分界面都包含哪些部分呢？配置界面設(shè)置041.坐標(biāo)校準(zhǔn)：小柔智能制造中使用的是通過計算機(jī)視覺進(jìn)行物體的識別與定位，那么就需要將圖像中的位置轉(zhuǎn)換成現(xiàn)實世界的真實位置，在轉(zhuǎn)換過程中我們需要通過固定一個圖像與真實的世界的相對位置，通過這個固定的位置，就可以實現(xiàn)在固定參數(shù)下的的坐標(biāo)值轉(zhuǎn)換，這部分在后面的“機(jī)械臂控制模塊與傳送帶”任務(wù)部分，我們會詳細(xì)介紹，這部分轉(zhuǎn)換是如何實現(xiàn)。配置界面設(shè)置04

在參數(shù)設(shè)置中我們需要這樣的一個功能，將攝像頭固定到指定位置上，我們把它稱為“坐標(biāo)校準(zhǔn)”，那么在界面設(shè)置上，我們該如何設(shè)計呢？首先，如果我們要知道坐標(biāo)校準(zhǔn)的過程，通過上面的簡單介紹，我們知道，坐標(biāo)校準(zhǔn)的過程實際上是調(diào)整攝像頭的位置，使其到達(dá)一個指定位置，實際校準(zhǔn)過程是在圖像中我們指定了3個點，這3點要與實際位置上3點重合，即可確定攝像的位置到達(dá)正確位置。所以，坐標(biāo)校準(zhǔn)過程中需要有視頻顯示，來實時顯示攝像頭是否調(diào)整到位。通過上面的分析，我們知道，在這部分界面上需要有一個顯示視頻的地方。最終設(shè)計的效果如下圖：配置界面設(shè)置04配置界面設(shè)置042.網(wǎng)絡(luò)設(shè)置：在設(shè)備出現(xiàn)故障時候，維護(hù)人員需要通過ssh協(xié)議登錄到系統(tǒng)上進(jìn)行維護(hù)，那么就需要對設(shè)備的網(wǎng)絡(luò)地址進(jìn)行配置，這樣就需要有能進(jìn)行網(wǎng)絡(luò)配置的界面。根據(jù)網(wǎng)絡(luò)類型，配置的網(wǎng)絡(luò)類型有以太網(wǎng)絡(luò)、wifi網(wǎng)絡(luò)，而配置的內(nèi)容，則是網(wǎng)絡(luò)配置中的基本參數(shù)，最終的設(shè)計效果如下：配置界面設(shè)置043.參數(shù)設(shè)置：對于一些是固定位置，機(jī)械臂需要按固定位置進(jìn)行抓取與放置的操作來說，這里的坐標(biāo)位置可以將其設(shè)置成可調(diào)整參數(shù)，這樣就可以根據(jù)不同的環(huán)境可能位置上會稍微有些差別，就不需要修改代碼來完成，直接通過修改界面上的參數(shù)即可完成。另一方面，小柔智能制造中用到兩個機(jī)械，那么位置放錯是否還需要重新放，我們可以設(shè)置一個在軟件上進(jìn)行機(jī)械臂的位置置換的方法，而這部分也可以放置在參數(shù)設(shè)置上。通過上述分析，最終的設(shè)計效果如下：05任務(wù)實施PyCharmIDE基本使用2配置界面設(shè)置1304什么是PyCharmIDE？

在介紹PyCharm之前，我們首先來看下什么是IDE,IDE全稱IntegratedDevelopmentEnvironment,即集成開發(fā)環(huán)境，是為開發(fā)者而設(shè)計的開發(fā)工具，使用IDE工具可以很方便進(jìn)行開發(fā)代碼調(diào)試，在工具里可以以插件的形式集成各種開發(fā)工具。PyCharm是由JetBrains打造的一款PythonIDE，適合Python開發(fā)人群，進(jìn)行Python軟件開發(fā)與代碼調(diào)試。04window10安裝PyCharm步驟一：下載安裝包：官網(wǎng)：/pycharm/下載網(wǎng)址：/pycharm/download/#section=windows04window10安裝PyCharm步驟二：安裝軟件雙擊下載的安裝包，選擇模塊工具，完成安裝。職業(yè)能力目標(biāo)01任務(wù)描述與要求02任務(wù)分析與計劃03知識儲備04任務(wù)實施05任務(wù)檢查與評價06任務(wù)小結(jié)07任務(wù)拓展08任務(wù)二

GUI界面開發(fā)與IDE使用05任務(wù)實施QtDesigner設(shè)計GUI界面2使用PyCharm開發(fā)項目1GUI界面控制機(jī)械臂功能實現(xiàn)3使用PyCharm開發(fā)項目1.創(chuàng)建工程：步驟一：打開PyCharm點擊菜單鍵File，菜單選擇NewProject。使用PyCharm開發(fā)項目1.創(chuàng)建工程：步驟二：選擇PurePython然后根據(jù)實際情況選擇工程項目路徑，配置環(huán)境，如下圖：使用PyCharm開發(fā)項目1.創(chuàng)建工程：步驟三：點擊create創(chuàng)建項目。使用PyCharm開發(fā)項目2.編寫代碼：步驟四：選擇工程項目，鼠標(biāo)右鍵，選擇New選擇PythonFile。使用PyCharm開發(fā)項目2.編寫代碼：步驟五：編寫Python代碼。使用PyCharm開發(fā)項目動手實驗：根據(jù)上面教程在PC上安裝PyCharm，使用PyCharm創(chuàng)建一個名為robot的工程目錄，并在工程下面創(chuàng)建一個app.py并創(chuàng)建一個start函數(shù)，函數(shù)功能是打印“HelloRobot”。若無法自行成功安裝QtDesigner+PyUIC，可以仿照10.QtDesigner設(shè)計GUI界面下述步驟使用我們提供的環(huán)境進(jìn)行安裝學(xué)習(xí)。05任務(wù)實施213使用PyCharm開發(fā)項目QtDesigner設(shè)計GUI界面GUI界面控制機(jī)械臂功能實現(xiàn)QtDesigner設(shè)計GUI界面1.QtDesigner：在PyQt中編寫UI界面可以直接通過代碼來實現(xiàn)，也可以通過QtDesigner來完成。QtDesigner的設(shè)計符合MVC的架構(gòu)，其實現(xiàn)了視圖和邏輯的分離，從而實現(xiàn)了開發(fā)的便捷。QtDesigner中的操作方式十分靈活，其通過拖拽的方式放置控件可以隨時查看控件效果。QtDesigner生成的.ui文件（實質(zhì)上是XML格式的文件）也可以通過pyuic5工具轉(zhuǎn)換成.py文件。QtDesigner隨PyQt5-tools包一起安裝(安裝方法pipinstall-i/simplepyqt5-tools)，其安裝路徑在“Python安裝路徑\Lib\site-packages\qt5_applications\Qt\bin”下。QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：正常QtDesigner包含在PyQt5-tools中，如果沒有就通過pipinstall-i/simplepyqt5-tools進(jìn)行安裝，但是我們這里使用PyCharm集成開發(fā)環(huán)境，所以直接通過PyCharm安裝，打開PyCharm，安裝方法如下圖：步驟一：選中CreateNewProject，創(chuàng)建新項目。QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟二：選中菜單（點擊File，選中設(shè)置setting）。QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟三：選中ProjectInterpreter，并點擊右側(cè)“加號”，下載對應(yīng)安裝包。QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟四：修改pycharm下載源/simple/安裝對應(yīng)安裝包： 修改python下載源Url：QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟五：修改完成點擊ok按鈕。QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟六：點擊刷新按鈕更新下載源。QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟七：下載一個pyqt5，若版本不同的，可以通過勾選Specifyversion，來進(jìn)行版本選擇。QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟八：下載一個pyqt5-tools工具包。QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟九：再下載一個pyuic5-tools工具包。QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟十：開始工具配置，添加所需工具。QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟十一：找到PyQt5-Tool安裝包路徑，如下圖：QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟十二：在Program欄選擇designer.exe。在Workingdirectory欄填入$ProjectFileDir$。QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟十三：在Python包安裝目錄找到pyuic.exe文件所在目錄，如下圖：QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟十四：填入Program，在Arguments處填入$FileName$-o$FileNameWithoutExtension$.py,Workingdirectory填入`$ProjectFileDir$`即可：QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：步驟十五：填入$ProjectFileDir$。QtDesigner設(shè)計GUI界面2.PyCharm安裝配置QtDesigner：動手實驗：根據(jù)上面教程在PyCharm上安裝QtDesigner+PyUIC。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：步驟一：下載UI資源包，后面設(shè)計界面樣式將會用到。步驟二：1）.打開QtDesigner創(chuàng)建一個主窗口。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：2）.打開WidgetBox工具欄，在工具欄上點擊“視圖”將“WidgetBox”勾選上。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：步驟三：給主窗口頁面添加背景圖片。操作方法：1）.打開屬性編輯器，2）.選擇主窗口，在屬性編輯器找到“styleSheet”，如圖。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：步驟三：給主窗口頁面添加背景圖片。操作方法：1）.打開屬性編輯器，2）.選擇主窗口，在屬性編輯器找到“styleSheet”，如圖。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：3）.打開“styleSheet”導(dǎo)入下載的UI資源包中的color.qrc文件。添加qrc資源文件： 導(dǎo)入qrc文件：QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：導(dǎo)入color.qrc：

完成：QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：4）.給主窗口添加背景圖片。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：1.點擊OK： 2.為了讓背景圖只作用于主窗口，將樣式修改如右圖圖所示： QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：創(chuàng)靈實驗平臺顯示界面：注意，添加背景后可能窗口的尺寸與背景圖片尺寸不一致，此時可以通過拖拽右下方將主窗口拖拽到與背景圖片一致的尺寸！QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：步驟四：1）.添加開始按鈕、停止按鈕、坐標(biāo)校準(zhǔn)與設(shè)置按鈕：QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：1.雙擊設(shè)置按鈕： 2.選擇所需按鈕：QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：2）.雙擊按鈕，去掉上面的PushButton字體。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：3）.其他按鈕以此類推。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：步驟五：1）.添加視頻顯示容器與日志輸出容器；2）.選擇label控件，放置在主窗口的視頻顯示位置。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：將視頻界面放在顯示位置：QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：3）.選擇textBrowser控件，放置在主窗口的日志顯示位置。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：放置成功后選擇StyleSheet：QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：4）.將textBrowser控件的背景樣式，修改為如下圖所示：QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：步驟六：導(dǎo)出.ui文件。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：步驟七：.ui文件轉(zhuǎn).py1）.PyQt5安裝成功后，pyuic5也會默認(rèn)隨著安裝，可以嘗試在cmd命令窗口輸入pyuic5-h查看命令是否可以正常使用。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：2）.如果在cmd窗口下找不到該命令，則有可能是環(huán)境變量沒正確引入，找到Python安裝目錄的Scripts下看是否有pyuic5.exe，如果有，說明包是正常安裝，則只需要將Python安裝目錄的Scripts添加到環(huán)境變量中，如：D:\app\python3.6\Scripts。3）.在上面保存的ColorBlock.ui文件所在目錄下，打開cmd或PowerShell,然后執(zhí)行命令，命令行如下：QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：4）.執(zhí)行完后，可以看到在ui文件所在的目錄下生成了【ColorBlock.py】文件。QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：5）.也可以使用PyCharm上安裝的PyUIC進(jìn)行轉(zhuǎn)換，如下圖方式：QtDesigner設(shè)計GUI界面3.使用QtDesigner設(shè)計Qt界面：動手實驗：根據(jù)上面教程在PC上根據(jù)UI設(shè)計，完成小柔智能制造操作界面的主界面Qt設(shè)計，并生成.ui和對應(yīng)的.py文件。05任務(wù)實施213使用PyCharm開發(fā)項目QtDesigner設(shè)計GUI界面GUI界面控制機(jī)械臂功能實現(xiàn)GUI界面控制機(jī)械臂功能實現(xiàn)步驟一：1）.將資源文件color.qrc轉(zhuǎn)成.py文件：GUI界面控制機(jī)械臂功能實現(xiàn)2）.選擇在此處打開PowerShell，執(zhí)行命令【pyrcc5-ocolor_rc.pycolor.qrc】生成【color_rc.py】文件，如下圖所示：GUI界面控制機(jī)械臂功能實現(xiàn)步驟二：編寫邏輯代碼1）.UI代碼說明：使用PyCharm打開前面設(shè)計后轉(zhuǎn)成.py的UI文件【ColorBlock.py】文件使用PyCharm在同級目錄下，創(chuàng)建文件名為【app.py】的文件，如下圖所示：GUI界面控制機(jī)械臂功能實現(xiàn)2）.鍵入如下代碼：（此處請參照J(rèn)upyter中）GUI界面控制機(jī)械臂功能實現(xiàn)3）.點擊運行。GUI界面控制機(jī)械臂功能實現(xiàn)4）.點擊GUI界面的開始按鈕：GUI界面控制機(jī)械臂功能實現(xiàn)5）.PyCharm控制窗口輸出上面定義函數(shù)的內(nèi)容。職業(yè)能力目標(biāo)01任務(wù)描述與要求02任務(wù)分析與計劃03知識儲備04任務(wù)實施05任務(wù)檢查與評價06任務(wù)小結(jié)07任務(wù)拓展08任務(wù)二

GUI界面開發(fā)與IDE使用任務(wù)檢查與評價06序號評價內(nèi)容評價標(biāo)準(zhǔn)分值得分1知識運用（20%）掌握相關(guān)理論知識，理解本次任務(wù)要求，制定詳細(xì)計劃，計劃條理清晰，邏輯正確（20分）20分

理解相關(guān)理論知識，能根據(jù)本次任務(wù)要求、制定合理計劃（15分）了解相關(guān)理論知識，有制定計劃（10分）無制定計劃（0分）2專業(yè)技能（40%）Pycharm成功創(chuàng)建工程，學(xué)會用QtDesig