网络拓扑图应用,TWaver可视化编辑器的前世今生
分类:澳门新萄京最大平台

基于HTML5的电信网管3D机房监控应用

2014/02/24 · HTML5 · HTML5

原文出处: xhload3d的博客   

先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房:
[youku id=”XNjc2NDQxNDM2″]
澳门新萄京 1
随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网管应用几乎一致性的首选HTML5,当然Flex和Silverlight的遗留系统依然存活着,如果不考虑移动终端,不考虑将来维护人员难找,不考虑需要承载成千上万的网元数量,不考虑公司员工的职业生涯前途,哪怕其各自父母adobe和ms都已弃之,其实Flex和Silverlight作为企业应用方案技术上还是可以的,还是能存活很多很多年。

但我作为程序员可是要考虑自己的职业生涯的,可能有人喜欢成为能维护CORBA或IBM大机那样的稀有物种得到高薪,我还是喜欢朝气蓬勃的技术氛围,我喜欢每天上Hacker News都能见到讨论我从事的技术的新鲜事,我喜欢有搞通用组件有Sencha和Kendoui可选择,搞图表有Highcharts可选择,搞2D拓扑和3D机房有Hightopo可选择,搞移动应用有JQuery Mobile可选择,每周末到徐家汇公园那个照的到太阳看得见湖色几乎成为我私人定制的木凳,打开平板好好通读这一周Web前端发送的一切新鲜事,是的我有JavaScript Weekly、HTML5 Weekly和Modern Web Observer可选择,我很庆幸自己活在这个HTML5时代,可以用一门javascript语言技术玩通用组件,玩Chart,玩拓扑,完3D,是的还可以玩后台NodeWeekly,再说了不成为稀缺动物,就玩HTML5不也照样拿高薪,有选择的条件下何苦让自己成为恐龙古董。

回到今天正题,随着去年后半年来IE11和Android浏览器支持WebGL之后,WebGL技术在我接触的行业领域已成燎原之势。什么?还得考虑支持OA老系统的IE678,Chrome Frame插件早就可以让IE678910跑WebGL了,更不用说HTML5的2D的Canvas。什么?性能问题,可看看HT for Web 跑数万网元的操作体验视频。

[youku id=”XNjc2NDc3ODgw”]

什么?兼容性问题,这些问题就交给各种框架来解决,HTML5的3D引擎非常多threejs是知名度较高的,但较臃肿大好几百k的包,什么功能都触及但都做不深入,动画引擎像玩具,做游戏引擎又缺碰撞检测,这点上不及后起之秀babylonjs,最早吸引我的是注意的是介绍babylonjs的这段话 I am a real fan of 3D development. Since I was 16, I spent all my spare time creating 3d engines with various technologies (DirectX, OpenGL, Silverlight 5, pure software, etc.). 这段话老让我郁闷的回忆自己16岁在干吗?

我喜欢babylonjs主要因为他专注游戏引擎的定位,同样企业应用我选择Hightopo的HT for Web 3D引擎,毕竟企业应用和游戏功能、性能、渲染效果等方面考虑的是不一样的,没有一个引擎能解决所有行业的所有问题,干活还得找最对口的工具,Hightopo的3D引擎包很小,核心3D引擎只有几十k,融合通用组件和2D的整体包也才200多k,另外HT的整体开发模式用同一个数据模型驱动了通用组件、2D拓扑组件包括3D引擎的组件,对于我做企业应用的Tree、Table这些和图形的联动是很重要的事情,这点做游戏的同学可能体会不到我们这些还得面对一大堆业务表格整体CURD同学的痛苦,另外Hightopo也具备必要的游戏引擎功能,例如全键盘导航操作功能,支持Mobile的Touch交互功能,基本的Collisions Detection碰撞检测。最后Hightopo毕竟专注电信行业,知道电信网管需要什么模块库,他能知道我等每天面对ODF/DDF/MDF/Shelf/Card/Port这些电信业务模型的痛苦点。见此视频

[youku id=”XNjc2NDUyNjY0″]

