上篇介绍了我们电力项目的基本情况,我们选用HTML5技术还是顶着很大压力,毕竟HTML5技术性能行不行,浏览器兼容性会不会有问题,这些在项目选型阶段还是充满疑惑,项目做到现在终于快收尾了我们才敢松口气,压力基本顶住了,我个人总结的经验是:HTML5性能肯定不是最高,但对企业应用足够高效,HTML5标准不可能所有浏览器都一致实现,但对于企业应用已经足够工作。选择正确的引擎框架,进行合理的设计才是关键,HTML5真的已经Ready!

选择HTML5除了看中JavaScript动态语言的灵活性,能够很好的和其他异构系统融合到页面外,HTML5的跨平台性也是我们看中的重要原因,以前PC桌面应用上采用Flex和Silverlight到是可以跨平台,但如今的系统还不能上移动终端实在就说不过去了,而Flex和SL在跨移动终端方面就卡壳了,虽然有AIR可以导成native app应用,但还是远不如HTML5纯页面来的高效,每次修改任何东西PC上都可以模拟测试,看看Chrome DevTools for Mobile越来越屌爆的Screencast and Emulation功能:

我现在测试移动终端大部分情况都不需要用真机,当PC上模拟测试得差不多后再进行真机测试基本都能一次性通过,回想以前用Flex的AIR进行转换Native App真是浪费生命,每次测试我都要刷几条微博消磨难熬的等待时间,上一次项目我们团队也分为Android和iOS两个完全采用独立Native开发方式,但也存在版本发布不一致,应用体验不一样,包括很多业务逻辑代码本可以复用的但由于Java和ObjectiveC的差异,搞得我们非得写两套一样逻辑的代码,其中加密的部分还得费劲的用C++实现了一个统一的实现,然后再有Java和OC分别去调用C++的代码,总之系统越搞越复杂,团队需要的人越来越多,当然我们经验不足也是一个原因,但我们毕竟是做企业应用搞项目的,不过可能有资源像BAT那些移动互联网巨头去慢慢融合摸索经验,我们除了这些基础技术外,还有学习很多电力业务,还得和硬件打交道,学习各种电力规约协议,扯淡了这么多你应该明白我们现在成功的使用了HTML5一个js语言就能跨所有平台之爽。

项目初期我们团队在选型初期对3D建模进行了一定的研究,传统的3D引擎一般只提供后期三维模型的渲染呈现,并不提供3D建模的解决方案,本以为还需要招聘专业的3DMax或Maya三维建模设计师,因为我们目前的美工设计师只会ps,但HT提供了一套完全基于HTML5的3D设计编辑工具,别说只会ps的美工设计师,其实后续项目的大部分3D场景我们程序员都参与了设计。

完全基于HTML5的设计器这点还是挺让我佩服的,虽然大家都在转型到HTML5但还很少有做得彻底的,如Google Web DesignerAdobe Edge Tools这些巨头的产物,包括Sencha Architect折腾了很长时间又走回Qt的路线,我实在不看好这些还不采用HTML5做设计器的路线,这时代HTML5已经足够强大,JS虚拟机的性能如V8也足够高效,数据直接云存储就可以,如果需要本地功能采用Node-Webkit也是很不错的方案。以前我们团队常用Qt或Java Swing来写些小工具,我发现这个项目历练之后Node-Webkit的技术方案成了大家些写工具应用的首选。

以下为几张运行系统抓图,以及这些系统图在编辑器内编辑的过程抓图

