HTML5技術在城軌交通供電SCADA系統中的應用

2019-08-22 07:27:32劉全

電子技術與軟件工程 2019年12期

關鍵詞：系統

文/劉全

1 HTML5概述

HTML5 是互聯網的下一代標準 , 是構建以及呈現互聯網內容的一種語言方式，被認為是互聯網的核心技術之一。HTML 產生于 1990年，HTML5 是 HTML 的第 5 個版本。

1.1 HTML5的特點

1.1.1 向下兼容

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

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

1.1.3 化繁為簡

HTML5 做了許多簡化工作。如：

（1）替代了復雜的 Java Script 設計；

（2）DOCTYPE 被大量精簡；

（3）簡化字符集聲明；

（4）擁有高效的 API。

1.1.4 訪問通用性

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

（2）HTML5 的媒體播可以跨平臺；

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

1.1.5 引入語義

HTML5 使用了一些標記元素，這改進了編碼的可讀性和代碼區域查詢的便利性。

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

1.2 HTML5關鍵技術

HTML5 增加了許多新語法，包括

HTML5 作為Web 應用的新一代技術標準，對Web 應用做出了巨大的改變，使得越來越多的開發者選擇通過Web 頁面來創建應用和游戲。Canvas 元素是HTML5 中最常用的元素，它的作用是在瀏覽器中提供一個矩形區域，Canvas 應用HTML 和JavaScript 語言在常用的瀏覽器中創建圖形和動畫，所以它經常用于游戲和演示中。Canvas 已經變為創建動態圖形和交互體驗的強大工具。Canvas 和SVG、Flash 技術相比，它在一定范圍內減少了插件的使用，提高了瀏覽器運行效率。

2 SCADA概述

隨著我國城市地鐵建設進入高速發展階段 , 地鐵的綜合監控系統技術也不斷在更新,SCADA 系統將早期各自分散和獨立的相關系統集成在了一起，實現了各系統信息的互聯互通。SCADA 系統全稱是"Supervisory Control and Data Acquisition",即監控和數據采集，也簡稱為監控系統或綜合監控。

SCADA 系統是計算機技術、自動控制技術等為一體的多學科應用。它允許用戶從一個或多個遠程設備收集數據，并發送控制命令。SCADA 系統的功能可分為三個模塊:通信設備模塊、遠程終端模塊和主終端模塊。

城市軌道交通SCADA 系統是一個基于網絡的地域上分散，包含控制中心的分布式綜合監控系統，由電力調度、變電所及通信三大部分組成。它是網絡和通訊技術在城市軌道交通中的重要應用。城市軌道交通SCADA 系統實現對所有供電設備的監視控制和數據采集，并對接觸網相關設備工作狀態也實時監視控制，完成供電系統調度和維護。隨著 HTML5 技術的流行，使用Canvas 正在成為Web SCADA 前端的首選設置。

3 HTML5技術在城軌交通供電SCADA系統的應用

HTML5 Canvas 通過JavaScript 調用Canvas API，來為顯示頁面繪制位圖圖像。Canvas API 功能強大，可在瀏覽器中實現各種圖形應用程序。Canvas API 既可以完成基本的圖形圖像，還能完成像素級操作。Canvas 圖形交互即使用“即時模式”實現，它可以快速在畫布上繪制用戶需求的內容。其他繪圖技術，如SVG，則會保留繪制圖形列表，這被稱為“保留模式”繪圖系統。而即時模式是比保留模式更原始的繪圖模式，也更加靈活，這主要是因為它是直接在屏幕上繪制的，不需要進行調整。

城市軌道交通SCADA 系統對變電所和接觸網的運行狀態進行監視控制，并完成維護，是與網絡技術和自動控制技術的深度結合。

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

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

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

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

width 矢量圖形的寬度；

height 矢量圖形的高度

comps 矢量圖形的組件 Array 數組，每個數組對象為一個獨立的組件類型，數組的順序為組件繪制先后順序。

同時可設置以下可選參數信息：

visible 是否可見，默認為 true；

opacity 透明度，默認為 1，可取值范圍 0～1；

color 染色顏色，設置上該顏色后矢量內部繪制內容將會融合該染色值；

clip 用于裁剪繪制區域，可設置兩種類型：boolean；

boolean 類型，控制繪制時超出 width 和 height 區域的內容是否被裁剪，默認為 false 不裁剪。

圖1：電力主接線圖監控畫面

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

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

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

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

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

field@* 開頭，返回 data。

4 結束語

SCADA 系統在城市軌道交通電力系統中得到廣泛應用，它對系統穩定、經濟、安全運行有著巨大的作用?；?HTML5 技術的Canvas 方案可定制展現圖表，界面美觀優化，并取得令人滿意的效果，還可以對 Canvas 的控件進行顏色定制，可以通過相關接口進行配置：

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