基於HTML5的Web SCADA工控移動應用

在電力、油田燃氣、供水管網等工業自動化領域Web SCADA的概念已經提出了多年，早先年的Web SCADA前端技術大部分仍是基於Flex、Silverlight甚至Applet這樣的重客戶端方案，在HTML5流行前VML和SVG算是真正純種Web方案也是有很多應用，近些年隨着HTML5的流行，加上移動終端對HTML5支持的普及，愈來愈多新項目開始採用真正純HTML5的方案，更具體的說大數據量應用性能高於SVG的Canvas方案，已經逐漸成爲當今Web SCADA前端技術的首選標配方案。

http://www.hightopo.com/demo/2deditor_20151010/HT-2D-Editor.html

最近客戶採用HT for Web圖形界面組件，實現了油田燃氣管網和供水管網等工控SCADA的HMI人機界面，並將系統運行在平板和手機等Android和iOS移動終端，在此咱們在技術支持過程當中的一些知識點進行些梳理和分享，但願對有志於Web SCADA領域的夥伴們提供些幫助。

技術選項階段用戶提出過SVG的技術路線，畢竟在早期電力領域SVG仍是有必定的標準和應用，但SVG在比較老的Android終端上支持並很差，並且SVG組件的方式致使圖元過多時性能差的問題，最終決定採用HT for Web提供的矢量技術方案，HT的矢量技術方案在《HT全矢量化的圖形組件設計》和《HT圖形組件設計之道（二）》有詳細介紹可參考之，並且採用HT的矢量方案不只獲得了縮放不失真的有點，還具有的動態數據綁定的強大功能，這對於工控領域須要根據實時數據驅動如風扇旋轉、管道流動、開關開閉等控制功能尤爲方便。

 

對於SCADA的HMI人機界面管網拓撲圖網絡加載的問題，用戶採用了咱們建議的Web客戶端緩存方案，很好的解決了較多網絡拓撲圖切換打開網絡加載慢的問題，可參考《HTML5 Web 客戶端五種離線存儲方式彙總》的文章，根據本身的具體項目狀況選擇合適你的本地存儲方案，其實Web本地存儲方案已經出現了衆多領域的千奇百怪應用黑魔法，有人應用LocalStorage存儲Web Font，遊戲領域利用Web客戶端存儲遊戲資源等等，Web客戶端存儲還遠未被徹底挖掘發揮起來。

移動終端呈現方面，HMI界面佈局應用和遊戲領域有相似的問題，通常對橫版或者豎版會有更好的佈局效果，例若有些遊戲只支持橫版的玩法，這對於採用Native的App應用來講不成問題，可將App配置成只能橫向或者縱向佈局，但對於移動終端瀏覽器就有點尷尬，目前大部分終端你是不能限制用戶旋轉平面致使佈局變化。爲此咱們給用戶提供了HTML5遊戲領域常規的解決方案，經過window.addEventListener(‘orientationchange’簡單手機方向變化，當處於你不支持的方向時，全屏顯示一張提示用戶旋轉屏幕後再進行正常操做的圖片，該方案看似簡單，但整個用戶體驗比起毫無提示旋轉出佈局一塌糊塗的界面體驗好了不少，這個簡單方案減小了不少無聊的客服工做，再也沒客戶責怪界面不能用，但界面方向不對時，提示圖片讓人天然而然就知道旋轉屏幕就能夠。

純HTML5方案默認方案確定會弱於Native方案，但HTML5瀏覽器標準也一直在完善，最近提出的screen.orientation.lock(‘landscape’) or screen.orientation.lock(‘portrait’)函數已經獲得了Android上的Chrome瀏覽器支持，可參考http://caniuse.com/#feat=screen-orientation 正好咱們的用戶使用的就是Android平板，安裝上較新的Chrome瀏覽器後就能前置要求瀏覽器鎖定佈局方向。

對於部分HTML5的應用頁面，用戶須要嵌入Native App的WebView和Native應用界面作集成，之前這種方案特別是在Android端總會讓我發毛，老的Android的WebView組件集成的奇爛的Chromium老版本，還沒法控制其升級，甚至曾經一度採用過自打包Chromium新版本到App的方案，結果搞得整個App加大了好幾十m的問題，不過現在隨着Android4.*的發展一切有了質變，Google終於放開了Android WebView的Chromium版本，默認現在都已是足夠搞的30以上的版本了，未來還能自動升級，更具體的可參考這篇文章 http://www.quirksmode.org/blog/archives/2015/02/android_webview.html

Before Android 4.4 all devices run Android WebKit as their WebView. (Is this the same Android WebKit as their default browser? Don’t know yet.)
From Android 4.4 the WebView is Chromium 30.
From Android 4.4.3 the WebView is Chromium 33.
From Android 5 the WebView is Chromium 37. In addition, the promise is that the Android 5 WebView will be updated to newer versions app-wise, i.e. without a firmware update. I will keep an eye on that.

在iOS也不是沒有坑，咱們發現因爲HT for Web爲支持視網膜精度，會根據設備window.devicePixelRatio參數控制拓撲圖Canvas的內存畫布大小，常遇到用戶未設置meta的viewport上的width參數，或者該參數設置過大致使iOS終端瀏覽器沒法顯示拓撲圖內容的狀況，這種狀況也不會報錯但就是沒內容，遇到這樣的狀況簡單的方案就是先讓用戶<meta name=」viewport」 content=」user-scalable=no, width=600″>設置上必定的width參數進行試驗定位是不是該問題致使，或者強制設置ht.Default.devicePixelRatio的HT參數，例如將其設置爲1，固然這樣就損失了視網膜設備下的精細效果，因此通常仍是建議調小viewport的width參數，畢竟界面縮小太多操做控制按鈕過小也是沒法正常操做。

HTML5應用的滲透力在去年基於HTML5的神經貓遊戲，在微信中的病毒式快速傳播已被業界真正認識到其力量，現在微信已經成爲遊戲、廣告等各行各業應用的重要入口，一樣基於HT for Web的Web SCADA工控移動應用也可在微信中傳播使用，如下附上幾張基於HT for Web客戶項目的應用抓圖，是的基於HTML5，監控能夠如此簡單，真正作到在你掌控以內：

http://www.hightopo.com/demo/2deditor_20151010/HT-2D-Editor.html