基于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架構軟件的開發提供技術支持和可靠保障。