使用Hightopo还有很重要的一点就是HT提供了基于HTML5的可视化设计器,无需借助3ds max和maya这样的专业3D设计工具,直接HT 3D Designer通过页面就能进行3D建模,而动态的数据部分通过API的方式驱动生成模型和实时更新即可,最近的这些项目我们团队不需要美工都能完全由我们程序员自己搞定,当然要做漂亮贴图部分还是需要美工ps的帮助。
澳门新萄京 2
就像电信OSS和BSS越来越难清晰定界一样,2D和3D的应用也会如此,越来越模糊,一个系统将2D和3D融合是必然趋势,你中有我我中有你,也许将来我这个文章标题会让人觉得搞笑,机房监控当然要有3D功能了,何必强调3D,没有3D还算是机房监控吗,好比今天的手机,不能上网还算手机吗?

当然Flex、Silverlight还有很多采用Activex的C 引擎也都可以在Web上跑3D的引擎可以支持,但谁能忽视mobile呢,这些年大家受够了Web开发千奇百怪的大杂烩解决方案,每次到运营商客户运维终端看到古老的IE里面跑着各种插件糅合的脆弱系统,各种OA厂家还自鸣得意的支持IE678,还有不少人拿着facebook从html5迁移到native说事,其一那都是过去式了,其二那不是企业应用,Mark Zuckerberg需要的东西和做企业应用的你我是不一样的东西,下一个时代的企业应用技术必将是清清爽爽的HTML5!

当然3D不是电信网管的专注,以下是我们另一个部门做的太阳能发电、燃气和智能家居行业的3D监控系统应用供参考:

[youku id=”XNjc2NDUzNzA4″]

澳门新萄京 3 澳门新萄京 4 澳门新萄京 5

赞 收藏 评论

澳门新萄京 6

接着昨天的继续说哈。

详解快速开发基于 HTML5 网络拓扑图应用,html5拓扑图

今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D 功能最丰富的组件,其相关类库都在 ht.graph 包下。GraphView 具有基本图形的呈现和编辑功能,拓扑节点连线及自动布局功能,电力和电信等行业预定义对象,具有动画渲染等特效,因此其应用面很广泛,可作为监控领域的绘图工具和人机界面,可作为一般性的图形化编辑工具,可扩展成工作流和组织图等企业应用。简单说来就是:拓扑图是泛化的说法,电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等,简单说就是节点连线构成的这些都是这里指的拓扑图。

用 HT 开发一个网络拓扑图是非常容易的一件事,只需要短短几行代码就能完成一个简单的服务器与客户端的拓扑图:

澳门新萄京 7

这个例子非常基础,几乎完成了服务器与客户端在拓扑上的所有功能。话不多说,猜猜看这个例子包括 HTML 标签的所有部分总共花了多少行代码?减去空行也就 50 行,我还做了很多样式部分的设计,毕竟给大家看的例子不能太丑嘛~

大家可以在 tuputu_jb51.rar 自行下载代码,注意因为有 json 文件,会存在图片跨域问题,需要用 Firefox 或者本地服务器跑起来。

我们在最开始就说明一下,HT 是基于 HTML5 标准的企业应用图形界面一站式解决方案, 其包含通用组件、拓扑组件和 3D 渲染引擎等丰富的图形界面开发类库,用户只需要引入 ht.js 即可,而且跟别的任何东西完全不冲突,因为 HT 只是声明了一个全局变量 ht,仅此而已。

接下来解析代码部分,首先,搭建拓扑图场景:

dm = new ht.DataModel();//数据容器
gv = new ht.graph.GraphView(dm);//拓扑组件 参数为dm 绑定的数据模型
gv.addToDOM();//将拓扑图添加进body体中

HT 的所有组件的根部都是一个 div,通过 getView() 方法获取,我们在 addToDOM 方法中就用到了这个方法:

addToDOM = function(){   
    var self = this,
        view = self.getView(),  //获取组件底层 div
        style = view.style; 
    document.body.appendChild(view);//将底层 div 添加进 body 体中           
    style.left = '0';//HT 一般将组件都设置为 absolute 的绝对定位
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false); //事件监听窗口大小变化,iv 为延时刷新组件         
}

