一種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的交互實現了離線地圖的加載和操作，使系統的運行不依賴于公網環境，增強了系統的可移植性和環境適應能力。無人機監控軟件對設備的硬件要求小且具備無人機地面站的大部分功能，能夠快速部署到各種小型手持終端上，讓無人機的控制變得更加方便。