xhload3d
- 浏览: 207936 次
-
最新评论
-
tjzx：
文章图片gua了
基于 HTML5 Canvas 的交互式地铁线路图 -
1036225283：
好酷，这是怎么做的
基于HTML5的WebGL设计汉诺塔3D游戏 -
mangguo：
推荐一本书，html5 canvas核心技术 图形、动画和游 ...
基于HTML5 Canvas实现工控2D叶轮旋转 -
zhunengfei：
xhload3d 写道zhunengfei 写道你这个略叼，要 ...
ECharts+BaiduMap+HT for Web网络拓扑图应用 -
xhload3d：
zhunengfei 写道你这个略叼，要是有个Demo就好了， ...
ECharts+BaiduMap+HT for Web网络拓扑图应用
文章列表
Heatmap热图通过众多数据点信息，汇聚成直观可视化颜色效果，热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业，甚至应用于竞技体育领域的数据分析。
已有众多文章分享了生成Heatmap热图原理，可参考《How to make heat maps》和《How to make heat maps in Flex》，本文将介绍基于HTML5技术的实现方式，主要基于Cavans和WebGL这两种HTML5的2D和3D技术的应用，先上最终例子实现的界面效果和操作视频：
上篇我们通过定制了CPU和内存展示界面，体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动，这类案例后续文章还会继续以便大家掌握更多的矢量应用场景，本篇我们先切换个话题，谈谈模型-视图-事件之间的关系。
图形组件设计架构上主要就是在规划Data模型，View视图和Event事件之间的关系，这些年业界逐渐将各种GUI设计模式提炼成理论归类，MVC、MVP和MVVM的主要大类常被统称为MV*，有很多文章进行各种设计模式的定义和比较，本篇不打算深入展开理论的讨论，不同图形组件设计架构都会有很多差异，持续发展的组件其实每时每刻都在进行着各种设计上的改进，相信有很多不错的 ...
上一篇我们自定义CPU和内存的展示界面效果，这篇我们将继续采用HT完成一个新任务：实现一个能进行展开和合并切换动作的刀闸控件。对于电力SCADA和工业控制等领域的人机交互界面常需要预定义一堆的行业标准控件，以便用户能做可视化编辑器里，通过拖拽方式快速搭建具体电力网络或工控环境的场景，并设置好设备对应后台编号等参数信息，将拓扑图形与图元信息一并保存到后台，实际运行环境中将打开编辑好的网络拓扑图信息，连接后台实时数据库，接下来就是接受实时数据库发送过来的采集信息进行界面实时动态刷新，包括用户通过客户端对设备进行的各种下发遥控等操作，发送到后台最终实现对硬件设备的控制，这个过程就是典型的实时监控系统 ...
HT for Web简称HT提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案，正如Hightopo官网所表达的我们希望提供：Everything you need to create cutting-edge 2D and 3D visualization. 这个愿景从功能上是个相当长的战线，从设计架构上 ...
HT一直被客户称道的就是其全矢量化的设计特色，矢量相比传统图片好处太多了：
矢量可无级缩放，界面不失真不模糊
描述矢量的文本内容远比图片小得多
目前各种window.devicePixelRatio不一致的设备，矢量可能是唯一彻底的解决方案
业务数据绑定
提起矢量一般都会想到SVG，但这是个坑人的玩意儿，这么多年就没见一个完善的实现者，浏览器实现千差万别，高级属性根本不能玩，Adobe SVG Viewer好多年前就停止更新，Flex支持SVG导入也仅供基本属性玩玩，当然SVG也不是一无是处highcharts还是运用得很不错，Java领域也有维护多年的 Batik 项目可用。但 ...
JS数组追加数组没有现成的函数，这么多年我已经习惯了a.push.apply(a, b);这种自以为很酷的，不需要写for循环的写法，一直也没遇到什么问题，直到今天我要append的b是个很大的数组时才遇到了坑。
流动效果在3D领域有着广泛的应用场景，如上图中医学领域可通过3D的流动直观的观察人体血液的流动，燃气领域可用于监控管道内流动的液体或气体的流向、流速和温度等指标。
WWDC2014刚结束，这次的大会是名符其实的开发者大会，更贴切的应该说的确是一次软件开发者的大会，对于OSX和iOS的更多功能特性让人兴奋，Swift新语言促成了如上图片
但我更感兴趣的是WebGL终于官方的在OSX和iOS上得到了支持，这篇《A first look at what iOS8 means for Phaser and Pi
50年前的这个月诞生了BASIC这门计算机语言，回想起自己喜欢上图形界面这行，还得归功于当年在win98下用QBASIC照葫芦画瓢敲了一段绘制奥运五环的代码，当带色彩的奥运五环呈现在自己面前时我已知道自己这辈子要走的路了。在这个忘本逐新的年代不见多少媒体提及这影响了几代人的BASIC语言的50年庆了。
如今消费者对用户体验的高要求，以远不能以静态平面图形打动人心，动画已是衡量前端产品用户体验不可忽视的重要因素，最近Facebook开源的Pop动画框架已发了iOS业界极大的关注，其实Apple早在Cocoa和Cocoa Touch框架内置了动画框架Core Animation，HTML5的CS ...
最近上线了的基于HTML5的燃气3D培训仿真系统，以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的，OSG引擎性能和渲染效果各方面还是不错的，但因为这次新产品需求要求能运行多移动终端，多年前基于MFC封装OSG的老系统架构也实在该退休了，这年头找能维护MFC这种古董级GUI的靠谱人也非易事。
系统最终采用HT for Web的3D框架实现，项目中的程序员也很高兴有这样的机会终于摆脱维护MFC老系统的宿命，虽然大家都只有C++的开发经验，对HTML/CSS/JS并不熟悉，但毕竟HT for Web已经做了极佳的组件封装，CSS和DOM、包括跨平台的兼容 ...
十年前有值得分享的图片我都存在Flickr上，可惜yahoo收购了Flickr之后堕落好多年，最近yahoo在梅姐带领下Flickr团队终于恢复了生机，个人免费存储空间扩充到了1T，界面用户体验也有了很大改进，图片归类及设置Tag比以前易用很多，不过我还是不满意传统改良的Web方式操作图片，我还是喜欢更有交互感的图片操作体验，借助hightopo的HT for Web的拓扑图组件写了个自己满意的搜查Flickr图片例子。
http://v.youku.com/v_show/id_XNjg5MjMwMTYw.html
Flickr提供了OpenAPI的搜索方式，到网页输入 ...
这篇《基于HTML5的电信网管3D机房监控应用》基于WebGL技术的应用让少同学对HTML5 3D的应用产生了兴趣和信心，但有不少网友私信询问WebGL如何运行在老的IE678910浏览器的问题，毕竟作为企业应用，用户的机器运行着各式各样的办 ...
js1k.com收集了小于1k的javascript小例子，里面有很多很炫很酷的游戏和特效，今年规则又增加了新花样，传统的classic类型基础上又增加了WebGL类型，以及允许增加到2K的++类型，多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。
自己写不出来，站在巨人肩膀总是有机会吧，想起《基于HTML5的电信网管3D机房监控应用》这篇提到的threejs，babylonjs和Hightopo的几种基于WebGL的3D引擎，突然想挑战下自己实现个100行JS的3D小游戏，折腾了一番最终采用Hightopo搞了个3D贪吃蛇游戏，算了算JS代码还只有90来行，终于满 ...
先上段视频，不是在玩游戏哦，是规规矩矩的电信网管企业应用，嗯，全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及，加上主流移动终端Android和iOS都已支持HTML5技术，新一代的电信网管应用几乎一致性的首选HTML5，当然Flex和Silverlight的遗留系统依然存活着，如果不考虑移动终端，不考虑将来维护人员难找，不考虑需要承载成千上万的网元数量，不考虑公司员工的职业生涯前途，哪怕其各自父母adobe和ms都已弃之，其实Flex和Silverlight作为企业应用方案技术上还是可以的，还是能存活很多很多年。
但我作为程序员可是要考虑自己的职业生涯的，可能有人喜欢成为能维 ...
上篇将3D弹力布局的算法运行在Web Workers后台，这篇我们将进一步折腾，将算法运行到真正的后台：Node.js，事先申明Node.js篇和Web Workers篇一样，在这个应用场景下并不能提高性能，纯粹为了折腾好玩，当然也不会白玩，人生就在折腾中，只有折腾才能真正成长。
核心实现代码和Web Workers篇基本一致，唯一区别在于前后台交互的方式上，worker通过postMessage和addEventListener('message' 就可以发送和接收消息，对于真正分离前后台的Node.js自然没那么简单了，我采用了Socket.io通信框架，Socket.io让长连 ...