然后向拓扑场景中添加“服务器”以及“客户端”节点:

var server = new ht.Node();
server.setName('server');//设置节点名称,显示在节点下方
server.setImage('serverImage');//设置节点图片
server.setSize(20, 60);//设置节点大小
dm.add(server);//将节点添加进数据容器dm中
server.setPosition(100, 100);//设置节点坐标(x, y)

var group = new ht.Group();//组,组中可以有多个节点
group.setImage('groupImage');//设置图片
dm.add(group);
var client = new ht.Node();//这个节点是添加进组中的
client.setName('client');
client.setImage('clientImage');
dm.add(client);
group.addChild(client);//组添加孩子
group.setExpanded(true);//设置组为展开模式
client.setPosition(200, 100);//设置节点位置 如果组中只有一个节点,那么这个节点的位置可以为组的位置

服务端与客户端的连线?2 行代码搞定!其实 HT 中添加节点的方法非常简单,一般就 2 行代码能结束:先声明实例变量,然后将这个实例变量添加进数据容器中。

var edge = new ht.Edge(server, client);
dm.add(edge);

我们很好奇虚线是怎么做出来的?虚线的形成是搭建在连线之上的,步骤有 3 个:

  1. 引入 ht-dashflow.js 文件 ;
  2. 将连线的样式属性 edge.dash.flow 设置为 true;
  3. 在场景组件中打开虚线流动的开关,这里就是 gv.enableDashFlow(true);

是不是非常简单!接下来我们看看怎么设置:

edge.s({//节点设置样式属性
    'edge.dash': true,//显示虚线
    'edge.dash.flow': true,//开启虚线流动
    'edge.dash.color': 'yellow',//虚线颜色
    'edge.dash.pattern': [8, 8],//虚线样式
    'label': 'flow',//节点注释
    'label.background': 'pink',//节点注释背景颜色        
});

这样所有的显示部分就介绍完毕啦~等等,好像还少点什么?对了,我忘了介绍 HT 中的 ht.Group 类了,顾名思义,就是“组”的意思,组中可以包含很多节点,双击可显示或隐藏组内的所有节点,上面代码有写到,但是我还做了一点小动作,就是组右上角的显示部分,其实就是一个标注,用来提示说明的:

group.s({
    'group.background': 'rgba(255, 255, 0, 0.1)',//设置组的背景颜色
    'note': "Double click me!",//标注 显示的内容
    'note.position': 13,//标注位置
    'note.offset.y': 10,//标注位置y轴偏移
});

我们可以通过 note.position 来改变标注的位置(具体位置信息请参考HT for Web 位置手册 ),也可以使用 note.offset.x 和 note.offset.y 来改变标注的位置。

全部代码解析完毕!我会尽快更新,如果大家觉得进度慢的话,可以自己去我们官网( HT for Web )上学习,希望大家能有更多的收获,学习是自己的事情,快动手实践将这片文章的内容变成你自己的知识吧!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

HTML5 网络拓扑图应用,html5拓扑图 今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑...

Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。

作为一款高效、轻量、自带编辑功能小组件,TWaver Java在电信网管界一炮而红,在各大运营商的OSS,BSS,NMS系统中随处可见。

澳门新萄京 8

采用了TWaver图形组件的上海世博会监控画面: 
澳门新萄京 9

已有众多文章分享了生成Heatmap热图原理,可参考《How to make heat maps》和《How to make heat maps in Flex》,本文将介绍基于HTML5技术的实现方式,主要基于Cavans和WebGL这两种HTML5的2D和3D技术的应用,先上最终例子实现的界面效果和操作视频:

 

澳门新萄京 10

运营商的传输网管软件: 
澳门新萄京 11

实现Heatmap的开源js库比较出名的就是 heatmapjs ,该框架发展了2年多,作者Patrick Wied最近决定在保持开源的基础上,提供有偿的商业支持服务,这是好事,地球上绝大部分开源项目作者搞个barely可用的初级版本后,就多年不见更新了,而真正能实际上线使用的产品哪有不需要持续完善、增强可扩展性以及提供特殊定制服务的,考虑到作者这两年已无偿投了这么多(Over the last 2 years, I devoted more than 500 hours of work to improving heatmap.js to make it a truly great library. ),希望此文也能帮作者在国内起点宣传作用。

 

