文/劉全

1 HTML5概述

HTML5 是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn) , 是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語言方式，被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML 產(chǎn)生于 1990年，HTML5 是 HTML 的第 5 個(gè)版本。

1.1 HTML5的特點(diǎn)

1.1.1 向下兼容

HTML5 對(duì)以前已存在的 Web 頁面，仍然可以保持正確的顯示。

1.1.2 用戶至上HTML5 遵循“用戶至上”的原則，在出現(xiàn)具體問題時(shí)，把用戶放在第一位。

1.1.3 化繁為簡(jiǎn)

HTML5 做了許多簡(jiǎn)化工作。如：

（1）替代了復(fù)雜的 Java Script 設(shè)計(jì)；

（2）DOCTYPE 被大量精簡(jiǎn)；

（3）簡(jiǎn)化字符集聲明；

（4）擁有高效的 API。

1.1.4 訪問通用性

（1）更加有利于殘障人士的閱讀；

（2）HTML5 的媒體播可以跨平臺(tái)；

（3）支持所有語種：如新元素。

1.1.5 引入語義

HTML5 使用了一些標(biāo)記元素，這改進(jìn)了編碼的可讀性和代碼區(qū)域查詢的便利性。

1.1.6 引入可編程內(nèi)容HTML5 引入了各種效果，而且都是 HTML5 原生的，HTML5 可以理解為 HTML+CSS+Java Script 的總稱。

1.2 HTML5關(guān)鍵技術(shù)

HTML5 增加了許多新語法，包括等元素，并整合了可縮放矢量的內(nèi)容，這對(duì)網(wǎng)頁中的多媒體和圖片內(nèi)容的處理帶來了方便。HTML5 的出現(xiàn)，大大促進(jìn) Web 應(yīng)用的發(fā)展，并促進(jìn)新的商業(yè)模式的出現(xiàn)。

HTML5 作為Web 應(yīng)用的新一代技術(shù)標(biāo)準(zhǔn)，對(duì)Web 應(yīng)用做出了巨大的改變，使得越來越多的開發(fā)者選擇通過Web 頁面來創(chuàng)建應(yīng)用和游戲。Canvas 元素是HTML5 中最常用的元素，它的作用是在瀏覽器中提供一個(gè)矩形區(qū)域，Canvas 應(yīng)用HTML 和JavaScript 語言在常用的瀏覽器中創(chuàng)建圖形和動(dòng)畫，所以它經(jīng)常用于游戲和演示中。Canvas 已經(jīng)變?yōu)閯?chuàng)建動(dòng)態(tài)圖形和交互體驗(yàn)的強(qiáng)大工具。Canvas 和SVG、Flash 技術(shù)相比，它在一定范圍內(nèi)減少了插件的使用，提高了瀏覽器運(yùn)行效率。

2 SCADA概述

隨著我國(guó)城市地鐵建設(shè)進(jìn)入高速發(fā)展階段 , 地鐵的綜合監(jiān)控系統(tǒng)技術(shù)也不斷在更新,SCADA 系統(tǒng)將早期各自分散和獨(dú)立的相關(guān)系統(tǒng)集成在了一起，實(shí)現(xiàn)了各系統(tǒng)信息的互聯(lián)互通。SCADA 系統(tǒng)全稱是"Supervisory Control and Data Acquisition",即監(jiān)控和數(shù)據(jù)采集，也簡(jiǎn)稱為監(jiān)控系統(tǒng)或綜合監(jiān)控。

SCADA 系統(tǒng)是計(jì)算機(jī)技術(shù)、自動(dòng)控制技術(shù)等為一體的多學(xué)科應(yīng)用。它允許用戶從一個(gè)或多個(gè)遠(yuǎn)程設(shè)備收集數(shù)據(jù)，并發(fā)送控制命令。SCADA 系統(tǒng)的功能可分為三個(gè)模塊:通信設(shè)備模塊、遠(yuǎn)程終端模塊和主終端模塊。

城市軌道交通SCADA 系統(tǒng)是一個(gè)基于網(wǎng)絡(luò)的地域上分散，包含控制中心的分布式綜合監(jiān)控系統(tǒng)，由電力調(diào)度、變電所及通信三大部分組成。它是網(wǎng)絡(luò)和通訊技術(shù)在城市軌道交通中的重要應(yīng)用。城市軌道交通SCADA 系統(tǒng)實(shí)現(xiàn)對(duì)所有供電設(shè)備的監(jiān)視控制和數(shù)據(jù)采集，并對(duì)接觸網(wǎng)相關(guān)設(shè)備工作狀態(tài)也實(shí)時(shí)監(jiān)視控制，完成供電系統(tǒng)調(diào)度和維護(hù)。隨著 HTML5 技術(shù)的流行，使用Canvas 正在成為Web SCADA 前端的首選設(shè)置。

3 HTML5技術(shù)在城軌交通供電SCADA系統(tǒng)的應(yīng)用

HTML5 Canvas 通過JavaScript 調(diào)用Canvas API，來為顯示頁面繪制位圖圖像。Canvas API 功能強(qiáng)大，可在瀏覽器中實(shí)現(xiàn)各種圖形應(yīng)用程序。Canvas API 既可以完成基本的圖形圖像，還能完成像素級(jí)操作。Canvas 圖形交互即使用“即時(shí)模式”實(shí)現(xiàn)，它可以快速在畫布上繪制用戶需求的內(nèi)容。其他繪圖技術(shù)，如SVG，則會(huì)保留繪制圖形列表，這被稱為“保留模式”繪圖系統(tǒng)。而即時(shí)模式是比保留模式更原始的繪圖模式，也更加靈活，這主要是因?yàn)樗侵苯釉谄聊簧侠L制的，不需要進(jìn)行調(diào)整。

