xhload3d

摘要： 在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年，早先年的Web SCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案，在HTML5流行前VML和SVG算是真正纯种Web方案也是有不少应用，近些年随着HTML5的流行，加上移动终端对HTML5支持的普及，越来越多新项目开始采用真正纯HTML5的方案，更具体的说大数据量应用性能高于SVG的Canvas方案，已经逐渐成为当今Web SCADA前端技术的首选标配方案。 最近客户采用HT for Web图形界面组件，实现了燃气管网和供水管网等工控SCADA的HMI人机界面，并将系统运行在平板和手机等Android和iOS移动终端，在此我们在技术支持过程中的一些知识点进行些梳理和分享，希望对有志 阅读全文

摘要： ECharts的页面渲染效果和酷炫的用户体验，吸引的不少用户的眼球，将ECharts整合到HT for Web中，和网络拓扑图的交互应用也拟补了目前HT for Web在图像组件上的不足。 阅读全文

摘要： 传统的HTML5的下拉框select只能实现简单的文字下拉列表，而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果，而且可以在文本框和下拉列表中添加自定义的小图标，让整个组件看起来更直观 阅读全文

摘要： HT For Web(http://www.hightopo.com/)的HTML5拓扑图组件graphView背景设置有多种途径可选择： 1. divBackground：通过css设置graphView对应的div背景 2. Painter：通过graphView.addBottomPainter(function(g, rect){…})来绘制背景 3. Layer：通过设置graphView.setLayer(['…', '…', '…', …])来将graphView拆分为多个图层，并为各个图层命名，再让不同种类的node通过node.setLayer('…')将node设置到graphView对应图层中 阅读全文

摘要： SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。 《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:image/png类型，而SVG格式的数据类型为data:image/svg+xml的类型，下图为该HT for Web拓扑图拖拽入SVG格式图片的运行效果： 阅读全文

摘要： 在这里我们将构造一个基于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轴旋转一周产生的，通过查阅相关 阅读全文

摘要： 有不少朋友询问《HTML5 Web 客户端五种离线存储方式汇总》文章例子的3D表计模型是如何生成的，这个例子是通过导入3dmax设计好的表计模型，然后通过obj格式导入到HT for Web系统中进行控制，这种方式特别适合复杂模型的应用场景，但对于监控系统的很多应用其实并不需要专业的美工使用专业的3D编辑工具，完全通过HT for Web预定义的和内置自定义3D模型API就能满足很多应用，这里介绍几种场景的自定义3D模型应用。 阅读全文

摘要： 上篇《纯Shading Language绘制HTML5时钟》体现了GLSL可编程性特点，但没有体现GLSL可编程出各种酷炫效果的特点，今天我们将用纯Shading Language绘制火焰效果，并将其应用到《HT图形组件设计之道（四）》飞行的飞机例子上。火焰的例子我已发在 http://js.do/hightopo/fireball，其本质在绘制gl.POINTS的点类型时，通过在Fragment Shader在点区域内生成noise的噪声用于绘制多种颜色效果，并将多次不同噪声算法生成的颜色进行叠加，同时噪声的生成还依赖于time的时间参数，这样最终融合成不错的圆形火焰效果。 阅读全文

摘要： 今天是2014年的最后一天，这个时刻总会让人想起时钟，再过几个小时地球人都要再老了一岁，于是搞个HTML5版的时钟就是我们今天要完成的任务，实现HTML5的时钟绘制一般会采用三种方式，第一种采用CSS的实现方式，例如 http://www.css-tricks.com/examples/CSS3Clock/ ；第二种采用SVG的实现方式，例如 http://www.css-tricks.com/examples/CSS3Clock/；第三种采用Cavnas的2D绘制方式，如HT for Web中《矢量手册》中自定义绘制的clock例子，HT的例子的实现效果如下，其实现代码附在本文的最后部分。 以上三种方式都是较容易理解的实现方式，今天我们将采用的则是较为少见的WebGL纯Shading Language实现方式，这种方式极其高效，毕 阅读全文

摘要： HTML5版的String Avoider小游戏 http://www.newgrounds.com/portal/view/300760 蛮简单也蛮考验耐心，从游戏起始点移动鼠标到终点位置，鼠标移动过程绘制出移动轨迹的String平滑曲线，整个过程不能碰撞到边界，从技术角度来说其核心就是根据鼠标移动位置生成String线的算法，该游戏是ActionScript写的Flash版，这里将其改造成HTML5版的JavaScript实现，并增加可自定义关卡功能的一种设计思路。 阅读全文