一种QT和HTML5混合编程的无人机监控软件实现

唐磊 孙志尧 赵俊

关键词：无人机；QT；HTML5；軟件开发；VLC-QT

0 引言

无人机（UAV） 是利用无线遥控设备和自备程序控制操作的不载人飞机，或者由车载计算机完全或间歇地自主操作[1]。随着无人机技术快速发展，无人机已经成为具有侦察、测绘、攻击等功能的小型智能化飞行设备，因其使用成本低、机动性高、探测能力强等特点，被广泛应用于军事、农业、地质勘探等领域并发挥着不可替代的作用。无人机地面站（GCS） 即无人机地面控制系统[2]，是地面操作人员获取和控制无人机飞行状态的有效渠道，是无人机控制系统中的重要组成部分[3]。

无人机的广泛应用促进了无人机地面站的发展。目前无人机地面站软件的研究正如火如荼地展开，陈锴[4]等人其基于Visual Studio 2019软件和MAVlink协议开发了用于桥梁病害检测的专用无人机地面站；石秀[5]在Linux系统中实现了基于高速公路违章检测的专用无人机地面站；周超[6]等将无线电信号测向定位功能融入地面站中形成了用于无线电监测的无人机地面站；蔡伟杰[7]开发了面向无人机农业植保的专用地面站。以上成果主要针对某一使用场景实现某一特定功能设计无人机地面站，本文针对设备无法连接公网且无人机控制要在便携式手持终端上完成的场景，设计了一种可以作为便携式地面站[8]使用的多无人机监控软件，该软件采用QT和HTML5混合编程实现，电子地图的离线访问基于BIGEMAP离线地图解决方案实现。

1 系统结构和功能设计

传统的无人机地面站将所有的功能集成到一台控制终端，这样资源消耗大，对终端的性能要求较高，因此目前的地面站大多部署在专用手提电脑或个人电脑上，在使用时很不方便。为了让无人机的控制能够在小型手持终端上进行，应该尽可能减少软件的资源消耗。因此本文设计了一种无人机监控系统：对无人机地面站的功能进行拆分，将协议解析、航线规划算法等交给服务器处理，在手持终端上运行的客户端只负责人机交互的功能。该系统以加大网络资源的占用率为代价降低了客户端软件的性能要求，实现了在手持终端上对无人机的飞行状态进行监控。

无人机监控系统的基本结构如图1所示，系统采用C/S（客户端-服务器）架构设计，服务器采用Go语言和Python语言开发，主要负责数据管理、航线规划和指令发送等；无人机监控软件，即客户端基于QT框架和HTML5混合开发，主要负责用户登录和人机交互。客户端与服务器之间的通信基于HTTP（超文本传输协议）和WebSocket协议进行，服务器使用UDP 获取并控制无人机的实时状态信息。无人机的视频通过推流过程推送到流媒体服务器，客户端通过拉流过程获取视频流并解码播放。

本文主要介绍客户端即无人机监控软件的开发。无人机监控软件由以下六个模块构成：

状态显示模块：如图2所示，该模块由无人机选择窗口和实时信息窗口组成。无人机选择窗口中显示了当前系统中所有无人机的名称、编号及在线状态，实时信息窗口用文本加数字的方式显示了无人机的飞行数据，包括无人机的飞行高度、垂直速度、水平速度、经纬度、俯仰角、滚转角、航向角、电池电量等信息。

飞行控制模块：如图3所示，该模块由控制按钮和HTTP接口函数组成，其功能是当用户点击界面上的无人机控制按钮时，软件通过HTTP协议将相应控制指令发送给服务器，然后由服务器封装成相应的控制协议发送给无人机，实现对无人机的控制。无人机控制指令包括无人机（一键）起飞、（一键）返航、执行任务、暂停任务等。

信息管理模块：该模块提供了修改服务器数据库的可视化界面，由多个表格组成，如：无人机设备信息表、用户信息表、航线信息表等，拥有管理员权限的用户才可以进入该模块。

离线地图模块：电子地图作为无人机地面控制软件基础模块之一，其功能包括无人机实时位置显示、飞行区域（航点）选取、飞行轨迹绘制等。为了让系统能够在自主搭建的无线局域网中正常运行，该模块使用BIGEMAP离线地图解决方案。

用户登录模块：该模块用于发送用户登录请求并从收到的服务器响应中取出Token（令牌），然后将To?ken保存下来供后续的网络请求使用。