城市軌道交通SCADA 系統(tǒng)對(duì)變電所和接觸網(wǎng)的運(yùn)行狀態(tài)進(jìn)行監(jiān)視控制，并完成維護(hù)，是與網(wǎng)絡(luò)技術(shù)和自動(dòng)控制技術(shù)的深度結(jié)合。

圖1是基于 HTML5 的電力接線圖 SCADA 應(yīng)用，這個(gè)例子用 HTML5 技術(shù)進(jìn)行開發(fā)，其中重復(fù)的部分封裝為一個(gè)“圖標(biāo)”，所謂“圖標(biāo)”指的就是矢量圖標(biāo)。矢量是矢量圖形的簡(jiǎn)稱，常見的 png 和 jpg 這類的柵格位圖，通過存儲(chǔ)每個(gè)像素的顏色信息來描述圖形，這種方式的圖片在拉伸放大或縮小時(shí)會(huì)出現(xiàn)圖形模糊，線條變粗出現(xiàn)鋸齒等問題。

在示例圖片中所有能用柵格位圖的地方都可用矢量圖形替代，例如 GraphView 組件上的圖元圖片，TreeView 和 TableView 上的圖標(biāo)等，這樣 GraphView 組件上的圖元縮放都不會(huì)失真。

在方案解決中，矢量采用 JSON 格式描述，使用方式和普通的柵格位圖一致，通過 ht.Default.setImage(‘hightopo’, jsonObject) 進(jìn)行注冊(cè)，使用是將相應(yīng)圖片注冊(cè)名設(shè)置到數(shù)據(jù)模型即可，如 node.setImage(‘hightopo’) 和 node.setIcon(‘hightopo’) 等。

矢量 json 描述必需包含 width、height 和 comps 參數(shù)信息：

width 矢量圖形的寬度；

height 矢量圖形的高度

comps 矢量圖形的組件 Array 數(shù)組，每個(gè)數(shù)組對(duì)象為一個(gè)獨(dú)立的組件類型，數(shù)組的順序?yàn)榻M件繪制先后順序。

同時(shí)可設(shè)置以下可選參數(shù)信息：

visible 是否可見，默認(rèn)為 true；

opacity 透明度，默認(rèn)為 1，可取值范圍 0～1；

color 染色顏色，設(shè)置上該顏色后矢量?jī)?nèi)部繪制內(nèi)容將會(huì)融合該染色值；

clip 用于裁剪繪制區(qū)域，可設(shè)置兩種類型：boolean；

boolean 類型，控制繪制時(shí)超出 width 和 height 區(qū)域的內(nèi)容是否被裁剪，默認(rèn)為 false 不裁剪。

圖1：電力主接線圖監(jiān)控畫面

接下來看一下：數(shù)據(jù)綁定，數(shù)據(jù)綁定意味將 Data 圖元的數(shù)據(jù)模型信息，與界面圖形的顏色、大小和角度等可視化參數(shù)進(jìn)行自動(dòng)同步，HT 的預(yù)定義圖形組件默認(rèn)就已與 DataModel 中的 Data 數(shù)據(jù)綁定，例如用戶修改 Node 的 position 位置值，則 GraphView 和 Graph3dView 上的相應(yīng)圖元位置會(huì)自動(dòng)同步變化。

綁定形式很容易完成，只要用帶 func 屬性的對(duì)象替換之前值即可，func 屬性包含以下幾種形式：

function 類型，即 func(data, view) 調(diào)用；

func@* 開頭，返回 data.getStyle() 值；

attr@* 開頭，返回 data.getAttr() 值；

field@* 開頭，返回 data。

4 結(jié)束語

SCADA 系統(tǒng)在城市軌道交通電力系統(tǒng)中得到廣泛應(yīng)用，它對(duì)系統(tǒng)穩(wěn)定、經(jīng)濟(jì)、安全運(yùn)行有著巨大的作用?；?HTML5 技術(shù)的Canvas 方案可定制展現(xiàn)圖表，界面美觀優(yōu)化，并取得令人滿意的效果，還可以對(duì) Canvas 的控件進(jìn)行顏色定制，可以通過相關(guān)接口進(jìn)行配置：

由于本文的工作量大，以及時(shí)間和條件的限制，本次設(shè)計(jì)尚有一些問題需要進(jìn)一步深入研究，概括如下：結(jié)合城市軌道交通供電SCADA 系統(tǒng)實(shí)際的HTML5 應(yīng)用項(xiàng)目有待加強(qiáng)，HTML5 下應(yīng)用組件較多，實(shí)際使用體驗(yàn)也有所不同，有待進(jìn)一步驗(yàn)證；與地鐵一線企業(yè)深度合作，全程參與城市軌道交通供電SCADA 系統(tǒng)管理，了解HTML5 應(yīng)用的不足之處，并在我校軌道交通機(jī)電專業(yè)課程中引入HTML5 內(nèi)容，逐步推廣HTML5 等計(jì)算機(jī)技術(shù)在城市軌道交通供電SCADA 系統(tǒng)中的應(yīng)用。