RV1126 实现简单的UI开发示例

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库的以下组件，如下所示。

模组信息如下所示。

组件	头文件已经库路径	描述
系统操作组件	easyeai-api/common_api/system_opt	提供线程操作函数
摄像头组件	easyeai-api/peripheral_api/camera	提供摄像头操作函数
显示屏组件	easyeai-api/peripheral_api/display	提供显示屏操作函数

本工程由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是经过高度封装的易用性组件接口，便于用户直接调用板卡资源。

功能	组件目录	组件子目录	描述
功能组件	easyeai-api	algorithm_api	算法组件
		common_api	通用组件
		media_api	多媒体组件
		netProtocol_api	网络协议组件
		peripheral_api	外设硬件组件

解决方案的描述如下所示，单个“qSolu-”开头的目录即为一个解决方案案例，代码内调用“EASY EAI-API”来满足某一实际应用场景的需求。

功能	工程目录	描述
解决方案	qSolu-QDemo	最简单的UI交互方案
	qSolu-facialGate	类人脸识别门禁机解决方案

5.1.2 解决方案最基本的目录构成

每个解决方案就是一个独立的项目，项目内包含部分如下所示，项目使用qmake构建自动编译部署。

具体介绍如下所示。

组成部分	描述
build.sh	编译脚本，用于管理生成可执行文件后的部署准备工作，用户可自定义shell命令。
qSolu-QDemo.pro	工程管理文件，用于组织整个工程结构，指导qmake生成Makefile。
resource.qrc	工程管理文件，用于组织管理贴图资源，样式表资源等。
api.pri	工程管理文件，用于组织管理“对easyeai-api再封装的子模块”相关源码。
common.pri	工程管理文件，用于组织管理“第三方子模块”相关源码。
ui.pri	工程管理文件，用于组织管理“UI界面效果”相关源码。
QResource	用于存放贴图资源，样式表资源等。
QSrcCode	用于存放工程源代码。

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

5.2.1 *.pro文件：

第一部分为输出配置，如下所示：

配置信息如下所示。

配置项	描述
TARGET	输出文件名称
TEMPLATE	输出文件类型，app为可执行文件，lib为库文件

第二部分为全局编译选项配置，如下所示：

配置信息如下所示。

配置项	描述
LIBS	全局链接库，通常是本Ubuntu系统提供的库
QMAKE_CXXFLAGS	全局C++编译参数，可传入一些宏或者C++编译配置

第三部分为加载自定义子模块，如下所示：

第四部分为加载资源管理，如下所示：

第五部分为指定文件输出目录，如下所示：

5.2.2 api.pri文件：

 本工程文件是对我司的功能组件库的管理，若用户有“对我司的功能组件库进行再封装”的需求，则可通过本文件来管理。（针对当前方案进行：配置EASY EAI API头文件目录、库文件目录以及配置库链接参数）：

配置信息如下所示。

配置项	描述
INCLUDEPATH	向工程指定头文件的查找路径
LIBS	指定对应的easyeai-api库文件以及其依赖的编译参数
SOURCES	向工程添加需要编译的源文件
HEADERS	向工程添加需要编译的头文件

5.2.3 common.pri文件：

本工程文件是第三方的库的配置（针对当前方案进行：配置第三方头文件目录、库文件目录、配置第三方库链接参数以及配置源码目录）：

 配置信息如下所示。

配置项	描述
INCLUDEPATH	向工程指定头文件的查找路径
SOURCES	向工程添加需要编译的源文件
HEADERS	向工程添加需要编译的头文件

5.2.4 ui.pri文件：

本工程文件是交互界面相关的源码文件配置，内容如下所示：

配置项如下所示。

配置项	需求
SOURCES	向工程添加需要编译的源文件
HEADERS	向工程添加需要编译的头文件
FORMS	向工程添加Qt设计师产生的界面文件

5.3 build.sh编译脚本

5.3.1 路径定位部分

第一部分用于提取目录用于编译操作，内容如下所示：（进入build.sh脚本所在目录，并且提取当前目录绝对路径，提取当前目录名称）

5.3.2 编译参数部分

第二部分清除操作，清除目录为Release，内容如下所示：（执行build.sh脚本时，带入了参数“clear”，则清空编译输出；带入了参数“all”，则重新编译）

5.3.3 编译操作

第三部分，编译直接调用qmake，内容如下所示：（重新编译，并生成部署目录）

审核编辑 黄宇