轻量高效的拓扑图组件
zh

拓扑图编辑器(2)

2014-09-01

继续来说编辑器的需求,前面介绍了拖拽创建节点、以及连线的方法,并加入到了其后的 Qunee 类库,实际应用中需要更多功能,Qunee 的拓扑图编辑器也在逐渐完善,一方面增加多种编辑交互,一方面提供数据导入导出,同时也在摸索编辑器的整体界面设计和前端开发框架 拖拽创建节点 延续之前提供的功能,增加更多可配置选项(可设置节点类型,样式和属性),支持按住shift快捷键,直接拖入到分组内 新增多种交互模式 创建连线交互 Q.Consts.INTERACTION_MODE_CREATE_SIMPLE_EDGE = "create.simple.edge"; …

阅读更多

使用Leaflet创建地图拓扑图

2014-07-27

之前我们采用过Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一种古老项目,略显臃肿,面向更新的前端地图方案,在客户的介绍下,我们找到了leaflet - 基于HTML5的轻量地图客户端方案,结合Qunee使用,以及第三方插件,实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件,作者在乌克兰,在移动设备上的有良好的体验,比较新和现代的地图客户端,类库压缩后只有33k,非常小巧,这一点让qunee都相形见绌,先看一个leaflet的入门示例 官方示例 // create a map in the "map" div, set the view to a …

阅读更多

Ionic创建移动版地铁图App

2014-07-23

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, …

阅读更多

Qunee for HTML5 v1.5正式发布

2014-07-07

Qunee for HTML5 v1.5正式发布,新版本做了大量优化,重构了底层UI渲染机制,缩短图形加载时间20% - 40%,统一了自动布局器接口,丰富了选中效果,增加了平移缩放动画,增加了搜索功能,增加大图片缓存,修复了低版本android下的显示问题等,欢迎升级和试用 在线演示:demo.qunee.com 升级申请:qunee.com/#try 性能优化 授权版本实现上万图元,三秒内加载与绘制 以下为Safari 6.1.5 for mac 性能测试报表 改进自动布局 统一了自动布局类,使得动态布局也可一次性完成布局 改进弹簧布局算法,大幅度缩短布局时间,支持五千图元动态布局 增加选中效果 增加平移缩放动画 平移,缩放等交 …

阅读更多

基于HTML5的云虚拟主机界面

2014-06-19

云计算大行其道,底层的虚拟化技术,上面的云存储和应用API,耳濡目染,也受益匪浅,算是大势所趋,回头看看Qunee组件,借这个趋势,可以在云计算可视化上发挥作用,最近就有客户用Qunee实现VPC配置图,并对交互做了定制,细节不便多说,本文主要介绍Qunee交互扩展方面的思路 参考示例 - visualops 云平台可视化这块儿国外做的不错,有不少开放的示例可以学习和参考,客户看中了这家云管理系统http://www.visualops.io/ ,这个系统使用的是SVG技术,体验了一下,效果不错 分析与实现 原型设计 从界面上看,一个云节点上有多个子网,每个子网内有多台虚拟主机,然后每个云节点有统一的路由Router管理(或者网 …

阅读更多

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

2014-06-12

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

阅读更多

Swift语法介绍

2014-06-03

2014.6.3日,苹果公布最新编程语言Swift,Swift是一种新的编程语言,用于iOS和OS X应用的开发,没有C的兼容性限制,Swift采用安全的编程模式,增加了现代功能,使编程变得容易,更灵活,更有趣,Swift的重新设计,依靠成熟和备受喜爱的Cocoa, Cocoa Touch 框架,是重新构想软件如何开发的机会。 Swift官网 关于Swift 以下为语法介绍 原文:A Swift Tour 翻译:blog.qunee.com - swift语法介绍 传统建议新语言的第一个程序是打印“Hello world”,对于Swift是下面的一行代码 println("Hello, world") 如果你 …

阅读更多

HTML5实现监控图

2014-05-28

有客户提到网络监控需求,需要展示服务器状态,告警,以及监控信息,比如CPU,内存,宽带状态,使用柱状图展示,Qunee目前并不提供这些图表,需要些扩展代码来实现,尝试了一下,发现还是挺容易的 柱状图信息展示 首先来看CPU柱状图,扩展了一个UI组件,实现了绘制和测量方法,非常简单,绘制代码中取#data属性作为百分比,并根据数值获取红黄绿不同颜色,此外还有文字位置的细节代码 创建BarUI function BarUI(data) { Q.doSuperConstructor(this, BarUI, arguments); } BarUI.prototype = { width: 100, height: 20, measure: …

阅读更多