HTML组件的交互事件设计

发表于 & 归档在 HTML, HTML5, JavaScript, Web.

传统的HTML事件监听方式 通常使用on***对HTML元素添加事件监听,比如

button.onclick = function(evt){
  console.log(evt);
}
很自然的,用户在使用Qunee组件时也会想到这种用法,试图直接在Node上添加onclick监听,结果出现问题,正确的写法应该是这样
graph.onclick = function(evt){
  var element = evt.getData();
  Q.log(element);
}
Qunee拖拽事件过程]]>

基于HTML5的网络拓扑图(1)

发表于 & 归档在 HTML5, JavaScript, Web, 拓扑图.

什么是网络拓扑

网络拓扑,指构成网络的成员间特定的排列方式。分为物理的,即真实的、或者逻辑的,即虚拟的两种。如果两个网络的连接结构相同,我们就説它们的网络拓扑相同,尽管它们各自内部的物理接线、节点间距离可能会有不同。 – 维基百科

网络拓扑图的绘制

很多人用visio绘制网络拓扑图,非常精美,但只能静态示意,也有些传统的拓扑图中间件,基于Java、flex或者Silverlight技术,能够动态显示,只是界面略显沉重,于是有人尝试纯Web技术的图形组件,其中有不少佼佼者如:mxgraph, yfiles…… 都是老外开发的产品,类库巨大,售价昂贵,技术支持是个问题,那么有没有一种轻巧、干净、国产的纯Web拓扑图组件呢?于是就有了Qunee – 开发清新、高效的图形组件
Qunee是一套基于HTML5的网络图组件,提供Web图形解决方案,借助Qunee,可以轻松完成 地图,拓扑图,组织图等等,官方网站:qunee.com, 在线演示:demo.qunee.com
公共事业服务中心网络拓扑图]]>

Hello World WebGL示例

发表于 & 归档在 HTML, HTML5, JavaScript, Web.

Experimental Visualization of Artificial Neural Network with WebGL or Extremely Fast and Simple WebGL Motion Detector to Rotate 3D Graphic

前提条件&预期结果

目前支持WebGL得浏览器还很少(参见:Can I use WebGL? ),下面的例子在Chrome 16 – 23 for win32以及firefox for android 17下做了测试,如果你的浏览器不支持webGL,你会看到下面的警告
Your browser doesn’t appear to support the HTML5 <canvas>element.
运行效果: WebGL - hello world]]>