视频监控模块：该模块主要用于获取无人机的视频流并解码播放，同时还能控制无人机吊舱的运动。

2 无人机监控软件实现

无人机监控软件主框架基于C++语言结合QT框架在Windows10下开发，开发过程主要实现六个模块的基本功能。其中，电子地图模块基于HTML5开发完成并使用QT的嵌入式浏览器功能加载到前端界面，视频监控模块基于VLC-QT库开发实现。

2.1 用户登录模块实现

为了提高系统的安全性，防止无关人员对软件进行误操作，同时为了区分不同操作人员可操作的无人机种类及数量，需要对软件使用者进行权限验证，因此软件增加了如图4所示的用户登录模块，用于验证用户的操作权限。该模块由用户名输入框、密码输入框和两个功能按钮组成。

用户登录模块的软件实现如图5所示。用户名输入框和密码输入框是QLineEdit的两个实例化对象，当用户输入完成点击登录按钮后，程序提取用户输入的内容封装成JSON格式，并转化为字节数组，然后设置QNetworkRequest类的请求头、URL等内容，再使用QNetworkAccessManager类的post函数完成HTTP请求的发送。当服务器接收到请求后，会在数据库中对比用户名和密码是否正确，如果验证正确，服务器会发送一个包含了状态码和Token等信息的HTTP响应，该响应由QNetworkAccessManager 类负责接收，并以函数返回值的形式保存到QNetworkReply类对象中。最后对响应内容解析获得Token并用QString保存起来，这样就实现了用户登录验证的过程。

另外值得注意的是，Token是一個临时性的令牌，在一段时间后就会失效，为了满足软件长时间运行的需求，在用户登录成功后设置一定时器，周期性地发送登录请求来获取新的Token。

2.2 离线地图模块实现

无人机控制系统运行在无线局域网或自组网内，百度等常见的在线地图源无法获取，因此需要用离线地图代替。BIGEMAP是目前使用较广泛的离线地图解决方案之一，它采用服务器-客户端架构，瓦片地图下载后保存在服务器终端上，利用BIGEMAP离线地图服务器发布地图服务，最后通过服务器提供的接口就可以在客户端上实现地图数据的访问，因此本文的电子地图模块基于BIGEMAP进行二次开发，实现了不依赖于公网的地图信息读取。

BIGEMAP 提供了大量的离线地图开发实例HTML 源码和一套完整的JavaScript 应用编程接口（API） ，可以帮助开发人员快速完成离线地图的开发。因此无人机监控软件的电子地图模块基于HTML5开发，通过调用JS函数实现放大缩小、添加标注、区域绘制等地图操作。

离线地图模块的软件实现如图6所示。要使用地图样式和相应函数必须先在HTML的头部元素中用link标签链接离线地图服务器的样式表，用script标签包含服务器提供的JS函数库，然后用style标签定义样式信息，最后在HTML的主体部分用map函数构造地图对象，这样就实现了地图的显示并为地图操作提供支持。

离线地图模块即HTML文件在QT中的加载通过QT WebEngine模块来实现。QWebEngine-View类是QT WebEngine模块的主要窗口类，其提供的load（或reload） 函数可以加载（或刷新）HTML文件；QWebEn?ginePage类包含在QWebEngineView类中并通过page 函数获取，其成员函数runJavaScript可以调用JS脚本和HTML文件中的JS函数；利用上述两个类可以实现QT与HTML间的交互。

在QT与HTM5的交互实现中，本文还遇到如下两个问题：1） HTML文件除了需要与地图服务器交互外，很多时候还需同无人机控制系统服务器通信，如在绘制完任务区域后，需要将区域的顶点信息发送给服务器进行航线规划，在这样的过程中需要由网页端发送网络请求，但网页端由于没有用户的登录信息无法获取Token，也就无法发送请求，因此如何将登录模块获取的Token传递给HTML成为一个难题。2） 初始化界面的过程中，状态显示模块和电子地图模块都需要建立WebSocket连接获取无人机的实时信息，前者用来刷新界面上的数据，后者用来在地图上实时标注无人机位置。当服务器IP 地址发生变化时，Web?Socket 连接地址也会产生变化，这时需要对QT 和HTML端程序中的服务器地址和WebSocket地址进行更改，这对于使用者显然是不友好的。

