Vikot106's Blog.

项目:无接触点餐终端

字数统计: 3k阅读时长: 10 min
2021/03/20 Share

需求分析

​ 随着因特网的不断普及,我国用户呈指数级增长。作为因特网最为常用的电子系统越来越收到人们的喜爱,为了满足不断增长的信息交换需要,各行各业都希望有自己的系统。

​ 本作品由于疫情应运而生,疫情期间,接触不宜,所以制作了“无接触点餐终端”。

​ “无接触点餐终端”是将LeapMotion作为硬件设备,使用Python+JSP+HTML5+MySQL+JavaScript+CSS3技术开发的无接触手势控制软件,手势简单易于大众上手;软件与驱动可一键式安装且配有日志记录与进程守护功能,具有其作为终端软件简单且安全的优势。

​ 本作品采用先进的软件技术,先进的硬件设备LeapMotion,网站具有前端的无接触终端 ,后台使用SpringBoot框架进行点餐系统的管理。

​ 在疫情蔓延的今天,虽然我国的经济已经走上了正轨,但是还是影响到一些食品行业的发展,导致许多的饭店等行业出现了倒闭的现象,归根到底还是因为大多数的人认为公共场合有很多大家共同接触的东西,这些东西会导致病毒的传染,所以我们团队想到了做一个“无接触点餐系统”。我们这个系统不但可以使顾客不用接触点餐,更加能使用户清楚的看到展示图和价格,也能使用户尽可能的体会到科技带来的乐趣与便利。
​ Leapmotion控制器具有十分完善的手部识别功能,具有较好的发展前景,尤其是在如今疫情环境下,使用此设备开发无接触终端软件既能够安全卫生,又能够让用户体验到科技的进步。该控制器同时具有极强的拓展性,通过类似的技术可制作出无接触售票、无接触电梯、无接触ATM系统甚至手势游戏、配合公益宣传等等。本作品在将来投入使用的时候,如果是商家我们可以提供微信支付的接口,使用户的体验感更加良好。本作品是一个集创性性,科技性,实用性于一体的终端架构,在未来一定会有好的发展。

概要设计

  1. 开发环境

    1. 编程环境:IntelliJ IDEA、IntelliJ PyCharm、VS Code、VisualStudio
    2. 编程语言:Python、JSP、HTML5、MySQL、JavaScript、CSS3、Batch、NSIS
    3. 使用组件:Leap Developer Kit、Owl carousel、Animation、QRCode.js
    4. 打包工具:NSIS、Bat To Exe Converter
    5. 硬件设备:LeapMotion Controller
    6. 服务器环境:Linux、Apache、MySQL、Tomcat
  2. 模块功能

    控制器连接模块:连接硬件设备,在硬件弹出后自动结束进程。
    配置读取模块:读取“config.conf”中的内容,包括调试模式开关和点餐站点网址。
    日志输出与存储模块:当调试模式开启时输出与储存全部事件信息和触发时间,并以当前系统时间为文件名储存于debug目录中。
    手势识别模块:捕获控制器关键帧并通过计算识别用户手势,执行相应的功能。
    音效播放模块:在发生特定的交互事件时播放音效。
    鼠标控制模块:通过手势识别模块执行的结果触发包括移动、拖拽、点击等事件。
    菜单模块:用户通过滑动菜单进行选择,选择之后点击进入点餐页面。
    点餐模块:进入点餐页面之后调整数量,点击支付按钮进入支付模块。
    支付模块:会随着你的选择生成相应价格的动态二维码。
    管理员登录模块:从数据库核验管理员账号与密码是否匹配,并登入管理页面。
    管理员增改数据模块:添加、修改或删除当前菜品信息(价格、品名、预览图地址)。
    管理员查询流水模块:查询历史交易记录详细信息。

  3. 模块需求

    1. 模块对外的接口
      终端软件中,每个模块都可拓展相对应功能的接口,如判断当前用户手势、控制鼠标事件等。其中配置读取模块中的类库“ConfUtil”可以读取、写入与判断config.conf中的信息,配置工具通过调用该类库的接口可直接获取配置,其每个实现类单独实例化,可减少资源占用。
      前端软件中,每个模块都可以相互连接,通过接口进行跳转,并传输数据。使用controller控制器,对数据的传输,页面的跳转进行控制。
      使用了mapper接口实现了对数据库的一些列操作(例如,增加数据,修改数据,查看流水等)
      数据库模块采用了mysql数据库,通过Spring boot框架提供的接口对数据库进行增删改查。
    2. UML设计图
      点餐页面 流程图:
      shot10
      管理页面 流程图:
      shot11
      控制器软件 流程图:
      shot12

详细设计

  1. 软件与硬件难点
    硬件设备:
    shot14

要掌握LeapMotion这类硬件设备,需要学习开发文档并进行调试,并活用其接口。例如在判断手势的模块中如何确定手掌的开合程度、滑动方向、指尖坐标;在控制鼠标的模块中如何在手部抖动时也能获得较平滑的运动轨迹等。

shot13

控制器脚本使用Python语言编写,为实现使用其控制电脑的功能使用了WIN32API接口,模拟了鼠标的运动、点击与滑动,并在鼠标点击时能够播放音效。脚本同时具有一个配置文件,能够直观地设置软件日志输出功能开关和鼠标滑动坐标位置。编译环境和引用库均在32位架构下构建,降低了终端的成本。
控制器程序使用Python Installer将Python脚本打包为exe可执行文件,运行程序无需额外安装Python环境,也减去了臃肿的Python 依赖库。

