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

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

all view

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

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

斜侧面一展示效果：

斜侧面二展示效果：

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