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