heatmapjs 采用的Canvas的2D绘制方式实现,这种基于CPU的绘制方式对于几百几千的点还凑合,但如果需要实时运算成千上万节点效果的,还是得依靠并发性更强大的GPU方式,采用HTML5的话只能是WebGL方案,还好Florian Boesch在《High Performance JS heatmaps》博客中提供了基于WebGL实现的heatmap方式,并将其开源在网络拓扑图应用,TWaver可视化编辑器的前世今生。  上,这两个开源库质量都还不错,一个基于Canvas实现,一个基于WebGL实现,后者性能高点,但需要支持WebGL的浏览器,heatmapjs 的文档例子比较全面,但两者接口都非常简单易学,代码也都就几百行,你完全可以根据项目情况选择甚至进行代码改造优化。

设备面板管理: 
澳门新萄京 12

回到我们要实现的例子,我将采用heatmapjs在内存中实时运算出热图,结合hightopo的HT for Web的3D引擎,以一堆节点连线关系的3D的网络拓扑图,其中节点代表热源,其越接近地面则地面温度越高,这样每个节点的xz面坐标信息作为要传入给heatmapjs的点xy二维坐标信息,三维节点的elevation也就是y轴信息,则作为离地面的距离信息,距离越大转成要传入heatmapjs的value值越小,最后启动HT for Web的三维拓扑自动布局弹力算法,这样可直观的观察图元节点在不同的空间位置动态变化时地板的温度热图变化效果。

 

代码核心就在重载forceLayout.onRelaxed函数,在每次自动布局过程将所有热源节点的信息构建成heatmap需要的数据,同时通过ht.Default.setImage(‘hm-bottom’, heatmap._renderer.canvas);将热图的canvas注册成HT的图片,而floor的地板图元绑定了注册的’hm-bottom’图片,这样就实现了内存绘制canvas,然后通过HT for Web的3D引擎将Cavnas作为贴图信息动态呈现到3D场景的效果。

综合资源管理系统: 
澳门新萄京 13

整个实现代码如下不到百行,你也可以采用 的WebGL方式来实现,这样就是3D到2D再到3D的有趣过程,这就是HTML5技术可无缝融合各种方案的魅力!

 

 1 MAX = 500;   2 WIDTH = 1024;   3 HEIGHT = 512;           4 function init() {                              5     dataModel = new ht.DataModel();               6     g3d = new ht.graph3d.Graph3dView(dataModel);                               7     g3d.getMoveMode = function(e){ return 'xyz'; };                           8     view = g3d.getView();               9     view.className = 'main';  10     document.body.appendChild(view);      11     window.addEventListener('resize', function (e) { g3d.invalidate(); }, false);              12     heatmap = h337.create({ width: WIDTH, height: HEIGHT });                                     13     ht.Default.setImage('hm-bottom', heatmap._renderer.canvas);              14     var floor = new ht.Node();  15     floor.s3(WIDTH, 1, HEIGHT);  16     floor.s({  17         '3d.selectable': false,  18         'layoutable': false,  19         'all.visible': false,  20         'top.visible': true,  21         'top.image': 'hm-bottom',  22         'top.reverse.flip': true,  23         'bottom.visible': true,  24         'bottom.transparent': true,  25         'bottom.opacity': 0.5,  26         'bottom.reverse.flip': true                  27     });  28     dataModel.add(floor);              29     var root = createNode();                     30     for (var i = 0; i < 3; i  ) {  31         var iNode = createNode();                         32         createEdge(root, iNode);  33         for (var j = 0; j < 3; j  ) {  34             var jNode = createNode();                              35             createEdge(iNode, jNode);                                                           36         }  37     }                     38     forceLayout = new ht.layout.Force3dLayout(g3d);    39     forceLayout.start();  40     forceLayout.onRelaxed = function(){  41         var points = [];  42         dataModel.each(function(data){  43             if(data instanceof ht.Node && data !== floor){  44                 var p3 = data.p3();  45                 if(p3[1] > MAX){  46                     p3[1] = MAX;  47                     data.setElevation(MAX);  48                 }  49                 else if(p3[1] < -MAX){  50                     p3[1] = -MAX;  51                     data.setElevation(-MAX);  52                 }                          53                 points.push({  54                     x: p3[0]   WIDTH/2,  55                     y: p3[2]   HEIGHT/2,  56                     value: MAX - Math.abs(p3[1])  57                 });  58             }  59         });  60         heatmap.setData({data: points, min: 0, max: MAX});  61     };  62 }  63 function createNode(){  64     var node = new ht.Node();               65     node.s({  66         'shape3d': 'sphere',  67         'shape3d.color': '#E74C3C',  68         'shape3d.opacity': 0.8,  69         'shape3d.transparent': true,  70         'shape3d.reverse.cull': true  71     });  72     node.s3(20, 20, 20);  73     dataModel.add(node);  74     return node;  75 }  76 function createEdge(sourceNode, targetNode){  77     var edge = new ht.Edge(sourceNode, targetNode);  78     edge.s({  79         'edge.width': 3,  80         'edge.offset': 10,                  81         'shape3d': 'cylinder',  82         'shape3d.opacity': 0.7,  83         'shape3d.transparent': true,  84         'shape3d.reverse.cull': true  85     });  86     dataModel.add(edge);  87     return edge;  88 }   

