TWaver可视化编辑器的前生今生,基于HTML5的电信网管3D机房监控应用

依据HTML5的电信网管3D机房监控应用

2014/02/24 · HTML5 ·
HTML5

原文出处:
xhload3d的博客   

先上段视频TWaver可视化编辑器的前生今生,基于HTML5的电信网管3D机房监控应用。,不是在玩游戏哦,是安安分分的电信网管公司应用,嗯,全键盘的畅游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还有很Dolly用Activex的C++引擎也都可以在Web上跑3D的引擎可以支持,但什么人能忽视mobile呢,这个年大家受够了Web开发千奇百怪的大杂烩解决方案,每一次到运营商客户运维终端看到古老的IE里面跑着各个插件糅合的软弱系统,种种OA厂家还自我陶醉的襄助IE678,还有此人拿着facebook从html5搬迁到native说事,其一这都是过去式了,其二那不是公司应用,MarkZuckerberg需求的东西和做公司应用的你自我是不平等的事物,下一个一时的集团应用技术一定是清清爽爽的HTML5!

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

[youku id=”XNjc2NDUzNzA4″]

美高梅开户网址 3
美高梅开户网址 4
美高梅开户网址 5

赞 收藏
评论

美高梅开户网址 6

先上段摄像,不是在玩游戏哦,是老老实实的电信网管公司应用,嗯,全键盘的出境游3D机房:

随即前几日的继承说哈。

详解快捷支付基于 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 内部封装了一个拓扑…

美高梅开户网址 8
乘势PC端帮忙HTML5浏览器的推广,加上主流移动终端Android和iOS都已辅助HTML5技术,新一代的电信网管应用大约一致性的首选HTML5,当然Flex和Silverlight的遗留系统照旧存活着,即使不考虑移动终端,不考虑未来珍视人士难找,不考虑必要承载成千成万的网元数量,不考虑公司职工的职业生涯前途,哪怕其个别父母adobe和ms都已弃之,其实Flex和Silverlight作为集团应用方案技术上或者可以的,还能存活很多过多年。

用作一款快捷、轻量、自带编辑作用小组件,TWaver Java在电信网管界一炮而红,在各小运营商的OSS,BSS,NMS系统中各处可知。

但自我看成程序员可是要考虑自己的职业生涯的,可能有人喜悦成为能有限扶助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不也照旧拿高薪,有选取的口径下何苦让祥和成为恐龙古董。

运用了TWaver图形组件的Hong Kong世博会督查画面: 
美高梅开户网址 9

回来昨天主旨,随着去年后半年来IE11和Android浏览器襄助WebGL之后,WebGL技术在自我接触的行业领域已成燎原之势。什么?还得考虑援助OA老系统的IE678,Chrome
Frame插件早就可以让IE678910跑WebGL了,更毫不说HTML5的2D的Canvas。什么?质量难题,可看看HT
for Web 跑数万网元的操作经验视频。

 

怎么样?包容性难题,这几个标题就交由各个框架来缓解,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岁在干吧?

运营商的传输网管软件: 
美高梅开户网址 10

自我喜欢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那些电信业务模型的忧伤点。见此摄像

 

选拔Hightopo还有很重大的少数就是HT提供了按照HTML5的可视化设计器,无需依靠3ds
max和maya那样的正儿八经3D设计工具,直接HT 3D
Designer通过页面就能展开3D建模,而动态的多寡部分通过API的格局驱动转变模型和实时更新即可,方今的这几个品种大家公司不必要美工都能完全由大家程序员自己搞定,当然要做可以贴图部分依旧须求美工ps的佑助。
美高梅开户网址 11
就好像电信OSS和BSS越来越难清晰定界一样,2D和3D的选用也会这么,越来越混淆,一个系统将2D和3D融合是必然趋势,你中有我我中有你,也许以后自己这些小说标题会让人觉着搞笑,机房监控当然要有3D功效了,何必强调3D,没有3D还算是机房监控吗,好比明日的无绳电话机,无法上网还算手机呢?

设备面板管理: 
美高梅开户网址 12

理所当然Flex、Silverlight还有很多用到Activex的C++引擎也都足以在Web上跑3D的引擎可以支撑,但何人能忽视mobile呢,那一个年我们受够了Web开发千奇百怪的大杂烩解决方案,每趟到运营商客户运维终端看到古老的IE里面跑着各类插件糅合的软弱系统,种种OA厂家还得意洋洋的支持IE678,还有好多个人拿着facebook从html5搬迁到native说事,其一那都是过去式了,其二那不是集团应用,MarkZuckerberg须求的东西和做公司应用的您自己是不相同的事物,下一个时代的集团应用技术一定是清清爽爽的HTML5!

 

自然3D不是电信网管的瞩目,以下是大家另一个单位做的太阳能发电、燃气和智能家居行业的3D监控系统运用供参考:

归咎资源管理系列: 
美高梅开户网址 13

美高梅开户网址 14

 

美高梅开户网址 15

本来,那唯有是个初叶,桌面应用很快就不能满意Web2.0一代的渴求,TWaver
Flex,.Net版本出现。 
美高梅开户网址 16

美高梅开户网址 17

 


在前日总的来说,HTML5犹如可以解决所有的标题,但在即时,Flash和Silverlight阵营可是拼得如火如荼。 
美高梅开户网址 18

 

举世瞩目,html5绝望制服了Flash。近期Adobe
发表,他们会于 2020 年年终终止更新和分发 Flash。 
美高梅开户网址 19

 

但回望TWaver推出TWaver Html5本子的二零一二年,PC不装flash依然是卓殊忧伤。 
美高梅开户网址 20

 

无论TWaver
Flex,.Net照旧HTML5,编辑器组件的出力如故越来越强大,事实上,TWaver提供的大部DEMO都是放置了“可编制”的选用的。

兼听则明地说一句,那多少个时候的TWaver在行业内一度是可圈可点了。

二〇一三年,TWaver研发了按照HTML5的3D引擎Mono,用它可以在网页上支出3D行使,而无需安装插件。即便当时业界较为成熟的3D技术是U3D,而TWaver果断接纳了最新的WebGL技术,在后天总的来说,也是一个充裕睿智的精选。Flash的故事已经告知大家,插件终将退出历史舞台。 
美高梅开户网址 21

 

是因为TWaver在电信行业的积聚,Mono针对电信机房做了尤其定制,封装了大量的电信业务和目的,用户可以经过Mono格外高效地的费用3D机房可视化产品。其中,使得开发疾速简化的便是Mono提供的一款设计工具:mono-design。 

美高梅开户网址 22

 

无论是公事编辑器、图像编辑器、视频编辑器,依然网页编辑器或是程序编辑器,他最大的一个特征就是“所见即所得”。可以说,编辑器是让创作变得可视化的工具。 
美高梅开户网址 23

 

Mono-design是一款专业的3D编辑器,可以透过拖拽和可视化的编撰,急迅编辑出机柜、设备等目的,或是房间、楼层等情状。Mono
Design也是业界第一款使用WebGL标准的3D编辑工具,不仅可以用Editor快速成立3D机房,而且也可以动用代码创制3D产品。 
美高梅开户网址 24

 

Mono-Design为3D开发提供了新思路,并且帮忙用户自定义look and
feel,可以看做最后用户的前端操作工具使用,飞快在用户中刮起了一股3D旋风。事实也表明,在3D电影、游戏、VR利用、全景图片当道的今日,3D可视化是毫无疑问。

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图