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

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

创建服务器上面显示的“磁盘空间”，“CPU占用率”，“内存空间”的函数：

function createPie(box, x,y,z, arc, color, text){
var innerNode=createPieNode(box, 22, 95, 360, 'white', '../images/transparent_blue.png');
var outerNode=createPieNode(box, 25, 100, 1, color, '../images/plastic01.png');
outerNode.setClient('value', arc);
outerNode.setClient('type','pie');
innerNode.setParent(outerNode);
outerNode.setPosition(x,y,z);
outerNode.setRotationX(Math.PI/2);

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

var label = createLabelBillboard(text+persent);
label.setPosition(0, 0, -120);
label.setParent(outerNode);
label.setSelectable(false);
box.add(label);

return outerNode;
}

 

创建流量的柱状图的函数：

function createBar(box, x,y,z, value, color, text){
            var innerNode=createPieNode(box, 200, 20, 360, 'white', '../images/transparent_blue.png');
            var outerNode=createPieNode(box, 1+Math.random()*199, 21, 360, color, '../images/plastic01.png');    
            outerNode.setClient('value', value);
            outerNode.setClient('type','bar');
            innerNode.setParent(outerNode);    
            outerNode.setPosition(x,y,z);

            var label = createLabelBillboard(text);
            label.setPosition(0, 220, 0);            
            label.setParent(outerNode);
            label.setSelectable(false);
            box.add(label);

            return outerNode;            
        }

 

创建PathNode的函数：

function  createLineChart(box, values){
            var path=new mono.Path();
            for(var i=0;i<values.length;i++){
                var value=values[i]*2;
                var x=-200-i*130;
                if(i==0){
                    path.moveTo(400,value,x);
                }else{
                    path.lineTo(400,value,x);
                }
            }
            path=mono.PathNode.prototype.adjustPath(path,10,10);
            
            var node=new mono.PathNode(path, 20, 5, 100,'plain', 'plain');
            node.s({
                'm.repeat': new mono.Vec2(20,1),
                'm.texture.image': '../images/red.png',
                'm.type': 'phong',
                'm.specularStrength':10,
            });
            node.setSelectable(false);
            node.setClient('value', 100);
            node.setClient('type','line');

            box.add(node);
            return node;
        }

 

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

斜侧面一展示效果：

斜侧面二展示效果：

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