基于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.

图形组件的基础是图形,图形的基础是2D,如形状,路径片段,渐变填充,边框等,SVG中每个图形要素都有对应的标签元素,Canvas中则提供了一些绘制函数,路径和形状的管理需要自己实现,Qunee组件中提供了丰富的基本图形
Qunee默认图形的效果

图形与箭头

Qunee组件制作思维导图

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

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

qunee组件制作思维导图

使用Qunee组件制作在线地图

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

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

maps

基于HTML5技术绘制上海地铁图

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

某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下:

Screen Shot 2014-02-28 at 12.11.10 PM

使用Qunee组件展示水文观测站点

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

中科院的某个客户遇到这样的需求:将区域内所有水文观测站信息按层次结构展现出来。原来用的是mxGraph组件,遇到几个问题:布局难以定制、节点样式难定制、交互有问题,后来改用Qunee组件,顺利解决问题。
这是一种典型应用,主要用到Qunee的布局类TreeLayouter,以及UI和交互的简单定制

树形布局效果