水文遙測站維護“指南者”
——基于HTML5的Web App設(shè)計與實現(xiàn)

陳忠彬

（玉林市水文局水情科，廣西 玉林 537000）

水文遙測站維護“指南者”
——基于HTML5的Web App設(shè)計與實現(xiàn)

陳忠彬

（玉林市水文局水情科，廣西 玉林 537000）

為解決水文遙測站維護問題，“指南者”采用基于HTML5的Web APP設(shè)計方式，能很好地被不同系統(tǒng)的計算機和移動設(shè)備訪問使用。該軟件可以獲取站點故障信息，導航路線到位置，集成了定位、指南針、水平儀等實用工具，可查詢最新水文數(shù)據(jù)等，為維護人員提供了有效實用的幫助。

水文遙測站；維護；HTML5；Web APP

1 概述

隨著水文基礎(chǔ)設(shè)施建設(shè)不斷加強，水文遙測站也越來越多。站點地域分布廣，位置多在偏遠鄉(xiāng)鎮(zhèn)農(nóng)村。維護人員不僅需要人工分析故障站點、找所在位置，加上脫離了中心機房環(huán)境，查詢相關(guān)數(shù)據(jù)不方便。一款跨平臺、易使用、開發(fā)難度小、“眾口易調(diào)”能適用于不同移動智能終端的App顯得尤為重要?；贖TML5的Web App——水文遙測站維護“指南者”就符合上述需求，讓維護人員在不同的移動終端都可以訪問使用，方便有效輔助工作。

2 使用主要技術(shù)和開發(fā)工具

2.1 HTML5

HTML5是超文本標記語言（HTML）的第5次重大修改，標準標準規(guī)范于2014年10月制定完成，市面上幾乎所有主流的計算機和移動設(shè)備瀏覽器都支持。

HTML5提高了用戶體驗，加強了視覺感受，讓應(yīng)用程序應(yīng)用到網(wǎng)頁，跨平臺并對網(wǎng)頁的功能進行擴展，用戶不需要下載客戶端或插件就能夠觀看視頻、玩游戲，進行數(shù)據(jù)交互操作。用戶可以離線使用，更新下載量及少，可以全部更新，也可以選擇替換部分文件。HTML5可以通過瀏覽器作為中介充分利用Native（原生應(yīng)用），比如說可以使用GPS、照相機、電子羅盤、本地聯(lián)系人等，也可以使用推送功能等。HTML5可以將Web代碼全部加密，本地應(yīng)用解密后再運行，大大地提供了代碼的安全性。相對于通常平臺的審核需要7個工作日，HTML5只需修改即可實時更新。

HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗功能的優(yōu)勢。HT?ML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音應(yīng)用可直接與麥克風及攝像頭相聯(lián)。

2.2 Web App

Web App就是運行于網(wǎng)絡(luò)和標準瀏覽器上，基于網(wǎng)頁技術(shù)開發(fā)實現(xiàn)特定功能的應(yīng)用?？缙脚_，移動應(yīng)用開發(fā)者不再需要考慮復(fù)雜的底層適配和跨平臺開發(fā)語言的問題。傳統(tǒng)移動終端上的Native App，研發(fā)工作必須針對不同的操作系統(tǒng)進行，成本相對較高，對于用戶還存在著管理成本、存儲成本以及性能消耗成本。使用HTML來開發(fā)的Web App在投入上會大大的低于傳統(tǒng)的Native App?；诋斚麻_始普及流行的HTML5，Web App可以實現(xiàn)很多原本Native App才可以實現(xiàn)的功能，比如LBS的功能、本地數(shù)據(jù)存儲、音視頻播放的功能，甚至還有調(diào)用照相機和結(jié)合GPU的硬件加速功能。Web App則無需用戶下載，并且和傳統(tǒng)網(wǎng)站一樣可以動態(tài)升級。Web App有App的特性，更有Web的特性。Web App可以像傳統(tǒng)互聯(lián)網(wǎng)網(wǎng)頁那樣互相鏈接，從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁，從一個Web App直接跳轉(zhuǎn)到另外一個Web App。

