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

上篇我们通过定制了CPU和内存展示界面,体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动,这类案例后续文章还会继续以便大家掌握更多的矢量应用场景,本篇我们先切换个话题,谈谈模型-视图-事件之间的关系。 图形组件设计架构上主要就是在规划Data模型,View视图和Event事件之间的关系,这些年业界逐渐将各种GUI设计模式提炼成理论归类,MVC、MVP和MVVM的主要大类常被统称为MV*,有很多文章进行各种设计模式的定义和比较,本篇不打算深入展开理论的讨论,不同图形组件设计架构都会有很多差异,持续发展的组件其实每时每刻都在进行着各种设计上的改进,相信有很多不[......]

Read more

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

上一篇我们自定义CPU和内存的展示界面效果,这篇我们将继续采用HT完成一个新任务:实现一个能进行展开和合并切换动作的刀闸控件。对于电力SCADA和工业控制等领域的人机交互界面常需要预定义一堆的行业标准控件,以便用户能做可视化编辑器里,通过拖拽方式快速搭建具体电力网络或工控环境的场景,并设置好设备对应后台编号等参数信息,将拓扑图形与图元信息一并保存到后台,实际运行环境中将打开编辑好的网络拓扑图信息,连接后台实时数据库,接下来就是接受实时数据库发送过来的采集信息进行界面实时动态刷新,包括用户通过客户端对设备进行的各种下发遥控等操作,发送到后台最终实现对硬件设备的控制,这个过程就是典型的实时监控系统[......]

Read more

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