shot15

全屏浏览器模块使用Python语言配合PyQt5与PyQtWebEngine编写,使用Python3.6版本在x86平台中构建,对Windows7或更老的系统版本兼容性高。软件内置了浏览器内核与运行环境,无需单独配置依赖。
软件配置模块使用C#语言编写,在.Net Framework 3.0框架平台下编译,对较老的系统版本兼容性高,本模块包含初次配置文件的设置工具、终端软件配置工具和读写配置文件的类库。工具通过调用类库的接口实现操作,降低耦合度。
2. 打包相关软件
使用NSIS脚本进行安装向导的打包,内容包括控制器驱动软件,Python集成环境,无接触控制器程序,控制器守护程序和封装好的Batch批处理软件。安装过程的同时会安装驱动软件,安装后会在桌面与程序文件夹中创建批处理软件的快捷方式。
Batch批处理软件将一键运行守护程序、控制器程序和无接触点餐全屏浏览器,软件已封装为exe格式,使用方便。
守护程序每隔一段时间会检测控制器程序的运行状态,检测到进程结束则会重启,不用担心程序意外终止。
3. 前端软件和后台软件开发
前端软件开发环境Idea,VS code,使用JSP+HTML5+MySQL+JavaScript+CSS3技术开发。
后台用SpringBoot技术搭建了网站后台。
使用JavaScript脚本语言的Owl carousel库进行ppt轮播的时候,为了保证菜单顺序和菜单的数据不发生混乱,使用了两层的数组进行存储,并且使用了两层的<c:foreach>语句进行循环的输出到页面上,并进行渲染。使用css3的animation库的时候来进行前端的动画绘制的时候,调整参数来表示箭头,每一个参数都需要非常精确。
在mysql数据库发布在服务器上的时候,会发生一些mysql服务无法启动的问题 ,通过查询mysql官网上的API文档发现,数据库的my.ini文件发生错误,更改文件地址之后启动成功。
在使用JavaScript脚本语言的QRcode.js库来进行动态二维码的绘制时,会导致扫描时的乱码问题,通过查阅资料使用Unicode、utf-8编码方式的编码规则图,用String.fromCharCode转换,解决了中文乱码问题。
后台管理页面
连接mysql数据库,使用user类和verify接口对数据库进行查询和验证,如果验证成功跳转到select页面,如果帐号或密码不正确会清空文本框。
shot16

测试报告

本系统通过web+client组合使用,只需要在终端安装手势操作客户端,通过启动器即可一键实现点餐软件的运行。
测试日志:
shot17

安装及使用

截图

安装向导:
shot1
驱动安装与初始设置:
shot5
运行:
shot2
配置工具:
shot4
浏览器页面:
shot6
下单页面:
shot7
后台页面:
shot8

步骤

  1. 搭建服务器
    1. 使用FTP方式连接到远程云服务器,复制“服务端程序”副本。
    2. 连接服安装务器(安装Windows、Windows Server或Linux系统),安装Chrome浏览器。
    3. 安装Java Runtime 8(JRE8)。
    4. 安装MySQL并执行“服务端数据库.sql”。
    5. 打开“服务端程序”压缩包,选择解压位置解压数据。
    6. 运行解压目录中的”Touchless_Server.exe”程序,等待程序加载至提示“Done”即成功启动服务端。
  2. 配置终端软件
    1. 复制“终端软件安装向导.exe”到Windows环境的终端中。
    2. 运行安装向导,按照步骤执行安装过程。
    3. 运行桌面快捷方式“无接触终端软件.lnk”,控制器守护程序与点餐软件将同时运行。
    4. 插入LeapMotion硬件设备。
  3. 终端最低系统配置:
    系统:Windows 7 32位
    处理器:AMD Phenom II / Intel Core i3
    内存:2GB
    接口:USB 2.0

运行服务端
shot9

项目总结

“无接触点餐终端”是将LeapMotion作为硬件设备,使用Python+JSP+HTML5+MySQL+JavaScript+CSS3技术开发的无接触手势控制软件, LeapMotion控制器可追踪全部 10 只手指,精度高达 1/100 毫米,它远比现有的运动控制技术更为精确。通过此设备制作的无接触控制设备拥有易于安装、易于维护、易于调试、功能完善等优点。
软件方面除了上述技术之外还使用了SpringBoot技术搭建了网站后台,前端页面使用HTML5+CSS3技术和现在最强大的JQurey—Owl carousel插件与Animation动画库,使网页更加的生动,最新的HTML5语言又使得网页更加的稳定。
本作品以“无接触点餐”作为作品主题进行开发,同时可拓展至更多领域。用户只需通过不同的手势即可操作点餐系统,既安全又容易上手,在COVID-19爆发后,该设备的优势更为显现,使用该设备可以做到完全无接触操作,为抗疫添一份力。
本作品软件方面选用了JSP+HTML5+MySQL+JavaScript+CSS3的技术来进行动态网站搭建,使用基于对象(Object)和事件驱动(Event Driven)并使用具有安全性更高的JavaScript脚本语言,JavaScript脚本语言在清华大学“书圈”2021年程序设计语言中排行榜位列第三名。
服务器环境使用Linux+Apache+MySQL+Tomcat(LAMT)。

CATALOG
  1. 1. 需求分析
  2. 2. 概要设计
  3. 3. 详细设计
  4. 4. 测试报告
  5. 5. 安装及使用
    1. 5.0.1. 截图
    2. 5.0.2. 步骤
  • 6. 项目总结