基於 HTML5 Canvas 的 Web SCADA 組態電機控制面板

前言

HT For Web 提供完整的基於 HTML5 圖形界面組件庫。您能夠輕鬆構建現代化的，跨桌面和移動終端的企業應用，無需擔心跨平臺兼容性，及觸屏手勢交互等棘手問題。也可用於快速建立和部署，高度可定製化，並具備強大交互功能的拓撲圖形及錶盤圖表等應用。HT for Web 很是適用於實時監控系統的界面呈現，普遍應用於電信網絡拓撲和設備管理，以及電力、燃氣等工業自動化 ( HMI / SCADA ) 領域。HT for Web 還有提供了一套一套強大的基於 WebGL 技術的 3D 圖形引擎，獨特的 WebGL 層抽象，將 Model – View – Presenter ( MVP ) 的設計模型延伸應用到了 3D 圖形領域。使用 HT for Web 您可更關注於業務邏輯功能，沒必要將精力投入複雜 3D 渲染和數學等非業務核心的技術細節。（ http://www.hightopo.com ）

做爲剛入門的小白（你們能夠叫我老鄭），我嘗試着一步一步的作這個面板，用這篇文章來記錄本身的一些收穫（畢竟我仍是個菜鳥）以及代碼的實現，但願可以幫到一些朋友。固然，若是有什麼意見能夠直接跟我說，你們一塊兒交流纔會進步！

效果圖

代碼實現

話很少說，上代碼。總體是一個 2D 的面板，那麼要引入咱們必須須要用到的 HT 核心庫：ht.js 。

首先，要建立數據容器和拓撲圖形組件。DateModel 做爲承載 Data 數據的模型，管理着Data數據的增刪以及變化事件派發， HT 框架全部組件都是經過綁定 DataModel，以不一樣的形式呈現到用戶界面；同時組件也會監聽 DataModel 模型的變化事件， 實時同步更新界面數據信息，掌握了 DataModel 的操做就掌握了全部組件的模型驅動方式；拓撲圖形組件 ht.graph.GraphView 是 HT 框架中 2D 功能最豐富的組件，其相關類庫都在 ht.graph 包下。GraphView 具備基本圖形的呈現和編輯、拓撲節點連線及自動佈局功能。

var dataModel = new ht.DataModel();
var graphView = new ht.graph.GraphView(dataModel);

經過如下代碼來進行一些基礎操做上的設置：

// 禁止平移
graphView.setPannable(false);
// 將其重載爲空函數，禁止滾動
graphView.handleScroll = function() {};
// 禁用touch上雙指操做縮放
graphView.handlePinch = function() {};
// 禁止拓撲上框選操做
graphView.setRectSelectable(false);
// 經過過濾器設置禁止拖動
graphView.setMovableFunc(function(data) { return false; });
// 後將組件加入到指定的 DOM 元素底下，不指定則加入到 document.body 下
graphView.addToDOM();
window.addEventListener('resize', function(e) { graphView.fitContent(); }, false);

接下來經過請求把圖紙（json 文件）的 url 寫好拿到咱們精心設計的面板。先還原成 JSON 字符串，而後將其反序列化並加入 dataModal 而後就能夠操做數據了。

var json = ht.Default.parse(text);
dataModel.deserialize(json);

而後，咱們來實現其中的一些小效果。第一，我想讓 Alarm 的 4 個小燈每 2s 交替變化一次。那麼，讓我們來寫一個函數來控制它們：

var flag = true;
setInterval(function () {
　　changeAlarmColor(dataModel, 'Alarm1', flag);
　　changeAlarmColor(dataModel, 'Alarm2', flag);
　　changeAlarmColor(dataModel, 'Alarm3', flag);
　　changeAlarmColor(dataModel, 'Alarm4', flag);
　　flag = !flag;
}, 2000);

function changeAlarmColor(dataModel, tag, flag) {
    var tag = dataModel.getDataByTag(tag);
        if(flag) {
            tag.a('backgroundColor', 'rgb(138,40,18)');
            tag.a('progressiveColor', 'rgb(232,97,56)');
        } else {
            tag.a('backgroundColor', 'rgb(34,168,38)');
            tag.a('progressiveColor', 'rgb(82,222,133)');
        }
}

由於我以前在 2D 編輯器中已經對它們的 tag 和屬性名進行了設置，因此我在這裏直接經過尋找 tag 值來返回指定標示的 Data 對象。接着只須要改變它們的屬性值就能夠產生想要的效果了。（.a 是獲取或設置 attr 屬性的簡寫，僅有一個參數時至關於getAttr，有兩個參數時至關於setAttr）怎麼樣，是否是很簡單。同理，咱們再將 PUMP 中每一個部分的文字和顏色每 2.5s 變化一次。

setInterval(function () {
　　changePumpState(dataModel, 'pump1');
　　changePumpState(dataModel, 'pump2');
　　changePumpState(dataModel, 'pump3');
}, 2500);

function changePumpState(dataModel, tag) {
　　var tag = dataModel.getDataByTag(tag);
　　var num = Math.floor(Math.random() * 3 + 1);
　　tag.a('status', num);
}

