服務器各項指標的圖形化顯示

在機房的監控時，常常須要去查看某個機櫃中的某一臺服務器的各項指標，好比該臺服務器的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;
        }

 

如下全方位的展現該效果圖：
正面展現效果：

斜側面一展現效果：

斜側面二展現效果：

其實也能夠徹底和機櫃結合起來，當進入到具體的機櫃後，點擊某一服務器時，咱們就顯示出相關的參數，當點擊另外一個服務器時又顯示另外一堆參數。