当前位置: 首页 > 编程日记 > 正文

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

先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房:


随着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 跑数万网元的操作体验视频。

什么?兼容性问题,这些问题就交给各种框架来解决,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这些电信业务模型的痛苦点。见此视频

使用Hightopo还有很重要的一点就是HT提供了基于HTML5的可视化设计器,无需借助3ds max和maya这样的专业3D设计工具,直接HT 3D Designer通过页面就能进行3D建模,而动态的数据部分通过API的方式驱动生成模型和实时更新即可,最近的这些项目我们团队不需要美工都能完全由我们程序员自己搞定,当然要做漂亮贴图部分还是需要美工ps的帮助。

就像电信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监控系统应用供参考:

相关文章:

从原理到实现,详解基于朴素ML思想的协同过滤推荐算法

作者丨gongyouliu编辑丨Zandy来源 | 大数据与人工智能(ID: ai-big-data)作者在《协同过滤推荐算法》、《矩阵分解推荐算法》这两篇文章中介绍了几种经典的协同过滤推荐算法。我们在本篇文章中会继续介绍三种思路非常简单朴素的协同过滤算法,这…

C++/C++11中引用的使用

引用(reference)是一种复合类型(compound type)。引用为对象起了另外一个名字,引用类型引用(refer to)另外一种类型。通过将声明符写成&d的形式来定义引用类型,其中d是声明的变量名。 一、一般引用:一般在初始化变量时,初始值…

node.js学习5--------------------- 返回html内容给浏览器

/*** http服务器的搭建,相当于php中的Apache或者java中的tomcat服务器*/ // 导包 const httprequire("http"); const fsrequire("fs"); //创建服务器 /*** 参数是一个回调函数,回调函数2个参数,1个是请求参数,一个是返回参数*/ let serverhttp.createServe…

内核分析阅读笔记

内核分析阅读笔记 include/Linux/stddef.h中macro offsetof define,list: #define offsetof(TYPE,MEMBER) ((size_t) &((TYPE *)0)->MEMBER) offsetof macro对于上述示例的展开剂分析:&((struct example_struct *)0)->list表示当结构example_struct正好在地址0上…

杨强教授力荐,快速部署落地深度学习应用的实践手册

香港科技大学计算机科学与工程学系讲座教授、国际人工智能联合会(IJCAI)理事会主席(2017—2019)、深圳前海微众银行首席AI 官 杨强为《深度学习模型及应用详解》一书撰序,他提到现在亟需一本介绍深度学习技术实践的图书…

OpenFace库(Tadas Baltrusaitis)中基于HOG进行正脸人脸检测的测试代码

Tadas Baltrusaitis的OpenFace是一个开源的面部行为分析工具,它的源码可以从https://github.com/TadasBaltrusaitis/OpenFace下载。OpenFace主要包括面部关键点检测(facial landmard detection)、头部姿势估计(head pose estimation)、面部动作单元识别(facial acti…

nginx conf 文件配置

打印输出: location / { default_type text/plain; return 502 "$uri"; } $remode_addr 获取访问者的ID$request_method 判断提交方式 GET POST$http_user_agent 获取浏览器软件 if (条件) {} #if之后要有空格 条件3种写法: 1: 来判断相等,用于字符串比较 …

js中 字符串与Unicode 字符值序列的相互转换

一. 字符串转Unicode 字符值序列 var str "abcdef"; var codeArr []; for(var i0;i<str.length;i){codeArr.push(str.charCodeAt(i)); } console.log(codeArr);-->[97, 98, 99, 100, 101, 102] 二.Unicode 字符值序列转字符串 var str String.fromCharCode…

OpenFace库(Tadas Baltrusaitis)中基于Haar Cascade Classifiers进行人脸检测的测试代码

Tadas Baltrusaitis的OpenFace是一个开源的面部行为分析工具&#xff0c;它的源码可以从 https://github.com/TadasBaltrusaitis/OpenFace 下载。OpenFace主要包括面部关键点检测(facial landmard detection)、头部姿势估计(head pose estimation)、面部动作单元识别(facial a…

