大纲:
售卖机三代BrotherSharp的简介
售卖机三代BrotherSharp的方案介绍
#系统整体组成
#软件平台
#硬件平台
售卖机三代BrotherSharp的实现过程
#功能实现论述
#软件流程图
#源码
售卖机三代BrotherSharp的技术难点解析
参考文献
#售卖机三代BrotherSharp的简介
自动售卖机BrotherSharp是基于人脸识别技术的UI交互式售卖系统。产品整体效果图如图1所示。
图 1 自动售卖机BrotherSharp 整体效果图
#售卖机三代BrotherSharp的方案介绍
#系统整体组成
图2自动售卖机BrotherSharp整体框图
#软件平台
本系统选择QT Creator作为UI界面开发平台,使用QT Quick。
#硬件平台
本系统选择树莓派3作为主控芯片。
采用人像采集摄像头——蓝色妖姬1080P。USB接口。
采用显示触摸屏——支持HDMI和USB接口的都可以。
#售卖机二代ChingTom的实现过程
#功能实现论述
l 商品展示主页面设计
商品展示主界面主要包括商品的排列展示以及人脸识别摄像展示。下面重点介绍商品排列展示的实现。
考虑到商品展示主界面的商品会因为售空而去除或者引入新品种的情况,因此该界面的UI设计必须具有易更改、易维护的特点。因此,如果将每个种类的商品固定位置摆放,并且对相应的跳转界面进行捆绑,不是一个好的方法。
为此,引入Model View Controller(模型-视图-控制器)设计模式。该设计模式分为模型、视图和控制器三部分。优点是每一部分相对独立,职责单一,在实现过程可以专注于自身控制逻辑。其中,模型负责提供数据;视图负责基本布局管理、对象的创建;控制器负责在数据变化时通知视图更新,通知模型响应变化。
GridView是Qt Quick提供的基本布局设计View模版的其中一种,也是符合Model View Controller设计模式。特点是创建一个拥有很多单元格的网格,在每一个网格上安置它的子对象,从左到右、从上到下把它的子对象一个一个塞到单元格里。对于商品展示来说比较适合。其中GridView的数据是商品的各种情况:包括商品图片、商品名称、单价、口味、库存量等。按照Qt Quick对于复杂的逻辑和数据采用c++混合编程的思路,采用c++继承QAbstractListModel派生类实现商品的数据定义和存储。
QAbstractListModel派生类有一个特点就是数据的添加、删除、修改和查找是通过哈希表的形式管理,在查找数据时只要通过role和role-name的键值对关系就可以方便获取数据。此时只需要重写rowCount、rowData、rowName三个方法就可以创建一个属于商品基本信息的类。因此对该于页面商品名信息、商品图片和价格信息的展示,数据源的方便获取就得益于QAbstractListModel派生类。
下图为商品展示主界面显示的效果如图3所示。
图3 售卖机BrotherSharp商品选购界面
l 商品展示主页面设计
商品详细信息界面主要包括商品的详细信息介绍(包括商品图片商品名、单价、口味、数量、存货量等)和功能键。其中商品的商品的详细信息的数据来源于商品展示主页面。
对于显示多行详细信息采用qml提供的TextArea类;对于界面底部的三个功能键,功能分别是返回到上一个界面、结账付款、以及添加到购物车功能。
下图为商品展示主界面显示的效果如图4所示。
图4售卖机BrotherSharp商品详细信息展示
l 结账界面的设计以及支付技术的实现
结账界面的设计主要包括商品结账生成的二维码,提示框,功能键。其中对于支付方式上,自动售卖系统支持包括二维码支付(支付宝支付、微信支付)以及人脸支付。
下面重点介绍二维码支付技术的实现,以微信支付为例。
二维码支付的业务流程如下:
(1) 当用户点击付款按钮时,系统会通过Https通信的方式调用微信支付的“统一下单API”获得商品订单生成支付交易链接,并将链接生成二维码图片。
(2) 用户打开微信扫描二维码,在微信客户端与微信支付系统双方成功验证链接有效性后返回用户支付授权。
(3) 用户确认支付,输入密码。在微信客户端与微信支付系统双方成功验证授权后完成交易。
(4) 微信支付系统异步通知付款结果给自动售卖系统和微信客户端。
下图为商品展示主界面显示二维码支付的效果如图5所示。当60s内没有完成交易,定时器时间溢出时会自动跳转到自动售卖系统的首页面。
图5售卖机BrotherSharp二维码支付
自动售卖系统支持人脸支付,下面介绍下人脸支付的业务流程。
对于未注册人脸账户或者未检测到人脸图像的用户来说,系统会自动推荐使用二维码支付的方式。如图4-4所示;如果选择人脸支付的方式,则需要采集人脸图像,输入手机号码绑定微信或者支付宝。
对于已注册人脸的用户来说,如果在商品展示主页面已经成功采集到人脸图像,则在付款界面会推荐使用人脸支付的方式的对话框。当用户点击确认,则人脸付款成功。人脸支付效果图如图6所示。
图6 售卖机BrotherSharp人脸支付
l 图像采集与人脸识别的实现
当顾客走进自动售卖系统,照片机检测到人脸后,使用人脸检测算法抓拍下人脸图象保存在SD卡中。后续使用人脸支付的时候,系统把照片送到百度云端进行人脸识别后,再调用人脸支付的功能,实现结算。
对于图像采集方面,主要用到QT中的QMultimedia类。QMultimedia类能方便进行摄像头控制及图像预览和捕获,该模块主要涵盖视频、音频、收音机以及摄像头等功能支持,提供了非常多的QML类型和C++类用以处理多媒体内容。本系统使用QT Quick中的Camera类调用系统摄像头进行图片捕捉后保存到SD卡路径,为后续人脸识别准备原材料。对于配置图像采集的主要实现过程如下:
(1) 配置相机。包括数字变焦、光学变焦、曝光模式、快门速度、 感光项、图片处理(降噪、白平衡等)
(2) 设置取景器。调用VideoOutput类生成一个预览相机视频的窗口。将其中的source设置为Camera对象。
(3) 调整参数,抓取图像。调用Camera类中的imageCapture属性的captureToLocation方法,结合人脸检测算法抓拍图像。
对于人脸检测方面,主要使用OpenCV库的CascadeClassifier类(由于OpenCV库很大,只裁剪部分与人脸检测相关的内容到系统中):
(1) 加载 Opencv 自带的人脸检测haarcascade_frontalface_alt.xml 分类器。
(2) 图像预处理 cvtColor(灰度化)equalizeHist(直方图均衡化)。
(3) 使用 detectMultiScale函数进行识别。
(4) 使用 rectangle 函数绘制找到的目标矩形框。
(5) 在原图像上 ROI 截取彩色的人脸保存。
准备好以上工作,就可以等待人脸检测算法捕捉人脸图片了。捕捉人脸图片效果如图7所示:
图7 售卖机BrotherSharp捕捉人脸图片效果
考虑到OpenCV人脸识别库涉及到复杂的算法,以及需要耗费比较大处理器的运算资源,本系统使用百度人脸识别库进行人脸注册以及人脸识别,通过HTTPS通信的形式,将人脸识别处理工作交给云端处理,本地只负责人脸检测并获取图像资源以及应用图像处理的结果。
人脸识别主要用到了LibCurl库对百度云端进行Https通信。首先,通过curl将从百度云端控制台申请的app_id,api_key, secret_key三个验证文件加载到百度access token 获取连接中进行https访问:https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials。然后从云端拿到access token后,再调用百度的各类API就可以进行人脸识别信息的通讯了。Access token获取的代码如下:
int get_access_token(std::string&access_token, const std::string &AK, const std::string &SK) {
CURL *curl;
CURLcode result_code;
int error_code = -1;
curl = curl_easy_init();
if(curl) {
std::string url = access_token_url + "&client_id=" + AK +"&client_secret=" + SK;
curl_easy_setopt(curl, CURLOPT_URL, url.data());
curl_easy_setopt(curl, CURLOPT_SSL_VERIFYPEER, 0);
curl_easy_setopt(curl, CURLOPT_SSL_VERIFYHOST, 0);
std::string access_token_result;
curl_easy_setopt(curl, CURLOPT_WRITEDATA, &access_token_result);
curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, callback);
result_code = curl_easy_perform(curl);
if (result_code != CURLE_OK) {
fprintf(stderr, "curl_easy_perform() failed: %s\n",
curl_easy_strerror(result_code));
return 1;
}
access_token = access_token_result;
curl_easy_cleanup(curl);
fprintf(stderr,"curl_easy_init() sus.");
error_code = 0;
}else {
fprintf(stderr, "curl_easy_init() failed.");
error_code = 1;
}
return error_code;
}
通过拿到的Access token就可以与百度云通信。通过调用API实现包括对于人脸注册、人脸识别的功能。在人脸识别后,自动售卖系统会根据识别用户的性别、年龄推荐用户商品,以红心的形式显示在商品左上角。如图8所示。
图8 BrotherSharp人脸识别推荐用户商品
l 移植QT界面到树莓派
由于工程的QT界面开发在PC上进行,在完成QT程序设计后,需要把可执行程序以及相关的依赖打包成免安装程序,才能在树莓派上运行。
可执行程序以及相关的依赖打包成免安装程序的基本过程如下[16]:
(1) 先将工程使用Release模式编译,在打开编译输出文件的文件夹build-FaceRecognitonASS-Desktop_Qt_5_10_0_GCC_64bit-Debug下创建一个空文件夹faceRecgnitionASS
(2) 进入faceRecgnitionASS目录下新建文件copylib.sh,通过指令设置权限chmod 777 copylib.sh
在 copylib.sh 中加入内容
#!/bin/bash
LibDir=$PWD"/lib"
Target=$1
lib_array=($(ldd $Target | grep -o "/.*" | grep -o"/.*/[^[:space:]]*"))
$(mkdir $LibDir)
for Variable in ${lib_array[@]}
do
cp "$Variable" $LibDir
done
(3) 打开终端并进入到当前文件夹,输入./copylib.sh faceRecgnitionASS。其中,faceRecgnitionASS是运行copylib.sh 脚本的参数,脚本实际上是调用了 ldd faceRecgnitionASS指令获得faceRecgnitionASS运行时需要哪些库,并将库都复制放到当前目录的lib文件夹中。
(4) 运行完上述指令后,同目录下会生成lib文件夹,这里我们将其称作faceRecgnitionASS的库文件夹,避免与下文内容混淆.将faceRecgnitionASS的二进制文件和faceRecgnitionASS的库文件夹里所有的文件复制到新建的FaceRecgnitionASS文件夹中,注意:这里是把lib里的所有文件复制出来,不用复制lib文件夹。
(5) 进入QT的安装目录/opt/Qt5.10.0/5.10.0/gcc_64/plugins/platforms,将整个platforms文件夹复制到FaceRecgnitionASS文件夹中,注意:这时复制的是整个文件夹,这使得FaceRecgnitionASS文件夹中会多出一个platforms文件夹
(6) 将上文的copylib.sh放到FaceRecgnitionASS/platforms/中,并运行./copylib.sh libqxcb.so,这时会得到lib文件夹——libqxcb.so的库文件夹
(7) 将libqxcb.so的库文件夹中的所有文件复制FaceRecgnitionASS文件夹中,然后删除掉FaceRecgnitionASS/platforms/lib文件夹
(8) 在FaceRecgnitionASS文件夹中新建脚本faceRecgnitionASS.sh,执行chmod 777 faceRecgnitionASS.sh,并在其中加入:
#!/bin/sh
appname=`basename $0 | sed s,\.sh$,,`
dirname=`dirname $0`
tmp="${dirname#?}"
if [ "${dirname%$tmp}" != "/" ]; then
dirname=$PWD/$dirname
fi
LD_LIBRARY_PATH=$dirname
export LD_LIBRARY_PATH
$dirname/$appname "$@"
到这里就基本完成了,将FaceRecgnitionASS文件夹复制到需要运行程序的树莓派即可,在树莓派中运行程序,都采用 ./ faceRecgnitionASS.sh而不是./ faceRecgnitionASS,即运行程序的sh脚本,而不是二进制文件。运行效果如图所示9所示。
图9 树莓派运行人脸识别自动售卖系统程序效果
#软件流程图
软件流程图如图10所示。
图10 售卖机BrotherSharp软件流程图
#源码
源码开源,共同交流学习。
下载地址:
git@github.com:TommyYangHui/AutoSellingSystem_BrotherSharp.git
售卖机二代ChingTom的技术难点解析
Qt Quick 如何入门?
https://blog.csdn.net/tommymusk/article/details/80210037
Qt: QMLStackView: push: nothing to push
https://blog.csdn.net/tommymusk/article/details/80305105
Qt CreaterBug: multiple define of ...
https://blog.csdn.net/tommymusk/article/details/80296729
如果对这个项目感兴趣,欢迎在留言提出,到时补充到这个栏目上。
如果对售卖系统的前两代产品感兴趣,可以参考:
自动售卖系统开发系列——自动售卖机一代Kopa
https://blog.csdn.net/TommyMusk/article/details/80642731
自动售卖系统开发系列——人脸识别自动售卖机二代ChingTom
https://blog.csdn.net/TommyMusk/article/details/80644231
自动售卖系统开发系列——人脸识别自动售卖机三代BrotherSharp
https://blog.csdn.net/TommyMusk/article/details/80645006
参考文献:
[1] 李颖._刷脸_技术来了市场潜力巨大相应标准亟待完善[J].中国质量万里行,2017,12:8.
[2] 陈金星.基于可拓学的自动售卖机创新设计[D].广东工业大学硕士论文,2015:7
[3] 荣哥.在日本自动售卖机和便利店都快饱和了,快看看他们的解决方式[EB/OL].http://mp.weixin.qq.com/s/nvH-9UdN2lBRnYoeErAIUA,2017-08-27/2018-04-01.
[4] 于健.日本的自动售货机也能微信支付了[EB/OL].http://finance.sina.com.cn/stock/usstock/c/2017-12-25/doc-ifypyuva8907584.shtml,2017-12-25/2018-04-01.
[5] Evelyn 杜.与日本相比,中国自动售货机是个什么位置?[EB/OL].http://36kr.com/p/5060001.html,2016-12-22/2018-04-01.
[6] 创客智造.树莓派3-介绍[EB/OL].https://www.ncnynl.com/archives/201606/196.html,2016-06-23/2018-04-01.
[7] eamon.树莓派3上安装使用centos 7.4[EB/OL].http://www.cppblog.com/eamon100/archive/2018/03/11/pi3.html,2018-03-11/2018-04-01.
[8] lbsljn.树莓派----03_安装QT5[EB/OL].https://blog.csdn.net/lbsljn/article/details/51789892,2016-06-30/2018-04-01.
[9] Moxiao__墨箫.CentOS 安装openssl[EB/OL].https://blog.csdn.net/ydyang1126/article/details/72902113,2017-06-07/2018-04-01.
[10] Souvc.Centos7环境下安装curl[EB/OL].http://www.souvc.com/?p=1779,2017-04-22/2018-04-01.
[11] W3school.JSON 教程[EB/OL].http://www.w3school.com.cn/json/index.asp,2016-04-22/2018-04-01.
[12] chomol.Centos6.5安装 jsoncpp[EB/OL].https://blog.csdn.net/mayh554024289/article/details/51317406,2016-05-04/2018-04-01.
[13] 秋痕.在树莓派上搭建sqlite数据库[EB/OL].https://www.cnblogs.com/qiuheng/p/5679398.html,2016-07-17/2018-04-01.
[14] 星夜之夏.在Qt中使用SQLite数据库[EB/OL].https://www.cnblogs.com/xia-weiwen/archive/2017/05/04/6806709.html,2017-05-04/2018-04-01.
[15] 百度AI开放平台[EB/OL].http://ai.baidu.com/docs#/Face-Cpp-SDK/454cf90,2017-10-31/2018-04-01.
[16] qq1121405143.树莓派系统的精简与打包qt程序[EB/OL]. https://blog.csdn.net/qq_38446366/article/details/78713957,2017-12-04/2018-04-01.