对于以上问题本文的解决方法如图7所示。将服务器地址、WebSocket连接地址等软件配置信息按一定格式手动写入一个config.ini文件，无人机监控软件运行后先读取该文件内容并赋给相应变量，这样服务器地址改变时不必在代码端做修改，只需修改配置文件即可；同时在用户登录验证成功后将获得的Token 和服务器地址、WebSocket连接地址一起封装成函数写入一个JS 文件，然后在HTML 的头部元素中用script标签将该JS文件以外部文件的形式附加进来，最后在HTML的主体部分直接调用该函数就可获取Token及地址信息。

2.3 视频监控模块实现

无人机搭载不同的任务载荷可以适配不同的使用环境，其中使用较多的是搭配摄像头实现监控巡逻等功能。本系统中部分无人机搭载摄像头，客户端上需要显示无人机的原始视频和经过图像处理后的视频，因此系统将无人机视频基于RTSP或RTMP协议传输到流媒体服务器，经过图像处理后的视频和原视频都储存在流媒体服务器上，客户端可通过拉流地址分别获取原视频和处理后的视频，视频流的传输如图8所示。

视频监控模块基于VLC-QT开源库实现了无人机实时视频流（RTSP/RTMP） 的获取与播放。Qt中提供的视频应用开发类（QMediaPlayer、QVideoWidget） 无法播放复杂编码格式流视频，VLC-QT是一个用于连接libVLC库和Qt的开源库，它简化了Qt中视频功能的开发[9]。

视频监控模块的软件实现如图9所示。在QT中需要先实例化VlcInstance类，然后用VlcInstance类的对象分别实例化VlcMediaPlayer和VlcMedia类，再用VlcMediaPlayer类的对象构造VlcWidgetVideo类的对象，最后用VlcMediaPlayer类的成员函数open打开媒体项目（VlcMedia 类对象）。其中，VlcInstance 类是VLC-QT库的基本实例管理器，可以用来操作VLCQT库，例如获取VLC 库的初始化状态；VlcMedia?Player类是媒体播放器，提供播放控制功能，例如控制视频的播放和暂停；VlcMedia类表示可播放的媒体，该媒体可以是本地文件也可以是远程媒体信息；Vlc?WidgetVideo 类是视频播放的窗口，提供视频显示和鼠标控制。云台操纵通过向服务器发送HTTP请求实现。

2.4 状态显示模块实现

无人机状态显示模块实现主要包括无人机选择窗口和无人机实时信息窗口两部分。如图10所示为该模块实现示意图。首先服务器将系统中所有无人机的位置信息、姿态信息以及状态信息封装成JSON 数组，然后通过WebSocket协议以心跳包的形式推送实时数据。在无人机状态显示模块中，使用QWeb?Socket类接收该心跳包并用QJsonArray类的对象暂存（在收到下一个心跳包时刷新数据）。无人机选择窗口包含所有无人机的简要信息，为了在系统增减无人机时页面自动匹配无人机数量，该窗口采用动态生成按钮的方式：首先获取心跳包中JSON对象的数量（即无人机数量），然后通过循环生成相应数量的UAVButton类（自定义类，由按钮和标签组成）对象，并将其鼠标点击信号与实时信息窗口的显示事件绑定。当无人机按钮i被选中时通过信号槽机制将对应无人机编号传递给实时信息窗口，实时信息窗口在每次收到心跳包时根据无人机编号在QJsonArray类对象中获取无人机的实时信息并刷新对应的数据标签。

2.5 其他模块实现

信息管理模块主要由QTableWidget类实现，表单数据的获取和修改通过发送网络请求实现。飞行控制模块通过一些QPushButton类对象和槽函数实现，这些槽函数中封装了无人机控制相关的HTTP请求。HTTP请求的具体实现参见2.1。

3 结束语

本文介绍了一种基于C/S架构和模块化编程思想的无人机控制系统并详细阐述了其客户端的实现过程。该客户端是一种采用QT和HTML5混合编程的无人机监控软件，软件主框架采用QT开发，能够适配不同操作平台，通过QT与HTML的交互实现了离线地图的加载和操作，使系统的运行不依赖于公网环境，增强了系统的可移植性和环境适应能力。无人机监控软件对设备的硬件要求小且具备无人机地面站的大部分功能，能够快速部署到各种小型手持终端上，让无人机的控制变得更加方便。