Uber提出损失变化分配方法LCA,揭秘神经网络“黑盒”

作者 | Janice Lan,Rosanne Liu等译者 | 清儿爸责编 | 夕颜出品 | AI科技大本营&#xff08;ID: rgznai100&#xff09;【导读】神经网络&#xff08;Neural networks&#xff0c;NN&#xff09;在过去十年来硕果累累&#xff0c;推动了整个行业的机器学习进程。然而&#xff0…

范登读书解读《亲密关系》(婚姻、爱情) 笔记

来源&#xff1a;邀请你看《樊登解读《亲密关系》&#xff08;已婚人士必看&#xff09;》&#xff0c;https://url.cn/5HJvLk5?sfuri 人们在童年的时候始终追寻着两种东西&#xff0c;第一种叫做归属感&#xff0c;第二叫做确认自己的重要性、价值感。 如果再童年的时候缺失这…

myeclipse莫名其妙的问题

2019独角兽企业重金招聘Python工程师标准>>> 怎么刷新&#xff0c;clean项目都不管用&#xff0c;结果删除相应工作空间下的那个项目就行。类似路径如D:\workspace\.metadata\.plugins\org.eclipse.core.resources\.projects 转载于:https://my.oschina.net/u/14488…

数据科学家需要知道的5种图算法

作者&#xff1a;Rahul Agarwal编译&#xff1a;ronghuaiyang来源 | AI公园&#xff08;ID:AI_Paradise&#xff09;【导读】因为图分析是数据科学家的未来。作为数据科学家&#xff0c;我们对pandas、SQL或任何其他关系数据库非常熟悉。我们习惯于将用户的属性以列的形式显示在…

在Windows7/10上快速搭建深度学习框架Caffe开发环境

之前在 http://blog.csdn.net/fengbingchun/article/details/50987353 中介绍过在Windows7上搭建Caffe开发环境的操作步骤&#xff0c;那时caffe的项目是和其它依赖项目分开的&#xff0c;每次换新的PC机时再次重新配置搭建还是很不方便&#xff0c;而且caffe的版本较老&#x…

扫码下单支持同桌单人点餐FAQ

一、使用场景 满足较多商户希望同一桌台&#xff0c;各自点各自的菜品的业态场景&#xff08;例如杭味面馆&#xff0c;黄焖鸡米饭店&#xff0c;面馆等大多数轻快餐店&#xff09; 二、配置步骤及注意事项 管理员后台配置--配置管理--店铺配置--扫码点餐tab页 1、开启扫码下单…

使用photoshop 10.0制作符合社保要求的照片

2019独角兽企业重金招聘Python工程师标准>>> 北京市社保新参统人员照片修制方法 修改目标&#xff1a;照片规格:358像素&#xff08;宽&#xff09;&times;441像素&#xff08;高&#xff09;&#xff0c;分辨率350dpi。 颜色模式:24位RGB真彩色。 储存格式&am…

C++11中std::addressof的使用

C11中的std::addressof获得一个对象的实际地址&#xff0c;即使 operator& 操作符已被重载。它常用于原本要使用 operator& 的地方&#xff0c;它接受一个参数&#xff0c;该参数为要获得地址的那个对象的引用。一般&#xff0c;若operator &()也被重载且不一致的话…

一份职位信息的精准推荐之旅,从AI底层架构说起

整理 | 夕颜出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;【导读】也许&#xff0c;每天早上你的邮箱中又多了一封职位推荐信息&#xff0c;点开一看&#xff0c;你可能发现这些推荐正合你意&#xff0c;于是按照这些信息&#xff0c;你顺利找到一份符合自己期待的…

Vue.js 生命周期

2019独角兽企业重金招聘Python工程师标准>>> 每个 Vue 实例在被创建之前都要经过一系列的初始化过程 vue在生命周期中有这些状态&#xff0c; beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue在实例化的过程中&#x…

AX2009取销售订单的税额

直接用以下方法即可&#xff1a; Tax::calcTaxAmount(salesLine.TaxGroup, salesLine.TaxItemGroup, systemDateGet(), salesLine.CurrencyCode, salesParmLine.LineAmount, salesTable.taxModuleType()); salesParmLine.LineAmount&#xff1a;这个直接取的是装箱单或者发票…

