TML5 技術(shù)在艦船移動(dòng)監(jiān)控終端的應(yīng)用

宋小明

(江蘇海事職業(yè)技術(shù)學(xué)院, 江蘇 南京 211170)

0 引 言

隨著現(xiàn)代海上移動(dòng)通信的發(fā)展，海上智能移動(dòng)終端也越來(lái)越普及，大型航運(yùn)公司和海上交通管理部門為了提高對(duì)海上艦船的監(jiān)控能力，將電子海圖技術(shù)和通信技術(shù)相結(jié)合，進(jìn)行海上船舶移動(dòng)監(jiān)控系統(tǒng)的開(kāi)發(fā)。盡管目前存在一些針對(duì)船載工控機(jī)的監(jiān)控終端和應(yīng)用，但這些終端和應(yīng)用往往是針對(duì)某一特定操作系統(tǒng)和計(jì)算機(jī)平臺(tái)的本地應(yīng)用，對(duì)于不同系統(tǒng)、不同平臺(tái)，無(wú)法進(jìn)行有效的移植，開(kāi)發(fā)者不得不進(jìn)行重復(fù)性的開(kāi)發(fā)和設(shè)計(jì)。

HTML5 作為新一代的HTML 技術(shù)，能夠有效解決監(jiān)控終端和應(yīng)用對(duì)于不同操作系統(tǒng)的適配性問(wèn)題，使傳統(tǒng)的Web 應(yīng)用可以處理矢量數(shù)，比如船舶的電子海圖數(shù)據(jù)等，為實(shí)現(xiàn)船舶移動(dòng)監(jiān)控系統(tǒng)的開(kāi)發(fā)提供了有力支持。目前，HTML5 已經(jīng)被廣泛應(yīng)用于各個(gè)操作系統(tǒng)（如Windows、安卓等）的瀏覽器中，配合軟件的二次開(kāi)發(fā)，能夠?qū)崿F(xiàn)應(yīng)用的跨平臺(tái)使用。

在HTML5 技術(shù)的研究方向上國(guó)內(nèi)有不少學(xué)者進(jìn)行了研究，陳洪敏[1]研究了HTML5 和CCS3.3 的響應(yīng)問(wèn)題，季煥淑[2]研究了HTML5 移動(dòng)前端的相關(guān)開(kāi)發(fā)技術(shù)。本文的研究方向是利用HTML5 及其擴(kuò)展程序功能組件，進(jìn)行艦船移動(dòng)監(jiān)控終端的開(kāi)發(fā)，分別從HTML5的功能特性、船舶移動(dòng)監(jiān)控系統(tǒng)的硬件架構(gòu)、監(jiān)控系統(tǒng)的電子海圖顯示，以及監(jiān)控系統(tǒng)的軟件程序開(kāi)發(fā)等方面進(jìn)行詳細(xì)研究。

1 HTML5 技術(shù)的研究和發(fā)展現(xiàn)狀

HTML5 相對(duì)于老版本的HTML 4.01 進(jìn)行了功能上的優(yōu)化和升級(jí)，如本地?cái)?shù)據(jù)處理功能等。目前，HTML5已經(jīng)在各個(gè)系統(tǒng)瀏覽器上獲得了廣泛的使用。

圖1 為HTML5 的基本架構(gòu)框圖。

圖1 HTML5 的基本架構(gòu)框圖Fig. 1 Basic architecture block diagram of HTML5

HTML5 的特點(diǎn)包括：

1）功能性強(qiáng)

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

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

2）跨平臺(tái)開(kāi)發(fā)模式

HTML5 的跨平臺(tái)開(kāi)發(fā)模式保障了基于HTML5 應(yīng)用的可移植性，針對(duì)移動(dòng)端的應(yīng)用開(kāi)發(fā)通常的模式為HTML5+CSS3+JavaScript 的模式，HTML5 主要負(fù)責(zé)開(kāi)發(fā)過(guò)程的標(biāo)簽設(shè)計(jì)頁(yè)面的整體設(shè)計(jì)和定義，CSS3 模塊負(fù)責(zé)Web 頁(yè)面的外觀風(fēng)格控制和整體色彩渲染，JavaScript腳本的作用是進(jìn)行HTML 頁(yè)面內(nèi)容的動(dòng)態(tài)修改，并根據(jù)網(wǎng)頁(yè)的功能需求進(jìn)行擴(kuò)展功能的設(shè)計(jì)和開(kāi)發(fā)。

