水文遥测站维护“指南者”——基于HTML5的Web App设计与实现

陈忠彬

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

水文遥测站维护“指南者”
——基于HTML5的Web App设计与实现

陈忠彬

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

为解决水文遥测站维护问题，“指南者”采用基于HTML5的Web APP设计方式，能很好地被不同系统的计算机和移动设备访问使用。该软件可以获取站点故障信息，导航路线到位置，集成了定位、指南针、水平仪等实用工具，可查询最新水文数据等，为维护人员提供了有效实用的帮助。

水文遥测站；维护；HTML5；Web APP

1 概述

随着水文基础设施建设不断加强，水文遥测站也越来越多。站点地域分布广，位置多在偏远乡镇农村。维护人员不仅需要人工分析故障站点、找所在位置，加上脱离了中心机房环境，查询相关数据不方便。一款跨平台、易使用、开发难度小、“众口易调”能适用于不同移动智能终端的App显得尤为重要。基于HTML5的Web App——水文遥测站维护“指南者”就符合上述需求，让维护人员在不同的移动终端都可以访问使用，方便有效辅助工作。

2 使用主要技术和开发工具

2.1 HTML5

HTML5是超文本标记语言（HTML）的第5次重大修改，标准标准规范于2014年10月制定完成，市面上几乎所有主流的计算机和移动设备浏览器都支持。

HTML5提高了用户体验，加强了视觉感受，让应用程序应用到网页，跨平台并对网页的功能进行扩展，用户不需要下载客户端或插件就能够观看视频、玩游戏，进行数据交互操作。用户可以离线使用，更新下载量及少，可以全部更新，也可以选择替换部分文件。HTML5可以通过浏览器作为中介充分利用Native（原生应用），比如说可以使用GPS、照相机、电子罗盘、本地联系人等，也可以使用推送功能等。HTML5可以将Web代码全部加密，本地应用解密后再运行，大大地提供了代码的安全性。相对于通常平台的审核需要7个工作日，HTML5只需修改即可实时更新。

HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HT⁃ML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音应用可直接与麦克风及摄像头相联。

2.2 Web App

Web App就是运行于网络和标准浏览器上，基于网页技术开发实现特定功能的应用。跨平台，移动应用开发者不再需要考虑复杂的底层适配和跨平台开发语言的问题。传统移动终端上的Native App，研发工作必须针对不同的操作系统进行，成本相对较高，对于用户还存在着管理成本、存储成本以及性能消耗成本。使用HTML来开发的Web App在投入上会大大的低于传统的Native App。基于当下开始普及流行的HTML5，Web App可以实现很多原本Native App才可以实现的功能，比如LBS的功能、本地数据存储、音视频播放的功能，甚至还有调用照相机和结合GPU的硬件加速功能。Web App则无需用户下载，并且和传统网站一样可以动态升级。Web App有App的特性，更有Web的特性。Web App可以像传统互联网网页那样互相链接，从一个网页跳转到另一个网页，从一个Web App直接跳转到另外一个Web App。

2.3 基于HTML5的Web App

基于HTML5的Web App既具有HTML5的特性，又有App的功能。能方便被计算机、笔记本电脑、移动应用终端用浏览器访问。用框架软件封装成Web App后，可在相应移动应用端安装使用。如图1所示。

图1 基于HTML5的Web App工作原理和访问模式

2.4 运行环境和主要开发工具

运行环境：有浏览器的计算机和移动端，使用支持HTML5的浏览器（更佳效果使用浏览器的高版本），在浏览器网址栏输入http：//www.gxylsw.com：86/cx/index.html可直接访问。可下载应用软件安装包到安卓设备端、苹果设备端等安装运行。

开发工具：Adobe Dreamweaver CS5（HTML5网页、CSS、JS制作软件），DCloud HBuilder（Web App框架软件，能打包生产安卓端、苹果端安装包），Adobe Photoshop CS6（图片处理软件）等。

3 软件的设计与实现

3.1 功能划分

3.1.1 查找故障或存在故障水文遥测站

“故障站点”模块：可以查看最新GPRS信道通信率，0％表示为故障，100％表示通信正常，介于两者之间为信号不稳定。

