发表于 & 归档在 拓扑图.

机房图分2D和3D,此外也有2.5D 方案,也称之为伪3D,在小型网游中比较常见,斜45度角,网格分布,运行起来比较轻量,电信机房也可以采用这种技术,通过矩阵变换,固定45度视角,选择合适的图标,可以做出不错的效果,节省3D 建模的时间,同时可以结合2D平面图,是一种不错的机房图展示方案,下面是 Qunee 实现的一些简单示例,并可以结合热力图绘制,用以反映机房的温度分布,详细示例代码可向 support#qunee.com 申请
伪3D机房热力图温度图

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

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

线条流动效果

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

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

网络设备数据流信息展示

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

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

Qunee 编辑器1.6