首页 > 其他好文 > 详细

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

时间：2014-09-11 12:34:12 阅读：171 评论：0 收藏：0 [点我收藏+]

在机房的监控时，经常需要去查看某个机柜中的某一台服务器的各项指标，比如该台服务器的CPU的使用情况、该台服务器的硬盘的使用情况、以及网络的流量等等，以下我们将用TWaver 3D来实现一下该例子：

bubuko.com,布布扣

创建服务器上面显示的“磁盘空间”，“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

        }