hightopo

在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏。 汉诺塔的游戏规则及递归算法分析请参考 http://en.wikipedia.org/wiki/Tower_of_Hanoi 。 知道了汉诺塔的规则和算法，现在就开始创建元素。用HT for Web（ http://www.hightopo.com ）现有的3D模板创建底盘和3根柱子不是问题，问题是要创建若干个中空的圆盘。一开始的想法是：创建一个圆柱体，将圆柱体的上下两端隐藏，设置柱面的宽度来实现圆盘的效果，经过多次尝试并查阅相关api文档，发现柱面是没有厚度的，改方法不可行。 后来在HT for Web自定义3D模型的WebGL应用（ http://www.hightopo.com/blog/381.html ）受到启发，圆盘的形成就是在xy平面上的一个矩形，根据y轴旋转一周产生的，通过查阅相关文档，最总决定采用ht.Default.createRingModel方法来创建圆盘模型，然后在创建node的时候通过shape3d属性引用创建好的模型。 在逻辑实现上，采用了栈的先进后出的原理，对圆柱上的圆盘做顺序控制，确保每次移动的圆盘都是最小的圆盘。 在算法上，采用的是递归算法，通过递归算法，将搬迁过程一步一步记录下来，再采用堆的原理一步一步地执行搬迁过工作。 http://v

这篇《 基于HTML5的电信网管3D机房监控应用 》基于WebGL技术的应用让少同学对 HTML5 3D 的应用产生了兴趣和信心，但有不少网友私信询问WebGL如何运行在老的IE678910浏览器的问题，毕竟作为企业应用，用户的机器运行着各式各样的办公及业务系统，有PB/Delphi之类的老CS应用，有安装了dll和ActiveX的各种安全认证和视频监控的插件，有装着flash或svg插件的flex和SVG应用，当然还有支持IE6却不支持任何非IE浏览器的各种OA办公软件，眼看着XP操作系统即将寿终正寝，结果还成了国内各家安全公司的新商机《 围猎XP：谁在瞄准商机 》，你说升级机器系统谈何容易？ 对于我们无力要求升级的IE678910上要跑WebGL，我们只能采用 Google Chrome Frame 的解决方案，虽然该插件Google从2014年1月份起就不再维护更新了，但已经发布的版本也是31了，这个版本的WebGL功能已经足够完善了，当然这样的解决方案也一箭双雕的解决了2D的Canvas问题。 安装完该插件后，在你需要采用WebGL的页面增加一行<meta http-equiv=”X-UA-Compatible” content=”chrome=1″>代码即可，或者从服务器下发该页面是对HTTP头增加X-UA-Compatible: chrome=1的参数即可。 使用

先 上段视频 ，不是在玩游戏哦，是规规矩矩的电信网管企业应用，嗯，全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html http://v.youku.com/v_show/id_XNjc2NDQxNDM2.html 随着PC端支持HTML5浏览器的普及，加上主流移动终端Android和iOS都已支持HTML5技术，新一代的电信网管应用几乎一致性的首选HTML5，当然Flex和Silverlight的遗留系统依然存活着，如果不考虑移动终端，不考虑将来维护人员难找，不考虑需要承载成千上万的网元数量，不考虑公司员工的职业生涯前途，哪怕其各自父母adobe和ms都已弃之，其实Flex和Silverlight作为企业应用方案技术上还是可以的，还是能存活很多很多年。 但我作为程序员可是要考虑自己的职业生涯的，可能有人喜欢成为能维护CORBA或IBM大机那样的稀有物种得到高薪，我还是喜欢朝气蓬勃的技术氛围，我喜欢每天上 Hacker News 都能见到讨论我从事的技术的新鲜事，我喜欢有搞通用组件有 Sencha 和 Kendoui 可选择，搞图表有 Highcharts 可选择，搞2D拓扑和3D机房有 Hightopo 可选择，搞移动应用有 JQuery Mobile 可选择

先 上段视频 ，不是在玩游戏哦，是规规矩矩的电信网管企业应用，嗯，全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html 随着PC端支持HTML5浏览器的普及，加上主流移动终端Android和iOS都已支持HTML5技术，新一代的电信网管应用几乎一致性的首选HTML5，当然Flex和Silverlight的遗留系统依然存活着，如果不考虑移动终端，不考虑将来维护人员难找，不考虑需要承载成千上万的网元数量，不考虑公司员工的职业生涯前途，哪怕其各自父母adobe和ms都已弃之，其实Flex和Silverlight作为企业应用方案技术上还是可以的，还是能存活很多很多年。 但我作为程序员可是要考虑自己的职业生涯的，可能有人喜欢成为能维护CORBA或IBM大机那样的稀有物种得到高薪，我还是喜欢朝气蓬勃的技术氛围，我喜欢每天上 Hacker News 都能见到讨论我从事的技术的新鲜事，我喜欢有搞通用组件有 Sencha 和 Kendoui 可选择，搞图表有 Highcharts 可选择，搞2D拓扑和3D机房有 Hightopo 可选择，搞移动应用有 JQuery Mobile 可选择，每周末到徐家汇公园那个照的到太阳看得见湖色几乎成为我私人定制的木凳