3）CSS3 文檔處理

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

4）JavaScript 腳本編程

JavaScript 是HTML 的程序設(shè)計(jì)語(yǔ)言，JavaScript 是一種基于對(duì)象并由事件驅(qū)動(dòng)的腳本語(yǔ)言，在Web 的網(wǎng)頁(yè)中集成。HTML5 的發(fā)布使得JavaScript 腳本語(yǔ)言的重要性進(jìn)一步提升，目前，基于HTML5 的關(guān)鍵擴(kuò)展功能均由JavaScript 腳本開(kāi)發(fā)而成，比如圖像繪制、數(shù)據(jù)調(diào)用和存儲(chǔ)、離線通信等。

2 一種基于HTML5 技術(shù)的艦船移動(dòng)監(jiān)控終端開(kāi)發(fā)

2.1 艦船移動(dòng)監(jiān)控終端的硬件整體架構(gòu)設(shè)計(jì)

為了提高對(duì)海上移動(dòng)船舶的監(jiān)控與管理水平，本文開(kāi)發(fā)艦船的移動(dòng)監(jiān)控終端，主要針對(duì)移動(dòng)監(jiān)控終端的硬件構(gòu)成進(jìn)行詳細(xì)介紹。

艦船移動(dòng)監(jiān)控終端的工作原理圖如圖2 所示。

圖2 艦船移動(dòng)監(jiān)控終端的工作原理圖Fig. 2 Diagram of the working principle of the ship mobile monitoring terminal

艦船移動(dòng)監(jiān)控終端接收來(lái)自船舶監(jiān)測(cè)設(shè)備、GPRS 模塊和船舶機(jī)艙的監(jiān)測(cè)數(shù)據(jù)，通過(guò)ARM 處理器的信號(hào)分析和處理，將船舶監(jiān)測(cè)數(shù)據(jù)顯示在終端的顯示器上。

1）ARM 處理器

艦船移動(dòng)監(jiān)控終端的核心處理器為嵌入式ARM 處理器，與傳統(tǒng)的8 位單片機(jī)處理器相比，ARM 處理器的內(nèi)部存儲(chǔ)空間更大，產(chǎn)生的外部中斷個(gè)數(shù)更少，且集成了SPI、USB 等外設(shè)的接口。本文使用的ARM 處理器芯片為STM32F636C8，該芯片具有32 位數(shù)據(jù)處理能力，性能優(yōu)良。

2）GPRS 模組

船舶移動(dòng)監(jiān)控系統(tǒng)的移動(dòng)通信功能來(lái)源于GPRS 模組，該模組支持船舶監(jiān)控終端之間的GPRS 和短消息雙通道傳輸數(shù)據(jù)，具有串口數(shù)據(jù)采集接口，可支持遠(yuǎn)程的數(shù)據(jù)處理和程序升級(jí)。

本文采用SIM800A 芯片作為GPRS 模組的核心，表1 為SIM800A 芯片的關(guān)鍵參數(shù)。

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

3）CAN 總線

艦船移動(dòng)監(jiān)控終端與船舶機(jī)艙、監(jiān)測(cè)設(shè)備的數(shù)據(jù)傳輸采用CAN 總線進(jìn)行，CAN 總線具有信號(hào)傳輸速度快，抗干擾能力強(qiáng)的優(yōu)點(diǎn)，本文采用SAM9G4 微處理器作為CAN 總線的控制器[3]，基于CAN 總線的船舶移動(dòng)監(jiān)控終端數(shù)據(jù)監(jiān)控原理圖如圖3 所示。

圖3 基于CAN 總線的船舶移動(dòng)監(jiān)控終端數(shù)據(jù)監(jiān)控原理圖Fig. 3 Schematic diagram of data monitoring of ship mobile monitoring terminal based on CAN bus

