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

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

 

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

斜侧面一展示效果:

斜侧面二展示效果:
服务器各项指标的图形化显示_第1张图片

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

你可能感兴趣的:(服务器)