HT图形组件设计之道(一)

HT for Web简称HT提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表达的我们希望提供:Everything you need to create cutting-edge 2D and 3D visualization. 这个愿景从功能上是个相当长的战线,从设计架构上也是极具挑战性的,其实HT团队是非常保守的,我们从不贪多图大,只做我们感觉自己能得更好,能给用户综合体验更佳的功能,在这样理念驱动下我们慢慢形成了这样的愿景,慢慢实现了几个有意义的里程碑,慢慢积累下了不少图形组件设计上的创新和经验,我不知道这个系列会写多少篇,也许永远也不会结束[……]

Read more

HT全矢量化的图形组件设计

HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了:

  • 矢量可无级缩放,界面不失真不模糊
  • 描述矢量的文本内容远比图片小得多
  • 目前各种window.devicePixelRatio不一致的设备,矢量可能是唯一彻底的解决方案
  • 业务数据绑定

提起矢量一般都会想到SVG,但这是个坑人的玩意儿,这么多年就没见一个完善的实现者,浏览器实现千差万别,高级属性根本不能玩,Adobe SVG Viewer好多年前就停止更新,Flex支持SVG导入也仅供基本属性玩玩,当然SVG也不是一无是处highcharts还是运用得很不错,Java领域也有维护多年的 Batik [……]

Read more

HT for Web中3D流动效果的实现与应用

home_cardio_trans

流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向、流速和温度等指标。

Screen Shot 2014-06-05 at 9.59.36 PM

 

如今企业数据中心机房普遍面临着设备散热的问题,采用冷热通道方案可大大提高数据中心的散热能力,充分有效利用机柜和机房的空间,因此在电信的3D机房监控领域,也常需要借助流动的效果,对机房冷热通道系统进行监控。

Screen Shot 2014-06-05 at 10.01.56 PM

HightopoHT for Web作为3D客户端呈现解决方案,今天介绍的重点不在于采集这些指标,而在于如何应用HT的预定于3D元素来实现流动的效果。在《透过WebGL 3[……]

Read more

透过WebGL 3D看动画Easing函数本质

t

50年前的这个月诞生了BASIC这门计算机语言,回想起自己喜欢上图形界面这行,还得归功于当年在win98下用QBASIC照葫芦画瓢敲了一段绘制奥运五环的代码,当带色彩的奥运五环呈现在自己面前时我已知道自己这辈子要走的路了。在这个忘本逐新的年代不见多少媒体提及这影响了几代人的BASIC语言的50年庆了。

如今消费者对用户体验的高要求,以远不能以静态平面图形打动人心,动画已是衡量前端产品用户体验不可忽视的重要因素,最近Facebook开源的Pop动画框架已发了iOS业界极大的关注,其实Apple早在Cocoa和Cocoa Touch框架内置了动画框架Core Animation,HT[……]

Read more

基于HTML5的燃气3D培训仿真系统

最近上线了的基于HTML5的燃气3D培训仿真系统,以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的,OSG引擎性能和渲染效果各方面还是不错的,但因为这次新产品需求要求能运行多移动终端,多年前基于MFC封装OSG的老系统架构也实在该退休了,这年头找能维护MFC这种古董级GUI的靠谱人也非易事。

Screen Shot 2014-04-27 at 11.46.13 PM

系统最终采用HT for Web的3D框架实现,项目中的程序员也很高兴有这样的机会终于摆脱维护MFC老系统的宿命,虽然大家都只有C++的开发经验,对HTML/CSS/JS并不熟悉,但毕竟HT for Web已经做了极佳的组件封装,CSS和DOM、包括跨平台的[……]

Read more

拓扑图弹力布局呈现Flickr图片搜索结果

十年前有值得分享的图片我都存在Flickr上,可惜yahoo收购了Flickr之后堕落​好多年,最近yahoo在梅姐带领下Flickr团队终于恢复了生机,个人免费存储空间扩充到了1T,界面用户体验也有了很大改进,图片归类及设置Tag比以前易用很多,不过我还是不满意传统改良的Web方式操作图片,我还是喜欢更有交互感的图片操作体验,借助hightopo的HT for Web的拓扑图组件写了个自己满意的搜查Flickr图片例子。

Screen Shot 2014-03-24 at 1.58.50 AM

Flickr提供了OpenAPI的搜索方式,到网页输入http://api.flickr.com/services/feeds/photos_publ[……]

Read more

从IE6到IE11上运行WebGL 3D遇到的各种坑

这篇《基于HTML5的电信网管3D机房监控应用》基于WebGL技术的应用让少同学对HTML5的应用产生了兴趣和信心,但有不少网友私信询问WebGL如何运行在老的IE678910浏览器的问题,毕竟作为企业应用,用户的机器运行着各式各样的办公及业务系统,有PB/Delphi之类的老CS应用,有安装了dll和ActiveX的各种安全认证和视频监控的插件,有装着flash或svg插件的flex和SVG应用,当然还有支持IE6却不支持任何非IE浏览器的各种OA办公软件,眼看着XP操作系统即将寿终正寝,结果还成了国内各家安全公司的新商机《围猎XP:谁在瞄准商机》,你说升级机器系统谈何容易?

Screen Shot 2014-03-10 at 11.40.57 PM[……]

Read more

100行JS实现HTML5的3D贪吃蛇游戏

js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型,多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。

自己写不出来,站在巨人肩膀总是有机会吧,折腾了一番站在Hightopo的肩膀上搞了个3D贪吃蛇游戏,算了算JS代码还只有90来行,终于满足了自己的小小心愿写完这篇可以满意去睡觉了。

060128389406803

以下先上一段最终3D游戏在平板上的运行交互视频效果

传统2D的贪吃蛇游戏一般通过方向键盘控制蛇的前进方向,我一开始就[……]

Read more

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

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

Screen Shot 2014-02-22 at 9.45.22 PM
随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网管应用几乎一致性的首选HTML5,当然Flex和Silverlight的遗留系统依然存活着,如果不考虑移动终端,不考虑将来维护人员难找,不考虑需要承载成千上万的网元数量,不考虑公司员工的职业生涯前途,哪怕其各自父母adobe和ms都已弃之,其实Flex和Silverlight作为企业应用方案技术上还是可以的,还是能存活很多很多年。

但我作为程序员可是要考虑自己的职业生涯的,可能有人[……]

Read more

3D拓扑自动布局之Node.js篇

上篇将3D弹力布局的算法运行在Web Workers后台,这篇我们将进一步折腾,将算法运行到真正的后台:Node.js,事先申明Node.js篇和Web Workers篇一样,在这个应用场景下并不能提高性能,纯粹为了折腾好玩,当然也不会白玩,人生就在折腾中,只有折腾才能真正成长。

Screen Shot 2014-02-20 at 2.19.14 PM

核心实现代码和Web Workers篇基本一致,唯一区别在于前后台交互的方式上,worker通过postMessage和addEventListener(‘message’ 就可以发送和接收消息,对于真正分离前后台的Node.js自然没那么简单了,我采用了Socket.io通信框架,Socket.io让[……]

Read more