线条流动效果

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

图论中边是重要元素,它连接各个顶点构成拓扑图,有向图中,边具有方向性,在画布中表现为箭头,在实际应用中,边可以代表链路,链路上不只是有方向,还有流量,信号种类等信息,光用箭头表现力就不够了,可增加线条线型,以及流动效果来体现,这里介绍 Qunee 1.6 中线条流动效果的实现

线条流动效果

设备节点的信息展示

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

电信网管系统中,设备的状态信息的实时展示非常重要,通常会以挂载一堆图标来展示状态或告警信息,图标展示的信息有限,有时需要更详细的面板或者图表,Qunee 中每个图元节点上可以挂载多个 UI 控件,支持9X9=81种相对位置,可以实现单节点上多个 ui 元素的排列和布局,另外每个 ui 元素都可以绑定图元属性,这使得信息可以实时更新,本文将结合最近客户提到的需求,使用 Qunee1.6 beta版本,实现在拓扑图中实现设备信息的显示

网络设备数据流信息展示

拓扑图编辑器(2)

发表于 & 归档在 HTML5, 拓扑图, 编辑器.

继续来说编辑器的需求,前面介绍了拖拽创建节点、以及连线的方法,并加入到了其后的 Qunee 类库,实际应用中需要更多功能,Qunee 的拓扑图编辑器也在逐渐完善,一方面增加多种编辑交互,一方面提供数据导入导出,同时也在摸索编辑器的整体界面设计和前端开发框架

Qunee 编辑器1.6

使用Leaflet创建地图拓扑图

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

之前我们采用过Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一种古老项目,略显臃肿,面向更新的前端地图方案,在客户的介绍下,我们找到了leaflet – 基于HTML5的轻量地图客户端方案,结合Qunee使用,以及第三方插件,实现更加轻快的地图拓扑图应用

leaflet + qunee

Ionic创建移动版地铁图App

发表于 & 归档在 HTML5, JavaScript.

Qunee有一个上海地铁图的例子,有客户希望转成mobile app,考察过android的webview,以及PhoneGap等多种Hybrid App方案后,最后选择使用ionic,准确的说是ionic + PhoneGap + Qunee

ionic是一种基于HTML5创建Hybrid应用的前端框架,借助phoneGap + angularJS实现一套跨平台,轻量的移动UI方案,本文将介绍借助ionic实现移动版Qunee上海地图的示例

Screen Shot 2014-07-22 at 下午11.18.27

基于HTML5的云虚拟主机界面

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

云计算大行其道,底层的虚拟化技术,上面的云存储和应用API,耳濡目染,也受益匪浅,算是大势所趋,回头看看Qunee组件,借这个趋势,可以在云计算可视化上发挥作用,最近就有客户用Qunee实现VPC配置图,并对交互做了定制,细节不便多说,本文主要介绍Qunee交互扩展方面的思路

VPC配置图

Qunee性能测试 – 十万图元拓扑图

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

本文的话题是:性能,HTML5、JS、Qunee组件的性能和效率问题

以往提到Javascript,联想到的是缓慢的、容易出错的小东西,一种脚本语言,现在浏览器的发展,js引擎的优化,js已经今非昔比,无论在浏览器端还是服务器端,都有一席之地,结合HTML5开发企业级应用变得切合实际,以往要在浏览器中实现丰富的图形效果,通常会选择flex富客服端解决方案,也有些Web2.0时代的组件,比如Extjs,以及各种图表组件,但性能上并不理想,随着HTML5的普及,Web组件有了新的思路,抛弃老IE浏览器,了却后顾之忧,实现真正的高性能,这一点Qunee图形组件已经将Flex远远抛到脑后,实现上万图元,流畅操作

Qunee拓扑图加载时间报表