基于HTML5技术的电力3D监控应用(二)的更多相关文章

  1. 基于HTML5技术的电力3D监控应用(一)

    最近参与了国网计量中心的四线一库自动化检定系统的项目开发,团队封闭开发了大半年终于快到尾声了,整个项目过程实在非常累,我的mentor杨杨老师是这样描述的:累的不想说话了.我估计是我太渴望新知识,整天 ...

  2. 基于HTML5技术的电力3D监控应用(三)

    继(一)和(二)之后不少,不少网友问我移动终端的使用问题,因为我们项目这次采用Android平板终端,所以我对这方面有点肤浅的研究,这篇分享些项目经验总结,希望对大家有所帮助. 电力3D项目去年底刚立 ...

  3. 基于HTML5技术的电力3D监控应用(四)

    回答了知乎问题较长,一些使用WebGL的经验,作为新的一篇: 正好逛到这个问题,正好是2013年底,正好最近基于的HT for Web 3D做的电力项目收尾,正好用到的就是WebGL技术,因此说说自己 ...

  4. 基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型

    前言 随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问 ...

  5. 基于 HTML5 WebGL 的加油站 3D 可视化监控

    前言 随着数字化,工业互联网,物联网的发展,我国加油站正向有人值守,无人操作,远程控制的方向发展,传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式,即采用数据采集与监控系统 SCADA.SC ...

  6. 基于 HTML5 WebGL 的地铁站 3D 可视化系统

    前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...

  7. 基于 HTML5 WebGL 的挖掘机 3D 可视化应用

    前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...

  8. 基于HTML5 WebGL的工业化3D电子围栏

    前言 现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 ...

  9. B/S 端基于 HTML5 + WebGL 的 VR 3D 机房数据中心可视化

    前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...

随机推荐

  1. 自己实现一个Native方法的调用

    JNI 开始本篇的内容之前,首先要讲一下JNI.Java很好,使用的人很多.应用极广,但是Java不是完美的.Java的不足体现在运行速度要比传统的C++慢上许多之外,还有Java无法直接访问到操作系 ...

  2. 依赖倒置原则(Dependency Inversion Principle)

    很多软件工程师都多少在处理 "Bad Design"时有一些痛苦的经历.如果发现这些 "Bad Design" 的始作俑者就是我们自己时,那感觉就更糟糕了.那么 ...

  3. 返本求源——DOM元素的特性与属性

    抛砖引玉 很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'inner ...

  4. js只需5分钟创建一个跨三大平台纯原生APP

    DeviceOne之前介绍过了,现在来介绍一下DeviceOne快速开发到什么程度 使用js只需要5分钟就可以打出垮Android.ios.windows三大平台的纯原生UI的安装包. 只需要6个小时 ...

  5. JS、LUA都可以开发移动应用

    蓝色互动,大众点评.韩都衣舍.汉庭.携程旅游.华夏基金.中国农业银行等好多知名APP开发商,正在使用, 领先的快速移动应用开发平台 http://www.deviceone.net?00001 应用开 ...

  6. 淘宝code—— 最给力的国内免费SVN(不限语言),异地团队开发、打造个人开源项目不再是梦

    相信大家都听说过GitHub,也有很多人在用,但是GitHub毕竟在国外,速度不是很给力,而且安装过程也是很漫长.今天来给大家介绍一个国内的免费的开源项目平台,当然也是一个SVN版本控制器,名字叫ta ...

  7. 实现tip浮层

    实现简单的tip浮层: html代码: <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  8. 记录排查解决Hubble.Net连接Oracle数据库建立镜像库数据丢失的问题

    起因 前几天在弄Hubble连接Oracle数据库,然后在mongodb中建立一个镜像数据库; 发现一个问题,原本数据是11W,但是镜像库中只有6w多条; 刚开始以为是没运行好,又rebuild了一下 ...

  9. Lucene系列-facet

    1.facet的直观认识 facet:面.切面.方面.个人理解就是维度,在满足query的前提下,观察结果在各维度上的分布(一个维度下各子类的数目). 如jd上搜“手机”,得到4009个商品.其中品牌 ...

  10. [Java面试十]浏览器跨域问题.

    此块内容参考Ajax文档部分. 主要复习内容:     1.JavaScript核心对象     2.浏览器BOM对象     3.文档对象模型DOM     4.常见事件     5.Ajax编程( ...