最近折腾HTML5游戏需要离线存储功能，便把目前可用的几种HTML5存储方式研究了下，基于 HT for Web 写了个综合的实例，分别利用了Cookie、WebStorage、IndexedDB以及FileSystem四种本地离线存储方式，对燃气监控系统的表计位置、朝向、开关以及表值等信息做了CURD的存取操作。 http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html HTML5的存储还有一种 Web SQL Database 方式，虽然还有浏览器支持，是唯一的关系数据库结构的存储，但W3C以及停止对其的维护和发展，所以这里我们也不再对其进行介绍： Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further. 整个示例主要就是将 HT for Web 的 DataModel 数据模型信息进行序列化和反序列化，这个过程很简单通过dataModel.serialize()将模型序列化成JSON字符串，通过dataModel.deserialize

先 上段视频 ，不是在玩游戏哦，是规规矩矩的电信网管企业应用，嗯，全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及，加上主流移动终端Android和iOS都已支持HTML5技术，新一代的电信网管应用几乎一致性的首选HTML5，当然Flex和Silverlight的遗留系统依然存活着，如果不考虑移动终端，不考虑将来维护人员难找，不考虑需要承载成千上万的网元数量，不考虑公司员工的职业生涯前途，哪怕其各自父母adobe和ms都已弃之，其实Flex和Silverlight作为企业应用方案技术上还是可以的，还是能存活很多很多年。 但我作为程序员可是要考虑自己的职业生涯的，可能有人喜欢成为能维护CORBA或IBM大机那样的稀有物种得到高薪，我还是喜欢朝气蓬勃的技术氛围，我喜欢每天上 Hacker News 都能见到讨论我从事的技术的新鲜事，我喜欢有搞通用组件有 Sencha 和 Kendoui 可选择，搞图表有 Highcharts 可选择，搞2D拓扑和3D机房有 Hightopo 可选择，搞移动应用有 JQuery Mobile 可选择，每周末到徐家汇公园那个照的到太阳看得见湖色几乎成为我私人定制的木凳，打开平板好好通读这一周Web前端发送的一切新鲜事，是的我有 JavaScript Weekly 、 HTML5 Weekly 和 Modern Web Observer 可选择

上篇 介绍了 HT for Web 采用HTML5 Canvas的getImageData和setImageData函数，通过颜色乘积实现的染色效果，本文将再次介绍另一种更为高效的实现方式，当然要实现的功能效果是完全一样的。这次我们依然基于HTML5技术，但采用Canvas的globalCompositeOperation属性进行各种blending效果： 各种globalCompositeOperation效果可参考 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing 的说明，我们采用“multiply”和“destination-atop”这两种blending效果，通过以下三个步骤实现: 1、先以染色颜色填充图片大小的矩形区域 2、采用“multiply”进行drawImage的绘制，达到以下效果 3、最后一步采用“destination-atop”的globalCompositeOperation方式，再次drawImage，这次绘制效果将会抠出图片像素区域，剔除非图片部分，最终达到我们所要的染色效果图片： 所有代码如下 function createColorImage2(image, color) { var width = image.width; var

HT for Web 独创的 矢量图片设计架构 ，使其具有强大丰富的动态图形呈现能力，但从最近知乎热议的“ Adobe Photoshop 是否已经过时？ ”的话题，大家能体会到很多情况下实际项目不可能完全采用矢量，项目中还是有大量的传统非矢量的静态图片，毕竟工具强大且现有资源丰富，但为了使静态图片呈现出更多的动态效果， HT for Web 提供了较多渲染方式，例如对 HT for Web 的图元设置‘body.color’的style后图元即可达到自动染色的效果，这里将对这种染色技术进行讲解。 上图呈现了本文例子最终的呈现效果，中间为原始图片是 http://hightopo.com/images/banner.png ，对其分别设置了红、黄和蓝三种颜色后的染色效果，完全基于 HT for Web 实现这么个简单拓扑的话代码不过十多行，不过今天我们不借助 HT for Web 提供的‘body.color’的染色功能，我们将采用最原始的方式生产染色图片。 dataModel = new ht.DataModel(); graphView = new ht.graph.GraphView(dataModel); graphView.addToDOM(); var root = new ht.Node(); root.setImage('ht-for-web.png');

Heatmap热图通过众多数据点信息，汇聚成直观可视化颜色效果，热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业，甚至应用于竞技体育领域的数据分析。 已有众多文章分享了生成Heatmap热图原理，可参考《 How to make heat maps 》和《 How to make heat maps in Flex 》，本文将介绍基于HTML5技术的实现方式，主要基于Cavans和WebGL这两种HTML5的2D和3D技术的应用，先上最终例子实现的界面效果和 操作视频 ： 实现Heatmap的开源js库比较出名的就是 heatmapjs ，该框架发展了2年多，作者Patrick Wied最近决定在保持开源的基础上，提供有偿的商业支持服务，这是好事，地球上绝大部分开源项目作者搞个barely可用的初级版本后，就多年不见更新了，而真正能实际上线使用的产品哪有不需要持续完善、增强可扩展性以及提供特殊定制服务的，考虑到作者这两年已无偿投了这么多（ Over the last 2 years, I devoted more than 500 hours of work to improving heatmap.js to make it a truly great library. ），希望此文也能帮作者在国内起点宣传作用。 heatmapjs 采用的Canvas的2D绘制方式实现