到這裏，細心的朋友可能看出我換了寫法，用了一個 status 屬性。由於咱們之後會遇到更多的屬性須要根據需求同時變化，那麼咱們逐一去操做會寫出大量的代碼。對比一下「笨方法」：

function changePumpState(dataModel, tag) {
　　var tag = dataModel.getDataByTag(tag);
　　var changeArr = [
　　　　{
　　　　　　instruction: 'Stopped',
　　　　　　instructionColor: 'rgb(234,0,0)',
　　　　　　backgroundColor: 'rgb(138,40,18)',
　　　　　　progressiveColor: 'rgb(232,97,56)',
　　　　　　status: 'FAULT'
　　　　},
　　　　{
　　　　　　instruction: 'Need to Run',
　　　　　　instructionColor: 'rgb(221,181,0)',
　　　　　　backgroundColor: 'rgb(29,143,32)',
　　　　　　progressiveColor: 'rgb(82,222,133)',
　　　　　　status: 'NO FAULT'
　　　　},
　　　　{
　　　　　　instruction: 'Running',
　　　　　　instructionColor: 'rgb(92,137,34)',
　　　　　　backgroundColor: 'rgb(29,143,32)',
　　　　　　progressiveColor: 'rgb(82,222,133)',
　　　　　　status: 'NO FAULT'
　　　　}
　　];
　　i = Math.floor(Math.random() * (changeArr.length - 1 + 1));
　　tag.a('instruction', changeArr[i].instruction);
　　tag.a('instructionColor', changeArr[i].instructionColor);
　　tag.a('backgroundColor', changeArr[i].backgroundColor);
　　tag.a('progressiveColor', changeArr[i].progressiveColor);
　　tag.a('status', changeArr[i].status);
}

因此，我在圖標裏本身聲明瞭一個屬性，並經過改變 status 值來控制我在編輯器中綁定在一塊兒的屬性以達到同時變換。哦對了，你們在作點擊圖標產生變化的時候別忘記在 2D 編輯器中選中「可交互」！下面咱們再作一個 TANK 進度條每 3s 隨機變化一次的動畫效果。

　　

setInterval(function () {
　　var tag = dataModel.getDataByTag('tank');
　　var num = Math.random() * 1;
　　ht.Default.startAnim({
　　　　duration: 500,
　　　　action: function(v, t){
　　　　　　tag.a('progress', num * v);
　　　　}
　　});
}, 3000);

這裏咱們用到了動畫。在 HT 的數據模型驅動圖形組件的設計架構下，動畫可理解爲將某些屬性由起始值逐漸變到目標值的過程， HT 提供了 ht.Default.startAnim 的動畫函數。它支持 Frame-Based 和 Time-Based 兩種方式的動畫，Frame-Based方式是用戶經過指定 frames 動畫幀數，以及 interval 動畫幀間隔參數控制動畫效果。

我用的是 Time-Based 方式，該方式用戶只須要指定 duration 的動畫週期的毫秒數便可，HT 將在指定的時間週期內完成動畫， 不一樣於 Frame-Based 方式有明確固定的幀數，即 action 函數被調用多少次，Time-Based 方式幀數或 action 函數被調用次數取決於系統環境， 通常來講系統配置更好的機器，更高效的瀏覽器則調用幀數越多，動畫過程更平滑。因爲 js 語言沒法精確控制 interval 時間間隔， 採用 Frame-Based 不能精確控制動畫時間週期，即便相同的 frames 和 interval 參數在不一樣的環境，可能會出現動畫週期差別較大的問題， 所以 HT 默認採用 Time-Based 的方式，若是不設置 duration 和 frames 參數，則 duration 參數將被系統自動設置爲 ht.Default.animDuration 值。action 函數就是實現動畫過程當中的屬性變化（變化參數和進度）。

好了，若是大家還想改變其 HT 系統默認屬性，能夠經過全局的 htconfig 變量名指定，HT 系統只在初始化時讀取 htconfig 的配置信息， 所以該屬性必須在引入 ht.js 包以前初始化好，運行狀態時修改 htconfig 變量不會再起做用。示例代碼以下：

<script>
　　htconfig = {
　　　　Color: {
　　　　　　label: '#000',
　　　　　　labelSelect: '#FFF'
　　　　},
　　　　Default: {
　　　　　　toolTipDelay: 100,
　　　　　　toolTipContinual: true
　　　　},
　　　　Style: {
　　　　　　'select.color': '#E74C3C',
　　　　　　'select.width': 0// 去掉默認選中樣式（綠框）
　　　　}
　　};
</script>
<script src="ht.js"></script>

總結

剛開始作的時候很費勁，以前沒有接觸過，不過用上編輯器以後發現一切都沒有想象的那麼難，雖然花了些時間，可是總的來講收穫仍是很大的，成長了不少，人都是要不斷進步嘛~

經過這個 demo 的實現，你也將會慢慢聯想到不少東西。互聯網+ 的概念在新興產業上可以很好地運營，同時在傳統行業中利用得當一樣可以產生很是大的效益，好比智慧城市建設，智慧能源管理，智慧工廠，甚至是地鐵、隧道監管等等均可以結合互聯網+ 的模式來運做，在必定程度上節省了很是多的人力和時間成本！