|
Posted on 2014-09-11 11:32 TWaver 阅读(3571) 评论(4) 编辑 收藏
在机房的监控时,经常需要去查看某个机柜中的某一台服务器的各项指标,比如该台服务器的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 ); |
10 | var persent = "(" +parseInt(parseFloat((arc/ 360 )* 10000 ))/ 100 + "%)" ; |
12 | var label = createLabelBillboard(text+persent); |
13 | label.setPosition( 0 , 0 , - 120 ); |
14 | label.setParent(outerNode); |
15 | label.setSelectable( false ); |
创建流量的柱状图的函数: 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); |
9 | var label = createLabelBillboard(text); |
10 | label.setPosition( 0 , 220 , 0 ); |
11 | label.setParent(outerNode); |
12 | label.setSelectable( false ); |
创建PathNode的函数: 1 | function createLineChart(box, values){ |
2 | var path= new mono.Path(); |
3 | for (var i= 0 ;i<values.length;i++){ |
7 | path.moveTo( 400 ,value,x); |
9 | path.lineTo( 400 ,value,x); |
12 | path=mono.PathNode.prototype.adjustPath(path, 10 , 10 ); |
14 | var node= new mono.PathNode(path, 20 , 5 , 100 , 'plain' , 'plain' ); |
16 | 'm.repeat' : new mono.Vec2( 20 , 1 ), |
17 | 'm.texture.image' : '../images/red.png' , |
19 | 'm.specularStrength' : 10 , |
21 | node.setSelectable( false ); |
22 | node.setClient( 'value' , 100 ); |
23 | node.setClient( 'type' , 'line' ); |
以下全方位的展示该效果图: 正面展示效果:
斜侧面一展示效果:
斜侧面二展示效果:
其实也可以完全和机柜结合起来,当进入到具体的机柜后,点击某一服务器时,我们就显示出相关的参数,当点击另一个服务器时又显示另一堆参数。
评论
# re: 服务器各项指标的图形化显示 回复 更多评论
2014-09-11 13:14 by
有必要用这么复杂的图形化吗?
# re: 服务器各项指标的图形化显示 回复 更多评论
2014-09-11 13:15 by
不错的js代码,nodejs?
# re: 服务器各项指标的图形化显示 回复 更多评论
2014-09-23 20:41 by
我们的服务器idc直接提供了
|