“低电压警示”模块：可以查看最新电压值，如果一个站点低于蓄电池标准电压，在接下来一段时间内间隔观查，如果该站点所在区域并非阴雨天，而始终处于低电压工作，判断为充电器或蓄电池存在故障。

“数据异常分析”模块：设计模型为查看站点来报文信号，但是雨量数据为0的情况。显示站点连续多少天雨量为0，如果超过一定天数，人工查看这段时间内区域降雨、周边降雨情况。做出该站点雨量数据是否存在异常。

3.1.2 导航到站点位置

“站点导航”模块：采用了高德地图的LBS（（Lo⁃cation Based Service基于位置的服务）平台，定位站点经纬度，则可在高德地图上显示位置，生产导航路线。选择性添加站点相关信息如观察员姓名、联系电话、站点所在环境照片、备注（有些站点需要带梯子，或越野车等这样的提醒信息）。

3.1.3 导航到站点位置

负责安装、维护，主要有以下3个模块：

“经纬定位”模块：获取定位位置的地址、经度、纬度。需要手机开启位置定位模式。

“指南针”模块：电子指南针，指方向，定太阳能板朝向。需要手机有电子罗盘功能。

“水平仪”模块：电子水平仪，把手机放在测试平面上，可以测试水平和垂直度。需要手机有重力感应功能。

3.1.4 查询最新数据

“最新数据”模块：查询站点最新雨量、水位、流量、墒情信息。让维护人员维修好仪器后，模拟雨量，看报文是否准确及时发送回中心机房，是否入数据库。

3.1.5 其他

“关于我们”模块：可以发布一些通知、联系人、联系方式等内容。

3.2 设计方式划分

3.2.1 访问云端数据库的HTML5页面

“站点导航”模块对应的ditu.html是采用HTML调用高德LBS平台，高德平台包含有云端数据库，定义包含有站点名称，站点类型，经度，纬度，观测员姓名，观测员联系电话，备注等字段。云端数据库不用我们自己建设服务器和架构网站，只需要利用大公司的开发API平台，架构强大的服务功能和免费强大的云服务器，快速、方便、安全访问数据，并能做到实时更新。非保密、公开的数据和功能都可以放到云端[1]。从移动互联网技术与产业的发展趋势来看，云计算的迅猛发展，尤其是“平台及服务”（PaaS）的加速部署，开启了低成本、大规模、易运行的云服务时代。云平台工作原理如图2。

3.2.2 访问服务器的HTML5页面

“故障站点”模块对应的gzzd.html、“低电压警示”对应的ddyjs.html和最新数据查询对应的页面是采用HTML5调用服务器架构网站页面，再由此网站页面去访问服务器数据库，这样可以利用自有服务器里的数据。工作原理如图2。

图2 HTML5访问数据库模式

3.2.3 调用手机功能的HTML5页面

“经纬定位”模块对应的dingwei.html、“指南针”模块对应的znz.html、“水平仪”模块对应的spy.html是调用手机功能的HTML5页面。通过HTML5代码编写，用Web App框架软件DCloud Hbuider进行封装。

3.2.4 显示静态内容的HTML5页面

主页index.html和“关于我们”模块对应的about.html就是静态页面，不和数据库互动，也不和手机互动，只是显示页面的内容。采用的实现方式是HTML5+CSS3+JS代码，让静态文本和图片灵动起来，更加友好显示给用户。

4 结语

基于HTML5的Web App模式，让开发变得简单、高效。开发者可以利用这一模式开发出多种多功能的应用。

水文遥测站维护“指南者”让维护人员从查找故障、引路到站点位置，维护后查看数据入库情况。跨平台的应用面向拿不同手机的维护人员也准备充分，不安装直接用浏览器操作查询。安装包支持市面上占有率最大的安卓和苹果平台，安装好的软件可以调用手机硬件，实现定位、指南、水平度测试等辅助工作。这都为维护人员提供参考和便利。浏览器端和设备端经测试，都能流畅运行。运行界面见图3。

图3 左侧为手机浏览器界面，右侧为安卓手机界面

[1] 张成岩，吴 静，仇剑书，等.基于HTML5的移动Web应用浅析[J].信息通信技术，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-），男，广西玉林人，广西玉林市水文水资源局工程师，学士，主要从事水文情报预报及水文分析工作。