基于HTML5的船舶智能监控系统软件界面自适应实现

苏 芝， 李 茹

(1. 上海船舶运输科学研究所 舰船自动化系统事业部， 上海 200135；2. 上海工程技术大学 高等职业技术学院， 上海 200437)

0 引 言

随着通信技术和自动控制技术的发展及“自主船舶”建议的提出,航运界和造船界对船舶智能监控系统的需求不断高涨。船舶所有人不仅希望船舶在航行期间具有一定的“智能”特性，而且希望能采用多种方式对航行中的船舶进行远程监控, 这就提出了船舶智能监控系统软件能同时在桌面端和移动端使用的需求。然而，不同类型船舶的智能监控系统有很大差别，为每种船舶开发桌面端和移动设备端2套系统会带来巨大的开发成本和后期维护成本。在此情况下，提出船舶智能监控系统软件在桌面端和移动设备端界面自适应的要求。

1 响应式设计理念

传统的网页都是基于桌面端设计的，尺寸一般是固定的，不能根据设备的变化作相应的调整，因此在平板、手机等移动设备端显示的效果和可读性比较差，使用不方便，甚至可能影响正常使用(见图1)[1]。

响应式网页设计[2]也称自适应网页设计，可根据屏幕的尺寸、平台等自动调整其显示的界面，以保证界面操作方便、美观大方。

Bootstrap框架不仅具有良好的响应式设计理念，而且简单易学；ZRender包含需绘制的图形在内的多种绘制方式。因此，采用Bootstrap框架进行界面设计，采用ZRender进行图形绘制。

2 Bootstrap和ZRender介绍

Bootstrap[3]是Twitter网站推出的一种目前比较流行的开源工具包，基于HTML、JavaScript[4]和CSS开发，具有移动设备优先、支持主流浏览器、响应式设计、简单灵活和容易操作等优点[5-6]。基于Bootstrap框架开发的网站可解决多样化样式和平台无关性问题[5]。国内很多大型网站(如新浪时尚频道、知乎等)和很多主流电商网站(如淘宝、京东等)都采用Bootstrap框架，用户反映效果良好，开发技术成熟。

ZRender是二维绘图引擎，提供包含Canvas在内的多种渲染方式，不仅易学易用，而且具有丰富的图形选项和易扩展等功能[7]。ZRender库中封装有各网站采用的渲染方式。

因此，采用Bootstrap框架和ZRender渲染进行移动设备和桌面窗口界面自适应开发，无论是从布局、屏幕自适应方面看，还是从网页效果方面看，都更容易创造视觉的冲击，是Web开发的趋势[5-6]。

3 实现原理和开发流程

为实现移动设备端和桌面端界面自适应，利用栅格系统对移动设备端和桌面端采用不同的类属性。在开发过程中，只写1套在桌面端和移动设备端都能使用的代码，根据媒体查询设置不同的container容器宽度，在容器内用百分比设置其列col的宽度，以自适应不同大小的屏幕。一行row共有12个col,只需添加相关的类名，并使对应类名后面的数字之和为12即可。

图2 开发流程

开发流程为：采用Bootstrap布局对页面进行分割，在分割的不同Div中采用ID选择器对其封装的控件进行调用；在封装时，可对一个Div中要显示的控件进行整体封装；在调用控件时，可对其默认的属性进行设置。具体开发流程见图2。

4 实现过程

为实现移动设备端和桌面端界面自适应，主要考虑库中已有的控件和需开发的控件。本文主要对需开发的控件进行分析(已有的控件满足要求)。

以是否带标题矩形框为例进行绘制，以整个画面控件封装为例进行代码展示，采用MyEclipse2017编辑器和Tomcat 9.0服务器进行开发，具体步骤如下。

1) ZRender进行绘制。在该带标题的矩形框开发中，主要采用ZRender库中封装好的矩形函数(zrender.Rect)，对其形状(shape)和样式(style)进行属性赋值，具体代码见图3。

图3 是否带标题矩形框代码

2) JQuery封装。JQuery是JavaScript的一个函数库，可对JavaScript进行扩展和封装，使其使用更简单、方便。在进行JQuery封装时，可对一个Div中需显示的控件进行整体封装，该封装采用原型法(prototype类)，绑定多个函数，避免单个对象独占函数代码，影响效率。在封装时，采用$.fn.drawMEMainView定义扩展方法，用this.each遍历drawMEMainView中的每个函数。具体封装调用代码以主机画面为例进行说明(见图4)。

图4 JQuery封装代码

3) HTML文档调用。在调用MTML文档时采用ID选择器的方式，在布局好的Div中添加ID选择器，若在某个Div中添加内容，可直接使用ID选择器。图5为HTML文档调用,采用的ID选择器为$(‘#mytest1’)，调用封装好的JQuery(GE1monter)，这里设置的是Div内容显示的宽度和高度，也可根据需要对其默认属性进行相应的修改。

图5 HTML文档调用

图6 手机设备端显示效果

按上述操作即可实现移动设备端和桌面端界面自适应。

5 自适应界面的实现

5.1 移动设备端界面自适应的实现

在Bootstrap中，支持移动设备优先，需在HTML5开发文档标签中添加下述命令，即：

由此，不仅能根据设备本身的宽度自动缩放，而且可手动缩放，以实现移动设备端界面自适应。以手机为例，显示效果见图6，只需上下滑动手机屏幕即可清晰地浏览网页。

5.2 桌面端界面自适应的实现

界面展示以桌面屏幕分辨率为1 920×1 080为例进行展示，显示效果见图7。

图7 桌面端显示效果

5.3 分析与结论

采用Bootstrap框架进行界面布局，采用ZRender进行图形绘制，采用JQuery封装的方式进行移动设备端和桌面端界面自适应的开发。从图6和图7显示的效果中可看出，界面能在移动设备端自动适应屏幕尺寸，可解决传统设计存在的显示内容不全、不清晰和可读性差等问题。

6 结 语

基于HTML5技术，采用Bootstrap框架实现移动设备端和桌面端界面自适应。试验结果表明，自适应效果良好，不仅能节约开发成本和开发时间，降低软件维护成本，而且可为船舶智能监控系统的开发及其他B/S架构软件的开发提供技术支持和可靠保障。