基于HTML5的电信网管3D机房监控应用,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都能观望商讨自己从事的技艺的新人新事,我喜爱有搞通用组件有基于HTML5的电信网管3D机房监控应用,TWaver可视化编辑器的前生今生。Sencha和Kendoui可采取,搞图表有Highcharts可选择,搞2D拓扑和3D机房有Hightopo可拔取,搞活动使用有JQuery
Mobile可挑选,周周末到徐家汇公园至极照的到太阳看得见湖色大致成为自我私人定制的木凳,打开平板好好通读那七日Web前端发送的全方位新鲜事,是的本人有JavaScript
Weekly、HTML5
Weekly和Modern Web
Observer可选择,我很庆幸自己活在那一个HTML5时代,可以用一门javascript语言技术玩通用组件,玩Chart,玩拓扑,完3D,是的还足以玩后台NodeWeekly,再说了不成为稀缺动物,就玩HTML5不也依然拿高薪,有选拔的标准下何苦让祥和变成恐龙古董。

回去今天主旨,随着二零一八年后5个月来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

先上段视频,不是在玩游戏哦,是安安分分的电信网管公司应用,嗯,全键盘的畅游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图形组件的上海世博会督察画面: 
亚洲必赢官网 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说事,其一那都是过去式了,其二那不是集团应用,马克Zuckerberg需求的东西和做集团应用的你自己是不平等的事物,下一个时代的公司应用技术一定是清清爽爽的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地图