Dubbo源码解析之服务路由策略

1. 简介 服务目录在刷新 Invoker 列表的过程中&#xff0c;会通过 Router 进行服务路由&#xff0c;筛选出符合路由规则的服务提供者。在详细分析服务路由的源码之前&#xff0c;先来介绍一下服务路由是什么。服务路由包含一条路由规则&#xff0c;路由规则决定了服务消费者的调…

C++中std::reverse和std::reverse_copy的使用

std::reverse&#xff1a;反转排序容器内指定范围中的元素。std::reverse_copy与std::reverse唯一的区别是&#xff1a;reverse_copy会将结果拷贝到另外一个容器中&#xff0c;而不影响原容器的内容。std::reverse: defined in header <algorithm>, reverses the order …

真相!30K拿到互联网大厂offer,网友:我服了!

最近笔者在知乎刷到一个帖子&#xff0c;其中&#xff0c;这条回答让人印象深刻&#xff1a;其实&#xff0c;最近几年人工智能大火&#xff0c;其中深度学习岗位的薪酬爆增&#xff0c;BAT大厂高薪招聘AI人才&#xff0c;收到的简历却寥寥无几&#xff1f;究竟是大厂岗位要求高…

OracleDesigner学习笔记1――安装篇

OracleDesigner学习笔记1――安装篇 QQ&#xff1a;King MSN&#xff1a;qiutianwhmsn.com Email&#xff1a;qqkinggmail.com 一&#xff0e; 前言 Oracle是当今最流行的关系型数据库之一&#xff0c;和很多朋友一样&#xff0c;我也是一个Oracle的爱好者&#xff0c;从…

C++/C++11中std::queue的使用

std::queue: 模板类queue定义在<queue>头文件中。队列(Queue)是一个容器适配器(Container adaptor)类型&#xff0c;被特别设计用来运行于FIFO(First-in first-out)场景&#xff0c;在该场景中&#xff0c;只能从容器一端添加(Insert)元素&#xff0c;而在另一端提取(Ext…

常见的http状态码(Http Status Code)

常见的http状态码&#xff1a;&#xff08;收藏学习&#xff09; 2**开头 &#xff08;请求成功&#xff09;表示成功处理了请求的状态代码。 200 &#xff08;成功&#xff09; 服务器已成功处理了请求。 通常&#xff0c;这表示服务器提供了请求的网页。201 &#xff08;已创…

“不给钱就删库”的勒索病毒, 程序员该如何防护?

作者 | 阿木&#xff0c;王洪鹏&#xff0c;运营有个人公众号新新生活志。目前任职网易云计算技术部高级工程师&#xff0c;近3年云计算从业经验&#xff0c;爱读书、爱写作、爱技术。责编 | 郭芮来源 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;近期一家名为ProPub…

ruby实时查看日志

(文章是从我的个人主页上粘贴过来的&#xff0c; 大家也可以访问我的主页 www.iwangzheng.com) 在调试代码的时候&#xff0c;把日志文件打开&#xff0c;边操作边调试能很快帮助我们发现系统中存在的问题。 $tail rails_2014_03_03.log -f转载于:https://www.cnblogs.com/iw…

干货 | OpenCV看这篇就够了,9段代码详解图像变换基本操作

作者 | 王天庆&#xff0c;长期从事分布式系统、数据科学与工程、人工智能等方面的研究与开发&#xff0c;在人脸识别方面有丰富的实践经验。现就职某世界100强企业的数据实验室&#xff0c;从事数据科学相关技术领域的预研工作。来源 | 大数据&#xff08;ID&#xff1a;hzdas…

C++/C++11中std::priority_queue的使用

std::priority_queue:在优先队列中&#xff0c;优先级高的元素先出队列&#xff0c;并非按照先进先出的要求&#xff0c;类似一个堆(heap)。其模板声明带有三个参数&#xff0c;priority_queue<Type, Container, Functional>, 其中Type为数据类型&#xff0c;Container为…