2.2 基于HTML5-Canvas 的監(jiān)控終端顯示框架開(kāi)發(fā)

在艦船移動(dòng)監(jiān)控終端上，電子海圖的顯示功能非常重要，監(jiān)控終端的電子海圖標(biāo)記物包括點(diǎn)、線、多邊形、標(biāo)簽、警示和注記等。

本文基于HTML5- Canvas 模塊建立艦船移動(dòng)監(jiān)控終端的顯示框架，如圖4 所示。

圖4 船舶移動(dòng)監(jiān)控終端顯示框架設(shè)計(jì)原理Fig. 4 The ship mobile monitoring terminal shows the framework design principle

船舶移動(dòng)監(jiān)控終端的顯示框架主要由海圖標(biāo)志層、Shapefile 數(shù)據(jù)、canvas、數(shù)據(jù)庫(kù)、Web 服務(wù)器、點(diǎn)線面標(biāo)記繪制模塊等組成。

1）Shapefile 數(shù)據(jù)[4]

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

2）復(fù)雜元素處理

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

2.3 基于HTML5-Canvas 的監(jiān)控終端錨泊區(qū)繪制

基于HTML5-Canvas[5]的監(jiān)控終端電子海圖的錨泊區(qū)繪制，錨泊區(qū)的邊界線采用實(shí)心三角圖形表達(dá)，單個(gè)圖像的繪制可以調(diào)用數(shù)據(jù)庫(kù)的PNG 三角圖形符號(hào)，但對(duì)于電子海圖的錨泊區(qū)邊界整體顯示，還需要注意以下幾點(diǎn)：

1）對(duì)每個(gè)三角圖形的定點(diǎn)明確繪制算法；

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

3）解決邊界圖形的翻轉(zhuǎn)問(wèn)題。

本文利用Canvas API 函數(shù)進(jìn)行錨泊區(qū)邊界的繪制，圖5 為基于Canvas API 函數(shù)的錨泊區(qū)邊界線修正示意圖。

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

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

式中，r為邊界的斜率。

基于Canvas API 函數(shù)的錨泊區(qū)邊界修正可得：

3 基于HTML5 的艦船移動(dòng)監(jiān)控系統(tǒng)終端軟件程序開(kāi)發(fā)

本文采用QTouch 組態(tài)軟件進(jìn)行艦船移動(dòng)監(jiān)控終端的軟件程序開(kāi)發(fā)，QTouch 組態(tài)軟件基于Visual Studio 2008 平臺(tái)開(kāi)發(fā)而來(lái)，能夠?qū)崿F(xiàn)多種操作系統(tǒng)的兼容，同時(shí)具有信號(hào)監(jiān)測(cè)、邏輯轉(zhuǎn)換等功能。

QTouch 組態(tài)軟件使用C 語(yǔ)言編程，圖6 為基于QTouch 組態(tài)軟件的艦船移動(dòng)監(jiān)控終端程序設(shè)計(jì)流程圖。

圖6 艦船移動(dòng)監(jiān)控終端程序設(shè)計(jì)流程圖Fig. 6 Ship mobile monitoring terminal program design flowchart

4 結(jié) 語(yǔ)

本文基于HTML5 進(jìn)行了艦船移動(dòng)監(jiān)控終端的開(kāi)發(fā)，分別從艦船移動(dòng)監(jiān)控終端的硬件構(gòu)成、顯示框架開(kāi)發(fā)、電子海圖繪制和軟件程序開(kāi)發(fā)等方面研究。

1）設(shè)計(jì)艦船移動(dòng)監(jiān)控終端的整體架構(gòu)，并對(duì)終端中所有的模塊功能進(jìn)行闡述，給出了監(jiān)控終端的顯示框架；

2）提出基于HTML5-Canvas 的監(jiān)控終端錨泊區(qū)繪制，最后使用QTouch 組態(tài)軟件設(shè)計(jì)程序，并給出了設(shè)計(jì)的移動(dòng)終端程序流程。