基于HTML5技术的电力3D监控应用(三)
继(一)和(二)之后不少,不少网友问我移动终端的使用问题,因为我们项目这次采用Android平板终端,所以我对这方面有点肤浅的研究,这篇分享些项目经验总结,希望对大家有所帮助。
电力3D项目去年底刚立项时,需求仅仅是PC浏览器的3D展示要求,后来慢慢增加了要求也能在平板上运行,因为我们的系统大部分是内网的,不可能要求移动终端得上app store去下载应用程序,虽然apple也提供企业内部发布的解决方案,但还是远不如android安装app方便,对于企业应用三天两头就需要改动需求,我们的发布非常频繁,所以最终移动端选型采用Android的方案。
还好Google挺给力今年初提供了Android浏览器WebGL的解决方案:Google finally makes it easy to enable WebGL support in latest Chrome for Android当然如今哪怕没有Chrome,Firefox和Opera等众多移动浏览器也都支持WebGL了,而且Firefox和Opera都不需要设置开启WebGL开关了,而且手机上的Chrome还得通过在URL输入chrome:flags,然后开启Enable WebGL才可以

手机我用的Nexus 5测试的,而平板我用Nexus 7第二代测试的,Nexus 7到手感觉还是很轻很好用,预装的操作系统还不是最新的,不过已经可以升级到Android 4.4.2 (KitKat)版本了,我更新了Chrome Android31速度还是明显很快速。
Nexus手机直接可以传送文件,平板则需要安装Android File Transfer软件,这没什么最让我震惊的是在这里,我调试时发现平板上没有“Developer options”选型了,没有这个选型我就没法用通过PC进行USB Debugging了,查了半天资料How to enable developer settings on Android 4.2,居然通过点击“Build number”的栏目七次才会出现,Google这些工程师真是Geek啊。
Here's how to get them back:
- Go to the settings menu, and scroll down to "About phone." Tap it.
- Scroll down to the bottom again, where you see "Build number." (Your build number may vary from ours here.)
- Tap it seven (7) times. After the third tap, you'll see a playful dialog that says you're four taps away from being a developer. (If only it were that simple, eh?) Keep on tapping, and *poof*, you've got the developer settings back.
最开始我们也考虑过用WebView打包apk的方式,但遇到了不少麻烦大部分WebView和独立安装的Chrome app并不贡献内核,google走了两条路,WebView有套自己的WebKit版本,外面的Chrome app走自己的WebKit版本,而且WebView的版本不用说肯定是相当古老的,因此别说WebGL连Canvas的支持我们都遇到很多坑,这方面还好引擎已经帮我们绕开了很多坑。
当然Google不会止步不前,最新的KitKat已经将WebView升级到了Chrome for Android的30版本,这个版本的HTML5功能对大部分应用来说也算足够了 ,当然后续WebView要是也能自动升级就好了,这个还得等...
What version of Chrome is it based on?
The WebView shipped with Android 4.4 (KitKat) is based on the same code as Chrome for Android version 30. The WebView does not have full feature parity with Chrome for Android and is currently given the version number 30.0.0.0.
Will the new WebView auto-update?
Evergreen browsers (like Chrome and Firefox) auto-update and keep their users up to date so they can view the web through a modern feature set. As a developer, this ensures your choices aren’t limited to a lowest-common denominator browser from years ago, but rather are keeping pace with the modern web. Your apps inside a WebView are just as important and deserve a runtime that keeps users up to date. There are large engineering and logistical challenges. We're not quite there yet, but we're working on it.
当然我们的项目是不能等的,我们最终采用页面的方式实施,不再考虑WebView的路线,当然也不用折腾学习Android的Native开发了,早些年我还挺喜欢捣鼓各种新技术,但现在感觉很多情况是浪费精力,从早期的MFC和Qt,到Swing和SWT,到Flex和Silverlight,GUI的技术发展除了设计模式从MVC到MVP到MVVM有所创新外,组件的设计和使用的路线这些年大同小异,不同的平台都要去学习他们的各种千奇百怪的API接口,都要从头到尾学一套如何layout布局,如果使用button和menu小组件,再到tree和table这些大组件,已经没有什么新鲜玩意儿。
这地球上现在就没几家还在好好设计GUI组件的了,你看看Swing已经被sun废了,Oracle搞的JavaFx还是有点动静但也就他们自娱自乐的那个小圈子内,有兴趣你可以关组这里http://fxexperience.com/,Flash跨平台还不错,但Flex俨然是Adobe的鸡肋,他们考工具和FlashVM的游戏生态链活着,而Flex这个不带来直接价值的企业应用圈子似乎一直不是Adobe看中的,一个树表AdvancedDataGrid从Flex3折腾到Flex4依然像玩具一样的低效,我还看到Flex3实现者在blog上,嘲笑Flex4对AdvancedDataGrid的重新实现的团队设计上的不满,Silverlight和WPF就不用多费我口舌了,除了C#语言还是不错有创新外,SL和WPF整得那套MVVM我估计大部分用了多年SL和WPF的程序员也没几个能搞得明白Dependency Properties去独立设计一个自己的小控件,MVVM被实现得如此难用也实属罕见。
所以我现在感觉自己也挺懒了,不再像以前每个新技术一出现就要马上搞一堆书啃,Android的Native开发我一直没去好好学,iOS方面倒是对XCode的设计器的可视化挺感兴趣,所以几年前尝尝鲜研究过一阵,但现在我搞些小工具我还是用古老的Cocoa来开发,我感觉Cocoa的binding和可视化的功能虽然一二十年没变过,但也足以完胜如今的很多GUI框架,大部分情况我就基于HTML5的组件来用了,我有时候会用Node-WebKit加HT组件的方式来实现Native的小工具。
如今调试Android也非常方便了,看看Remote Debugging Chrome on Android现在直接用PC就可以实时调试真机,最重要的是你的眼睛可以盯着PC屏幕就行,选中操作和inspect element这些操作都接在PC屏幕上搞定,对我来说我最舒服的就是在用不用痛苦的手工在手机上输入URL了,直接在PC上输入即可。
至于WebGL的调试,其实和Native的OpenGL调试一样,一直多年来都是世界难题,毕竟GPU多核的并非工作是很难采用传统线程或者GUI这种单线程的方式那么容易Debug,这点上浏览器最近也是有不少改进WebGL Debugging and Profiling Tools,当然我不是WebGL专家我在HT再封装了WebGL基础上采用面对对象的方式操作JS,所以这种文章我也就过过眼瘾罢了

