快速開發基於 HTML5 網絡拓撲圖應用

採用 HT 開發網絡拓撲圖很是容易，例如《入門手冊》的第一個小例子麻雀雖小五臟俱全：http://www.hightopo.com/guide...

該例子展現瞭如何構建兩個節點、一條連線、以及一個 Group 的組合效果。結合 《數百個 HTML5 例子學習 HT 圖形組件 – 拓撲圖篇》能夠容易理解構建一個拓撲界面基本上就是操做 DataModel 數據模型，如下爲構建上圖界面效果的模型代碼部分：

// init data model
hello = new ht.Node();
hello.setPosition(60, 140);             
hello.setName('Hello');
hello.setStyle('note', 'I love HT');
hello.setStyle('note.background', '#FFA000');
dataModel.add(hello);

world = new ht.Node();
world.setPosition(260, 80);
world.setName('World');
world.setStyle('note', 'HT for your imagination');
world.setStyle('note.expanded', false);  
world.setStyle('border.color', 'red');                
dataModel.add(world);

edge = new ht.Edge(hello, world);
edge.setName('Hello World\nwww.hightopo.com');
edge.setStyle('label.color', 'white');
edge.setStyle('label.background', '#3498DB');                
dataModel.add(edge);  

group = new ht.Group();
group.setName('HT for Web ' + ht.Default.getVersion());
group.addChild(hello);
group.addChild(world);
group.addChild(edge);
dataModel.add(group);

固然真實的系統不會像上述代碼這樣寫死內容，通常用戶經過後臺數據查詢，而後再根據後臺數據動態建立拓撲節點、連線、組、子網等圖元內容，並填充如圖元名字、連線顏色、告警內容等屬性信息，而由於 HT 技術基於 HTML5，所以大部分工業控制 Web SCADA 客戶都採用了 WebSocket 的實時通信方式，關於 WebSocket 的使用可參考這篇文章：3D拓撲自動佈局之Node.js篇

構建模型就是上面這樣簡單，剩下工做就是設置相應的圖元屬性達到信息展現和美觀的效果，關於圖元甚至總體 HT 圖形組件風格的自定義，可參考《HT for Web 風格手冊》，這裏我舉個簡單的小細節，可人有人留意到上面設置 label 的代碼有點特別：

edge.setName('Hello World\nwww.hightopo.com');

這裏 n 顧名思義就是換行的意思，固然除了換行外，還能夠有垂直佈局等等花哨的展現形態，可參考《網絡拓撲圖上文本的巧妙應用》一文的介紹：

var list = [], node;
for (var i = 0; i < 4; i++) {
    node = new ht.Node();
    node.setImage('station');
    node.p(100 + i * 100, 100);
    dm.add(node);

    list.push(node);
}
node = list[0];
node.s({
    'label': '廈門',
    'label.font': '22px arial, sans-serif',
    'label2': 'Xiamen',
    'label2.position': 31,
    'label2.offset.y': 23
});

node = list[1];
node.s({
    'label': '圖\n撲',
    'label.position': 14,
    'label.font': '22px arial, sans-serif',
    'label2': 'Hightopo',
    'label2.position': 14,
    'label2.offset.x': -7,
    'label2.rotation': -Math.PI / 2
});

node = list[2];
node.s({
    'label': '上\n海',
    'label.position': 20,
    'label.font': '22px arial, sans-serif',
    'label2': 'Shanghai',
    'label2.position': 20,
    'label2.offset.x': 6,
    'label2.rotation': -Math.PI / 2
});

node = list[3];
node.s({
    'label': '北京',
    'label.position': 3,
    'label.font': '22px arial, sans-serif',
    'label2': 'Beijing',
    'label2.position': 3,
    'label2.offset.y': -23
});

固然也能夠達到動態旋轉文字的效果，拖拽下面這個紅色圓球達到動態旋轉文字的效果：http://www.hightopo.com/guide...

從上面例子能夠參考光光一個文字還有設置顏色、背景、字體、最大長度等等參數，若是加上 Position 的佈局 3D 的佈局那幾乎能夠基於文字獨立寫篇文章了，這裏就不一而足了，有興趣的能夠玩玩位置手冊的各類例子：http://www.hightopo.com/guide...

構建完圖元連線關係，設置完圖元風格屬性，接下來主要就是圖元擺放問題，對於工業控制領域的圖元擺放通常是手工進行，因此 Web SCADA 工業控制領域通常會構建一套針對本身產品的 HMI 人機界面繪圖工具，可參考《基於HT for Web的Web SCADA工控移動應用》文章：

對於電信網管拓撲應用，因爲網絡拓撲圖元數據量每每經常很是巨大，雖然 HT 拓撲圖組件性能很是強勁，承載好幾甚至上十萬的網絡拓撲矢量圖元都毫無壓力，但如何實現這麼多數據量圖元的佈局是個問題，若是是規規矩矩的天然比較容易，寫兩個 for 循環就能實現網格佈局，可參考 http://www.hightopo.com/demo/... 這個數千個風機的例子，這種例子通常用於能源行業控制系統，經過採用 HT 的矢量格式，可動態控制風機的轉速、顏色等參數，來直觀形象的表達該風機的運行狀態。

這個例子 http://www.hightopo.com/demo/... 並無針對手機作特別優化，但我特地用 iOS Safari 來跑，不得不說 Safari 10 仍是配得上 HT 的這個例子，蘋果仍是不斷努力在提高 HTML5 在其產品線中的性能，而且 Safari 10 號稱已經 100% 支持 ES6 標準了，https://developer.apple.com/l...

The ECMAScript 2015 standard, also known as ES6, is completely supported, bringing this major JavaScript evolution to Safari on macOS and iOS.

不過更多的電信網管拓撲圖應用會採用 HT 的自動佈局功能，可參考《HT for Web 自動佈局手冊》和 《HT for Web 彈力布手冊》，利用好自動佈局功能能夠大大減小項目上線的實施工做量，且電信設備每每須要自動發現動態變化，幾乎沒法用手工完成這些事情。若是結合華爲任正非老大最近的言論 http://finance.sina.com.cn/ch... ，能夠想象未來華爲的電信網管拓撲，應該利用其獨有的行業網絡數據，依靠人工智能來提供自動佈局算法佈局，好吧，我扯遠了剎車回主題。

其實自動佈局沒法提供算法進行圖元擺放，以便達到業務展現的需求，可參考《電信網絡拓撲圖自動佈局 - 曲線佈局》和《電信網絡拓撲圖自動佈局 - 總線佈局》，這兩篇文章詳細分析了若是自定義出總線和沿着任意曲線佈局的案例：

以上建立網絡圖元、設置圖元連線關係、配置圖元風格屬性、進行圖元佈局擺放就是構建拓撲圖的幾個基本步驟，其實熟悉了 HT 分分鐘就能開發出像模像樣的 HTML5 網絡拓撲圖應用，若是須要數據存儲可參考《HT for Web 序列化手冊》，用戶可將整個拓撲圖序列化成字符串的 JSON 格式內容，這樣你能夠保存到後臺數據庫，或者後臺服務器文件皆可，HT 只是前端的圖形組件，不介入後臺通信和存儲，反正控制權在你，不收任何約束，能夠爲所欲爲的設計你的網絡拓撲圖總體系統架構。

更多 HTML5 拓撲圖例子可參考：http://www.hightopo.com/demos...