1. 方案簡介

本方案為最簡單的UI開發示例，已為用戶初步構建一個基本的應用工程；準備好我司的easyeai-api鏈接調用；準備好UI的開發環境。其目的在于方便用戶馬上進行帶有界面交互的產品開發，無須關心工程組建。

2. 快速上手

2.1 開發環境準備

如果您初次閱讀此文檔，請閱讀《入門指南/開發環境準備/Easy-Eai編譯環境準備與更新》，并按照其相關的操作，進行編譯環境的部署。

在PC端Ubuntu系統中執行run腳本，進入EASY-EAI編譯環境，具體如下所示。

cd ~/develop_environment
./run.sh

2.2 源碼下載以及實例編譯

在EASY-EAI編譯環境下創建存放源碼倉庫的管理目錄：

cd /opt
mkdir EASY-EAI-Toolkit
cd EASY-EAI-Toolkit

通過git工具，在管理目錄內克隆遠程倉庫。

git clone https://github.com/EASY-EAI/EASY-EAI-Toolkit-C-UiSolution.git

注：
* 此處可能會因網絡原因造成卡頓，請耐心等待。
* 如果實在要在gitHub網頁上下載，也要把整個倉庫下載下來，不能單獨下載本實例對應的目錄。
進入到對應的例程目錄執行編譯操作，具體命令如下所示：

cd EASY-EAI-Toolkit-C-UiSolution/qSolu-QDemo/
./build.sh

注：
* 由于依賴庫部署在板卡上，因此交叉編譯過程中必須保持adb連接。

2.3 方案部署

通過執行以下命令，將編譯結果手動部署到板卡中。

cp Release/qSolu-* /mnt/userdata/UiSolu

2.4 示例方案運行

通過按鍵Ctrl+Shift+T創建一個新窗口，執行adb shell命令，進入板卡運行環境。

adb shell

進入板卡后，定位到例程部署的位置：

cd /userdata/UiSolu

運行例程命令如下所示：

./qSolu-QDemo

2.5 運行效果

運行打印：

液晶顯示屏上會顯示如下畫面：

點擊“歡迎”按鈕，可以顯示/隱藏提示語。

2.6 開機啟動

首先進入板卡環境，執行以下命令，在板卡上創建一個給本例程使用的應用目錄：myapp。

cd /userdata/apps/
mkdir myapp

然后回到開發環境中，通過使用“2.3方案部署”類似的操作方法，把本例程所需要的全部文件，包含：編譯結果，配置文件，模型等。部署到剛剛新建的myapp目錄中。
最后在板卡上創建一個run.sh腳本來管控用戶所有需要的應用即可，《入門指南/應用程序開機自啟動》會詳細描述run.sh腳本該如何編寫。

3. QtCreator配置

3.1 運行qtcreator

在EASY-EAI編譯環境中的任意位置，通過下方命令，后臺打開qtcreator：

qtcreator &

注：若虛擬機配置較低，打開qtcreator可能要等待10幾秒。

3.2 打開Qt工程

3.3 配置遠程調試參數

注：進行遠程調試前，首先要用build.sh腳本把相關的資源拷貝到【開發板】相對應的目錄上，否則會因缺少文件導致運行異常。

3.4 遠程運行Qt應用

3.5 調試打印輸出&遠程停止應用進程

3.6 修改應用編譯輸出位置

注：任何修改*.pro或者*.pri的操作，都要clean掉Makefile后，再重新編譯。

4. 代碼解析

方案主邏輯代碼位于：EASY-EAI-Toolkit-C-UiSolution/qSolu-QDemo/QSrcCode/ui/main.cpp。代碼實現主要通過調用我司的easyeai-api庫快速構建一個Qt應用，代碼主體分為Qt主線程和抓圖顯示子線程。

4.1 組件庫組成

本開發示例，需要使用到easyeai-api庫的以下組件，如下所示。

模組信息如下所示。

本工程由qSolu-QDemo.pro與各子模塊*.pro進行組織。其中，這些組件屬于api子模塊，具體通過qSolu-QDemo/QSrcCode/apiWrapper/api.pri編譯進工程，具體請看后續章節。

4.2 邏輯框圖

項目的整體邏輯框圖如下所示。

