在机房的监控时,经常需要去查看某个机柜中的某一台服务器的各项指标,比如该台服务器的CPU的使用情况、该台服务器的硬盘的使用情况、以及网络的流量等等,以下我们将用TWaver 3D来实现一下该例子:
创建服务器上面显示的“磁盘空间”,“CPU占用率”,“内存空间”的函数:
1 |
function |
2 |
var 22 , 95 , 360 , ‘white‘ , ‘../images/transparent_blue.png‘ ); |
3 |
var 25 , 100 , 1 , ‘../images/plastic01.png‘ ); |
4 |
outerNode.setClient( ‘value‘ , |
5 |
outerNode.setClient( ‘type‘ , ‘pie‘ ); |
6 |
innerNode.setParent(outerNode); |
7 |
outerNode.setPosition(x,y,z); |
8 |
outerNode.setRotationX(Math.PI/ 2 ); |
9 |
10 |
var "(" +parseInt(parseFloat((arc/ 360 )* 10000 ))/ 100 + "%)" ; |
11 |
12 |
var |
13 |
label.setPosition( 0 , 0 , 120 ); |
14 |
label.setParent(outerNode); |
15 |
label.setSelectable( false ); |
16 |
box.add(label); |
17 |
18 |
return outerNode; |
19 |
} |
创建流量的柱状图的函数:
1 |
function |
2 |
var 200 , 20 , 360 , ‘white‘ , ‘../images/transparent_blue.png‘ ); |
3 |
var 1 +Math.random()* 199 , 21 , 360 , ‘../images/plastic01.png‘ ); |
4 |
outerNode.setClient( ‘value‘ , |
5 |
outerNode.setClient( ‘type‘ , ‘bar‘ ); |
6 |
innerNode.setParent(outerNode); |
7 |
outerNode.setPosition(x,y,z); |
8 |
9 |
var |
10 |
label.setPosition( 0 , 220 , 0 ); |
11 |
label.setParent(outerNode); |
12 |
label.setSelectable( false ); |
13 |
box.add(label); |
14 |
15 |
return outerNode; |
16 |
} |
创建PathNode的函数:
1 |
function |
2 |
var new mono.Path(); |
3 |
for (var 0 ;i<values.length;i++){ |
4 |
var 2 ; |
5 |
var 200 -i* 130 ; |
6 |
if (i== 0 ){ |
7 |
path.moveTo( 400 ,value,x); |
8 |
} else { |
9 |
path.lineTo( 400 ,value,x); |
10 |
} |
11 |
} |
12 |
path=mono.PathNode.prototype.adjustPath(path, 10 , 10 ); |
13 |
|
14 |
var new mono.PathNode(path, 20 , 5 , 100 , ‘plain‘ , ‘plain‘ ); |
15 |
node.s({ |
16 |
‘m.repeat‘ : new mono.Vec2( 20 , 1 ), |
17 |
‘m.texture.image‘ : ‘../images/red.png‘ , |
18 |
‘m.type‘ : ‘phong‘ , |
19 |
‘m.specularStrength‘ : 10 , |
20 |
}); |
21 |
node.setSelectable( false ); |
22 |
node.setClient( ‘value‘ , 100 ); |
23 |
node.setClient( ‘type‘ , ‘line‘ ); |
24 |
25 |
box.add(node); |
26 |
return node; |
27 |
} |
以下全方位的展示该效果图:
正面展示效果:
斜侧面一展示效果:
斜侧面二展示效果:
其实也可以完全和机柜结合起来,当进入到具体的机柜后,点击某一服务器时,我们就显示出相关的参数,当点击另一个服务器时又显示另一堆参数。
时间: 2024-11-06 01:34:27