快速开发基于 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

2815
来自专栏花叔的专栏

解读小程序最新开发能力,官方只说了部分

微信7月11日发布了一大堆小程序新特性,而官方发文只提了其中几个点,今天为大家详细解读一下,主要涵盖以下内容:(注.这不是热更新,这是需要更新微信到1.4.0版...

3857
来自专栏前端新视界

如何使用 Bootstrap 搭建更合理的 HTML 结构

前言 Bootstrap 的成功不仅在于其简单易用,更在于其样式的规范性以及 HTML 结构的合理性。但是很多人在使用 Bootstrap 时只是依照文档盲目的...

3565
来自专栏企鹅号快讯

图片转文字居然这么简单,多亏了这几个神器!

我们经常会用手机拍摄、截屏了一大堆图片,领导的PPT、客户的名片、各种文案海报等等…… 想着有空后把资料整理成文字稿,但是一想到要在电脑上把文字打出来,巨大的工...

4.8K10
来自专栏极客慕白的成长之路

React . js 是怎样炼成的?

内容整理自 2014 年的 OSCON - React Architecture by vjeux(https://speakerdeck.com/vjeux/...

1534
来自专栏编程

2017 学习 JavaScript 感觉如何?

编译: 伯乐在线/dimple11 http://web.jobbole.com/93760/ 写给还没开始阅读本文的读者,本文是对《2016 年里做前端是怎样...

20210
来自专栏MixLab科技+设计实验室

App之底部导航栏的设计

hi,这是系列文章:App之xxx的第2篇,第1篇我总结了App之“文字”的设计技巧。今天来总结下app的底部导航栏的设计。 我为什么写这个系列的文章。因为我正...

40311
来自专栏前端架构

web app响应式字体设置!rem之我见

之前做沙漠教育的时候,直接以设计图为准,然后强暴式,缩放处理。简单。直接,粗暴!但是,开发快。……一劳永逸!

46811
来自专栏拂晓风起

HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

6385
来自专栏bboysoul

使用ArchiSteamFarm在树莓派挂卡

挂卡,我也是今天知道这个词语,意思就是steam中某些游戏有集换式卡牌,集齐能合成徽章有经验,玩游戏到一定时间可以获得总数一半数量的卡,挂卡就是挂游戏时间获得这...

1844

扫码关注云+社区

领取腾讯云代金券