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

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

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

斜侧面一展示效果：

斜侧面二展示效果：

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