服务器各项指标的图形化显示

在机房的监控时，经常需要去查看某个机柜中的某一台服务器的各项指标，比如该台服务器的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);

9

10	var persent = "("+parseInt(parseFloat((arc/360)*10000))/100+"%)";

11

12	var label = createLabelBillboard(text+persent);

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 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);

8

9	var label = createLabelBillboard(text);

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  createLineChart(box, values){

2	var path=new mono.Path();

3	for(var i=0;i<values.length;i++){

4	var value=values[i]*2;

5	var x=-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 node=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

}

以下全方位的展示该效果图：
正面展示效果：

斜侧面一展示效果：

斜侧面二展示效果：

其实也可以完全和机柜结合起来，当进入到具体的机柜后，点击某一服务器时，我们就显示出相关的参数，当点击另一个服务器时又显示另一堆参数。