最近客戶採用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客戶端儲存還遠未被完全挖掘發揮起來。
純html5方案預設方案肯定會弱於native方案，但html5瀏覽器標準也一直在完善，最近提出的screen.orientation.lock(『landscape』) or screen.orientation.lock(『portrait』)函式已經得到了android上的chrome瀏覽器支援，可參考 正好我們的使用者使用的就是android平板，安裝上較新的chrome瀏覽器後就能前置要求瀏覽器鎖定布局方向。
在ios也不是沒有坑，我們發現由於ht for web為支援視網膜精度，會根據裝置window.devicepixelratio引數控制拓撲圖canvas的記憶體畫布大小，常遇到使用者未設定meta的viewport上的width引數，或者該引數設定過大導致ios終端瀏覽器無法顯示拓撲圖內容的情況，這種情況也不會報錯但就是沒內容，遇到這樣的情況簡單的方案就是先讓使用者設定上一定的width引數進行試驗定位是否是該問題導致，或者強制設定ht.default.devicepixelratio的ht引數，例如將其設定為1，當然這樣就損失了視網膜裝置下的精細效果，所以一般還是建議調小viewport的width引數，畢竟介面縮小太多操作控制按鈕太小也是無法正常操作。
2 基於html5的模板
2.基於html5的模板 html5的模板包括doctype,html元素，head元素 1.doctype 是我們進行文件型別宣告，讓用來告訴瀏覽器 或任何分析程式 他們所檢視的檔案型別。在過去的doctype宣告非常難看且難記 熟悉html的人對這些 在熟悉不過了。但是在html5中將上述 精簡...
基於HTML5堆木頭遊戲
今天要來分享一款很經典的html5遊戲 堆木頭遊戲，這款遊戲的玩法是將木頭堆積起來，多出的部分將被切除，直到下一根木頭無法堆放為止。這款html5遊戲的難點在於待堆放的木頭是移動的，因此需要你很好的控制木頭下落的位置。實現的 html div style width 320px height 370...
基於HTML5的Web SCADA工控移動應用
最近客戶採用ht for web圖形介面元件，實現了油田燃氣管網和供水管網等工控scada的hmi人機介面，並將系統執行在平板和手機等android和ios移動終端，在此我們在技術支援過程中的一些知識點進行些梳理和分享，希望對有志於web scada領域的夥伴們提供些幫助。技術選項階段使用者提出過s...