2.3 基于HTML5的Web App

基于HTML5的Web App既具有HTML5的特性，又有App的功能。能方便被計算機、筆記本電腦、移動應(yīng)用終端用瀏覽器訪問。用框架軟件封裝成Web App后，可在相應(yīng)移動應(yīng)用端安裝使用。如圖1所示。

圖1 基于HTML5的Web App工作原理和訪問模式

2.4 運行環(huán)境和主要開發(fā)工具

運行環(huán)境：有瀏覽器的計算機和移動端，使用支持HTML5的瀏覽器（更佳效果使用瀏覽器的高版本），在瀏覽器網(wǎng)址欄輸入http：//www.gxylsw.com：86/cx/index.html可直接訪問?？上螺d應(yīng)用軟件安裝包到安卓設(shè)備端、蘋果設(shè)備端等安裝運行。

開發(fā)工具：Adobe Dreamweaver CS5（HTML5網(wǎng)頁、CSS、JS制作軟件），DCloud HBuilder（Web App框架軟件，能打包生產(chǎn)安卓端、蘋果端安裝包），Adobe Photoshop CS6（圖片處理軟件）等。

3 軟件的設(shè)計與實現(xiàn)

3.1 功能劃分

3.1.1 查找故障或存在故障水文遙測站

“故障站點”模塊：可以查看最新GPRS信道通信率，0％表示為故障，100％表示通信正常，介于兩者之間為信號不穩(wěn)定。

“低電壓警示”模塊：可以查看最新電壓值，如果一個站點低于蓄電池標準電壓，在接下來一段時間內(nèi)間隔觀查，如果該站點所在區(qū)域并非陰雨天，而始終處于低電壓工作，判斷為充電器或蓄電池存在故障。

“數(shù)據(jù)異常分析”模塊：設(shè)計模型為查看站點來報文信號，但是雨量數(shù)據(jù)為0的情況。顯示站點連續(xù)多少天雨量為0，如果超過一定天數(shù)，人工查看這段時間內(nèi)區(qū)域降雨、周邊降雨情況。做出該站點雨量數(shù)據(jù)是否存在異常。

3.1.2 導航到站點位置

“站點導航”模塊：采用了高德地圖的LBS（（Lo?cation Based Service基于位置的服務(wù)）平臺，定位站點經(jīng)緯度，則可在高德地圖上顯示位置，生產(chǎn)導航路線。選擇性添加站點相關(guān)信息如觀察員姓名、聯(lián)系電話、站點所在環(huán)境照片、備注（有些站點需要帶梯子，或越野車等這樣的提醒信息）。

3.1.3 導航到站點位置

負責安裝、維護，主要有以下3個模塊：

“經(jīng)緯定位”模塊：獲取定位位置的地址、經(jīng)度、緯度。需要手機開啟位置定位模式。

“指南針”模塊：電子指南針，指方向，定太陽能板朝向。需要手機有電子羅盤功能。

“水平儀”模塊：電子水平儀，把手機放在測試平面上，可以測試水平和垂直度。需要手機有重力感應(yīng)功能。

3.1.4 查詢最新數(shù)據(jù)

“最新數(shù)據(jù)”模塊：查詢站點最新雨量、水位、流量、墑情信息。讓維護人員維修好儀器后，模擬雨量，看報文是否準確及時發(fā)送回中心機房，是否入數(shù)據(jù)庫。

3.1.5 其他

“關(guān)于我們”模塊：可以發(fā)布一些通知、聯(lián)系人、聯(lián)系方式等內(nèi)容。

3.2 設(shè)計方式劃分

3.2.1 訪問云端數(shù)據(jù)庫的HTML5頁面

