TML5 技術在艦船移動監控終端的應用

宋小明

(江蘇海事職業技術學院, 江蘇 南京 211170)

0 引 言

隨著現代海上移動通信的發展，海上智能移動終端也越來越普及，大型航運公司和海上交通管理部門為了提高對海上艦船的監控能力，將電子海圖技術和通信技術相結合，進行海上船舶移動監控系統的開發。盡管目前存在一些針對船載工控機的監控終端和應用，但這些終端和應用往往是針對某一特定操作系統和計算機平臺的本地應用，對于不同系統、不同平臺，無法進行有效的移植，開發者不得不進行重復性的開發和設計。

HTML5 作為新一代的HTML 技術，能夠有效解決監控終端和應用對于不同操作系統的適配性問題，使傳統的Web 應用可以處理矢量數，比如船舶的電子海圖數據等，為實現船舶移動監控系統的開發提供了有力支持。目前，HTML5 已經被廣泛應用于各個操作系統（如Windows、安卓等）的瀏覽器中，配合軟件的二次開發，能夠實現應用的跨平臺使用。

在HTML5 技術的研究方向上國內有不少學者進行了研究，陳洪敏[1]研究了HTML5 和CCS3.3 的響應問題，季煥淑[2]研究了HTML5 移動前端的相關開發技術。本文的研究方向是利用HTML5 及其擴展程序功能組件，進行艦船移動監控終端的開發，分別從HTML5的功能特性、船舶移動監控系統的硬件架構、監控系統的電子海圖顯示，以及監控系統的軟件程序開發等方面進行詳細研究。

1 HTML5 技術的研究和發展現狀

HTML5 相對于老版本的HTML 4.01 進行了功能上的優化和升級，如本地數據處理功能等。目前，HTML5已經在各個系統瀏覽器上獲得了廣泛的使用。

圖1 為HTML5 的基本架構框圖。

圖1 HTML5 的基本架構框圖Fig. 1 Basic architecture block diagram of HTML5

HTML5 的特點包括：

1）功能性強

HTML5 集成了Canvas、Websocket、數據處理等多種新特性。其中，Canvas 組件結合JAVAscript 代碼，能夠在不使用其他插件的條件下直接在網頁生成豐富的圖表、動畫，使網頁更加生動和豐富多彩；Web-Socket 模塊的功能是在服務器和Web 之間建立一個高效的數據傳輸通道，使得瀏覽器能夠支持Socket；HTML5 的本地存儲接口可以在不調用cookie 的前提下訪問客戶端的計算和存儲資源，不僅能夠合理的配置服務器的資源，也保障了一些Web 應用在無網絡下的正常運行。

此外，HTML5 可以在Web 頁面中進行音頻、視頻的處理，方便用戶在Web 頁面的編輯和處理，擺脫了之前HTML 技術對第三方插件的依賴。

2）跨平臺開發模式

HTML5 的跨平臺開發模式保障了基于HTML5 應用的可移植性，針對移動端的應用開發通常的模式為HTML5+CSS3+JavaScript 的模式，HTML5 主要負責開發過程的標簽設計頁面的整體設計和定義，CSS3 模塊負責Web 頁面的外觀風格控制和整體色彩渲染，JavaScript腳本的作用是進行HTML 頁面內容的動態修改，并根據網頁的功能需求進行擴展功能的設計和開發。

3）CSS3 文檔處理

HTML5 技術的文檔處理和控制模塊是CSS 模塊，是Cascading Style Sheet 的縮寫，這種文檔處理模式是層疊樣式的處理模式，主要應用于XML 等文檔的編輯和設計，比如文檔在屏幕中的顯示類型，字體、顏色的定位和布局等。目前，CSS3 文檔處理模塊可以提高頁面內容的顯示效果，也可以通過CSS3 樣式進行多頁面的文件處理。

4）JavaScript 腳本編程

JavaScript 是HTML 的程序設計語言，JavaScript 是一種基于對象并由事件驅動的腳本語言，在Web 的網頁中集成。HTML5 的發布使得JavaScript 腳本語言的重要性進一步提升，目前，基于HTML5 的關鍵擴展功能均由JavaScript 腳本開發而成，比如圖像繪制、數據調用和存儲、離線通信等。

2 一種基于HTML5 技術的艦船移動監控終端開發

2.1 艦船移動監控終端的硬件整體架構設計

為了提高對海上移動船舶的監控與管理水平，本文開發艦船的移動監控終端，主要針對移動監控終端的硬件構成進行詳細介紹。

艦船移動監控終端的工作原理圖如圖2 所示。

圖2 艦船移動監控終端的工作原理圖Fig. 2 Diagram of the working principle of the ship mobile monitoring terminal

艦船移動監控終端接收來自船舶監測設備、GPRS 模塊和船舶機艙的監測數據，通過ARM 處理器的信號分析和處理，將船舶監測數據顯示在終端的顯示器上。

1）ARM 處理器

