在机房的监控时,经常需要去查看某个机柜中的某一台服务器的各项指标,比如该台服务器的CPU的使用情况、该台服务器的硬盘的使用情况、以及网络的流量等等,以下我们将用TWaver 3D来实现一下该例子:
创建服务器上面显示的“磁盘空间”,“CPU占用率”,“内存空间”的函数:
1 | function createPie(box, x,y,z, arc, color, text){ |
2 | var innerNode=createPieNode(box, 22 , 95 , 360 , 'white' , '../images/transparent_blue.png' ); |
3 | var outerNode=createPieNode(box, 25 , 100 , 1 , color, '../images/plastic01.png' ); |
4 | outerNode.setClient( 'value' , arc); |
5 | outerNode.setClient( 'type' , 'pie' ); |
6 | innerNode.setParent(outerNode); |
7 | outerNode.setPosition(x,y,z); |
8 | outerNode.setRotationX(Math.PI/ 2 ); |
9 |
10 | var persent = "(" +parseInt(parseFloat((arc/ 360 )* 10000 ))/ 100 + "%)" ; |
11 |
12 | var label = createLabelBillboard(text+persent); |
13 | label.setPosition( 0 , 0 , - 120 ); |
14 | label.setParent(outerNode); |
15 | label.setSelectable( false ); |
16 | box.add(label); |
17 |
18 | return outerNode; |
19 | } |
创建流量的柱状图的函数:
1 | function createBar(box, x,y,z, value, color, text){ |
2 | var innerNode=createPieNode(box, 200 , 20 , 360 , 'white' , '../images/transparent_blue.png' ); |
3 | var outerNode=createPieNode(box, 1 +Math.random()* 199 , 21 , 360 , color, '../images/plastic01.png' ); |
4 | outerNode.setClient( 'value' , value); |
5 | outerNode.setClient( 'type' , 'bar' ); |
6 | innerNode.setParent(outerNode); |
7 | outerNode.setPosition(x,y,z); |
8 |
9 | var label = createLabelBillboard(text); |
10 | label.setPosition( 0 , 220 , 0 ); |
11 | label.setParent(outerNode); |
12 | label.setSelectable( false ); |
13 | box.add(label); |
14 |
15 | return outerNode; |
16 | } |
创建PathNode的函数:
1 | function createLineChart(box, values){ |
2 | var path= new mono.Path(); |
3 | for (var i= 0 ;i<values.length;i++){ |
4 | var value=values[i]* 2 ; |
5 | var x=- 200 -i* 130 ; |
6 | if (i== 0 ){ |
7 | path.moveTo( 400 ,value,x); |
8 | } else { |
9 | path.lineTo( 400 ,value,x); |
10 | } |
11 | } |
12 | path=mono.PathNode.prototype.adjustPath(path, 10 , 10 ); |
13 | |
14 | var node= new mono.PathNode(path, 20 , 5 , 100 , 'plain' , 'plain' ); |
15 | node.s({ |
16 | 'm.repeat' : new mono.Vec2( 20 , 1 ), |
17 | 'm.texture.image' : '../images/red.png' , |
18 | 'm.type' : 'phong' , |
19 | 'm.specularStrength' : 10 , |
20 | }); |
21 | node.setSelectable( false ); |
22 | node.setClient( 'value' , 100 ); |
23 | node.setClient( 'type' , 'line' ); |
24 |
25 | box.add(node); |
26 | return node; |
27 | } |
以下全方位的展示该效果图:
正面展示效果:
斜侧面一展示效果:
斜侧面二展示效果:
其实也可以完全和机柜结合起来,当进入到具体的机柜后,点击某一服务器时,我们就显示出相关的参数,当点击另一个服务器时又显示另一堆参数。