RequireJS与SeaJS模块化加载

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

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目,提出了一些规范模块化的写法,在Nodejs中普遍应用,同样浏览器端也出现了类似的解决方案,并结合浏览器异步加载的特性,有RequireJS提出的AMD(Asynchronous Module Definition)规范,以及SeaJS提出的CMD(Common Module Definition)规范,两者都实现Javascript了模块化定义的APIs,各有异同,下面将分别使用两种方案,实现Qunee组件的模块化加载
目录结构
模块目录结构

Qunee for HTML5 v1.3版本发布

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

Qunee for HTML5 v1.3 已发布,增加总线型布局,提供文本图元,增强了编辑功能,欢迎联系升级

在线演示:http://demo.qunee.com

v1.3更新内容

鱼骨型总线

可设定连线走向,实现不同的总线型效果

Q.Text图元类型

提供大小调整和对齐方式功能,实现更丰富的文字呈现效果

Q.Text图元类型

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.

原文:http://www.sw-engineering-candies.com/snippets/webgl/hello-world

这不是一个平常看到的Hello World示例,因为他不只是简单的打印”Hello World”,这个WebGL示例包含了很多引用代码,但这对于WebGL来说是很典型的,写一个最简单的WebGL应用无法体现WebGL的价值

你会注意到很多代码需要本地WebGL,如果你使用three.js这样的类库,引用代码会减少到最少,在这些文章中你会看到three.js示例: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

Qunee组件制作思维导图

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

客户常常提到思维导图,喜欢它的结构展示方式,和交互的友好,从图论的角度看,思维导图本质上是一种树,有一个根节点(主题)出发,联想到其他话题,于是分支开花,再分支,有时候也会构成网络结构,由子分支联想到另一个已有分支,但通常不破坏原有结构

qunee组件制作思维导图

使用Qunee组件制作在线地图

发表于 & 归档在 HTML, HTML5, JavaScript, Web, 地图, 案例.

地图是一种普遍应用,按准确度分精确地图(GIS)和示意地图(MapChart),前者支持各种地图投影与坐标系,譬如ArcGIS,后者使用相对坐标系,或者支持简单的WGS84经纬网坐标系,比如ILOG Elixir地图组件,示意地图再按图片类型分,可分为:栅格地图与矢量地图,Qunee组件适合制作矢量示意地图。

maps