机房图分2D和3D，此外也有2.5D 方案，也称之为伪3D，在小型网游中比较常见，斜45度角，网格分布，运行起来比较轻量，电信机房也可以采用这种技术，通过矩阵变换，固定45度视角，选择合适的图标，可以做出不错的效果，节省3D 建模的时间，同时可以结合2D平面图，是一种不错的机房图展示方案，下面是 Qunee 实现的一些简单示例，并可以结合热力图绘制，用以反映机房的温度分布，详细示例代码可向 support#qunee.com 申请
阅读更多Qunee for HTML5 V1.6正式发布，修复了一些 BUG，增加了滚动条支持，改进了编辑器，增加了JSON 导入导出、告警冒泡、连线流动，UI 定制等扩展示例，欢迎访问并联系升级 导航面板 增加了滚动条导航模式，加上之前的导航按钮模式，以及去除导航面板的情况，出现了三种导航模式，并在Graph中提供了navigationType属性进行切换，以适用于不同的应用场景，默认使用滚动条模式 以下代码用于设置拓扑图使用导航按钮 graph.navigationType = Q.Consts.NAVIGATION_BUTTON; 滚动条模式 - Q.Consts.NAVIGATION_SCROLLBAR 滚动条模式符合传统的导航模 …
阅读更多图论中边是重要元素，它连接各个顶点构成拓扑图，有向图中，边具有方向性，在画布中表现为箭头，在实际应用中，边可以代表链路，链路上不只是有方向，还有流量，信号种类等信息，光用箭头表现力就不够了，可增加线条线型，以及流动效果来体现，这里介绍 Qunee 1.6 中线条流动效果的实现 虚线流动效果 虚线流动效果在[连线示例](http://demo.qunee.com/#Edge Demo)中有演示，使用虚线偏移量样式，不断增大，实现线条的流动 虚线流动代码 var offset = 0; var index = 0; var timer = setInterval(function(){ offset += -1; // …
阅读更多电信网管系统中，设备的状态信息的实时展示非常重要，通常会以挂载一堆图标来展示状态或告警信息，图标展示的信息有限，有时需要更详细的面板或者图表，Qunee 中每个图元节点上可以挂载多个 UI 控件，支持9X9=81种相对位置，可以实现单节点上多个 ui 元素的排列和布局，另外每个 ui 元素都可以绑定图元属性，这使得信息可以实时更新，本文将结合最近客户提到的需求，使用 Qunee1.6 beta版本，实现在拓扑图中实现设备信息的显示 需求分析 网络设备拓扑图，默认设备为普通节点，双击时展开，显示CPU，内存，流量等信息，使用柱状图和不同颜色的文字来展示，再双击变回普通节点 这里需要定制节点，普通模式下，节点包含图标和文字，展开模式下， …
阅读更多继续来说编辑器的需求，前面介绍了拖拽创建节点、以及连线的方法，并加入到了其后的 Qunee 类库，实际应用中需要更多功能，Qunee 的拓扑图编辑器也在逐渐完善，一方面增加多种编辑交互，一方面提供数据导入导出，同时也在摸索编辑器的整体界面设计和前端开发框架 拖拽创建节点 延续之前提供的功能，增加更多可配置选项（可设置节点类型，样式和属性），支持按住shift快捷键，直接拖入到分组内 新增多种交互模式 创建连线交互 Q.Consts.INTERACTION_MODE_CREATE_SIMPLE_EDGE = "create.simple.edge"; …
阅读更多之前我们采用过Openlayers+Qunee的方案，实现地图拓扑图，鉴于Openlayers是一种古老项目，略显臃肿，面向更新的前端地图方案，在客户的介绍下，我们找到了leaflet - 基于HTML5的轻量地图客户端方案，结合Qunee使用，以及第三方插件，实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件，作者在乌克兰，在移动设备上的有良好的体验，比较新和现代的地图客户端，类库压缩后只有33k，非常小巧，这一点让qunee都相形见绌，先看一个leaflet的入门示例 官方示例 // create a map in the "map" div, set the view to a …
阅读更多Qunee for HTML5 v1.5正式发布，新版本做了大量优化，重构了底层UI渲染机制，缩短图形加载时间20% - 40%，统一了自动布局器接口，丰富了选中效果，增加了平移缩放动画，增加了搜索功能，增加大图片缓存，修复了低版本android下的显示问题等，欢迎升级和试用 在线演示：demo.qunee.com 升级申请：qunee.com/#try 性能优化 授权版本实现上万图元，三秒内加载与绘制 以下为Safari 6.1.5 for mac 性能测试报表 改进自动布局 统一了自动布局类，使得动态布局也可一次性完成布局 改进弹簧布局算法，大幅度缩短布局时间，支持五千图元动态布局 增加选中效果 增加平移缩放动画 平移，缩放等交 …
阅读更多云计算大行其道，底层的虚拟化技术，上面的云存储和应用API，耳濡目染，也受益匪浅，算是大势所趋，回头看看Qunee组件，借这个趋势，可以在云计算可视化上发挥作用，最近就有客户用Qunee实现VPC配置图，并对交互做了定制，细节不便多说，本文主要介绍Qunee交互扩展方面的思路 参考示例 - visualops 云平台可视化这块儿国外做的不错，有不少开放的示例可以学习和参考，客户看中了这家云管理系统http://www.visualops.io/ ，这个系统使用的是SVG技术，体验了一下，效果不错 分析与实现 原型设计 从界面上看，一个云节点上有多个子网，每个子网内有多台虚拟主机，然后每个云节点有统一的路由Router管理（或者网 …
阅读更多