“站點導航”模塊對應(yīng)的ditu.html是采用HTML調(diào)用高德LBS平臺，高德平臺包含有云端數(shù)據(jù)庫，定義包含有站點名稱，站點類型，經(jīng)度，緯度，觀測員姓名，觀測員聯(lián)系電話，備注等字段。云端數(shù)據(jù)庫不用我們自己建設(shè)服務(wù)器和架構(gòu)網(wǎng)站，只需要利用大公司的開發(fā)API平臺，架構(gòu)強大的服務(wù)功能和免費強大的云服務(wù)器，快速、方便、安全訪問數(shù)據(jù)，并能做到實時更新。非保密、公開的數(shù)據(jù)和功能都可以放到云端[1]。從移動互聯(lián)網(wǎng)技術(shù)與產(chǎn)業(yè)的發(fā)展趨勢來看，云計算的迅猛發(fā)展，尤其是“平臺及服務(wù)”（PaaS）的加速部署，開啟了低成本、大規(guī)模、易運行的云服務(wù)時代。云平臺工作原理如圖2。

3.2.2 訪問服務(wù)器的HTML5頁面

“故障站點”模塊對應(yīng)的gzzd.html、“低電壓警示”對應(yīng)的ddyjs.html和最新數(shù)據(jù)查詢對應(yīng)的頁面是采用HTML5調(diào)用服務(wù)器架構(gòu)網(wǎng)站頁面，再由此網(wǎng)站頁面去訪問服務(wù)器數(shù)據(jù)庫，這樣可以利用自有服務(wù)器里的數(shù)據(jù)。工作原理如圖2。

圖2 HTML5訪問數(shù)據(jù)庫模式

3.2.3 調(diào)用手機功能的HTML5頁面

“經(jīng)緯定位”模塊對應(yīng)的dingwei.html、“指南針”模塊對應(yīng)的znz.html、“水平儀”模塊對應(yīng)的spy.html是調(diào)用手機功能的HTML5頁面。通過HTML5代碼編寫，用Web App框架軟件DCloud Hbuider進行封裝。

3.2.4 顯示靜態(tài)內(nèi)容的HTML5頁面

主頁index.html和“關(guān)于我們”模塊對應(yīng)的about.html就是靜態(tài)頁面，不和數(shù)據(jù)庫互動，也不和手機互動，只是顯示頁面的內(nèi)容。采用的實現(xiàn)方式是HTML5+CSS3+JS代碼，讓靜態(tài)文本和圖片靈動起來，更加友好顯示給用戶。

4 結(jié)語

基于HTML5的Web App模式，讓開發(fā)變得簡單、高效。開發(fā)者可以利用這一模式開發(fā)出多種多功能的應(yīng)用。

水文遙測站維護“指南者”讓維護人員從查找故障、引路到站點位置，維護后查看數(shù)據(jù)入庫情況?？缙脚_的應(yīng)用面向拿不同手機的維護人員也準備充分，不安裝直接用瀏覽器操作查詢。安裝包支持市面上占有率最大的安卓和蘋果平臺，安裝好的軟件可以調(diào)用手機硬件，實現(xiàn)定位、指南、水平度測試等輔助工作。這都為維護人員提供參考和便利。瀏覽器端和設(shè)備端經(jīng)測試，都能流暢運行。運行界面見圖3。

圖3 左側(cè)為手機瀏覽器界面，右側(cè)為安卓手機界面

[1] 張成巖，吳 靜，仇劍書，等.基于HTML5的移動Web應(yīng)用淺析[J].信息通信技術(shù)，2013（4）：57-60.

（責任編輯：周 群）

Maintenance guide of hydrological telemetry station-Design and implementation of Web APP based on HTML5

CHEN Zhong-bin
（Hydrology and Water Resources Bureau of Yulin City，Yulin 537000，China）

For maintenance of hydrological telemetry station，the guide is designed as Web APP based on HTML5，which permits visit and application of computer or mobile device installed with different systems.This software is able to effectively help the maintenance personnel by providing trouble information and navigation of failure hydro?logical station，practical tools such as positioning，compass and level etc.，as well as latest hydrological data.

Hydrological telemetry station；maintenance；HTML5；Web APP

TP311.52；P336

B

1003-1510（2016）05-007-03

2016-01-09

陳忠彬（1984-），男，廣西玉林人，廣西玉林市水文水資源局工程師，學士，主要從事水文情報預(yù)報及水文分析工作。