TWaver 3D应用于大型数据中心(续)
在2014年11月份,我们当时发了一篇有关TWaver HTML5 3D应用于大型数据中心的文章,该blog比较详细的描述一些常用的功能的实现方法,比如:动态添加机柜,告警,温度,湿度等相关的功能的具体实现。其实会用这些东西的话基本上可以使用我们的TWaver HTML5 3D来实现相关的应用了,可是在有些客户觉得这还不够“动态”,都是代码一下生成的,少了一些交互,前些天同事说要不再加点功能,让它更加“动”一些,所以今天我抽了个时间再接着来个“续”——动态的添加机柜,主机和告警。
1、动态的添加机柜,输入机柜ID机柜:
基本方法同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);
}
效果图:
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);
}
再给这个路由器和机柜添加东西:
TWaver 3D应用于大型数据中心(续)的更多相关文章
- VXLAN大数据中心组网
目录: 一.什么是vxlan 二.为什么要用vxlan,解决了什么痛点 三.vxlan与vlan之间有什么不同 四.如何建立vxlan隧道 五.vxlan的网关有哪些种类 六.vxlan在报文中如何转 ...
- TWaver可视化编辑器的前世今生(四)电力 云计算 数据中心
插播一则广告(长期有效) TWaver需要在武汉招JavaScript工程师若干 要求:对前端技术(JavasScript.HTML.CSS),对可视化技术(Canvas.WebGL)有浓厚的兴趣基础 ...
- VR技术在数据中心3D机房中的应用 (下)
VR技术在数据中心3D机房中的应用 (下) 前面给大家简单科普了一下VR的硬件设备以及VR在各个领域的应用,是不是觉得非常高大上?千言万语概括成一句话,VR能给用户带来前所未有的沉浸感和交互方式,让人 ...
- VR技术在数据中心3D机房中的应用(上)
VR技术在数据中心3D机房中的应用(上) 前两天跟朋友A吃饭,吃着吃着就说到了VR.近几年来,VR技术越来越火,感觉能跟VR沾点边的都特别高大上,朋友A也是,一提到VR,就怎么都掩盖不住他发自肺腑 ...
- 基于 HTML5 的 WebGL 和 VR 技术的 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...
- B/S 端基于 HTML5 + WebGL 的 VR 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...
- 基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...
- 基于 HTML5 WebGL + VR 的 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...
- 工业互联网可视化系统风格的抉择:线框模式之 3D 数据中心机房的实现
前言 3D 可视化,就是把复杂抽象的数据信息,以合适的视觉元素及视角去呈现,方便系统的展示.维护和管理.而在可视化系统的搭建选择上,所呈现的风格样式效果多种多样,各自所突出的适用场合也不尽相同.对于科 ...
随机推荐
- 音乐播放器之myeclipse项目
音乐播放器: 这个音乐播放器是用myeclipse打开的项目.假设有问题记得改掉文件的路径名.还有假设图片不显示也可能是图片的路径名不正确,如音乐无法播放也可能是路径名不正确.总之这个游戏有文件的引用 ...
- css3 3d特效汇总
本篇全是实战,没有基础,如果不明白3d特效的原理,可能会看不懂,不过没关系,给你推荐一下 张鑫旭css3 3d转换,或者看我的另一篇博客 css3 2d转换3d转换以及动画的知识点汇总,看完这些3d ...
- H264--2--语法及结构[5]
名词解释 场和帧 : 视频的一场或一帧可用来产生一个编码图像.在电视中,为减少大面积闪烁现象,把一帧分成两个隔行的场. 片: 每个图象中,若干宏块被排列成片的形式.片分为 ...
- c#调用oracle存储过程返回数据集
c#调用oracle存储过程返回数据集 2008-12-20 10:59:57| 分类: net|字号 订阅 CREATE OR REPLACE PACKAGE pkg_tableTypeIS ...
- [翻译]NUnit---Equality Asserts&& Identity Asserts (四)
Equality Asserts 这些方法测试两个参数是否相等.语言不自动装修的普通类型可以使用对应的重载的方法. Comparing Numerics of Different Types 比较两个 ...
- 31. ExtJs4回车事件监听
转自:https://710542316.iteye.com/blog/2148542 监听表单字段事件: Ext使得对用户某个动作的监听特别简单,诸如单击某个元素或者按下某个键盘上的键. 一个经常性 ...
- Permutations II 典型去重
https://leetcode.com/problems/permutations-ii/ Given a collection of numbers that might contain dupl ...
- Java多线程系列五——列表类
参考资料: http://xxgblog.com/2016/04/02/traverse-list-thread-safe/ 一些列表类及其特性 类 线程安全 Iterator 特性 说明 Vect ...
- MySQL Archive存储引擎
200 ? "200px" : this.width)!important;} --> 介绍 从archive单词的解释我们大概可以明白这个存储引擎的用途,这个存储引擎基本上 ...
- J20180116
用度 总务 用度係 总务科(管理办公用品等) 型紙 设计图 プラント 工厂