4.3 Qt線程

Qt線程處理的業務有：

創建抓圖顯示線程；

創建Qt應用；
本處附上主要的邏輯功能代碼，其他輔助的、校驗型的代碼先忽略。

// 1.創建抓圖顯示線程
pthread_t pid;
if(0 != CreateNormalThread(displayCamera, NULL ,&pid)){
    return a.exec();
}
// 2.創建Qt應用
mainWidget w;
w.show();

4.4 抓圖顯示子線程

抓圖顯示子線程主要完成以下操作：

初始化攝像頭

預設：開啟UI圖層

初始化顯示屏

抓圖，送顯
組件初始化操作如下，本處調用RGB攝像頭。

// 1.打開攝像頭
ret = rgbcamera_init(CAMERA_WIDTH, CAMERA_HEIGHT, 90);
pbuf = NULL;
pbuf = (char *)malloc(IMAGE_SIZE);

初始化顯示屏，如下所示。

// 2.顯示初始化
disp_preset_uiLayer(SYS_TRUE);	//注意，若要使用UI，需要先把UI圖層使能，否則無法正常顯示。
ret = disp_init(SCREEN_WIDTH, SCREEN_HEIGHT);

抓取圖像。

// 3.(取流 + 顯示)循環
ret = rgbcamera_getframe(pbuf);
disp_commit(pbuf, IMAGE_SIZE);

5. 開發指南

5.1 示例文件&目錄結構

UiSolution git倉庫僅會放置兩個解決方案。
一是最簡潔的UI調用方案，用戶可以基于此方案，快速進行需要帶界面交互的產品開發。
二是帶調度框架的UI應用方案，該方案為類人臉門禁機的產品級解決方案，其特點是模塊之間的耦合度低，用戶可以快速拓展自定義的業務模塊，以及快速更換UI皮膚。

5.1.1 UiSolution git倉庫目錄介紹

UiSolution工程構成如下所示，由功能組件easyeai-api和各個解決方案構成。

功能組件的描述如下所示，easyeai-api是經過高度封裝的易用性組件接口，便于用戶直接調用板卡資源。

解決方案的描述如下所示，單個“qSolu-”開頭的目錄即為一個解決方案案例，代碼內調用“EASY EAI-API”來滿足某一實際應用場景的需求。

5.1.2 解決方案最基本的目錄構成

每個解決方案就是一個獨立的項目，項目內包含部分如下所示，項目使用qmake構建自動編譯部署。

具體介紹如下所示。

5.2 *.pro和*.pri文件解析

5.2.1 *.pro文件：

第一部分為輸出配置，如下所示：

配置信息如下所示。

第二部分為全局編譯選項配置，如下所示：

配置信息如下所示。

第三部分為加載自定義子模塊，如下所示：

第四部分為加載資源管理，如下所示：

第五部分為指定文件輸出目錄，如下所示：

5.2.2 api.pri文件：

本工程文件是對我司的功能組件庫的管理，若用戶有“對我司的功能組件庫進行再封裝”的需求，則可通過本文件來管理。（針對當前方案進行：配置EASY EAI API頭文件目錄、庫文件目錄以及配置庫鏈接參數）：

配置信息如下所示。

5.2.3 common.pri文件：

本工程文件是第三方的庫的配置（針對當前方案進行：配置第三方頭文件目錄、庫文件目錄、配置第三方庫鏈接參數以及配置源碼目錄）：

配置信息如下所示。

5.2.4 ui.pri文件：

本工程文件是交互界面相關的源碼文件配置，內容如下所示：

配置項如下所示。

5.3 build.sh編譯腳本

5.3.1 路徑定位部分

第一部分用于提取目錄用于編譯操作，內容如下所示：（進入build.sh腳本所在目錄，并且提取當前目錄絕對路徑，提取當前目錄名稱）

5.3.2 編譯參數部分

第二部分清除操作，清除目錄為Release，內容如下所示：（執行build.sh腳本時，帶入了參數“clear”，則清空編譯輸出；帶入了參數“all”，則重新編譯）

5.3.3 編譯操作

第三部分，編譯直接調用qmake，內容如下所示：（重新編譯，并生成部署目錄）

審核編輯 黃宇