`

TWaver 3D应用于大型数据中心(续)

阅读更多

在2014年11月份,我们当时发了一篇有关TWaver HTML5 3D应用于大型数据中心的文章,该blog比较详细的描述一些常用的功能的实现方法,比如:动态添加机柜,告警,温度,湿度等相关的功能的具体实现。其实会用这些东西的话基本上可以使用我们的TWaver HTML5 3D来实现相关的应用了,可是在有些客户觉得这还不够“动态”,都是代码一下生成的,少了一些交互,前些天同事说要不再加点功能,让它更加“动”一些,所以今天我抽了个时间再接着来个“续”——动态的添加机柜,主机和告警。
整体

1、动态的添加机柜,输入机柜ID机柜:
createRack

基本方法同TWaver HTML5 3D应用于大型数据中心中的机柜创建方法一样(其实是完全一样,我只传了一个机柜id和position):

var loadRack = function(pos,type,isEmp,id){
var empRack = true;
    if(isEmp != undefined && isEmp !=null){
        empRack = isEmp;
    }
    var rackType = "s";
    if(type != null && type != undefined){
        rackType = type;
    }
    var addRack = function(element){
        if(element && pos){
            element.setPosition(pos.clone());
            element.rackType = rackType;
            element.setClient('R_ID',id); //给创建好的机柜添加了一个id,后面检索的话可以根据这个id来找到相应的机柜
            if(rackType == 'emptyRack'){
                element.setClient('bycustom',true);
            }
            if(!empRack){
                element.loaded = true;
                window.setTimeout(function(){
                    showChart(element);
                },500);
            }
        }
    };
    var  = './emptyRack.json';
     
    mono.Toolkits.loadTemplateUrl(network.getDataBox(), rack, null, null, addRack);
}

 由于机柜的也想动态,想摆哪里就摆哪里,为了实现这样功能,我就先这么处理了一下,点你点击“添加”后,给network添加了一个监听,当click时获取一下鼠标所点中的位置,把这个位置作为你想要放机柜的位置(这里主要将这个意思,你也可以通过dblclick,或单独弄个button或什么来管理这个功能):

     var addRack = function(e){
        network.getRootView().removeEventListener('click',addRack); //当执行后就把这个监听去掉
        var objects = network.getElementsByMouseEvent(e);
        if (objects.length) {
            var first = objects[0];
            var object3d = first.element;
            var point=first.point;
            var rack_id = txtRack.value;
            var position = new mono.Vec3(point.x, Size.rack_y, point.z); //5710,0,2546
            loadRack(position,'emptyRack',true,rack_id);
        }
    }
 
   //创建时:
    if(type == 'rack'){
            network.getRootView().addEventListener('click',addRack);
//            var position = new mono.Vec3(point.x, Size.rack_y, point.y); //5710,0,2546
//            loadRack(position,'emptyRack',true,rack_id);
   }

 效果图:

在走廊添加3个机柜

2、动态的添加交换机,根据路由器的id,路由器的位置动态的添加交换机(这里选择交换机是因为交换机有许多的端口,告警可以直接从交换机的端口发出,主要是因为交换机具有代表性):
下面是在上面(第一步)创建的机柜(机柜ID为“rid”)中的20u的地方(不知道是不是换算错了,呵呵)添加了一个交换机:
动态添加交换机

代码如下:

var createRouter = function(rack_id,host_id,y){
     var addHost = function(element){
         if(element){
             var rack = findFromClient('R_ID',rack_id);//根据机柜的id找到机柜
             if(!rack) return;
             rack.addChild(element);//把新的主机加到该机柜中
             if(host_id){
                 element.setClient('oid',host_id); //设置新增加的交换机的oid(也就是给它贴了个标签),以便于查找
             }
             element.setPositionX(0);
             element.setPositionY(y);//主机在机柜中的位置
             element.setPositionZ(0);
         }
     }
   mono.Toolkits.loadTemplateUrl(network.getDataBox(),"./ciscoroter.json",null,null,addHost);
 }

 

3、动态的添加告警,可以给路由器中指定的端口添加告警,如下图:
动态添加告警

添加方法基本和上次差不多,在之前的基础上做的简单的改进:

 
var createAlarm = function(alarmid,rid,soid,poid,st){
    var rack = findFromClient('R_ID',rid);
    var alarm;
    var s;
    if(rack) {
        s = findOidfromChildren(rack, soid);
    }else { //当Router没有放到机柜中时,单独再找一下
        s = findFromClient('H_ID',soid); 
        if(!s){
            s = findFromClient('oid',soid);
        }
    }
    if (s) {
        var p = findOidfromChildren(s, poid);
        if (p) {
            alarm = new mono.Alarm(alarmid, p.getId(), st);
        } else {
            alarm = new mono.Alarm(alarmid, s.getId(), st);
        }
    }else if(rack){
       alarm = new mono.Alarm(alarmid, rack.getId(), st);
    }
    if(alarm){
        network.getDataBox().getAlarmBox().add(alarm);
    }
}
 
 var addAlarm = function(rack_id,host_id,port_id,severity_id){
        var severities = mono.AlarmSeverity.severities;
        var severity = severities.get(severity_id);
        createAlarm('c',rack_id,host_id,port_id,severity);
    }

 再给这个路由器和机柜添加东西:

效果图2

分享到:
评论

相关推荐

    基于TWaver实现的3D机房Demo

    在IT行业中,3D可视化技术正在逐步渗透到各个领域,尤其是在数据中心管理方面。TWaver是一款强大的WebGL3D框架,它为开发者提供了一个高效、灵活的工具,用于创建交互式的3D应用程序,特别是针对网络拓扑和机房管理...

    TWaver的3d图形组件库,小demo

    4. **3D图形组件**:TWaver提供的3D图形组件包括但不限于3D图表(如3D柱状图、3D饼图)、3D网络图、3D空间布局等,可用于数据可视化和复杂的场景模拟。 5. **基本代码示例**:压缩包中的"twaver"文件可能包含一个或...

    TWaver 3D Flex 3D 实例 例子

    标题中的“TWaver 3D Flex 3D 实例 例子”表明这是一份关于TWaver 3D技术在Flex 3D环境下的应用实例。...通过实际操作和研究提供的实例,开发者可以掌握TWaver 3D的强大功能,并将其应用于各种3D数据可视化项目。

    twaver 3D机房接口文档

    3D机房系统的接口文档主要描述了该系统所提供的开放式应用程序接口(API),以便第三方能够调用并集成到自己的应用或服务中。该接口采用了RESTful Web Service的形式,通过HTTP请求对资源进行操作,包括获取(GET)、...

    twaverflex 3D开发文档

    文档开头提到了“TWaver3D for Flex Developer Guide Version 3.0”,这意味着文档是TWaver3D版本3.0的开发者指南,用于指导开发者如何使用TWaver3D进行Flex应用开发。TWaver3D是一个专门针对Adobe Flex开发环境的3D...

    10个TWaver网页3D可视化精彩案例.docx

    2. **环境监控:**对于数据中心而言,TWaver的3D小机房案例提供了一种高效监控环境参数的方式,如温度、湿度等,确保设备正常运行。 综上所述,TWaver通过其强大的3D可视化技术,在多个领域展现出了广泛的应用前景...

    twaver.js使用示例

    **标题解析:** ...以上是关于“twaver.js使用示例”的主要知识点,通过这个示例,开发者不仅可以学习到twaver.js的基本用法,还能了解到如何将其应用于实际的Web项目,特别是涉及报警和监控系统的界面设计。

    flex Twaver组件使用

    它为电信行业的运营支撑系统提供了一种富互联网应用(RIA)解决方案,同时也适用于电力、金融、制造、交通等多个领域的软件开发。TWaver组件能帮助开发者快速创建高效、专业且美观的图形化界面,提升开发效率,增强...

    TWaver HTML5 开发指南代码

    对于数据中心或机房的展示,TWaver提供了一种高效的方法。开发者可以通过该库来构建详细的机柜布局,显示服务器、交换机、路由器等设备的位置和连接关系。同时,还可以动态更新设备的状态信息,如CPU利用率、内存...

    TWaver文档

    - **TWaver**是由赛瓦软件开发的一款图形界面组件解决方案,主要用于数据的图形化展示,尤其是在电信行业拥有广泛的应用。 - **赛瓦软件**是赛瓦集团的子公司,自1977年成立以来一直致力于电信组件及国际制造业软件...

    twaver例子

    TWaver关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。 TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件,以及表格、树图、属性表、图表等丰富的通用图形界面组件,为电信运营支撑系统...

    twaver-java-4.1

    通过这个开发包,开发者可以充分利用TWaver提供的各种组件和功能,创建出极具吸引力的数据可视化应用,无论是用于企业级的业务分析,还是科学数据的呈现,都能大大提高信息传递的效率和质量。同时,结合源代码示例和...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    Twaver是一个强大的数据可视化和网络建模工具,广泛应用于网络拓扑、流程图、组织结构等场景。5.9.0是该库的一个特定版本,可能包含了新功能、性能优化或错误修复。 描述简单明了,"twaver-html5-5.9.0-api"直接...

    TWaver-java-4.1最新 官网试用版jar包及Demo

    TWaver是一个强大的图形绘制和分析工具,适用于构建复杂的图表、网络图、流程图等多种图形界面,广泛应用于数据分析、业务建模、系统监控等领域。 【压缩包子文件的文件名称列表】: 1. demo.bat:这是一个Windows...

    TWaver 4.1最新试用jar包 及Demo

    TWaver广泛应用于数据分析、监控系统、决策支持等领域,特别是在需要展示复杂数据关系和实时更新的场景中,其优势尤为明显。通过示例代码和提供的文档,开发者可以快速集成TWaver到自己的项目中,提升产品的数据可视...

    Twaver 3.7性能测试报告

    - **随机连接测试**中,随着节点数量及连接复杂度的增加,Twaver Java表现出良好的扩展性,能够有效管理大量数据和复杂逻辑关系,这为实际应用中的高并发场景提供了有力支撑。 - **特定比例连接测试**进一步验证了...

    twaver web实例源码

    【标题】"Twaver Web实例源码"是一个关于使用Twaver与ExtJS结合的Web应用程序开发的学习资源。Twaver是一款强大的图形化建模和可视化工具,常用于数据可视化、网络拓扑图、流程图等场景。ExtJS则是一个流行的...

    TWaver Java 3.7 Developer Guide

    TWaver Java是一个功能丰富的可视化组件库,适用于构建复杂的图形用户界面(GUI),特别是在网络监控、数据分析和展示应用中。 ### 概述 TWaver Java提供了多种图形组件,包括但不限于网络、树形、表格、树表、...

    twaver-java-3.7

    本文将深入探讨Twaver Java 3.7版本的相关知识,这是一个强大的数据可视化库,特别适用于Java开发人员。Twaver是一个跨平台的图形化解决方案,它提供了丰富的图表类型和交互功能,使得数据的展示和分析变得直观且...

Global site tag (gtag.js) - Google Analytics