最近项目快结束了,局方领导居然看我很爽,说我这大半年天天熬夜在现场,作为奖励把本用于上线实施的Nexus 7送给了我,我们商务大为羡慕我这小程序员居然能得打局方的赏赐,这大半年一直奔波于昌平和市区之间,北京的同学一定知道我有多痛苦,这个鸟都不来的昌平每天加班回家只能做黑地,以前在上地晚上没赶上班车也得做黑地,但至少还能看到如百度大厦之类的IT人士也都和我们以前点着灯在加班,而在昌平是一片的漆黑,只有被拆迁的村民留下了的快倒塌的房子,每次路过我总在想如果有一间是我的政府陪我几套房这辈子也就解放了,现在我就不这么想了,每天抱着平板下班前先下载下离线的36kr和iFanr的文章,虽然现在搞to B,但也关注者移动互联网的发展,哥也不是高富帅,不再想以前在昌平线和13号线的阅读USA Today和NYTimes文章装逼给妹子看,哥就是程序员,哥玩的就是程序,哥没房有Pad,就在地铁上好好学习。

基于HTML5技术的电力3D监控应用(三)的更多相关文章
- 基于HTML5技术的电力3D监控应用(一)
最近参与了国网计量中心的四线一库自动化检定系统的项目开发,团队封闭开发了大半年终于快到尾声了,整个项目过程实在非常累,我的mentor杨杨老师是这样描述的:累的不想说话了.我估计是我太渴望新知识,整天 ...
- 基于HTML5技术的电力3D监控应用(二)
上篇介绍了我们电力项目的基本情况,我们选用HTML5技术还是顶着很大压力,毕竟HTML5技术性能行不行,浏览器兼容性会不会有问题,这些在项目选型阶段还是充满疑惑,项目做到现在终于快收尾了我们才敢松口气 ...
- 基于HTML5技术的电力3D监控应用(四)
回答了知乎问题较长,一些使用WebGL的经验,作为新的一篇: 正好逛到这个问题,正好是2013年底,正好最近基于的HT for Web 3D做的电力项目收尾,正好用到的就是WebGL技术,因此说说自己 ...
- 基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型
前言 随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问 ...
- 基于 HTML5 WebGL 的加油站 3D 可视化监控
前言 随着数字化,工业互联网,物联网的发展,我国加油站正向有人值守,无人操作,远程控制的方向发展,传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式,即采用数据采集与监控系统 SCADA.SC ...
- 基于 HTML5 WebGL 的地铁站 3D 可视化系统
前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...
- 基于 HTML5 WebGL 的挖掘机 3D 可视化应用
前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...
- 基于HTML5 WebGL的工业化3D电子围栏
前言 现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 ...
- B/S 端基于 HTML5 + WebGL 的 VR 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...
随机推荐
- 努力学习 HTML5 (1)—— 初体验
HTML5 代表未来:W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML,从而使 HTML5 成为正式标准并得到认可. 最简单的 HTML5 文档 & ...
- how to read from __consumer_offsets topic
来自:http://grokbase.com/t/kafka/users/15bs2r0m83/kafka-0-8-2-1-how-to-read-from-consumer-offsets-topi ...
- 【Vegas原创】vlookup的使用方法
情景: 1,当月移动话单,没有姓名,只有手机号码:(用户费用sheet) 2,IT部自己整理的手机号历史记录,有姓名,有手机号码:(历史信息sheet) 3,要求:需要从历史记录中,透视出当月所有手机 ...
- Scala 深入浅出实战经典 第47讲:Scala多重界定代码实战及其在Spark中的应用
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- 新安装的VS的一些设置
古语云:工欲善其事必先利其器 为了方便我们开发,应该设置好VS的一些配置,安装一些辅助插件 1 设置字体和背景等 设置字体为 console 10大小 背景设为护眼颜色 85 90 205 这三个值 ...
- 常用的sql脚本 游标遍历操作
Declare @id int DECLARE cursor_data CURSOR FOR --这里是取得数据源 OPEN cursor_data FETCH FROM cursor_data IN ...
- Windows 8 图标前面的勾选
http://bbs.pcbeta.com/viewthread-999730-1-1.html 不管是桌面的图标还是资源管理器中的图标之前都出现了一个小小的方框.选中图标的时候会自动勾选那个框,如果 ...
- LeetCode: Lowest Common Ancestor of a Binary Search Tree 解题报告
https://leetcode.com/submissions/detail/32662938/ Given a binary search tree (BST), find the lowest ...
- checkbox与说明文字无法对齐的问题
解决方法: vertical-align:middle; 例:<input type=checkbox id="theId" name=checkbox style=&quo ...
- 一致性哈希算法 - consistent hashing
1 基本场景比如你有 N 个 cache 服务器(后面简称 cache ),那么如何将一个对象 object 映射到 N 个 cache 上呢,你很可能会采用类似下面的通用方法计算 object 的 ...