Qunee for HTML5 V1.6正式发布，修复了一些 BUG，增加了滚动条支持，改进了编辑器，增加了JSON 导入导出、告警冒泡、连线流动，UI 定制等扩展示例，欢迎访问并联系升级 导航面板 增加了滚动条导航模式，加上之前的导航按钮模式，以及去除导航面板的情况，出现了三种导航模式，并在Graph中提供了navigationType属性进行切换，以适用于不同的应用场景，默认使用滚动条模式 以下代码用于设置拓扑图使用导航按钮 graph.navigationType = Q.Consts.NAVIGATION_BUTTON; 滚动条模式 - Q.Consts.NAVIGATION_SCROLLBAR 滚动条模式符合传统的导航模 …
阅读更多电信网管系统中，设备的状态信息的实时展示非常重要，通常会以挂载一堆图标来展示状态或告警信息，图标展示的信息有限，有时需要更详细的面板或者图表，Qunee 中每个图元节点上可以挂载多个 UI 控件，支持9X9=81种相对位置，可以实现单节点上多个 ui 元素的排列和布局，另外每个 ui 元素都可以绑定图元属性，这使得信息可以实时更新，本文将结合最近客户提到的需求，使用 Qunee1.6 beta版本，实现在拓扑图中实现设备信息的显示 需求分析 网络设备拓扑图，默认设备为普通节点，双击时展开，显示CPU，内存，流量等信息，使用柱状图和不同颜色的文字来展示，再双击变回普通节点 这里需要定制节点，普通模式下，节点包含图标和文字，展开模式下， …
阅读更多之前我们采用过Openlayers+Qunee的方案，实现地图拓扑图，鉴于Openlayers是一种古老项目，略显臃肿，面向更新的前端地图方案，在客户的介绍下，我们找到了leaflet - 基于HTML5的轻量地图客户端方案，结合Qunee使用，以及第三方插件，实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件，作者在乌克兰，在移动设备上的有良好的体验，比较新和现代的地图客户端，类库压缩后只有33k，非常小巧，这一点让qunee都相形见绌，先看一个leaflet的入门示例 官方示例 // create a map in the "map" div, set the view to a …
阅读更多Qunee有一个上海地铁图的例子，有客户希望转成mobile app，考察过android的webview，以及PhoneGap等多种Hybrid App方案后，最后选择使用ionic，准确的说是ionic + PhoneGap + Qunee ionic是一种基于HTML5创建Hybrid应用的前端框架，借助phoneGap + angularJS实现一套跨平台，轻量的移动UI方案，本文将介绍借助ionic实现移动版Qunee上海地图的示例 背景知识 安装ionic所需软件环境 - java, android sdk等 ionic实际上是集大成者，借助了多种技术，需要先安装好依赖的程序，比如nodejs, java, ADT, …
阅读更多云计算大行其道，底层的虚拟化技术，上面的云存储和应用API，耳濡目染，也受益匪浅，算是大势所趋，回头看看Qunee组件，借这个趋势，可以在云计算可视化上发挥作用，最近就有客户用Qunee实现VPC配置图，并对交互做了定制，细节不便多说，本文主要介绍Qunee交互扩展方面的思路 参考示例 - visualops 云平台可视化这块儿国外做的不错，有不少开放的示例可以学习和参考，客户看中了这家云管理系统http://www.visualops.io/ ，这个系统使用的是SVG技术，体验了一下，效果不错 分析与实现 原型设计 从界面上看，一个云节点上有多个子网，每个子网内有多台虚拟主机，然后每个云节点有统一的路由Router管理（或者网 …
阅读更多本文的话题是：性能，HTML5、JS、Qunee组件的性能和效率问题 历史回顾 以往提到Javascript，联想到的是缓慢的、容易出错的小东西，一种脚本语言，现在浏览器的发展，js引擎的优化，js已经今非昔比，无论在浏览器端还是服务器端，都有一席之地，结合HTML5开发企业级应用变得切合实际，以往要在浏览器中实现丰富的图形效果，通常会选择flex富客服端解决方案，也有些Web2.0时代的组件，比如Extjs，以及各种图表组件，但性能上并不理想，随着HTML5的普及，Web组件有了新的思路，抛弃老IE浏览器，了却后顾之忧，实现真正的高性能，这一点Qunee图形组件已经将Flex远远抛到脑后，实现上万图元，流畅操作 静态拓扑图性能 首 …
阅读更多有客户提到网络监控需求，需要展示服务器状态，告警，以及监控信息，比如CPU，内存，宽带状态，使用柱状图展示，Qunee目前并不提供这些图表，需要些扩展代码来实现，尝试了一下，发现还是挺容易的 柱状图信息展示 首先来看CPU柱状图，扩展了一个UI组件，实现了绘制和测量方法，非常简单，绘制代码中取#data属性作为百分比，并根据数值获取红黄绿不同颜色，此外还有文字位置的细节代码 创建BarUI function BarUI(data) { Q.doSuperConstructor(this, BarUI, arguments); } BarUI.prototype = { width: 100, height: 20, measure: …
阅读更多Qunee for HTML5 v1.4正式发布，改善了交互功能，增强了自动布局功能，增加了相关文档，调整了示例代码，以及一些细节修改和增加，是一次重要更新，欢迎联系升级 在线演示：demo.qunee.com 升级申请：qunee.com/#try 气泡布局示例 自动布局是图的重要功能，有十几种常见布局算法，目前Qunee提供：TreeLayouter, SpringLayouter, BalloonLayouter，后期逐步完善 路况图示例 用于展示各个车道路况状态 设备面板示例 Qunee开发模式 在线示例列表 演示示例做了小幅修改，增加了在线示例列表，用于提供更多Qunee相关示例
阅读更多