当然,这仅仅是个开始,桌面应用很快就无法满足Web2.0时代的要求,TWaver Flex,.Net版本应运而生。 
澳门新萄京 14

 

 


在今天看来,HTML5似乎可以解决所有的问题,但在当时,Flash和Silverlight阵营可是拼得如火如荼。 
澳门新萄京 15

 

众所周知,html5彻底战胜了Flash。近日Adobe 宣布,他们会于 2020 年年末停止更新和分发 Flash。 
澳门新萄京 16

 

但回望TWaver推出TWaver Html5版本的2012年,PC不装flash仍然是非常痛苦。 
澳门新萄京 17

 

无论是TWaver Flex,.Net还是HTML5,编辑器组件的功能依然越来越强大,事实上,TWaver提供的多数DEMO都是内置了“可编辑”的选项的。

自豪地说一句,那个时候的TWaver在行业内已经是可圈可点了。

2013年,TWaver研发了基于HTML5的3D引擎Mono,用它可以在网页上开发3D应用,而无需安装插件。尽管当时业界较为成熟的3D技术是U3D,而TWaver果断采用了最新的WebGL技术,在今天看来,也是一个十分明智的选择。Flash的故事已经告诉我们,插件终将退出历史舞台。 
澳门新萄京 18

澳门新萄京, 

鉴于TWaver在电信行业的积累,Mono针对电信机房做了特别定制,封装了大量的电信业务和对象,用户可以通过Mono非常快速地的开发3D机房可视化产品。其中,使得开发迅速简化的便是Mono提供的一款设计工具:mono-design。 

澳门新萄京 19

 

无论是文本编辑器、图像编辑器、视频编辑器,还是网页编辑器或是程序编辑器,他最大的一个特点就是“所见即所得”。可以说,编辑器是让创作变得可视化的工具。 
澳门新萄京 20

 

Mono-design是一款标准的3D编辑器,可以通过拖拽和可视化的编辑,迅速编辑出机柜、设备等对象,或是房间、楼层等场景。Mono Design也是业界第一款采用WebGL标准的3D编辑工具,不仅可以用Editor快速创建3D机房,而且也可以使用代码创建3D产品。 
澳门新萄京 21

 

Mono-Design为3D开发提供了新思路,并且支持用户自定义look and feel,可以作为最终用户的前端操作工具使用,迅速在用户中刮起了一股3D旋风。事实也证明,在3D电影、游戏、VR应用、全景图片当道的今天,3D可视化是大势所趋。

 

 

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:网络拓扑图应用,TWaver可视化编辑器的前世今生

上一篇:澳门新萄京:方法裁剪区域图像,利用HTML5中的 下一篇:没有了
猜你喜欢
热门排行
精彩图文