首頁 > web前端 > H5教程 > 主體

快速開發基於HTML5網路拓樸圖應用的詳解(圖文)

黄舟
發布: 2018-05-22 11:38:13
原創
6538 人瀏覽過

此範例展示如何建構兩個節點、一條連線、以及一個 Group 的組合效果。可以輕鬆理解建立一個拓樸介面基本上就是操作DataModel 資料模型,以下為建構上圖介面效果的模型程式碼部分:

// init data modelhello = 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(&#39;station&#39;);
    node.p(100 + i * 100, 100);
    dm.add(node);

    list.push(node);
}
node = list[0];
node.s({    
&#39;label&#39;: &#39;厦门&#39;,    
&#39;label.font&#39;: &#39;22px arial, sans-serif&#39;,    
&#39;label2&#39;: &#39;Xiamen&#39;,    
&#39;label2.position&#39;: 31,    
&#39;label2.offset.y&#39;: 23});

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

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

node = list[3];
node.s({    
&#39;label&#39;: &#39;北京&#39;,    
&#39;label.position&#39;: 3,    
&#39;label.font&#39;: &#39;22px arial, sans-serif&#39;,    
&#39;label2&#39;: &#39;Beijing&#39;,    
&#39;label2.position&#39;: 3,    
&#39;label2.offset.y&#39;: -23});
登入後複製

當然也可以達到動態旋轉文字的效果,拖曳下面這個紅色圓球達到動態旋轉文字的效果:

#從上面例子可以參考光光一個文字還有設定顏色、背景、字體、最大長度等等參數,如果加上Position 的版面3D 的版面那幾乎可以基於文字獨立寫篇文章了,這裡就不一而足了,有興趣的可以玩位置手冊的各種例子:

建構完圖元連線關係,設定完圖元風格屬性,接下來主要就是圖元擺放問題,對於工業控制領域的圖元擺放一般是手動進行,所以Web SCADA 工業控制領域一般會建構一套針對自己產品的HMI 人機介面繪圖工具:

對於電信網管拓樸應用,由於網路拓撲圖元資料量往往常常非常巨大,雖然HT 拓樸圖元件效能非常強勁,承載好幾甚至上十萬的網路拓樸向量圖元都毫無壓力,但如何實現這麼多資料量圖元的佈局是個問題,如果是規規矩矩的自然比較容易,寫兩個for 循環就能實現網格佈局,這種例子一般用於能源行業控制系統,透過採用HT 的向量格式,可動態控制風機的轉速、顏色等參數,來直覺形象的表達該風扇的運作狀態

這個例子並沒有針對手機做特別優化,但我特意用iOS Safari 來跑,不得不說Safari 10 還是配得上HT 的這個例子,蘋果還是不斷努力在提升HTML5 在其產品線中的效能,而Safari 10 號稱已經100% 支援ES6 標準了,

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

不過更多的電信網管拓樸圖應用會採用HT 的自動佈局功能,利用好自動佈局功能可以大幅減少專案上線的實作工作量,且電信設備往往需要自動發現動態變化,幾乎無法用手動完成這些事情。如果結合華為任正非老大最近的言論,可以想像將來華為的電信網管拓撲,應該利用其獨有的行業網絡數據,依靠人工智能來提供自動佈局算法佈局,好吧,我扯遠了剎車回主題。

其實自動佈局無法提供演算法進行圖元擺放,以便達到業務展示的需求,這兩篇文章詳細分析瞭如果自訂出總線和沿著任意曲線佈局的案例:

以上創建網路圖元、設定圖元連線關係、配置圖元風格屬性、進行圖元佈局擺放就是建立拓樸圖的幾個基本步驟,其實熟悉了HT 分分鐘就能開發出像模像樣的HTML5 網路拓撲圖應用,使用者可將整個拓撲圖序列化成字串的JSON 格式內容,這樣你可以儲存到後台資料庫,或是後台伺服器文件皆可,HT 只是前端的圖形組件,不介入後台通訊和存儲,反正控制權在你,不收任何約束,可以隨心所欲的設計你的網絡拓撲圖整體系統架構。

以上是快速開發基於HTML5網路拓樸圖應用的詳解(圖文)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!