构建拓扑界面的基本步骤
说到工业控制里头，拓扑界面可重要了。我们只需要操控数据模型就能搞定那些节点啊、连线啊、组合效果之类的东西。那怎么做？其实简单来说就是根据后台的数据来生成各种图元内容，然后给它们加个属性信息，让显示出来井井有条的同时也好看点儿。下面我就给你详细说说怎么样一步一步把这个拓扑界面做好！
// 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 Worldnwww.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);
操作datamodel数据模型
搞拓扑界面的时候，得先搞定datamodel数据模型。就拿代码来说，简单点儿，弄两个点、一根线加上个分组就能搞定了。当然，这只是个简单的示例，实际上我们还得根据后台查出来的信息来动态地生成拓扑的各种元素。因为HT技术就是基于HTML5，所以很多工业控制WebSCADA客户端都用WebSocket这种实时通信方法，这样才能保证数据的新鲜度和准确性。
edge.setName('Hello Worldnwww.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});
搞定了图元属性设定，接下来就是怎么放它们的问题！其实，这种事儿在咱们工业控制界，基本都是靠手工完成的。所以，WebSCADA就搞了款自家用的HMI人机界面绘图工具，让大家轻松排兵布阵，搞定布局。
自动布局功能应用
咱们聊聊电信网管，那个拓扑图元素多得让人头疼？不过，用HT自动布局功能就能省心不少，无论多少个图形元素都能搞定！这不就提高效率啦，而且还能应对瞬息万变的网络环境嘞。
手机端优化与浏览器支持
这个例子并没特意为手机做优化，但是用iOS的Safari浏览器打开它看看，也挺好的~现在的Safari10就说自己能完全兼容ES6，给HTML5加成很多。再往后看，随着手机的越来越普遍和强大，手机端优化肯定会火起来的！
自定义总线布局
除了自动排版这项好帮手之外，有时候还得根据业务需求，自己动手设计总线或者实现在任意曲线上的布局。这个时候，就轮到咱们程序员大显身手，自己编写算法搞定。只要能把需求搞清楚，再用上我们熟悉的HT技术，再难的布局问题也不怕！
网络拓扑图整体系统架构
搞定了图元绘制、属性设定什么的，网络拓扑图就能变成JSON文件存进后台或者服务器。虽然HT主要是做前端画图这件事，跟后台啥的没啥关系，但在设计系统架构上还是很自由的，能根据需求来。
首先，你要知道怎么搭好HTML5网络拓扑图这个家。学好了HT技术，就能设计出好看又好用的拓扑图应用。不论是工业控制还是电信网管，用了这个技术，用户体验和系统效率都会大大提高！
评论0