快速开发基于 HTML5 网络拓扑图应用

采用 HT 开发网络拓扑图很是容易，例如《入门手册》的第一个小例子麻雀虽小五脏俱全：http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html

该例子展现了如何构建两个节点、一条连线、以及一个 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/guide/core/beginners/examples/example_label.html

从上面例子能够参考光光一个文字还有设置颜色、背景、字体、最大长度等等参数，若是加上 Position 的布局 3D 的布局那几乎能够基于文字独立写篇文章了，这里就不一而足了，有兴趣的能够玩玩位置手册的各类例子：http://www.hightopo.com/guide/guide/core/position/ht-position-guide.html

构建完图元连线关系，设置完图元风格属性，接下来主要就是图元摆放问题，对于工业控制领域的图元摆放通常是手工进行，因此 Web SCADA 工业控制领域通常会构建一套针对本身产品的 HMI 人机界面绘图工具，可参考《基于HT for Web的Web SCADA工控移动应用》文章：

对于电信网管拓扑应用，因为网络拓扑图元数据量每每经常很是巨大，虽然 HT 拓扑图组件性能很是强劲，承载好几甚至上十万的网络拓扑矢量图元都毫无压力，但如何实现这么多数据量图元的布局是个问题，若是是规规矩矩的天然比较容易，写两个 for 循环就能实现网格布局，可参考 http://www.hightopo.com/demo/fan/index.html 这个数千个风机的例子，这种例子通常用于能源行业控制系统，经过采用 HT 的矢量格式，可动态控制风机的转速、颜色等参数，来直观形象的表达该风机的运行状态。

这个例子 http://www.hightopo.com/demo/fan/index.html 并无针对手机作特别优化，但我特地用 iOS Safari 来跑，不得不说 Safari 10 仍是配得上 HT 的这个例子，苹果仍是不断努力在提高 HTML5 在其产品线中的性能，而且 Safari 10 号称已经 100% 支持 ES6 标准了，https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html

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/chanjing/gsnews/2016-09-26/doc-ifxwevmf2247492.shtml ，能够想象未来华为的电信网管拓扑，应该利用其独有的行业网络数据，依靠人工智能来提供自动布局算法布局，好吧，我扯远了刹车回主题。

其实自动布局没法提供算法进行图元摆放，以便达到业务展现的需求，可参考《电信网络拓扑图自动布局 - 曲线布局》和《电信网络拓扑图自动布局 - 总线布局》，这两篇文章详细分析了若是自定义出总线和沿着任意曲线布局的案例：

以上建立网络图元、设置图元连线关系、配置图元风格属性、进行图元布局摆放就是构建拓扑图的几个基本步骤，其实熟悉了 HT 分分钟就能开发出像模像样的 HTML5 网络拓扑图应用，若是须要数据存储可参考《HT for Web 序列化手册》，用户可将整个拓扑图序列化成字符串的 JSON 格式内容，这样你能够保存到后台数据库，或者后台服务器文件皆可，HT 只是前端的图形组件，不介入后台通信和存储，反正控制权在你，不收任何约束，能够为所欲为的设计你的网络拓扑图总体系统架构。

更多 HTML5 拓扑图例子可参考：http://www.hightopo.com/demos/index.html