艦船移動監控終端的核心處理器為嵌入式ARM 處理器，與傳統的8 位單片機處理器相比，ARM 處理器的內部存儲空間更大，產生的外部中斷個數更少，且集成了SPI、USB 等外設的接口。本文使用的ARM 處理器芯片為STM32F636C8，該芯片具有32 位數據處理能力，性能優良。

2）GPRS 模組

船舶移動監控系統的移動通信功能來源于GPRS 模組，該模組支持船舶監控終端之間的GPRS 和短消息雙通道傳輸數據，具有串口數據采集接口，可支持遠程的數據處理和程序升級。

本文采用SIM800A 芯片作為GPRS 模組的核心，表1 為SIM800A 芯片的關鍵參數。

表1 GPRS 模組SIM800A 芯片參數表Tab. 1 GPRS module SIM800A chip parameter table

3）CAN 總線

艦船移動監控終端與船舶機艙、監測設備的數據傳輸采用CAN 總線進行，CAN 總線具有信號傳輸速度快，抗干擾能力強的優點，本文采用SAM9G4 微處理器作為CAN 總線的控制器[3]，基于CAN 總線的船舶移動監控終端數據監控原理圖如圖3 所示。

圖3 基于CAN 總線的船舶移動監控終端數據監控原理圖Fig. 3 Schematic diagram of data monitoring of ship mobile monitoring terminal based on CAN bus

2.2 基于HTML5-Canvas 的監控終端顯示框架開發

在艦船移動監控終端上，電子海圖的顯示功能非常重要，監控終端的電子海圖標記物包括點、線、多邊形、標簽、警示和注記等。

本文基于HTML5- Canvas 模塊建立艦船移動監控終端的顯示框架，如圖4 所示。

圖4 船舶移動監控終端顯示框架設計原理Fig. 4 The ship mobile monitoring terminal shows the framework design principle

船舶移動監控終端的顯示框架主要由海圖標志層、Shapefile 數據、canvas、數據庫、Web 服務器、點線面標記繪制模塊等組成。

1）Shapefile 數據[4]

Shapefile 數據是顯示電子海圖格式轉換的主要模塊，包括主文件(.shp)、索引文件(.shx)和屬性文件三部分，其中，主文件主要負責記錄電子海圖中目標的空間地理位置；索引文件負責對電子海圖的目標進行記錄和描述，便于用戶進行查詢；屬性文件的作用是表明電子海圖目標的要素屬性。HTML5 在調用Shapefile數據時，需要基于JavaScript 腳本編程進行程序設計。

2）復雜元素處理

在船舶移動監控終端的顯示界面里，不僅包括簡單的由線型和顏色就可以完全定義的線元素，還包括一些復雜的線元素，比如海底電纜標記、海岸線標記等。復雜面元素包括錨泊區、軍事禁區等，這些元素的處理和繪制需要進行精確的算法控制，HTML5 采用Canvas API 函數進行復雜元素的處理和繪制。

2.3 基于HTML5-Canvas 的監控終端錨泊區繪制

基于HTML5-Canvas[5]的監控終端電子海圖的錨泊區繪制，錨泊區的邊界線采用實心三角圖形表達，單個圖像的繪制可以調用數據庫的PNG 三角圖形符號，但對于電子海圖的錨泊區邊界整體顯示，還需要注意以下幾點：

1）對每個三角圖形的定點明確繪制算法；

2）確定三角圖像的組合規律，并且需要充分考慮海圖比例尺變化導致的邊界顯示影響；

3）解決邊界圖形的翻轉問題。

本文利用Canvas API 函數進行錨泊區邊界的繪制，圖5 為基于Canvas API 函數的錨泊區邊界線修正示意圖。

圖5 基于Canvas API 的錨泊區邊界線修正示意圖Fig. 5 Schematic diagram of anchor area boundary line correction based on Canvas API function

如圖，實心倒三角的頂點位置為(x1,y1)，線段頂點為(x,y) ，dx/dy為2 個方向的偏移量[6]，可知：

式中，r為邊界的斜率。

基于Canvas API 函數的錨泊區邊界修正可得：

3 基于HTML5 的艦船移動監控系統終端軟件程序開發

本文采用QTouch 組態軟件進行艦船移動監控終端的軟件程序開發，QTouch 組態軟件基于Visual Studio 2008 平臺開發而來，能夠實現多種操作系統的兼容，同時具有信號監測、邏輯轉換等功能。

QTouch 組態軟件使用C 語言編程，圖6 為基于QTouch 組態軟件的艦船移動監控終端程序設計流程圖。

圖6 艦船移動監控終端程序設計流程圖Fig. 6 Ship mobile monitoring terminal program design flowchart

4 結 語

本文基于HTML5 進行了艦船移動監控終端的開發，分別從艦船移動監控終端的硬件構成、顯示框架開發、電子海圖繪制和軟件程序開發等方面研究。

1）設計艦船移動監控終端的整體架構，并對終端中所有的模塊功能進行闡述，給出了監控終端的顯示框架；

2）提出基于HTML5-Canvas 的監控終端錨泊區繪制，最后使用QTouch 組態軟件設計程序，并給出了設計的移動終端程序流程。